/*Ici le code CSS qui gère la structure et la mise en page
des différentes pages du site à destination des smartphone*/


/*------------------------------------------------------
----------------------- SOMMAIRE -----------------------
1. TOUTE PAGE
2. NAVIGATION
3. HEADER
4. ACCUEIL
5. RUBRIQUE
6. ARTICLE
--------------------------------------------------------
------------------------------------------------------*/

@media (max-width:768px) {

/*------------------------------------------------------
--------------------- TOUTE PAGE -----------------------
------------------------------------------------------*/

body {
	padding:0;
}

.page .wrapper > div {
	padding:40px 20px;
}

.page .main {
	padding:0;
	width:100%;
	float:none;
	margin-left: max(0px, 0%);
	padding-top:100px;
}
	
/*------------------------------------------------------
--------------------- NAVIGATION -----------------------
------------------------------------------------------*/
nav {
	float:none;
	width:100%;
	min-width:0;
	left:0px;
	height:auto;
}

.nav {
	display:flex;
	flex-direction:column;
	align-items:center;
	height:auto;
}

#wrap {
	width:100%;
	background-color:#1a1918;
	padding-bottom:70px;
	margin-top:100px;
	height:calc(100vh - 100px);
}

.logo {
	background-color:#1a1918;
	height:100px;
	min-height:50px;
	padding: 33px 20px 20px 20px;
	display:flex;
	flex-direction:row;
	column-gap:10%;
	align-items:center;
	width:100%;
	position:fixed;
	z-index:10;
}

.logo img {
	min-height:50px;
	max-height:80px;
	height:auto;
}

#wrap:not(:target) {
  display:none;
}

#wrap:target {
  display:flex;
}

.logo .burger {
	display:block;
	min-height:50px;
	max-height:80px;
	height:auto;
	margin-left:auto;
}

#wrap:target ~ .logo #open,
#wrap:not(:target) ~ .logo #close {
	display: none;
}

#wrap:target ~ .logo #open {
	display: none;
}

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

header {
	padding-right:20px;
	padding-left:20px;
	display:flex;
	flex-direction:column-reverse;
	align-items:center;
	justify-content:center;
}

.arbo {
	display:block;
	text-align:center;
}

.formulaire_recherche {
	width:100%;
	max-width:500px;
}

/*------------------------------------------------------
----------------------- ACCUEIL ------------------------
------------------------------------------------------*/

.parus_flexbox {
	display:flex;
	flex-direction:column;
}

/*------------------------------------------------------
----------------------- RUBRIQUE -----------------------
------------------------------------------------------*/

.article_flexbox {
	display:flex;
	flex-direction:column;
}

.article_flexbox_vertical {
	display:flex;
	flex-direction:column;
	flex-shrink:0;
	flex-grow:0;
	flex-basis:100%;
	margin:25px 0;
}

.content_col3 {
	column-count: 1;
	column-gap: 0;
}
	
/*------------------------------------------------------
----------------------- ARTICLE ------------------------
------------------------------------------------------*/

.page_article .wrapper, .page_mot .wrapper {
	display:flex;
	flex-direction:column;
	margin-bottom:0;
}

.article-1 .article_description, .article-13 .article_description {
	display:flex;
	flex-direction:column;
}
	
}/*fin de media-queries : code à écrire avant cette accolade*/