/* MOBILE FIRST */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}


body{
	font-family: var(--fontFamily);
	font-size: var(--textSize);
	color: var(--black);
	line-height: 1.4;
	margin: 20px;
	background: var(--background);
}

a{
	text-decoration: none;
	color: var(--black);
}

a:hover{
	text-decoration: underline;
}

h1, h2, h3, h4, h5{
	font-family: var(--fontTitle);
}

h1{
	font-size: var(--h1Size);
	color: var(--green);
}

p{
	margin-bottom: 1rem;
}

img{
	width: 100%;
}

main{
	padding-top: 90px;
	padding-bottom: 150px;
}

main h1{
	margin-bottom: 0;
}

main h1 + article,
main h1 + .page__content-wrapper{
	margin-top: calc(var(--margin) * 2);
}



main article figure{
	margin-bottom: var(--margin);
}

figcaption {
	font-size: var(--smallSize);
	margin-top: 5px;
}

blockquote{
	margin-left: 15%;
	margin-right: 15%;
	font-size: var(--mediumSize);
	margin-bottom: var(--margin);
}

blockquote footer{
	font-size: 15px;
	text-align: right;
}

/* grille de 12 colonnes  */
.row__grid{
	display: grid;
  grid-template-columns: repeat(12, 1fr); 
  gap: 2rem;
/*  padding: 30px;
  width: 83%; 
  margin-left: 17%;*/
}

.row__grid .column__grid {
  grid-column: span var(--span, 12);
}


.show-for-small-only{
	display: block;
}

.hide-for-small-only{
	display: none;
}

/* ---- H E A D E R -----*/
header{
	position: fixed;
	width: 100%;
	top:0;
	left:0;
	right: 0;
	padding: 15px 30px 40px;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	background: var(--background);
	background: linear-gradient(180deg,var(--background) 0%, var(--background) 60%, transparent 100%);
}

header .menu-left{
	width: 80%;
	max-height: 0;
	height: 0;
	overflow: hidden;
	background: var(--background);
	transition: all 0.5s linear;
}

header .menu-left.active {
	width: 100%;
	max-height: 100vh;
	height: 100vh;
	overflow: auto; 
}

header .menu-right{
	width: 20%;
}

header .menu-left ul{
	display: flex;
	justify-content: flex-start;
}

header .menu-left ul li {
	padding-right: var(--margin);
	font-family: var(--fontTitle);
	font-size: var(--menuSize);
}

header .menu-left ul li a{
	color: var(--green);
}

header .menu-right{
	display: flex;
	justify-content: flex-end;
}

header .menu-right li {
	padding-right: 10px;
}

header .menu-right li a{
	color: var(--green);
}

header #toggle-help{
	background: var(--background);
	color: var(--green);
	border: 1px solid var(--green);
	border-radius: 50%;
	width: 25px;
	height: 25px;
	cursor: pointer;
}

header #toggle-help:hover{
	background: var(--green);
	color: var(--background);
}

header #toggle-night-mode{
	color: var(--green);
	font-size: 24px;
	margin-top: -5px;
	cursor: pointer;
}

header #toggle-low-tech-mode{
	color: var(--green);
	border: 1px solid var(--green);
	border-radius: 15px;
	padding: 2px 15px;
	cursor: pointer;
}

header #toggle-low-tech-mode:hover{
	background: var(--green);
	color: var(--background);
}

header .mobile__menu_btn {
  display: block;
  position: absolute;
  left: 15px;
  top: 15px;
  cursor: pointer;
  height: 24px;
  width: 24px; 
}

header .mobile__menu_btn span {
  display: block;
  background: var(--green);
  height: 2px;
  width: 26px;
  position: absolute;
  transition: all 0.5s ease;
}

header .mobile__menu_btn span:nth-child(1) { top: 0px; }
header .mobile__menu_btn span:nth-child(2) { top: 8px; }
header .mobile__menu_btn span:nth-child(3) { top: 16px; }
header .mobile__menu_btn .transparent { opacity: 0; }

