:root {
}

/*


		GÉNÉRAL


*/
body {
	font-family: Arial !important;
}

body * {
	font-size: 20px;
}

/* Cacher barre inscription */
#actionbar {
	display: none;
}

/* menu est fixed */
header {
	position: fixed;
	width: 100%;
	z-index: 10000;
	top: 0;
}

main .entry-content {
	margin-top: 120px !important;
}

/* couleur sur back image entete */
.entete,
.entete.entete-accueil {
	background-color: rgba(0,0,0, 40%);
}

/* padding sur entete de l'accueil */
.entete.entete-accueil {
	padding: 15% 0;
}

/* pading sur l'entete des autres pages */
.entete {
	padding: 10% 0;
}

body .wp-site-blocks {
	padding-left: 0;
	padding-right: 0;
}

body .wp-site-blocks .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body .entry-content h1 {
	font-size: 2em;
	font-weight: bold;
}

body .entry-content h2 {
	font-size: 1.5em;
	margin-bottom: 1em;
}

body h1.wp-block-heading {
	font-size: 2.5em;
}

body .entry-content p {
	margin-block-start: 1em;
}

/* padding block group */
.entry-content.wp-block-post-content > .wp-block-group {
	padding: 2% 5%;
	margin-block-start: 0;
}

/* Enlever les espaces inutiles */
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

/* ENlever l'espace inutile à la fin de toutes les pages */
.wp-block-group .wp-block-spacer {
	height: 0 !important;
}

@media (max-width: 1024px) {
	/* padding block group */
	.entry-content.wp-block-post-content > .wp-block-group {
		padding: 3% 6%;
	}
}

@media (max-width: 767px) {
	/* h1 entete */
	body .entry-content h1.wp-block-heading {
		font-size: 2em;
	}
	
	/* titre h2 */
	body .entry-content h2 {
		font-size: 1.25em;
	}
	
	/* taille titre articles */
	article.category-web .entry-title a {
		font-size: 16px;
	}
	
	/* Entete */
	.entete {
		padding: 20% 0;
	}
}

@media (max-width: 576px) {
	/* margin-top pareil que hauteur header */
	main .entry-content {
		margin-top: 20% !important;
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: 1em;
	}
}

/*


	FIN GÉNÉRAL


*/
/* 


	HEADER 


*/
/* div logo largeur */
.site-brand {
	width: 20%;
}

body .is-layout-flex {
	flex-wrap: nowrap;
}

/* largeur header menu */
.header-menu {
	width: 80%;
}

.header-background .site-header {
	background-color: transparent !important;
}

body header {
	padding: 0 5%;
	background-color: #0398fc !important;
}

/* column-gap menu principal */
.wp-block-navigation__responsive-container-content .wp-block-navigation__container > * + * {
	margin-left: 2%;
}

header {
	color: white;
}

/* Cacher titre site du header */
header .wp-block-site-title {
	display: none;
}

/* navigation */
header nav ul.wp-block-navigation__container .wp-block-navigation-item a span {
	font-size: 1.25em !important;
}

@media (max-width: 1024px) {
	header nav ul.wp-block-navigation__container .wp-block-navigation-item a span {
		font-size: 1em !important;
	}
}

/* Applique les changements jusqu'à cette taille */
@media (max-width: 767px) {
	/* cacher bouton hamburger */
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: block;
	}
	
	/* Afficher menu */
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		background-color: inherit;
		display: none;
		position: relative;
		width: 100%;
		z-index: auto;
	}
}

/*


	FIN HEADER


*/
/*


	FOOTER


*/
body footer {
	padding: 0 5%;
	background-color: black;
}

/* titre site */
.site-footer-container h1.wp-block-site-title {
	font-size: 1.5em !important;
}

/* icone reseaux */
.wp-block-social-links .wp-social-link svg {
	height: 2em;
	width: 2em;
}

@media (max-width: 480px) {
	/* logo footer */
	.site-footer-container .wp-block-image a .wp-image-251 {
		width: 100px;
		height: 100px;
	}
}

