/* importation des typos */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:ital,wght@0,300;0,400;0,600;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@1,500&family=Red+Hat+Mono:ital,wght@0,300;0,400;0,600;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body
{

	/* palette de couleurs */
	--couleur-fond: #341E68;
	--couleur-texte: #3EDD8A;

	/* tailles de typo */
	--corps-article : 0.77rem;
	--corps-colonne-gauche : 0.8rem;


	font-family: 'Red Hat Mono', monospace;
	font-weight: 400;

	background-color: var(--couleur-fond);
	color: var(--couleur-texte);
}



header
{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 10px;
}



/* ------------ POUR LA PAGE D'ACCUEIL ------------ */

#logo-accueil
{
	position: absolute;
	top: 39%;
	left: 45%;
}

/* pour afficher la flèche sur le logo quand on le survole à la souris */
#conteneur-accueil span
{
	display : none;
}

#conteneur-accueil:hover span
{
	display : block;
}

#fleche-accueil
{
	position : absolute;
	left: 40%;
	top : 3000px;
	top: 38.7%;
	left: 44.8%
}

#texte_bienvenue
{
	position: absolute;
	left: 57%;
	top: 9%;
	transform: rotate(8deg);
}



/* ------------ POUR LA PAGE CARNET DE BORD ------------ */

/* pour afficher la flèche sur le logo quand on le survole à la souris */
#logo span
{
	display : none;
}

#logo:hover span
{
	display : block;
	position: absolute;
	top : 0.9rem;
}


#image_titre
{
	/*bricolage pour centrer le titre de la page */
	position: relative;
	top: -0.2rem;
	left: -2.6rem;
}


#bloc_bienvenue
{
	position: absolute;
	left: 34.6%;
}






#conteneur
{
	display: flex;
	flex-direction: column;

	margin-left: 15%;
	margin-right: 15%;
	margin-top: 4%;
}


#bloc_principal
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

#en_tete
{
	background-color: var(--couleur-texte);
	color: var(--couleur-fond);

	width: 15%;
	padding: 6px;

	font-size: 12px;
	font-weight: 700;
	font-style : italic;
}


#partie_gauche
{
	flex: 1;
	border: 0.1rem solid;

	font-size: var(--corps-colonne-gauche);

	font-weight: 500;
	font-style : italic;

	max-width: 19rem;
}

#partie_gauche:hover
{
	/* pour changer l'image du curseur au survol de la colonne de titres*/
	/* cursor: url('../images/flamme.png'), auto; */
	cursor: pointer;
}



.date_menu
{
	font-size: 9px;
	font-style : italic;
}




.actualite
{
	padding-top: 0.4rem;
	padding-left: 0.8rem;
	padding-right: 0.8rem;
}

/* pour la couleur au survol de la giga colonne */

.actualite:hover
{
	color : var(--couleur-fond);
	background-color: var(--couleur-texte);
}



/* pour faire apparaître les images au survol de la giga colonne */

.actualite span
{
	display : none;
}

.actualite:hover span
{
	display : block;
}

.image_survol
{
	/* à retirer pour que les images ré apparaissent */
	/*display : none;*/

	/* POUR QUE LES IMAGES S'AFFICHENT SUR LA COLONNE DES TITRES */
	position: absolute;
	left: 24rem;
	pointer-events: none;
	transform: rotate(2deg);
	

	/* POUR QUE LES IMAGES S'AFFICHE AU MILIEU DE LA PAGE À PEU PRÈS
	position: absolute;
	top : 33%;
	left : 50%;
	pointer-events: none;
	*/
}









#partie_droite
{
	/* son comportement dans la grande flexbox contenante */
    flex: 3;
    margin-left : 2rem;

    visibility: hidden;
}


#bloc_article_texte:hover
{
	/* pour que le curseur change au survol,
	qu'on comprenne qu'on peut déplacer le bloc :-) */
	cursor: all-scroll;
}

#bloc_article_texte
{
	border: 0.1em solid var(--couleur-texte);

	font-size : var(--corps-article);

	color: var(--couleur-fond);
	background-color: var(--couleur-texte);

	/* position du bloc du texte de l'article */
	position: absolute;
	top: 14rem;
	left: 54rem;

	/* height: 22em; */

    /* gestion de la flexbox interne à la partie droite*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}


.image_article
{
	max-width: 500rem;
	height: auto;
}

.img_article
{
	/* réglage de l'écart entre les images d'un article */
	margin-bottom: 1rem;
}


.fichier_article
{
	color: var(--couleur-fond);;
	background-color: var(--couleur-texte);

	font-family: 'Literata';
	font-size: var(--corps-article);

	max-height: 600px;
}


#titre
{
	padding: 0.5rem;

	color: var(--couleur-texte);
	background-color: var(--couleur-fond);

	font-weight: 600;
	font-style : italic;
}

#cartouche
{
	/* gestion de la flexbox interne au cartouche*/
    display: flex;
    flex-direction: row;
    align-content : flex-start;

    font-weight: 600;
}

#date
{
	text-align: right;
	padding: 0.5rem;
}

#type_actu
{
	border-right: 0.1rem solid;
	padding: 0.5rem;
}

.description
{
	border-top: 0.1rem solid;
	display: flex;
}

.description iframe
{
	border-style : none;

	/* pour que le bloc iframe occupe tout le bloc description */
	width: 100%;

	/* pour que la barre de défilement soit toujours visible */
	overflow: scroll;
	scrolling: yes;

	padding: 0.4rem;
	height: 15rem;
}