@font-face {
	font-family: 'Century Gothic';
	src: url('../font/CenturyGothic-Italic.eot');
	src: local('Century Gothic Italic'), local('CenturyGothic-Italic'),
        url('../font/CenturyGothic-Italic.ttf') format('truetype'),
		url('../font/CenturyGothic-Italic.eot?#iefix') format('embedded-opentype'),
		url('../font/CenturyGothic-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Century Gothic';
	src: url('../font/CenturyGothic.eot');
	src: local('Century Gothic'), local('CenturyGothic'),
        url('../font/CenturyGothic.ttf') format('truetype'),
		url('../font/CenturyGothic.eot?#iefix') format('embedded-opentype'),
		url('../font/CenturyGothic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Century Gothic';
	src: url('../font/CenturyGothic-Bold.eot');
	src: local('Century Gothic Bold'), local('CenturyGothic-Bold'),
        url('../font/CenturyGothic-Bold.ttf') format('truetype'),
		url('../font/CenturyGothic-Bold.eot?#iefix') format('embedded-opentype'),
		url('../font/CenturyGothic-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Century Gothic';
	src: url('../font/CenturyGothic-BoldItalic.eot');
	src: local('Century Gothic Bold Italic'), local('CenturyGothic-BoldItalic'),
        url('../font/CenturyGothic-BoldItalic.ttf') format('truetype'),
		url('../font/CenturyGothic-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../font/CenturyGothic-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}
:root{
    --fontCorp: Roboto, sans-serif;
    --fontTitre: 'Century Gothic';
    --vert: #78B41E;
    --vert75: #77b31ebf;
    --vert50: #77b31e80;
    --vert25: #77b31e40;
    --vert2: #1f7c16;
    --vert3: #b3d589;
    --orange: #dd9933;
    --rouge: #952121;
    --blanc: #fff;
    --gris : #F5F5F5;
    --gris2 : #E8E8E8;
    --gris3 : #787878;
    --noir: #000;
    --noir25: #00000040;
    --noir50: #00000080;
    --shadow: 0px 0px 4px 0px var(--noir25);
    --shadow2: 0px 0px 4px 0px var(--noir50);
    --validNotif: none;
}
body *
{
    scrollbar-width: thin;
    scrollbar-color: var(--gris2) #dfe9eb00;
}
body *::-webkit-scrollbar
{
    width: 10px;
    width: 10px;
}
body *::-webkit-scrollbar-track
{
    border-radius: 5px;
    background-color: #dfe9eb00;
}
body *::-webkit-scrollbar-track:hover
{
    background-color: #dfe9eb00;
}
body *::-webkit-scrollbar-track:active
{
    background-color: #dfe9eb00;
}
body *::-webkit-scrollbar-thumb
{
    border-radius: 5px;
    background-color: var(--gris2);
}
body *::-webkit-scrollbar-thumb:hover
{
    background-color: var(--gris3);
}
body *::-webkit-scrollbar-thumb:active
{
    background-color: var(--gris3);
}
h1, h2, h3
{
    font-family: var(--fontTitre);
    color: var(--vert);
    margin: 0;
}
body
{
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: absolute;
    overflow-x: hidden;
    top: 0;
    left: 0;
    font-family: var(--fontCorp);
    background-color: var(--blanc);
}
footer
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: var(--gris3);
}
form
{
    margin: 0;
}
input, button
{
    font-family: var(--fontCorp);
}
.input
{
    border: none;
    border-radius: 5px;
    box-shadow: var(--shadow) inset;
    padding: 0.5em;
    font-family: var(--fontCorp);
}
.input::placeholder
{
    font-weight: normal;
    color: var(--noir25);
    font-style: italic;
}
.button
{
    background-color: var(--vert);
    border: solid 3px var(--vert);
    color: var(--blanc);
    font-weight: bold;
    font-size: 1em;
    min-height: 2.5em;
    padding: 0 2em;
}
.button:hover
{
    cursor: pointer;
    background-color: var(--blanc);
    color: var(--vert);
}
.button-reverse
{
    background-color: var(--blanc);
    border: solid 3px var(--vert);
    color: var(--vert);
    font-weight: bold;
    font-size: 1em;
    min-height: 2.5em;
    padding: 0 2em;
}
.button-reverse:hover
{
    cursor: pointer;
    background-color: var(--vert);
    color: var(--blanc);
}
.button:disabled:hover
{
    cursor: default;
    background-color: var(--vert);
    color: var(--blanc);
}
.button-blanc
{
    border: none;
    background-color: var(--blanc);
    border: solid 3px var(--blanc);
    color: var(--vert);
    font-weight: bold;
    font-size: 1em;
    min-height: 2.5em;
    padding: 0 2em;
}
.button-blanc:hover
{
    cursor: pointer;
    background-color: var(--vert);
    color: var(--blanc);
}
.button-red
{
    border: none;
    background-color: var(--blanc);
    border: solid 3px var(--rouge);
    color: var(--rouge);
    font-weight: bold;
    font-size: 1em;
    min-height: 2.5em;
    padding: 0 2em;
}
.button-red:hover
{
    cursor: pointer;
    background-color: var(--rouge);
    color: var(--blanc);
}
.button-red-reverse
{
    border: none;
    background-color: var(--rouge);
    border: solid 3px var(--rouge);
    color: var(--blanc);
    font-weight: bold;
    font-size: 1em;
    min-height: 2.5em;
    padding: 0 2em;
}
.button-red-reverse:hover
{
    cursor: pointer;
    background-color: var(--blanc);
    color: var(--rouge);
}
.link
{
    font-family: var(--fontTitre);
    color: var(--vert);
    text-decoration: none;
    font-size: 0.9em;
}
.link:hover
{
    text-decoration: underline;
}
.link-blanc
{
    font-family: var(--fontTitre);
    color: var(--blanc);
    text-decoration: none;
    font-size: 0.9em;
}
.link-blanc:hover
{
    text-decoration: underline;
}
.link-grand
{
    font-family: var(--fontTitre);
    color: var(--vert);
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
}
.link-grand:hover
{
    text-decoration: underline;
}
.link-grand-blanc
{
    font-family: var(--fontTitre);
    color: var(--blanc);
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
}
.link-grand-blanc:hover
{
    text-decoration: underline;
}
h1
{
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1em;
}
h2
{
    font-size: 1.8em;
}
h1:after
{
    content:' ';
    display: block;
    height: 5px;
    width: 3em;
    background-color: var(--vert);
}
ul
{
    list-style-type: none;
    padding: 0;
}
a
{
    color: var(--vert);
}
.backButton
{
    background-color: var(--blanc);
    border: solid 3px var(--vert);
    color: var(--vert);
    font-weight: bold;
    font-size: 1em;
    min-height: 2.5em;
    padding: 0 2em;
    height: 2em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}
.backButton svg
{
    height: 1.2em;
}
.backButton svg path
{
    stroke: var(--vert);
}
.backButton:hover
{
    color: var(--blanc);
    background-color: var(--vert);
}
.backButton:hover svg path
{
    stroke: var(--blanc);
}
hr
{
    width: 50%;
    border: solid 1px var(--gris2);
}





/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
              CONNEXION
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#connexion
{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: var(--gris);
}
#connexion #connexionCard
{
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    gap: 1.2em;
    background-color: var(--blanc);
    padding: 2em 0;
    border-radius: 10px;
    width: 20em;
    box-shadow: var(--shadow);
    margin-bottom: 2em;
}
#connexion #valid
{
    margin-top: 0.5em;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0.2em;
}
#connexion .input
{
    width: 60%;
}
#connError
{
    color: var(--rouge);
    font-size: 0.8em;
    margin: -1.5em 0 -1.2em 0;
    display: none;
}
#connexion form
{
    position: absolute;
}
#buttonOffice
{
    background-color: #eb3c00;
    border: solid 3px #eb3c00;
    border-radius: 10px;
    width: 20em;
    color: var(--blanc);
    font-weight: bold;
    font-size: 1em;
    min-height: 3em;
    padding-left: 5.3em;
    text-align: left;
    box-shadow: var(--shadow);
}
#buttonOffice:hover
{
    cursor: pointer;
    background-color: var(--blanc);
    color: #eb3c00;
}
#buttonOffice::before
{
    content: '';
    height: 80%;
    width: 3em;
    position: absolute;
    left: 1.6em;
    top: 10%;
    border-right: solid 1px #ffffff80;
    background-image: url(../img/365_white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#buttonOffice:hover::before
{
    border-right: solid 1px #eb3c0080;
    background-image: url(../img/365_orange.png);
}



/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
                HEADER
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#header
{
    z-index: 9;
    position: fixed;
    width: 100vw;
    height: calc(12vh + 2em);
    box-shadow: var(--shadow);
}
#header #defaultTop
{
    width: 100%;
    height: 12vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    background-color: var(--vert);
}
#header #defaultTop img
{
    height: 50%;
}
#socials
{
    position: absolute;
    top: 6vh;
    right: 5vw;
    transform: translate(0, -50%);
    z-index: 10;
    display: flex;
    gap: 1em;
}
#socials a
{
    color: var(--blanc);
}
#header #defaultBottom
{
    width: 100%;
    height: 2em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    background-color: var(--vert75);
    backdrop-filter: blur(4px);
}
#header #defaultBottom input
{
    display: none;
}
#header #defaultBottom ul
{
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: baseline;
    align-content: center;
    align-items: center;
    gap: 2em;
    font-size: 1em;
}
#header #defaultBottom li a, #header #defaultBottom li label
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-family: var(--fontTitre);
    color: var(--blanc);
    text-decoration: none;
    background: none;
    border: none;
    font-weight: bold;
    gap: 0.25em;
    transition: all 0.5s;
}
#header #defaultBottom li a:hover, #header #defaultBottom li label:hover
{
    cursor: pointer;
    transform: scale(1.1);
    opacity: 0.75;
}
#header #defaultBottom ul svg
{
    height: 1.2em;
}
#header #defaultBottom ul svg path
{
    stroke: var(--blanc);
}
.navB
{
    font-family: var(--fontTitre);
    color: var(--blanc);
    text-decoration: none;
    background: none;
    border: none;
    font-weight: bold;
}
.navL, .navLParent
{
    font-family: var(--fontTitre);
    color: var(--blanc);
    text-decoration: none;
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
}
.navLParent
{
    position: relative;
}
#navValid::after
{
    content: ' ';
    background-color: var(--vert);
    border-radius: 10px;
    width: 0.5em;
    height: 0.5em;
    position: absolute;
    left: 6em;
    display: var(--validNotif);
}
.closedUl::before
{
    content: '+';
    position: absolute;
    right: -1em;
}
.closedUl *
{
    display: none;
}
.openUl::before
{
    content: '-';
    position: absolute;
    right: -1em;
}
.openUl *
{
    display: initial;
}
.openUl ul
{
    padding-top: 0.3em;
    position: relative;
}
.openUl ul::before
{
    content: '';
    position: absolute;
    left: 10px;
    top: 0.4em;
    width: 1px;
    height: calc(100% - 0.4em);
    background-color: var(--blanc);
}
.navLParent li
{
    padding-left: 20px;
}
.closedUl:hover::after
{
    content: '';
    position: absolute;
    left: 0;
    top: 1.1em;
    width: calc(100% + 1.2em);
    height: 1px;
    background-color: var(--blanc);
}
.openUl:hover:not(:has(*:hover))::after
{
    content: '';
    position: absolute;
    left: 0;
    top: 1.1em;
    width: calc(100% + 1.2em);
    height: 1px;
    background-color: var(--blanc);
}
.navB:hover, .navL:hover
{
    text-decoration: underline;
}
#main
{
    margin: calc(13vh + 2em) 5vw 2em 5vw;
    padding: 0;
    width: 90vw;
    max-width: 90vw;
    min-height: calc(87vh - 4em);
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
                  TDB
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#map
{
    height: 20em;
    width: 100%;
}
#agenda, #agendaExt, #agendaExtAdmin
{
    width: 100%;
    margin: 1em 0 1em 0;
    color: var(--vert);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1em;
}
.blocAgenda
{
    display: inline-block;
    height: 12em;
    text-decoration: none;
    color: var(--vert);
    vertical-align: top;
    background-color: var(--vert);
}
#agenda .blocAgenda:hover, .blocAgendaLink:hover
{
    cursor: pointer;
    opacity: 0.5;
}
.blocAgenda .img
{
    border: solid 2px #78b41e;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: 100%;
}
.bas
{
    position: absolute;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.5em 0 0.5em 0;
    min-height: 2em;
    width: 100%
}
.title
{
    padding-left: 0.5em;
    font-size: 1em;
    font-weight: bold;
    color: var(--vert);
    margin: 0;
    font-family: var(--fontTitre);
}
.date
{
    padding-left: 0.5em;
    color: var(--vert);
    margin: 0;
    font-size: 0.8em;
}
#agendaExt .blocAgenda, #agendaExtAdmin .blocAgenda, #agendaExt .blocAgendaLink, #agendaExtAdmin .blocAgendaLink
{
    display: inline-block;
    height: auto;
    min-height: 6em;
    width: calc(100% - 2em);
    padding: 0.5em 1em;
    text-decoration: none;
    background-color: var(--vert);
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    gap: 1em;
}
#agendaExt .title, #agendaExtAdmin .title
{
    color: var(--blanc);
    font-size: 1.5em;
    padding: 0;
}
#agendaExt .date, #agendaExtAdmin .date
{
    color: var(--blanc);
    font-size: 1em;
    padding: 0;
}
.buttonsAgenda
{
    display: flex;
    justify-content: flex-end;
    gap: 1em;
}
#eventValide
{
    background-color: var(--vert75);
    color: var(--blanc);
    font-family: var(--fontTitre);
    font-weight: bold;
    font-size: 1.2em;
    padding: 1em 1.5em;
    margin-left: 50%;
    transform: translate(-50%, 0);
    width: calc(40% - 3em);

    border-radius: 15px;
}
#agendaExtAdd
{
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    width: 50%;
    margin-left: 50%;
    transform: translate(-50%, 0);
    padding-bottom: 4em;
}
#agendaExtAdd label
{
    margin-top: 0.8em;
    font-family: var(--fontTitre);
    font-size: 1.2em;
    font-weight: bold;
}
#agendaExtAdd span
{
    color: var(--rouge);
}
#agendaExtAdd input[type=submit]
{
    position: absolute;
    bottom: 0;
    right: 0;
}
#agendaExtAdmin .blocAgenda:hover
{
    opacity: 1;
}
#modal
{
    z-index: 9999 !important;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #00000085;
}
#modal #window
{
    width: 80vw;
    height: 80vh;
    padding: none;
    background-color: #fff;
    border: solid 4px #78b41e;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow-y: scroll;
}
#close
{
    all: unset;
    position: fixed;
    right: calc(10vw - 3em - 4px);
    top: calc(10vh - 2em - 4px);
    height: 1em;
    width: 1em;
    padding: 0.5em;
    border-radius: 1em;
    z-index: 11;
    background-color: #fff
}
#close:hover
{
    cursor: pointer;
    background-color: var(--vert);
}
#close:hover svg
{
    fill: #fff;
}
#banner
{
    position: absolute;
    top: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 15em;
    width: 100%;
}
#modalTitle
{
    position: absolute;
    bottom: 0;
    background-color: #78b41ed7;
    padding: 0.5em 0 0.5em 0;
    min-height: 2em;
    width: 100%;
    color: #fff;
    font-family: var(--fontTitre);
}
#modalTitle #title
{
    font-size: 1.5em;
    color: #fff;
}
#modalTitle #date
{
    font-size: 1.2em;
    color: #fff;
}
#content
{
    padding: 1em 0;
    position: absolute;
    top: 15em;
    margin-left: 7.5%;
    width: 80%;
    display: grid;
    grid-template-columns: [main]75% [side]calc(25% - 0.5em);
    grid-gap: 1em 5%;
}
#tag
{
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--vert);
    color: #fff;
    padding: 1em 3em;
    width: calc(50% - 6em);
    margin: 3em 0 1em 25%;
    box-shadow: 0px 0px 10px 0px #243609bf;
}
#tag span
{
    width: 100%;
    display: flex;
    flex-flow: row;
    align-content: center;
    align-items: center;
    padding: 0.25em 0;
}
#tag svg
{
    width: 1.2em;
    margin-right: 0.5em;
    fill: #fff;
}
#side .month
{
    border-top: 1px solid #78b41e;
    border-bottom: 1px solid #78b41e;
    width: 100%;
    padding: 0.5em 0;
    text-align: center;
    font-family: 'Montserrat', serif;
    font-weight: bold;
    font-size: 1.1em;
    color: var(--vert);
}
#side .times
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 0.5em;
}
#side .times p
{
    all: unset;
}
#sideLocation
{
    margin-top: 10%;
    display: block;
    color: var(--vert);
    font-weight: bold;
    font-family: 'Montserrat', serif;
}
#address
{
    all: unset;
    display: block;
}
#address a
{
    all: unset;
    font-style: italic;
    font-size: 0.9em;
    color: #5a8715;
    cursor: pointer;
}
.gridTDB
{
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 4em;
    padding-top: 5em;
}
.gridTDBreverse
{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 4em;
    padding-top: 2em;
}
#gridEspace
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
}
#gridEspace h1
{
    grid-column-start: 1;
    grid-column-end: 5;
}
.cardEspace
{
    width: 100%;
    height: 2em;
    background-color: var(--gris);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    gap: 1vw;
}
.cardEspace:hover
{
    cursor: pointer;
    background-color: var(--gris2);
}
.cardEspace h2
{
    font-size: 6vw;
    line-height: 5vw;
    margin: 0;
}
#feedFB
{
    overflow-y: scroll;
    max-height: 1em;
    display: grid;
    gap: 2em;
}
.cardFB
{
    background-color: blue;
    height: 18em;
    width: 100%;
}
#messageBtn
{
    position: fixed;
    right: 2em;
    bottom: 2em;
    height: 5em;
    width: 5em;
    padding: 0;
    background-color: var(--vert);
    border-radius: 100%;
    border: none;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#messageBtn:hover
{
    cursor: pointer;
    background-color: var(--vert3);
}
#messageBtn svg
{
    width: 50%;
}
#divMessage
{
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--noir25);
    display: none;
}
#cardMessage
{
    position: fixed;
    right: calc(2em - 5px);
    bottom: calc(2em - 5px);
    width: 20vw;
    height: calc(100vh - 8em);
    background-color: var(--blanc);
    border: solid 5px var(--vert);
    border-radius: 30px;
}
#topMessage
{
    background-color: var(--vert);
    height: 3em;
    border-radius: 20px 20px 0 0;
    padding-left: 0.5em;
    display: flex;
    justify-content: baseline;
    align-content: center;
    align-items: center;
    color: var(--blanc);
    font-size: 1.5em;
    font-weight: bold;
    font-family: var(--fontTitre);
}
#contentMessage
{
    width: calc(100% - 1em);
    overflow-y: scroll;
    display: flex;
    flex-flow: column nowrap;
    gap: 1em;
    justify-content: baseline;
    align-content: flex-start;
    align-items: flex-start;
    padding: 1em 0.5em;
}
.messageUser, .messageBot
{
    font-size: 0.8em;
    border-radius: 15px;
    padding: 10px;
    box-shadow: var(--shadow);
    width: 80%;
}
.messageUser
{
    background-color: var(--vert3);
    align-self: flex-end;
}
.messageBot
{
    background-color: var(--gris);
}
#bottomMessage
{
    position: absolute;
    bottom: 0;
    background-color: var(--gris);
    width: calc(100% - 20px);
    border-radius: 0 0 30px 30px;
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
#bottomMessage .input
{
    width: calc(100% - 4em - 20px);
    resize: none;
    border-radius: 30px;
    padding: 1em;
}
#bottomMessage button
{
    height: 3em;
    width: 3em;
    border-radius: 100%;
    border: none;
    background-color: var(--blanc);
    box-shadow: var(--shadow);
    padding: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#bottomMessage button:hover
{
    cursor: pointer;
    background-color: var(--gris);
}
#bottomMessage button svg
{
    width: 2em;
}
#commeSiSection
{
    padding: 2em 0;
}
#commeSiSection h1
{
    margin-top: 1.5em;
}
#commeSiCards
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
}
.commeSiCard
{
    width: calc(100% - 2em);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 1em;
}
.commeSiGrid1
,.commeSiGrid2
,.commeSiGrid3
,.commeSiGrid4
{
    display: grid;
    gap: 0.5em;
}
.commeSiGrid1
{
    grid-template-columns: 1fr;
}
.commeSiGrid2
{
    grid-template-columns: repeat(2, 1fr);
}
.commeSiGrid3
{
    grid-template-columns: repeat(3, 1fr);
}
.commeSiGrid4
{
    grid-template-columns: repeat(4, 1fr);
}
.commeSiGrid1 img
,.commeSiGrid2 img
,.commeSiGrid3 img
,.commeSiGrid4 img
{
    width: 100%;
    min-height: 10em;
    max-height: 20em;
    object-fit: contain;
    cursor: pointer;
}
.commeSiGrid1 img:hover
,.commeSiGrid2 img:hover
,.commeSiGrid3 img:hover
,.commeSiGrid4 img:hover
{
    opacity: 0.5;
}
#magSection
{
    padding: 2em 0;
}
#magTitle
{
    margin-top: 1.5em;
}
#magFrame
{
    width: calc(100% - 20px);
    outline: solid 5px var(--vert);
    outline-offset: 5px;
    margin-left: 10px;
    border: none;
}



/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
            ADMIN LAYOUT
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#adminHeader
{
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 15vw;
    min-width: 200px;
    background-color: var(--gris3);
}
#adminHeader #top
{
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    align-items: center;
}
#adminHeader #top ul
{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 1em;
    margin: 0;
}
#adminHeader #top a
{
    text-decoration: none;
    color: var(--blanc);
}
#adminHeader #top a:hover svg
{
    opacity: 0.5;
}
#adminHeader #top a svg
{
    height: 2em;
}
#adminHeader #top a svg path
{
    stroke: var(--blanc);
}
#adminHeader #top .logoHeader
{
    width: 50%;
}
#adminHeader #bottom::before
{
    content: '';
    height: 1px;
    width: 75%;
    background-color: var(--gris2);
    position: absolute;
    top: 0.5em;
    left: 50%;
    transform: translate(-50%, 0);
}
#adminHeader #bottom
{
    padding: 1.5em 0 0 1em;
    position: relative;
}
#adminHeader #bottom *
{
    margin: 0;
}
#adminHeader #bottom ul
{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    gap: 0.5em;
}
#adminMain
{
    margin-left: max(17vw, calc(200px + 2vw));
    width: 81vw;
    padding: 1em 0;
    min-height: calc(100vh - 2em);
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
            ADMIN INDEX
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#adminIllu
{
    height: 100vh;
    position: absolute;
    left: calc(50% + 10vw);
    top: 50%;
    transform: translate(-50%, -50%);
}
#adminGrid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 5vw));
    gap: 2em;
}
.adminCard
{
    cursor: pointer;
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 1em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0.5em;
}
.adminCard svg
{
    width: 75%;
}
.adminCard span
{
    font-family: var(--fontTitre);
    font-weight: bold;
}
.adminCard:hover
{
    background-color: var(--vert75);
}
.adminCard:hover svg path
{
    stroke: var(--blanc);
}
.adminCard:hover span
{
    color: var(--blanc);
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
        ADMIN ARTICLE EDITOR
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#articleEditorPage
{
    margin-top: 1em;
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 1em;
    grid-row-gap: 0px;
    min-height: 70vh;
}
#articleEditor
{
    grid-area: 1 / 1 / 2 / 2;
    grid-auto-rows: min-content;
}
#titleInput
{
    font-family: var(--fontTitre);
    color: var(--vert);
    font-weight: bold;
    font-size: 2em;
    padding: 0.2em 0.4em;
    width: calc(100% - 0.8em);
    margin: 0 0 0.5em 0;
}
#titleInput::placeholder
{
    font-weight: bold;
    color: var(--vert50);
}
#titleInput:focus
{
    outline-color: var(--vert);
}
#articleSideBar
{
    width: max(250px, 15vw);
}
#articleSideBar form
{
    width: calc(100% - 1em);
    position: sticky;
    top: 12vh;
    box-shadow: var(--shadow);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    gap: 1em;
    padding: 1em 0.5em;
    border-radius: 5px;
}
#articleSideBar form span
{
    max-width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0.5em;
}
#articleSideBar form span select
{
    width: 70%;
}
#articleSideBar #validEdit
{
    width: 100%;
}
#articleSideBar #validEdit button
{
    width: 45%;
    text-align: center;
    padding: 0;
}
#articleActionsInfo
{
    position: sticky;
    top: 20vh;
    width: calc(100% - 2em);
    box-shadow: var(--shadow);
    border-radius: 5px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    gap: 0.2em;
    padding: 0.5em 1em;
    color: var(--gris3);
    font-size: 0.8em;
    max-height: 10em;
    overflow-y: scroll;
}
.ql-toolbar.ql-snow
{
    border: none;
    box-shadow: var(--shadow);
    border-radius: 5px 5px 0 0;
}
.ql-container.ql-snow
{
    border: none;
    box-shadow: var(--shadow);
    border-radius: 0 0 5px 5px;
}
.ql-container
{
    height: auto;
}
.editorIcon
{
    height: 100%;
}
.ql-header > .ql-picker-label
{
    border: none;
    border-radius: 5px;
    box-shadow: var(--shadow) inset;
    font-family: var(--fontCorp);
}
.image-size-popup
{
    background-color: var(--blanc);
    border: solid 1px var(--gris3);
    height: 1.5em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0.5em;
    padding: 0 0.5em;
}
.image-size-popup img
{
    border-right: solid 1px var(--gris3);
    padding-right: 0.5em;
}
.image-size-popup button
{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
img.small
{
    width: 25%;
}
img.medium
{
    width: 50%;
}
img.large
{
    width: 100%;
}
#imageInput
{
    display: none;
}
#imageInputLabel
{
    line-height: 2.5em;
    min-height: initial;
    margin-top: -1em;
    font-size: 0.8em;
}
#imagePreview
{
    width: 80%;
    height: auto;
    display: none;
    box-shadow: var(--shadow);
    margin-top: -0.8em;
}  




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
        ADMIN ARTICLE LISTE
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

.emtyArticle
{
    width: 50%;
    max-height: 50vh;
    position: absolute;
    top: 50%;
    left: calc(10vw + 50%);
    transform: translate(-50%, -50%);
}
.articlePreview
{
    text-decoration: none;
}
.articlePreview img
{
    width: 100%;
    height: 10em;
    object-fit: cover;
}
.articlePreview > div
{
    padding: 0 0.5em 1.5em 0.5em;
    border-bottom: solid 1px var(--gris2);
}
.articlePreview:hover
{
    opacity: 0.75;
}
.articlePreview:hover > div
{
    background-color: var(--gris);
}
.cutText 
{ 
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--gris3);
    font-size: 0.8em;
}
#pagination
{
    margin-top: 1em;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0.5em;
}
#pagination svg
{
    height: 0.75em;
}
#pagination svg path
{
    stroke: var(--gris3);
}
#pagination svg:hover
{
    cursor: pointer;
    opacity: 0.5;
}
#pagination span
{
    margin: 0;
    font-size: 1.2em;
    color: var(--gris3);
}
.pagniationDisabled path
{
    stroke: var(--gris2) !important; 
}
.pagniationDisabled:hover
{
    cursor: initial !important;
    opacity: 1 !important;
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
        ADMIN ARTICLE LISTE
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
#emptyValidation
{
    position: absolute;
    height: 50vh;
    left: calc(50% + max(7.5vw, 100px));
    top: 50%;
    transform: translate(-50%, -50%);
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
            ARTICLE
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#articleBackButton
{
    position: fixed;
    top: calc(13vh + 2em);
    left: 5vw;
}
#articleHeader
{
    width: 100vw;
    height: 25em;
    margin-top: -3em;
    margin-left: -5vw;
    object-fit: cover;
}
.articleTitle
{
    font-size: 3em;
    margin: 0.5em 0 0 0;
    text-transform: none;
    letter-spacing: 0.1em;
    font-weight: normal;
}
.articleTitle::after
{
    display: none;
}
.articleInfo
{
    box-shadow: var(--shadow) inset;
    border-radius: 5px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    width: fit-content;
    gap: 0.2em;
    padding: 0.5em 1em;
    color: var(--gris3);
    font-size: 0.8em;
    margin-bottom: 2em;
}
p:has(.articlePJ)
{
    padding: 1em 0;
}
.articlePJ::before
{
    content: ' ';
    width: 2em;
    padding-right: 0.5em;
    border-right: solid 1px var(--gris2);
    height: calc(100% - 1em);
    position: absolute;
    top: 50%;
    left: 0.5em;
    transform: translate(0, -50%);
    background-image: var(--urlImgBkgrnd, url("/Extranet/asset/img/file.png"));
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.articlePJ
{
    position: relative;
    background-color: var(--gris3);
    padding: 1em 1em 1em 3.5em;
    margin-right: 1em;
    border-radius: 5px;
    color: var(--blanc) !important;
    cursor: pointer;
    caret-color: var(--blanc) !important;
}
.article table, .article  td, .article  tr
{
    border: solid 1px;
    border-collapse: collapse;
}
.article td
{
    padding: 0.2em 0.5em;
}
.article .ql-align-center
{
    text-align: center;
}
.article .ql-align-right
{
    text-align: right;
}



/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
        ADMIN SECTIONS LISTE
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#sectionsList ul
{
    padding-left: 1em;
}
#sectionsList li
{
    padding: 0.5em 1em;
    border: solid 1px var(--gris2);
    outline: solid 1px var(--gris2);
}
#sectionsList li input
{
    width: 100%;
    border: none;
    background: none;
}
#sectionsList li input:focus
{
    outline: none;
    color: var(--vert);
    border-bottom: solid 1px var(--vert);
}
.dragHover
{
    background-color: var(--vert50);
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
          SECTIONS DISPLAY
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#sectionNav
{
    position: fixed;
    left: 0;
    top: 12vh;
    width: max(calc(15vw - 3em), 150px);
    height: calc(88vh - 4em);
    background-color: var(--blanc);
    box-shadow: var(--shadow);
    padding: 3em 1em 1em 2em;
    overflow-y: scroll;
}
#sectionNav hr
{
    margin: 1em 25%;
}
#sectionNav ul
{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    gap: 0.5em;
    width: 100%;
}
#sectionNav li
{
    width: 100%;
}
#sectionNav a
{
    font-family: var(--fontTitre);
    color: var(--noir);
    text-decoration: none;
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    display: block;
    border-radius: 5px;
    box-shadow: var(--shadow);
    padding: 0.5em 1em;
    width: calc(100% - 2em);
}
#sectionNav li > ul
{
    padding-top: 0.5em;
    position: relative;
    gap: 0.5em;
    width: calc(100% - 15px);
}
#sectionNav li > ul::before
{
    content: '';
    width: 1px;
    height: calc(100% - 0.5em);
    background-color: var(--gris2);
    position: absolute;
    top: 0.5em;
    left: 5px;
}
#sectionNav li > ul li
{
    margin-left: 15px;
}
#sectionNav li:hover:not(:has(ul:hover)) > a
{
    background-color: var(--vert);
    color: var(--blanc);
}
#sectionArticles
{
   
    margin-left: max(calc(10vw + 2em), calc(150px + 2em));
}
#sectionNav .backButton
{
    width: 100%;
}
#sectionArticlesFull .backButton
{
    margin-bottom: 2em;
}
#emptySection
{
    height: 50vh;
    margin-left: 50%;
    transform: translate(-50%, 0);
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
            SECTION PROJET
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#projectUp
{
    display: flex;
    gap: 3.5%;
}
.projectUpElement
{
    width: 31%;
    background-color: var(--vert75);
    color: var(--blanc);
    box-shadow: var(--shadow2);
    transition: all 0.5s;
    text-decoration: none;
}
.projectUpElement:hover
{
    box-shadow: none;
    opacity: 0.75;
    cursor: pointer;
}
.projectUpElement img, .projectArticle img
{
    width: 100%;
    aspect-ratio: 3/1;
    object-fit: cover;
}
.projectProgress
{
    margin-top: -0.2em;
    width: 100%;
    height: 1.2em;
    background-color: var(--vert3);
}
.projectProgress div
{
    position: relative;
    min-width: 0.5%;
    height: 100%;
    background-color: var(--blanc);
    border-radius: 0 15px 15px 0;
}
.projectProgress div span
{
    font-family: var(--fontTitre);
    font-weight: bold;
    color: var(--vert);
    position: absolute;
    right: 0.2em;
}
.ProjectDesc
{
    width: calc(100% - 2em);
    padding: 0.2em 1em 1em 1em;
}
.ProjectDesc h2
{
    color: var(--blanc);
}
#projectBottom
{
    margin-top: 2em;
}
#projectArticles
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3em;
}
#projectArticles iframe
{
    min-height: 32vh;
    height: 100%;
}
.projectArticle
{
    background-color: var(--vert75);
    color: var(--blanc);
    box-shadow: var(--shadow2);
    transition: all 0.5s;
    text-decoration: none;
}
.projectArticle:hover
{
    box-shadow: none;
    opacity: 0.75;
    cursor: pointer;
}
.projectArticle .cutText
{
    color: #ffffffDD;
}

#projectAddArticle
{
    min-height: 32vh;
    height: 100%;
    background-color: var(--blanc);
    color: var(--vert);
    transition: all 0.2s;
    text-decoration: none;
    border: solid 10px var(--vert);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15vh;
    box-sizing: border-box;
}
#projectAddArticle i
{
    transition: all 0.5s;
}
#projectAddArticle:hover
{
    color: var(--blanc);
    background-color: var(--vert);
}
#projectAddArticle:hover i
{
    transform: rotate(360deg);
}

/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
          ADMIN UTILISATEURS
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#adminUsers
{
    width: 100%;
    border: none;
    border-collapse: collapse;
    position: relative;
}
#adminUsers td
{
    padding: 0.5em 1em;
}
#adminUsers tr
{
    border-left: solid 1px var(--gris2);
}
#adminUsers tr:nth-child(4n-3)
{
    background-color: var(--vert50);
}
#adminUsers a svg
{
    height: 1.5em;
    transition: transform 0.2s;
}
#adminUsers a:hover > svg
{
    transform: scale(1.2);
}
#adminUsers .usersOptions
{
    width: 1em;
}
#adminUsers .editUser
{
    border-left: solid 1px var(--gris2);
    border-bottom: solid 1px var(--gris2);
    text-align: center;
    display: none;
}
#adminUsers .editUserSection
{
    padding: 1em;
    width: min(75%, 800px);
    margin-left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 1em;
}
#adminUsers .editUserSection label
{
    padding: 0.5em 1em;
    box-shadow: var(--shadow) inset;
    border-radius: 5px;
}
#adminUsers .editUserSection input[type="checkbox"]
{
    display: none;
}
#adminUsers .editUserSection input[type="checkbox"]:checked+label
{
    background-color: var(--vert50);
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
          ADMIN SERVICES
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#editServiceList
{
    list-style-position: inside;
    padding: 0;
}
#editServiceList li:nth-child(odd)
{
    background-color: var(--vert50);
}
#newService, .editServiceInput
{
    padding: 0.5em 1em;
}
#newService input, .editServiceInput input
{
    background: none;
    border: none;
}
#newService input:focus, .editServiceInput input:focus
{
    outline: none;
    border-bottom: solid 1px var(--vert);
}
.editServiceInput .responsable
{
    width: 50%;
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
        ADMIN ADMINISTRATEUR
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#adminEditList
{
    list-style-position: inside;
    padding: 0;
}
#adminEditList li:nth-child(odd)
{
    background-color: var(--vert50);
}
#newAdmin, .adminInputs, .videoInputs, #newVideo
{
    padding: 0.5em 1em;
}
.adminInputs, .videoInputs
{
    pointer-events: none;
}
.adminInputs span, .videoInputs span, .moderatorInput span
{
    position: relative;
    pointer-events: auto;
    transition: all 0.2s;
}
.adminInputs span::after, .videoInputs span::after, .moderatorInput span::after
{
    content: '';
    height: 1px;
    width: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    background-color: var(--noir);
    transition: all 0.2s;
}
.adminInputs:hover, .videoInputs:hover, .moderatorInput:hover
{
    color: var(--rouge);
    cursor: pointer;
}
.adminInputs:hover > span::after, .videoInputs:hover > span::after, .moderatorInput:hover > span::after
{
    width: 100%;
    background-color: var(--rouge);
}
#newAdmin input, #newVideo input
{
    border: none;
    background: none;
    border-bottom: solid 1px var(--gris2);
    width: 90%;
}
#newAdmin input:focus, #newVideo input:focus
{
    outline: none;
    border-bottom: solid 1px var(--vert);
}





/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
            ADMIN PROJETS
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#editProjetList
{
    list-style-position: inside;
    padding: 0;
}
#editProjetList li:nth-child(odd)
{
    background-color: var(--vert50);
}
#headerProjet
{
    font-size: 0.9em;
}
#newProjet, .editProjetInput, #headerProjet
{
    padding: 0.5em 1em;
    margin: 0;
}
.inputsProjet
{
    display: flex;
    align-items: center;
    gap: 0.5em;
}
#newProjet input[type="text"], .editProjetInput input[type="text"]
{
    background: none;
    border: none;
    width: calc(100% - 4em);
}
.editProjetModerator
{
    padding-left: 2em;
}
.editProjetModerator li
{
    background: none !important;
    font-size: 0.9em;
    list-style-type: "- ";
}
.editProjetInput .prime
{
    display: none;
}
.editProjetInput .prime:checked ~ label::after
{
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    height: 0.4em;
    width: 0.4em;
    background-color: var(--blanc);
    border-radius: 100%;
    transform: translate(-50%, -50%);
}
.editProjetInput label
{
    position: relative;
    display: inline-block;
    height: 0.8em;
    width: 0.8em;
    border-radius: 100%;
    background-color: var(--vert);
    cursor: pointer;
}
.editProjetInput label:hover
{
    opacity: 0.5;
}
#newProjet input:focus, .editProjetInput input:focus
{
    outline: none;
    border-bottom: solid 1px var(--vert);
}
.editProjetInput .responsable
{
    width: 50%;
}
#adminProjet
{
    min-height: calc(87vh - 4em);
}
#adminProjet #projetIndex
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
}
#adminProjet #projetIndex a
{
    border-radius: 15px;
    padding: 1em;
    min-height: 5em;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: var(--fontTitre);
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
}
#adminProjet #projetIndex a:hover
{
    background-color: var(--vert50);
}
#progressPanel
{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#porgressInputs
{
    margin-top: 1em;
    display: flex;
    gap: 1em;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}
#porgressInputs input
{
    height: fit-content;
    text-align: center;
}
#porgressInputs #progress
{
    width: 5em;
}
#progressRangeInput
{
    width: calc(31% - 6em);
}
#porgressInputs datalist 
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr;
    width: 100%;
}
#porgressInputs option 
{
    padding: 0;
}
#porgressInputs input[type="range"] 
{
    width: 100%;
    margin: 0;
}
.videoInputs iframe
{
    margin-top: 0.5em;
    aspect-ratio: 16/9;
    min-width: 300px;
    max-width: 500px;
}
#newVideo #alertFormat
{
    width: 100%;
    padding: 1em 0.5em;
    font-size: 0.8em;
    color: var(--rouge);
    display: none;
}
@media (max-width: 1000px)
{
    #header #defaultTop img
    {
        margin-top: 10px;
    }
    #header #tdb span
    {
        display: none;
    }
    #main
    {
        margin: calc(13vh + 2em) 15px 2em 15px;;
        width: calc(100vw - 30px);
    }
    .gridTDBreverse, .gridTDB
    {
        display: initial;
    }
    .facebookFeed
    {
        display: none;
    }
    #tdbMain #agenda, #agendaExt
    {
        display: block;
    }
    #agendaExt
    {
        overflow: hidden;
    }
    #tdbMain .blocAgenda:first-child
    {
        display: inline-block;
        width: 100%;
    }
    #tdbMain .blocAgenda
    {
        display: none;
    }
    #agenda
    {
        display: flex;
        flex-flow: column nowrap;
        gap: 1em;
    }
    .buttonsAgenda
    {
        margin-bottom: 4em;
    }
    #gridEspace
    {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        gap: 0;
        row-gap: 20px;
    }
    .cardEspace
    {
        width: calc(50vw - 45px);
    }
    .cardEspace h2 
    {
        font-size: 20vw;
        line-height: 21vw;
    }  
    #commeSiCards
    {
        flex-flow: column nowrap
    }
    .commeSiCard
    {
        width: 95%;
        max-width: 95%;
    }
    #projectUp
    {
        flex-flow: column nowrap;
        gap: 1em;
    }
    .projectUpElement
    {
        width: 100%;
    }
    #projectArticles
    {
        display: flex;
        flex-flow: column nowrap;
        gap: 1em;
    }
    #projectAddArticle
    {
        display: none;
    }
    #adminBtn
    {
        display: none;
    }
    #socials
    {
        display: none;
    }
    #scorePaque
    {
        position: fixed;
        top: 2em;
        left: 2em;
        color: var(--blanc);
        font-family: var(--fontTitre);
        font-weight: bold;
        z-index: 1000;
    }
    #scorePaque span
    {
        display: none;
    }
}




/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
               PAQUE
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#scorePaque
{
    font-size: 0.8em;
    top: 15px;
    left: 15px;
}
#scorePaque span
{
    display: initial;
}
#scorePaque br
{
    display: none;
}



/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
               POP UP
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#popUp
{
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--noir50);
    z-index: 1000;
}
#popUpMemo
{
    margin-bottom: 1em;
    padding: 0;
    border-collapse: collapse;
    width: calc(50% - 0.50em);
}
#popUpMemoMore
{
    position: relative;
    cursor: pointer;
}
#popUpMemoMore span
{
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translate(0, -50%);
    color: var(--gris2);
}
.popUpMemoLine
{
    display: none;
}
.popUpMemoLine:nth-child(even)
{
    background-color: var(--vert25);
}
#popUpMemo td
{
    padding: 0.5em 1em;
    width: 50%;
}
#popUpContent
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(200px, 80vw, 500px);
    background-color: var(--blanc);
    border-radius: 15px;
    padding: 1em;
}
#popUpContent img
{
    width: 100%;
}
#popUpButtons
{
    padding-top: 1em;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 0.5em;
}
#popUpButtons a
{
    cursor: pointer;
}
#popUpEdit
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
    min-height: 75vh;
    margin-bottom: 1em;
}



/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 *                                 *
              ACTU COMM
 *                                 *
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

#editActuComm
{
    list-style-position: inside;
    padding: 0;
}
#editActuComm li:nth-child(odd)
{
    background-color: var(--vert50);
}
#editActuComm .titre, #editActuComm #newProjet input
{
    font-family: var(--fontTitre);
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.25em;
}
#editActuComm .actuTitre
{
    position: relative;
}
#editActuComm .actuTitre span
{
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translate(0, -50%);
}
#editActuComm .actuDetails
{
    margin-top: 1em;
    display: none;
}
.actuCorp
{
    width: calc(100% - 1em);
    height: 10em;
}
#editActuComm .commeSiGrid1
,#editActuComm .commeSiGrid2
,#editActuComm .commeSiGrid3
,#editActuComm .commeSiGrid4
{
    margin: 1em auto;
    width: 75%;
}
#editActuComm .commeSiGrid1 img:hover
,#editActuComm .commeSiGrid2 img:hover
,#editActuComm .commeSiGrid3 img:hover
,#editActuComm .commeSiGrid4 img:hover
{
    filter: grayscale(1);
}
.actuAddImage
{
    height: 100%;
    min-height: 2em;
    width: 100%;
    background-color: var(--gris2);
    color: var(--gris3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    font-weight: bold;
    cursor: pointer;
}
.actuAddImage:hover
{
    color: var(--gris);
    opacity: 0.75;
}