/*

	
	FIN FOOTER


*/
/*

	Banniere en savoir plus

*/
/* Banniere */
.banniere {
	background-color: rgba(0,0,0, 50%);
	padding: 5% 0;
}

/* texte banniere */
.banniere p {
	color: white !important;
}

.entry-content .wp-block-group.banniere-image {
	background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-3912948.jpeg');
	background-position: 0 50%;
	background-size: cover;
	padding: 0 !important;
}

/* Bouton de la banniere */
.bouton-banniere {
	background-color: transparent;
}

.bouton-banniere.bouton-hover-bleu {
	border-color: white;
	transition: .5s;
}

.bouton-banniere.bouton-hover-bleu:hover {
	border-color: #0398fc;
}

.bouton-banniere .wp-block-button__link {
	background-color: rgba(0,0,0,0) !important;
	color: white !important;
}

.bouton-hover-bleu,
.bouton-hover-bleu button.wp-block-button__link {
	border: 2px solid black;
	background-color: transparent;
	border-radius: 10px;
	transition: .5s;
}

/* AJout transition */
.bouton-hover-bleu:hover a {
	transition: .5s;
}

.bouton-hover-bleu:hover a,
.bouton-hover-bleu button.wp-block-button__link:hover {
	border: 2px solid #0398fc;
	background-color: #0398fc !important;
	color: white !important;
}

.bouton-hover-bleu:hover a {
	background-color: #0398fc !important;
	color: white !important;
	border-color: #0398fc;
}

@media (max-width: 767px) {
	/* Affichage banniere mobile */
	.banniere-image .banniere .wp-block-buttons {
		display: flex;
		flex-wrap: wrap;
	}
	
	/* Boutons banniere mobile */
	.banniere-image .banniere .wp-block-buttons .boutons-banniere {
		width: 100%;
	}
}

/*

	Banniere en savoir plus

*/
/*

    ACCUEIL

*/
@keyframes enteteAccueilDiapo {
	0% {
		background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-5926382.jpeg');
	}
	
	/* DÉbut changement image 1 à image 2 */
	16% {
		background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-5926382.jpeg');
	}
	
	33% {
		background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-3862379.jpeg');
	}
	
	/* DÉbut changement image 1 à image 2 */
	50% {
		background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-3862379.jpeg');
	}
	
	66% {
		background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-3912948.jpeg');
	}
	
	/* Début changement image 2 à image 3 */
	83% {
		background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-3912948.jpeg');
	}
	
	/* Retour à image 1 */
	100% {
		background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-5926382.jpeg');
	}
}

.entete-images-accueil {
	background-position: 0 50%;
	background-size: cover;
	max-width: 100%;
	animation: 15s enteteAccueilDiapo infinite;
	padding: 0 !important;
}

/* Entete des autres page */
.entete-image {
	background-position: 0 50%;
	background-size: cover;
	max-width: 100%;
	background-image: url('https://thomasstpierre.ca/wp-content/uploads/2022/09/pexels-photo-5926382.jpeg');
	padding: 0 !important;
}

@media (max-width: 480px) {
	.bouton-banniere .wp-block-button__link {
		font-size: .8em;
	}
}

/* Connaissances et logiciels */
.connaissances-accueil {
	background-color: #f8f8f8;
}

/* Connaissances */
.connaissances-accueil h3 {
	font-weight: bold;
}

.connaissances-accueil .liste-image {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 2%;
	padding: 0 10%;
}

.connaissances-accueil .liste-image figure {
	width: 14%;
	margin-block-start: 0;
	margin-bottom: 2%;
}

/* Affichage articles */
.realisation-web .wp-block-newspack-blocks-homepage-articles > div {
	display: flex;
	column-gap: 2%;
	flex-wrap: wrap;
}

/* article */
.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article {
	width: 32%;
	box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px, rgba(17, 17, 26, 0.1) 0 8px 24px, rgba(17, 17, 26, 0.1) 0 16px 56px;
	background-color: #f8f8f8;
	border-radius: 2%;
	padding: 1%;
	margin-bottom: 3%;
	transition: all .5s ease;
}

