/*
 Theme Name:   twentyseventeen-child
 Description:  Twenty Seventeen Child Theme inspired by Hestia and Toivo lite themes
 Author:       Timothée Cambon
 Author URI:   https://www.recoinsdumonde.com
 Template:     twentyseventeen
 Version:      1.1.0
 M.A.J.:       03/03/2021	
*/

/* -------------SOMMAIRE---------------
>>1-GENERALITES
	>Polices
	>Couleurs
	>Titres h2
	>Listes
	>largeurs colonnes pages
	
>>2-EN-TETE
	>Image d'en-tete
	>Titre et description

>>3.PAGE ACCUEIL
	>Disposition
	>Articles recent (Shortcode)

>>4.PAGES AFFICHANT LES DIFFERENTS ARTICLES
	>Dispositions
	>Titres
	>Lire la suite
	>Autheur
	>Cadre
	>Survol
	>Click
	>Widgets (espace et cacher en lecture mobile)
	>Icone barre de recherche
	
>>5.PAGE DE LECTURE D UN ARTICLE
	>Dispositions
	>Titre et meta
	>Genericons
	
>>6.MENU
	>Hauteur
	>SURVOL
	>Largeur Max
	>Couleur du menu
	>Defilement sous-menu

>>7.FIL D ARIANE
	>Disposition
	>Couleur du texte
	
>>8.WIDGET CITATIONS
	>Mise en forme (couleur et contour)
	>Suppression "citation suivante"
	>Nom de l'auteur à droite

>>9.FOOTER
	>Mise en forme (couleur et contour)
	>Saut de ligen wdget
	>Site info
	>Widget Newsletter
	>Widgets reseaux sociaux

*/


/*---------1.GENERALITES----------*/
	/*Polices Titres*/
	.entry-content  h1, h2, h3, h4, h5, h6 
	{
		font-family: Roboto,sans-serif;
		font-size: 19px;
		line-height: 1.6;
		margin: 20px 0;
	}
	.entry-content h2
	{
		font-size: 2rem;
		text-align: center;
		font-weight: bold;
	}
	.entry-content h3 
	{
    font-weight: bold;
	}
	
	/*Polices contenu pages, articles*/
	body, button, input, select, textarea 
	{
    font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.66;
	color : #444
	}
	
	/*Couleurs*/
	.entry-content h1 	/*titre des articles et des pages*/
	{
		color: black;
	}
	.entry-content  h2, h3, h4, h5, h6 
	{
		color: #666;
	}	
	
	/*Titre h2 "acceuil, caterories,..."*/
	.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title 
	{
		color: #E71D36;
	}
		
	/*Marge des listes*/
	li {
		margin-left: 2rem;
	}

	/* EDIT 27/02/2020 : changement de la disposition du site (1 colonne)
	diposition generale du site a deux colonnes, largeur colonne 1 (20%) et (80% colonne 2)
		@media screen and (min-width: 48em)
		{
			body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header 
			{
				float: left;
				width: 20%;
			}
		}
		@media screen and (min-width: 48em)
		{
			.blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments 
			{
				float: right;
				width: 80%;
			}
		}
*/

