/* --------------------Eléments principaux de la page----------------------------- */

body
{ 

	background-color: #737373;
	font-family: "Helvetica Neue", helvetica, arial, sans-serif;
     /*background: url("fond.jpg");
     background-repeat: repeat-x;*/


}

#bloc_page
{
    /*width: 1800px;/* largeur de la page */
   margin: auto;/* centre la page */
}


/*---------------------------------BALISE GENERIQUE----------------------------------*/


header
{
    display: flex;/* déclenche la fonction flex */
    flex-direction: column;/* sens et ordre de l'alignement des blocs */
    justify-content: flex-start;/* alignement des blocs dans le conteneur sur l'axe principal */
    align-items: flex-start;/* alignement des blocs dans le conteneur sur l'axe secondaire */
}

img 
{
max-width : 100%;
height : auto;
}

header h1
{
    color: #000000;
	font-size: 2.5em;
		text-align: center;
	font-weight: normal;
	margin: 0 0 0 10px;

}

header h2
{
	color: #000000;
	font-size: 1em;
		text-align: center;
	font-weight: normal;
	margin: 0 0 0 10px;
}

footer h2
{
	color: #000000;
	font-size: 1em;
		text-align: center;
	font-weight: normal;
	margin: 0 0 0 10px;
}


section h3
{
    color: #FFFFFF;
	font-size: 1.4em;
		text-align: center;
	font-weight: normal;
	margin: 40px 0 25px 10px;
}

h4

{
    color: #FFFFFF;
	font-size: 1,5em;
		text-align: center;
	font-weight: normal;
	margin: 0 0 0 0px;
}

p
{
    color: #FFFFFF;
	font-size: 0.9em;
		text-align: center;
	font-style: italic;
}

figure
{
	margin: 0 0 0 0;
}

a
{
	color: #FFFFFF;
	font-size: 1em;
	text-decoration: none;
		text-align: center;
}


.articles:hover
{
box-shadow: 0 0 10px rgba(255,255,255,0.5)
}

footer h3

{
    color: #FFFFFF;
	font-size: 1em;
	text-align: center;
	font-weight: normal;	

}

ul 
{

margin: 0;
	text-align: left;
padding: 2;
  	font-size: 0.6em;
	color: #FFFFFF;
}

.articles.focus 
{
position: fixed;
z-index: 2;
width: calc(100vw - 2em);
height: calc(100vh - 2em);
top: 1em;
left:1em;
overflow: scroll;
}

.articles.focus img{
object-fit: contain;
height: 100%;
width: 100%;
}

.articles.focus ul {
font-size: 1em;
text-align: center;
}



/*---------------------------------FLEX PAGE D'ACCUEIL-----------------------------------*/

#block-articles,
#block-photos
{
 columns: 250px auto;
 column-gap: 8px;
 width: auto;	
}


.articles,
.photos
{
	background-color: #000000;
	display: flex;/* déclenche la fonction flex */
	flex-direction: column;
	justify-content: space-between;
    /*! border-radius: -52px; */
    overflow: hidden;
	margin-bottom: 8px;
}
.articles p,
{
	margin: 6px;

}


.articles iframe
{
	margin: 0px;

}


.articles h4
{
	margin: 6px;
	text-align: center;
}

/* .articles a
{
    display: flex;
    	justify-content: space-between;


}*/

/*---------------------------------FLEX PHOTOS-----------------------------------*/



#block-photos p
{
	margin: 6px;
	font-size: 0.6em;
	text-align: left;
}

/*---------------------------------FLEX LINKTREE-----------------------------------*/

#block-linktree
{
 columns: 250px auto;
 column-count: 1;
 width: auto;	
}

.linktree
{
	background-color: #000000;
	display: flex;/* déclenche la fonction flex */
	flex-direction: column;
	justify-content: space-between;
    border-radius: 56px;
    padding: 28px;
    margin: 28px;
	overflow: hidden;	
}

.entete
{

	display: flex;/* déclenche la fonction flex */
	flex-direction: column;
	justify-content: space-between;
	  align-items: center;
    border-radius: 50px;
    padding: 3px;
    margin: 28px;
	overflow: hidden;	
}

.entete img
{
	width: 100px;
	border-radius:50px;

}


.linktree h4
{
	color: #FFFFFF;
	font-size: 0.8em;
	margin: 0 4px 4px 4px;
	text-align: center;
}



/*  overflow: auto;    installe un ascenseur pour les textes trop longs */
/*  max-width: 700px;   largeur max du bloc */
/*	min-width: 200px;  largeur min du bloc */
/* 	word-wrap: break-word; casse les mots trop longs */