/* image article */
.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article img {
	width: 100%;
	border-radius: 2%;
}

/* transition h2 */
.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article h2 {
	transition: all .5s ease;
}

/* fleche apres titre */
.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article h2 a::after {
	content: "  >";
	color: black;
	transition: all .5s ease;
}

/* hover article */
.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article:hover {
	background-color: #0398fc;
}

.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article:hover h2 {
	color: white;
}

/* fleche */
.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article:hover h2 a::after {
	color: white;
	margin-left: 5%;
}

@media (max-width: 1024px) {
	/* affichage connaissances */
	.connaissances-accueil .liste-image figure {
		width: 23%;
	}
	
	/* Affichage articles */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div {
		column-gap: 2%;
	}
	
	/* article */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article {
		width: 49%;
	}
}

@media (max-width: 767px) {
	/* titre connaissance */
	.connaissances-accueil h3 {
		margin-block-start: 1em;
		margin-block-end: 1em;
	}
	
	/* listes connaissance */
	.connaissances-accueil .liste-image {
		margin-block-start: 1em;
		column-gap: 2%;
	}
	
	/* affichage connaissances */
	.connaissances-accueil .liste-image figure {
		width: 31%;
	}
	
	/* Affichage articles */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div {
		column-gap: 0;
	}
	
	/* article */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}
	
	/* image article */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article figure {
		width: 60%;
	}
	
	/* titre article */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article > .entry-wrapper {
		width: 40%;
	}
}

@media (max-width: 480px) {
	/* listes connaissance */
	.connaissances-accueil .liste-image {
		margin-block-start: 1em;
		column-gap: 10%;
	}
	
	/* affichage connaissances */
	.connaissances-accueil .liste-image figure {
		width: 40%;
		margin-bottom: 5%;
	}
	
	/* Affichage articles */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div {
		column-gap: 0;
	}
	
	/* article */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 6%;
		padding: 4%;
	}
	
	/* image article */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article figure {
		width: 100%;
	}
	
	/* titre article */
	.realisation-web .wp-block-newspack-blocks-homepage-articles > div > article > .entry-wrapper {
		width: 100%;
	}
}

/* 

	PAGE ARTICLES

*/
/*

	PAGE ARTICLE

*/
/* enlever background-color sur header */
.has-vivid-cyan-blue-background-color {
	background-color: transparent !important;
}

/* style de la page */
main:has(> figure) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* Affichage contenu article */
main:has(> figure) > .entry-content {
	margin-top: 120px;
	width: 50%;
}

/* image article */
main:has(> figure) > figure.wp-block-post-featured-image {
	width: 50% !important;
}

/* Cache titre article */
.wp-block-post-title {
	display: none;
}

/* lien github */
.article-code p a {
	font-size: inherit;
	color: #0398fc;
	text-decoration: none;
}

/* Section code */
.article-code .wp-block-code {
	max-height: 60vh;
	background-color: black;
	color: white;
}

/* Cacher tous les éléments de clavardage */
/* Informations de l'auteur, date et categorie */
main .wp-block-template-part {
	display: none;
}

/* Section partage, aime, reblog */
main .entry-content #jp-post-flair {
	display: none;
}

/* Section commentaires */
.wp-block-comments-query-loop {
	display: none;
}

@media (max-width: 1024px) {
	/* style de la page */
	main:has(> figure) {
		display: block;
	}
	
	/* Affichage contenu article */
	main:has(> figure) > figure {
		margin-top: 120px !important;
	}
	
	/* Affichage contenu article */
	main:has(> figure) > .entry-content {
		width: auto;
		margin-top: 0 !important;
	}
	
	/* image article */
	main:has(> figure) > figure.wp-block-post-featured-image {
		width: auto !important;
	}
	
	/* taille code */
	.article-code .wp-block-code code {
		font-size: .75em;
	}
}

@media (max-width: 767px) {
	/* taille code */
	.article-code .wp-block-code code {
		font-size: .6em;
	}
}