header .mobile__menu_btn .rotate-top {
  -ms-transform: rotate(45deg);
  transform: rotatez(45deg);
  -webkit-transform-origin: 0%;
  left: 2px; 
}

header .mobile__menu_btn .rotate-bottom {
  -ms-transform: rotate(-45deg);
  transform: rotatez(-45deg);
  -webkit-transform-origin: 15%; 
}

/* ---- F O O T E R -----*/
body[data-template="home"] footer.website__footer{
	display: block;
}

footer.website__footer{
	display: none;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	right:0;
	z-index: 1000;
	padding: 30px 30px 20px;
	background: var(--background);
	background: linear-gradient(180deg,var(--background) 0%, var(--yellow) 100%);
/*	background: linear-gradient(180deg,transparent 0%, var(--yellow) 30%, var(--yellow) 100%);*/
}

footer.website__footer h1{
	font-family: var(--fontTitle);
	color: var(--green);
	font-size: var(--menuSize);
	text-align: center;
	text-transform: lowercase;
	transform:scale(1.25,1);
}

footer.website__footer h1 a{
	color: var(--green);
}

footer.website__footer h1 a:hover{
	text-decoration: none;
}

body[data-template="home"] footer.website__footer{
	padding-top: 50vh;
	z-index: -1;
}

body[data-template="home"] footer.website__footer h1{
	font-size: 57px;
}

/* ---- G E N E R A L ----- */
.page__content-wrapper h2{
	font-size: var(--h2SizeBis);
	color: var(--green);
	margin-bottom: var(--margin);
	margin-top: calc(var(--margin) * 2);
}


.page__content-wrapper h3{
	font-size: var(--menuSize);
	color: var(--green);
	margin-bottom: var(--margin);
	margin-top: var(--margin);
}


.relative{
	position: relative;
}

.relative .full{
	position: absolute; 
	inset: 0;
}

.common__btn{
	font-family: var(--fontTitle);
	border: 1px solid var(--green);
	padding: 5px 20px;
	color: var(--green);
	border-radius: 15px;
	cursor: pointer;
	margin-bottom: 15px;
}

.common__btn:hover,
.common__btn.active{
	color: var(--background);
	background: var(--green);
}

#help{
	min-height: 200px;
	min-width: 350px;
	border: 2px solid var(--green);
	border-radius: 15px;
	padding: 30px;
	background: var(--background);
	top: 50%;
	transform: translateY(-80%);
}

#help h3{
	text-align: center;
}

#close-help-dialog{
	position: absolute;
	right: 15px;
	top:15px;
	font-size: 15px;
	color: var(--background);
	background: var(--green);
	width: 22px;
	height: 22px;
	border-radius: 100%;
	cursor: pointer;
}

.item__tags li{
	border: 1px solid var(--green);
	display: inline-block;
	color: var(--green);
	font-family: var(--fontTitle);
	border-radius: 12px;
	padding: 3px 10px;
	cursor: pointer;
	margin-right: 5px;
	margin-top: 2.5px;
	margin-bottom: 2.5px;
}

.item__tags li:hover{
	background: var(--green);
	color: var(--background);
}

.item__tags li a{
	color: var(--green);
	text-decoration: none;
}

.item__tags li:hover a{
	color: #FFF;
}

.document__meta{
	position: absolute;
	left: calc(-15% - 10px);
	width: 15%;
	text-align: right;
}

.document__meta p{
	color: var(--green);
	font-family: var(--fontTitle);
	font-size: var(--smallSize);
	margin-bottom: 5px;
}

.document__meta .item__tags li{
	padding-top: 0;
  line-height: 1;
  padding-bottom: 7px;
}

.document__meta .item__tags li a{
	font-size: var(--smallSize);
}

.block-image{
	position: relative;
}

.block-gallery li{
	margin-bottom: var(--margin);
}

.video-from-web { 
  position: relative; 
  padding-top: 56.25%;
/*  height: 0; */
  overflow: hidden; 
 	width: 100%; 
} 

.video-from-web iframe, 
.video-from-web object, 
.video-from-web embed { 
  position: absolute; 
  top: 0;
	left: 0;
	bottom: 0;
	right: 0; 
  width: 100%; 
  height: 100%; 
  border: none;
}

