:root{
    --FONT: "Share Tech Mono";    
    --BIB-color: #fd7920; /* Official Orange BIB */
    --BIB-black: #0f0702; /* Official BIB black */
    --BG-color: #C8D0DDB3; /* Color of background */
    --BODY-BG-color: #f0eec9; /* Color of white orangé */
    --MENUENTRY-hover-color: #F4F4F4;
    --TEXT-color: #393633; /* Color of text by default */
    --TITLES-color: #fffaf7; /* Color of titles h1-h2-h3-h4-h5 */
    --LINK-color: #BB5E27; /* Color of links */
    --LINK-HOVER-color: #167ad0; /* Color of hovered links */
    --ATL-BG-color: rgb(213,213,213);
    --HG-color: #340034; /* Color of text when highlighted */
}

@media (prefers-color-scheme: dark){ /* si on est en mode sombre, on change les couleurs */
	:root{
		--TEXT-color: #cac7c7;
		--BG-color: #3c3c3c;
		--BODY-BG-color: #2b2b2b;
		--MENUENTRY-hover-color: pink;
		--LINK-color: #FF873F;
  		--ATL-BG-color: #2b2b2b;
	}
	#active > a {
		color: black;
	}
}

body {
    background: var(--BODY-BG-color);
    line-height: 1.5;
    margin: 0;
}

.main-body {
  margin: auto;
  margin-top: 0;
  line-height: 1.5;
  background: var(--BLACK-ORANGE-color);
  color: var(--TEXT-color);
  text-align: justify;
  word-break: normal;
  hyphens: auto;
  hyphenate-character: "-";
  /*! border: 5px solid blue; */
}

p {
    margin: 0;
    /*! color: red; */
}

a { 
	color:var(--LINK-color);
	transition: all 0.2s;
}
a:hover { color: var(--LINK-hover-color); }

.main-col {
    background: var(--BG-color);
    padding: 25px;
    margin-top: 20px;
}

.nav-logo {
    width: 2em;
    height: auto;
    position: relative;
    vertical-align: bottom;
}
/* header and footer areas */
.main-nav {
    background: var(--BG-color);
    font-size: 1.2em;
    font-weight: 800;
    border-radius: 0px;
}

.ext-nav {
    background: var(--BIB-color);
    line-height: 1.5;
    font-size: 1.3em;
    margin: auto;
    border-bottom: 1px solid grey;
    /*! border: 5px solid red; */
}

.ext-nav .menu li {
	text-align: center;
}
.menu {
    padding: 0;
    margin: 0;
    gap: 200px;
}

.menu li {
    display: inline-block;
    transition: background-color 0.1s ease-in;
    /* ! color: #CDCDCE; */
    padding:0;
}

.main-nav .menu a {
    animation-duration: 1s;
    animation-name: ease;
    transition: all 0.5 ease-in;
}

.article-meta, .menu a {
  text-decoration: none;
  padding: 5px 20px;
  margin: 0px;
  border-radius: 5px;
  /*! color: var(--BG-color); */
}


.menu > .deroulant:hover .sous {
	display: block;
}

.deroulant > a::after {
	content:"...";
}

.sous {
	display: none;
	background-color: RGBa(100,100,100,0.9);
	position: absolute;
	z-index: 1000;
	padding: 0;
	margin: 0;

}

.sous li {
	float: none;
	display:block;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid grey;
}

.sous > li:last-child {
	border-bottom: 1px solid black;
}


.article-meta, footer {
    text-align: center;
}

.title {
    font-size: 1.1em;
}

.page_title {
    text-align: center;
}

footer a {
    text-decoration: none;
}

hr {
  border-style: dashed;
  color: #ddd;
}

/* code */
pre {
  border: 1px solid #ddd;
  box-shadow: 5px 5px 5px #eee;
  padding: 1em;
  overflow-x: auto;
}
code { background: #f9f9f9; }
pre code { background: none; }

/* misc elements */
img, iframe, video { max-width: 100%; }
main { hyphens: auto; }
blockquote {
  background: #f9f9f9;
  border-left: 5px solid #ccc;
  padding: 3px 1em 3px;
}

table {
  margin: auto;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
table thead th { border-bottom: 1px solid #ddd; }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: #eee; }

/* navigation menus */
.main-nav .menu li:hover {
  background-color: #656177;
  /*! color: var(--BIB-color); */
}
.ext-nav .menu li:hover {
  background: #776a61;
}
.main-nav .menu li > a {
  color: var(--TEXT-color);
}

.menu #active {
	background-color: #ff944c;
}

.menu li:hover > a {
	color: var(--MENUENTRY-hover-color);
}

.ext-nav .menu > li a {
	color: black;
}

/* Page d'accueil des ateliers */
@media only screen and (min-width: 1000px) {
.atl_wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    grid-auto-rows: 54px;
}
}

@media only screen and (max-width: 1000px) {
.atl_wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
}

.atl_name {
    padding: 0px;
    margin: 5px;
}

.atl_name a {
    color: var(--LINK-color);
}

.atl_name:hover a {
   color: var(--LINK-hover-color);
}

.atl {
    border: 2px solid var(--BIB-black);
    background-color: var(--ATL-BG-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
.atl_brasserie {
    grid-column: 1/7;
    grid-row: 7/10;
}
.atl_print {
    grid-column: 1/3;
    grid-row: 4/7;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.atl_elec {
    grid-column: 3/5;
    grid-row: 4/7;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}
.atl_lab {
    grid-column: 1/4;
    grid-row: 1/4;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.atl_centre {
    grid-column: 4/7;
    grid-row: 1/7;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
.atl_chill {
    grid-column: 7/10;
    grid-row: 1/6;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.atl_etabli {
    grid-column: 7/10;
    grid-row: 7/10;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.atl_studio {
    grid-column: 10/13;
    grid-row: 1/7;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.atl_serveur {
    grid-column: 10/13;
    grid-row: 7/10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Evènements */
.event_title {
    margin: 10px 0px 0px 0px;
}

.event_desc {
    margin-top: 5px;
}