@media (max-width: 576px) {
	/* Affichage contenu article */
	main:has(> figure) > figure {
		margin-top: 20% !important;
	}
}

/*

	FIN PAGE ARTICLE

*/
/*

	Contact

*/
/*  */
/* bloc formulaire */
.wp-block-jetpack-contact-form-container.alignfull .wp-block-jetpack-contact-form.formulaire-contact {
	padding: 2% 5%;
	margin-block-start: 0;
	background-color: #f0f0f0;
}

/* enlever marge non voulu */
#contact-form-130 {
	margin-block-start: 0;
}

/* champs du formulaire */
.formulaire-contact input, .formulaire-contact textarea {
	background-color: white;
	padding: 1%;
	border-radius: 15px;
}

/* exclure le bloc du bouton du formulaire du contact*/
.formulaire-contact .bouton-hover-bleu:hover {
	border: 0;
	background-color: transparent !important;
	color: #fff !important;
}

/* Largeur input page contact */
.formulaire-contact input[type=text], .formulaire-contact input[type=email], .formulaire-contact textarea {
	width: 100%;
}

/* Bouton formulaire */
.formulaire-contact .has-tertiary-background-color {
	background-color: white !important;
	border-color: white !important;
}

@media (max-width: 1024px) {
	/* Bouton formulaire */
	.formulaire-contact .has-tertiary-background-color {
		padding: 2% 5%;
	}
}

@media (max-width: 480px) {
	/* bloc texte intro */
	.page .wp-site-blocks .wp-block-group .entry-content .contact-intro {
		padding: 6% 5%;
	}
	
	/* formulaire */
	.wp-block-jetpack-contact-form-container.alignfull .wp-block-jetpack-contact-form.formulaire-contact {
		padding: 5% 10%;
	}
	
	/* Bouton formulaire */
	.formulaire-contact .has-tertiary-background-color {
		padding: 3% 6%;
	}
}

/*

	FIN - Contact

*/
.wp-elements-cbdef830bb6b3d1599f3c4fbfa6b377d a {
	color: white;
}

h1 {
	font-size: 1.5em;
	padding-top: 2%;
}

h2 {
	font-size: 1em;
	font-weight: bold;
}

label, figcaption {
	font-size: 1em;
}

.infos-projet .technologie {
	margin-top: 1% !important;
	text-align: left;
}

.bouton-retour:hover {
	background-color: white;
}

/* Tous les bouton du site */
.bouton-accueil {
	font-size: 2em;
}

/* ENlever le border des boutons de projets */
.wp-block-button.is-style-outline>.wp-block-button__link {
	border: 0;
	padding: .667em 1.333em;
}

.wp-block-button .wp-block-button__link {
	border: 0;
}

.wp-block-navigation.is-responsive:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #0398fc;
	color: white;
}

/* Faire en sorte que le logo à une taille normale et est bien aligner sur mobile */
.wp-site-blocks .site-header .wp-block-site-logo {
	text-align: left;
	margin-bottom: 0;
	margin-top: 0;
	flex-basis: auto;
}

/* max-width elem infos à 100% */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 100%;
}

/* bordure bouton formulaire */
body .wp-block-jetpack-button {
	border: 0;
}

@media (min-width: 400px) {
	.wp-site-blocks .alignleft {
		max-width: 100%;
		border: 0;
	}
}

@media (max-width: 1150px) {
	.wp-block-image.image-entete img {
		width: 90%;
		height: auto;
	}
}

@media (max-width: 767px) {
	h1 {
		font-size: 1.25em;
	}
	
	h2, label, figcaption {
		font-size: .8em;
	}
	
	li span {
		font-size: .8em;
	}
	
	.infos-projet ul li, p {
		font-size: .75em;
	}
	
	/* margin-block elem info projet */
	body .infos-projet > * + * {
		margin-block-start: 5%;
	}
	
	.infos-projet .technologie {
		margin-top: 2% !important;
	}
}

@media (max-width: 599px) {
	.wp-block-navigation__responsive-container-content .wp-block-navigation__container > * + * {
		margin-left: 0;
	}
}