.video-from-web figcaption{
	margin-top: calc(var(--margin) + 10px);
}

/* ----- N I G H T   M O D E ----- */
body.night{
	--black: rgb(252, 250, 250);
	--green: rgb(252, 250, 250);
	--background : var(--dark);
}

/* ----- L O W  M O D E ----- */
body.low img,
body.low video{
	display: none;
}

body.low figure{
	min-height: 100px;
	width: 100%;
	background: var(--yellow);
	padding: 10px 15px;
	border-radius: 15px;
}


/* ---- H O M E -----*/
body[data-template="home"] main nav li{
	font-family: var(--fontTitle);
	font-size: 57px;
	color: var(--green);
	text-align: center;
	margin-bottom: 60px;
}

body[data-template="home"] main nav li a{
	color: var(--green);
}

/* ---- N E T W O R K -----*/
#network-grid.row{
	margin:0;
}

#network-grid article h2{
	font-size: var(--h2Size);
	color: var(--green);
/*	text-align: center;*/
}

.device__list{
	margin-top: calc(var(--margin) * 6);
	padding: 15px 30px 40px;
}

.device__list h2{
	font-size: var(--h2Size);
	color: var(--green);
	border-bottom: 1px solid var(--green);
	margin-bottom: var(--margin);
}

.device__list h3{
	color: var(--green);
	font-size: var(--menuSize);
}

.device__additional{
	margin-top: calc(var(--margin) * 6);
}

.device__additional h2{
	font-size: var(--h2Size);
	color: var(--green);
	border-bottom: 1px solid var(--green);
	margin-bottom: var(--margin);
}

.device__additional h3{
	color: var(--green);
	font-size: var(--menuSize);
	margin-bottom: var(--margin);
	margin-top: calc(var(--margin) * 2);
}


/* ---- F O O T N O T E S ----- */
.note-call-wrapper{
	/*position: relative;*/
}

.note-call-wrapper .note-call{
	display: inline-block;
  width: 42px;
  cursor: pointer;
  font-size: 15px;
  background: var(--yellow);
  border-radius: 10px;
  text-align: center;
  color: var(--green);
}

.note-call-wrapper .contextual-note,
.note-call-wrapper .note-pointer{
	/*position: absolute;*/
  /*z-index: 99;*/
	color: var(--green);
	font-size: var(--mediumSize);
	line-height: 1.2;
	/*background: var(--yellow);*/
  /*border-radius: 10px;*/
  /*padding: 10px 20px;*/
  /*width: 300px;*/
  /*left: 100%;*/
  /*top: 27px;*/
}

.note-call-wrapper .contextual-note a{
	color: var(--green);
}

.note-call-wrapper .note-pointer{
	font-weight: bold;
	margin-right: 10px;
}

.note-call-wrapper .footnoteHandler{
	display: inline-block;
  width: 100%;
  float: right;
  margin: 0px;
}

/*.note-call-wrapper .note__inner {
  position: absolute;
  width: 15%;
  left: 75%;
  min-width: 120px;
  max-width: 280px;
  border: none;
  opacity: 1;
  pointer-events: auto;
  display: inline-block !important;
  margin-top: -22px;
}*/

.note-call-wrapper  .note__inner {
  /*position: absolute;*/
  width: 15%;
  min-width: 120px;
  max-width: 280px;
  border: none;
  opacity: 1;
  pointer-events: auto;
  display: none;
  /*display: block !important;*/
  /*left: 75vw;*/
}

#footnotes{
	margin-top: 50px;
	padding-top: 50px;
	padding-left: 54px;
	border-top: 1px solid var(--black);
	counter-reset: footnotes;
}

#footnotes li{
	counter-increment: footnotes;
}

#footnotes li::marker{
	content: none;
}

/*#footnotes li:before{
  content: counter(footnotes);
  display: inline-block;
  width: 42px;
  font-size: 15px;
  background: var(--yellow);
  border-radius: 10px;
  text-align: center;
  color: var(--green);
  margin-right: 12px;
}*/

