:root {
	--cafe-color: rgb(191, 126, 73); 
	
}

/* Polices */
@font-face {
	font-family: 'Constantia';
	src: url('fonts/Constantia.ttf');
}

@font-face {
	font-family: 'Constantia';
	font-weight: bold;
	src: url('fonts/Constantia Bold.ttf');
}

@font-face {
	font-family: 'Ebrima';
	src: url('fonts/Ebrima.ttf');
}

@font-face {
	font-family: 'Ebrima';
	font-weight: bold;
	src: url('fonts/Ebrima-Bold.ttf');
}

@font-face {
	font-family: 'LinBiolinum';
	src: url('fonts/LinBiolinum_R_G.ttf');
}

@font-face {
	font-family: 'LinBiolinum';
	font-weight: bold;
	src: url('fonts/LinBiolinum_RB_G.ttf');
}

@font-face {
	font-family: 'LinBiolinum';
	font-style: italic;
	src: url('fonts/LinBiolinum_RI_G.ttf');
}

/*Affichage liens en café*/

a[href*="https://"] {
	color: var(--cafe-color);
}

/*Articles*/

.bouton_download {
	background-color: var(--cafe-color);
	border: none;
	color: white;
	padding: 15px 25px;
	padding: 12px 30px;
	cursor: pointer;
	font-size: 20px;}

li {
	list-style-type: none;
}
	
a {
	text-decoration:none;
	color:black;
}

.liencaf  {
	color: var(--cafe-color);
	padding-right: 15px;
}

.listtrad {
	text-decoration:none;
}

body {
	font-family: 'LinBiolinum';
	font-size: 20px;
}


#listearticles li {
	list-style-type: none;
	border-bottom: 1px solid var(--cafe-color);
	padding: 10px;
    padding-bottom: 20px;
}

#corps {
	width: 70%; 
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 40px;
}


#corps p {
	text-align: justify;
	text-justify: auto;
}


#corps2 img {
	width: 100%;
	height: auto;
}
	
body h1 {
	text-align: center;
	font-size: 20px;
}	

/* Back To Top bouton */

main {
	display: grid; /* Backtotop*/
	grid-template-columns: auto 0px; /*Backtoptop*/
}
.top {

	place-self:end;
	position: sticky;
	bottom: 20px;
	margin-top:100vh;
	margin-right:20px;
	margin-top:100vh;

	background-color: var(--cafe-color);
	border: none;
	color: white;
	padding: 10px 10px 0px;
	cursor: pointer;
	font-size: 20px;
}

.arrow {
	border: solid black;
	border-width: 0 7px 7px 0;
	display: inline-block;
	padding: 7px;
}

.up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

/* Haut du site */
/*Titre 604.cafe */

#titre {
	padding:15px;
	text-align:center;
}

#titre a {
	font-size: 90px; 
	text-decoration: none; 
	font-weight: bold; 
	font-family: 'Constantia';
	color: black;
	text-align: right;
}

.choixlangue {
	display:block;
	text-align: right;
}


/*Barre de navigation*/


#barrehorizontale {
	background-color:var(--cafe-color);

}

nav ul {
    margin: 0;
    padding: 0;
    overflow: hidden; 
    background-color:var(--cafe-color);	
}

nav ul .dciv {
	float: left;
	} 

nav ul li {
    float: right;
}


nav li a {
	display:block;
	color:black;
	text-align:center;
	padding: 26px 29px;
	}

nav li a:hover {
	transition: 0.2s ease;
	background-color: white;
	color:var(--cafe-color);
}




/* Barre naviation DLC */


.sidenav {
	height:100%;
	width:350px;
	position:fixed;
	z-index:1;
	top:270px;
	left:0;
	background-color:var(--cafe-color);
	overflow-x:hidden;
	overflow-y:auto;
	padding-top:40px;
}

.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sidenav a:hover, .dropdown-btn:hover {
  color: white;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.main {
  margin-left: 350px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
}

.active {
  background-color: white;
  color: var(--cafe-color);
}

.active a:hover {color:black;}


.dropdown-container {
  display: none;
  background-color: color-mix(in srgb, var(--cafe-color) 80%, white 20%);
  padding-left: 8px;
}

.fa-caret-down {
  float: right;
  padding-right: 8px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/* Responsive */

/*
@media only screen and (max-width: 600px) {
	nav li a {padding: 13px 14px;}
	#corps {width:95%;}
	#titre a {font-size: 60px;}
	
}

*/

.imgcentre {
	text-align:center;
}


body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--cafe-color);
}

ul.topnav li {float: left;}

ul.topnav li a, ul.topnav li .dropbtn {
    display: block;
    color: black;
    text-align: center;
    padding: 18px 26px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) , ul.topnav li .dropdown:hover .dropbtn
{background-color: white; color: var(--cafe-color);}

ul.topnav li a.active {background-color: white; color: var(--cafe-color);}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}



/* Menu déroulant */

.logobar {
	background-color: var(--cafe-color);
}

.logobar a:hover {background-color:white;}

ul.topnav li .dropdown-content {
    display: none;
    position: absolute;
    background-color: color-mix(in srgb, var(--cafe-color) 80%, white 20%);
    color:black;
    z-index: 1;
    min-width: 160px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
}

ul.topnav li .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

ul.topnav li .dropdown-content a:hover {background-color: color-mix(in srgb, var(--cafe-color) 80%, white 20%); color: white;}

ul.topnav .dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 500px){
    ul.topnav li .dropdown-content {width: 100%;}
    ul.topnav li .dropdown-content a {text-align: center;}
}