/*---------2.EN-TETE----------*/
	/*Image d'en-tete (remarque ne pas choisir d'image dans l'outil de customisation de wordpress, l'image utilisee est stockee dans le dossier du theme enfant)*/
	#masthead .custom-header 
	{
		background-image: url(img/lac.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	/*Largeur de l'image*/
	@media screen and (min-width: 30em)
	{
		.site-branding {
			padding: 4em 0;
		}
	}
	
	/*Titre et description*/
		/*Centrage du texte*/
		#masthead .wrap 
		{
			text-align: center;
		}
		
		/*Encadrage du texte*/
		.site-branding-text 
		{
			border: solid 4px;
			padding: 10px;
			color: white;
			/*font-family: cursive, sans-serifsans-serif; SI ON VEUT UNE POLICE SPECIALE*/
		}
		/*Titre*/
		title, .site-title a 
		{
			color: white;
		}
	
		/*Description*/
		p.site-description
		{
			color: white;
			font-style: italic;
		}

		
/*---------3.PAGE ACCUEIL----------*/
	/*Espace entre les widgets de contenu*/
	.panel-content .wrap 
	{
    padding-top: 1em;
    padding-bottom: 1em;
	}

	/*Largeur de la page = maximale*/
	.page-one-column .panel-content .wrap 
	{
    max-width: none;
    padding: 0;
	}


	/*Largeur des miniatures*/

	.su-posts-teaser-loop .su-post-thumbnail 
	{
		width: 150px;
   		height: 150px;
	}

	/*Titre des articles recents*/
	h2.su-post-title 
	{
   	 text-align: left;
   	 text-transform: uppercase;
	}

	/*Saut entre les articles recents*/
	.su-posts-teaser-loop .su-post
	{
		margin-bottom: 0.5em;
	}

/*---------4.PAGES AFFICHANT LES DIFFERENTS ARTICLES----------*/
	/* positionement de la zone de contenu pour les grands ecrans*/
	@media screen and (min-width: 48em)
	{
		/*Largeur du contenu maxi*/
		.wrap 
		{
			max-width: 1400px;
		}
		/*Largeur barre des widgets de gauche*/
		.has-sidebar #secondary 
		{
			width: 25%;
		}
		/*Espace entre le header et le contenu*/
		#content 
		{
			padding: 1.5em 0 0;
		}
		
		/*Cadre qui contient l extrait de l article*/
		.blog .site-main > article, .archive .site-main > article, .search .site-main > article
		{
			width: 110%;
		}
	}
	/*Positionement image de mise en avant*/
	.post-thumbnail 
	{
		float: left;
		margin: 0;
		padding-right: 20px;
	}
	
	/*Titre de l article*/
	h2.entry-title
	{
		text-align: center;
		font-size: 25px;
		/*font-family: "Roboto Slab", "Times New Roman", serif;*/
		font-weight: bold;
	}
	article.postall h2 
	{
		text-decoration: underline;
	}

	/*Marge apres Titre des pages*/
	.page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header 
	{
    	margin-bottom: 0;
	}
	
	/*Lire la suite*/
	p.link-more 
	{
		text-align: right;
	}
				
	/*division autheur */
	.postall .author 
	{
		margin-top: 20px;
		text-align: left;
		font-style: italic;
		font-size: 14px;
	}
	
	/*Cadre qui contient l extrait de l article*/
	.blog .site-main > article, .archive .site-main > article, .search .site-main > article
	{
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
	}
		
	/*SURVOL : Cadre qui contient l extrait de l archive*/
	article.postall:hover 
	{
		background: linear-gradient( #ffffff, #f2f0f0);
	}
	
	/*CLICK : Cadre qui contient l extrait de l archive*/
	article.postall:active 
	{
		background: linear-gradient( #ffffff, #f2f0f0);
		box-shadow: 1px 1px 10px #00000073 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
	}

	/*Espace entre les widgets (lateraux)*/
	.widget 
	{
    padding-bottom: 1em;
	}

	/*On cache le widget lateral pour les mobiles*/
	@media screen and (max-width: 48em)
	{
		#mailpoet_form_2 form.mailpoet_form 
		{
			display: none;
		}
	}

	/*Couleur de l'icone de la barre de recherche*/
	svg.icon.icon-search 
	{
    color: white;
	}
	
/*---------5.PAGE DE LECTURE D UN ARTICLE----------*/

	/*Espace occupe par l article */
	@media screen and (min-width: 48em)
	{
		.has-sidebar:not(.error404) #primary 
		{
			float: left;
			width: 65%;
		}
	}
	
	/*Espace occupe par les commentaires*/
	@media screen and (min-width: 48em)
	{ 
		div#comments  /*decalage de la zone de commentaires vers la droite*/
		{
			padding-left: 2em;
		}
	}
	
	/*Titre et meta de l article note .entry-inner permet d identifier la partie artcile seul*/
	.entry-inner header.entry-header/*centrage titre et meta*/
	{
		text-align: center;
	}
	.entry-inner .entry-header .entry-title /*taille titre*/
	{
		font-size: 38px;
	}
	.entry-inner .entry-meta /*espace apres le mera*/
	{
		padding-bottom: 10px;
	}
	.entry-inner .entry-header .entry-title:after  /*Creation d une ligne de demarquation entre le titre et le texte*/
	{
		display: inline-flex;
		content: "";
		display: block;
		width: 96px;
		height: 4px;
		margin: 5% auto;
		background: #515d65;
	}
		
	/* Genericons */
	
	/*Icone date de publication*/
	time.entry-date.published:before 
	{
		content: '\f307'; /*reference de l'icone*/
		font: normal 16px/1 'Genericons';
		display: inline-block;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: text-bottom;
	}
	time.entry-date.published
	 {
		display: inline-block;
		margin-right: 8px;
	}
	
	/*Icone Auteur */
	a.url.fn.n:before 
	{
		content: '\f304';
		font: normal 16px/1 'Genericons';
		display: inline-block;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: text-bottom;
	}
	a.url.fn.n
	 {
		display: inline-block;
		margin-right: 8px;
	}

	/*Icone Commentaires*/
	.comments-link a::before
	{
		content: '\f300';	
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font: normal 16px/1 Genericons;
		vertical-align: text-bottom;
	}
	.comments-link a
	 {
		display: inline-block;
		margin-right: 8px;
	}
	
	
/*---------6.MENU----------*/
	/*Hauteur du menu*/
	#masthead .wrap
	{
		padding-top: 0;
		padding-bottom: 0;
	}
	/*Au passage de la souris ombre noire */
	#top-menu li:hover 
	{
		box-shadow: 0 0 6px black;
	}
	/*Largeur du menu*/
	.navigation-top .wrap 
	{
	max-width: 1100px;
	}
	
	/*Couleur du texte de la barre principale menu*/
	.navigation-top a
		{
		color: white;
		}
	/*Couleur du texte de la barre principale menu (version mobile)*/
	@media screen and (max-width: 48em)
	{
		button.menu-toggle
		{
		color: white;
		}
		.navigation-top a
		{
		color: #666666;
		}
	}
	
	
	/*Couleur du texte des sous-menu*/
	ul.sub-menu a 
	{
    color: #444444;
	}
	/*Couleur du texte de la barre principale menu*/

	/*Couleur de la barre du menu*/
	.navigation-top  
	{
	background: black;
	border: none;
	}
	/*Couleur du contour de la barre du menu (version mobile)*/
	nav#site-navigation {
    border: solid 1px;
    border-color: black;
	}

	/*Defillement sous-menu*/
	.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul
	{
    height: 400%;
    overflow: scroll;
	}

	
/*---------7.FIL D ARIANE----------*/
	/*Disposition du texte*/
	p#breadcrumbs
	{
		padding: 0.5em;
		border: solid 0px #4DC8EB;
		font-size: 0.75em;
		text-transform: uppercase;
		text-align: center;
		background-color: #4DC8EB;
	}
	
	/*texte du fil*/
	p#breadcrumbs a 
	{
		color: #FFFFFF;
	}
	/*texte page actuelle*/
	strong.breadcrumb_last 
	{
		font-weight: bold;
		color: #FFFFFF;
	}
	/*texte "/" entre les pages */
	p#breadcrumbs span:first-of-type
	{
    color: #FFFFFF;
	}
	

/*---------8.WIDGET CITATIONS----------*/
	/*Contour et couleur de fond*/
	section#quotescollection-3
	{
		padding: 2em;
		border-radius: 1em;
		background: white;
	}
	/*On "masque" suite sitation en utilisant la meme couleur pour le texte et pour le fond*/
	a.next-quote-link
	{
		display: table-column;
		color: white;
	}
	/*On reajuste les marges du block pour obtenir un resultat homogene*/
	section#quotescollection-3 
	{
		padding-bottom: 1.4em;
		padding-top: 1.4em;
		padding-left: 1.4em;
		padding-right: 1.4em;

	}
	/*Nom de l'auteur à droite*/
	.attribution 
	{
    text-align: right;
	}


/*---------9.FOOTER----------*/
/*Couleur de fond et taille du fond*/ 
	.site-footer .wrap
	{
		background: #4DC8EB;
		padding-bottom: 1em;
   		padding-top: 0;
	}
/*Saut de ligne apres widget citation seulement*/
section#mailpoet_form-3 
	{
    padding-bottom: 1em;
	}
/*Saut de ligne apres widget citation et newsletter*/
	.site-footer .widget-area 
	{
    padding-bottom: 1em;
	}
/*Couleur du texte de copyright (normal et au passage de la souris)*/
	.site-info a 
	{
    color: #000000;
    box-shadow: inset 0 -1px 0 rgb(0 0 0);
	}
/*Couleur des widget reseaux sociaux (normal et au passage de la souris)*/
.social-navigation a 
   {
    background-color: #000000;
   }
  .social-navigation a:hover
   {
    background-color: #6F6F6F;
   }