#footnotes li p{
	display: inline-block;
	line-height: 1.6;
}

#footnotes .note-pointer{
  display: inline-block;
  width: 42px;
  font-size: 15px;
  background: var(--yellow);
  border-radius: 10px;
  text-align: center;
  color: var(--green);
  margin-right: 12px;
  margin-left: -54px;
}

/* ---- M E D I A     A R C H I V E S ----- */
#archive-manage{
	position: relative;
	width: 100%;
	margin-bottom: var(--margin);
}

#filters{
	display: flex;
	flex-wrap: wrap;
	color: var(--green);
	font-size: 14px;
	font-family: var(--fontTitle);
	padding: 15px 10px;
	border: 1px solid var(--green);
	border-radius: 15px;
}

#filters h4{
	border-bottom: 1px solid var(--green);
	font-weight: bold;
	margin-bottom: 10px;
}

#filters .filters__category{
	padding-right: var(--margin);
}


#filters .filters__category:nth-child(1){
	width: 12.5%;
}

#filters .filters__category:nth-child(2){
	width: 25%;
}

#filters .filters__category:nth-child(2) ul{
	column-count: 2;
	column-gap: 25px;
}

#filters .filters__category:nth-child(3){
	width: 37.5%;
}

#filters .filters__category:nth-child(3) ul{
	column-count: 3;
	column-gap: 25px;
}

#filters li{
	margin-bottom: 3px;
}

#filters button{
	text-align: left;
}

#filters button.active{
	background: var(--green);
	color: var(--background);
	padding: 2px 10px;
	border-radius: 15px;
}

#search{
	position: absolute;
	top:0;
	right: 0;
}

#search input{
	border: 1px solid var(--green);
	border-radius: 15px;
	padding: 5px 15px;
}


#archive-table{
	table-layout: fixed;
  width: 100%;
  font-size: var(--smallSize);
}

#archive-table .sorted-asc::before{
	content: "↓";
}

#archive-table .sorted-desc::before{
	content: "↑";
}

#archive-table .sorted-desc::before,
#archive-table .sorted-asc::before{
	margin-right: 10px;
}

td, th {
/*  overflow: hidden;*/
  text-overflow: ellipsis;
/*  white-space: nowrap;*/
  padding: 8px;
}

#archive-table thead th{
	color: var(--green);
	font-family: var(--fontTitle);
	font-size: var(--menuSize);
	font-weight: normal;
	text-align: left;
	text-transform: lowercase;
}

#archive-table tbody tr.item{
	height: 35px;
	background: rgba(210, 255, 0, 0.1);
}

#archive-table tbody tr.item:nth-child(even){
	background: var(--background);
}


/*#archive-table th:nth-child(1),
#archive-table td:nth-child(1) {
  width: 40px;
}*/

#archive-table th:nth-child(1),
#archive-table td:nth-child(1) {
  width: 22%;
}

#archive-table th:nth-child(2),
#archive-table td:nth-child(2) {
  width: 35%;
}

#archive-table th:nth-child(3),
#archive-table td:nth-child(3),
#archive-table th:nth-child(4),
#archive-table td:nth-child(4) {
  width: 12.5%;
}

#archive-table th:nth-child(5),
#archive-table td:nth-child(5) {
  width: 15%;
}

#archive-table th:nth-child(6),
#archive-table td:nth-child(6) {
  width: 12.5%;
}

#archive-table th:nth-child(7),
#archive-table td:nth-child(7) {
  width: 60px;
}

#archive-table .item__id{
/*	background: var(--green);
	color: var(--background);
	border-radius: 10px;*/
}

#archive-table .item__description {
	position: absolute;
  left: -100vw;
  z-index: 1001;
  border: 2px solid var(--green);
  width: 400px;
  border-radius: 15px;
}

#archive-table .item__description .item__tags{
	margin-bottom: var(--margin);
}

#archive-table .item__description .description__text{
	margin-bottom: var(--margin);
}

#archive-table .item__description .description__link{
	margin-bottom: 0;
}

#archive-table .item__description .description__link a{
	color: var(--green);
	text-decoration: underline;
}