/*
Theme Name: Jazz sous les platanes
Theme URI: 
Author: Zoé
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jazz-sous-les-platanes

/* 
	SOMMAIRE

	DEFINITION DU REM
	BOUTON MENU MOBILE PERSO
	NAV MOBILE PERSO
	LOGO ADAPTATIF
	SOUS NAV LIEN ACTIF
	REGLAGES TITRES H2
	ALIGNER SVG A DROITE
	REGLAGES SVG SECTIONS
	REGLAGES HERO DES PAGES MOBILE
	COLONNES ALTERNEES
	FORMULAIRE DE CONTACT
	ANIMATION HERO SVG ACCUEIL
	SECTIONS COMBATS
	FAQ
	PAGE 404
	BOUTON TOP
	LOGO RS
	REGLAGE TAILLE LIENS NOTES BAS DE PAGE
	BLOC CITATION
	BLOC DE LISTE
	TEXTURE
	BLOG
	CONTACT
	FOOTER
	
*/




* {
	box-sizing: border-box;
}




/* Focus styles 
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}*/

/* Increase the bottom margin on submenus, so that the outline is visible.
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
} */

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text.
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
} */

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. 
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}*/

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}*/

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934

.more-link {
	display: block;
}*/










/* ----------------------------
DÉFINITION DU REM
16px jusqu’à 379px
puis augmentation progressive jusqu’à 18px
---------------------------- */
html {
	font-size: 16px;
}

@media (min-width: 380px) {
	html {
		font-size: clamp(16px, 16px + 0.12vw, 18px);
	}
}




/* ------------------------------------------------------------------------
	CHARGEMENT TYPO ADOBE FONTS
------------------------------------------------------------------------ */

@font-face {
	font-family: 'Gill Sans Nova';
	src: /*local('Gill Sans Nova UltraBold'), local('Gill-Sans-Nova-UltraBold'),*/
		url('/assets/fonts/gill-sans-nova/gill-sans-nova-1000-normal.woff2') format('woff2');
	font-weight: 1000;
	font-style: normal;
}

@font-face {
	font-family: 'Gill Sans Nova';
	src: /*local('Gill Sans Nova UltraBold'), local('Gill-Sans-Nova-UltraBold'),*/
		url('/assets/fonts/gill-sans-nova/gill-sans-nova-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

/* ------------------------------------------------------------------------
	Fin de CHARGEMENT TYPO ADOBE FONTS
------------------------------------------------------------------------ */













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

#logo-jslp {
	display: block;
	height: 3rem;
}



#logo-jslp .cls-1 {
	fill: var(--wp--preset--color--contraste-2);
}


.wp-block-template-part nav ul li a {
	text-decoration: none;
}

.wp-block-template-part nav ul li a:hover {
	color: var(--wp--preset--color--contraste-2) !important;
}

/* ------------------------------------------------------------------------
	Fin de HEADER
------------------------------------------------------------------------ */











/* ------------------------------------------------------------------------
	LOGO ADAPTATIF
------------------------------------------------------------------------ */
#logo-mobile {
	display: block;
	height: 3rem;
}

#logo-ordi {
	display: none;
	height: 5rem;
}

@media (min-width: 600px) {
	#logo-mobile {
		display: none;
	}

	#logo-ordi {
		display: block;
	}
}

/* ------------------------------------------------------------------------
	Fin de LOGO ADAPTATIF
------------------------------------------------------------------------ */
















/* -----------------------------------------------------------
	BOUTON MENU MOBILE PERSO
----------------------------------------------------------- */
#bouton-menu-mobile {
	border: none;
	background-color: transparent;
	width: 3rem;
	height: 3rem;
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 1.5rem;
}

.bouton-menu-defaut {
	background-image: url(assets/images/icone-menu-ouvrir.svg);
}

.bouton-menu-fermer {
	background-image: url(assets/images/icone-menu-fermer.svg);
}

@media (min-width: 1080px) {
	#bouton-menu-mobile {
		display: none;
	}
}

/* -----------------------------------------------------------
	fin de BOUTON MENU MOBILE PERSO
----------------------------------------------------------- */











/* -----------------------------------------------------------
	NAV MOBILE PERSO
----------------------------------------------------------- */
@media (max-width: 1080px) {

	/* empêcher le défilement du document quand le menu est ouvert */
	html.no-scroll {
		overflow-y: hidden;
	}

	/* bouton hamburger */
	header nav.wp-block-navigation {
		display: none;
		/* hauteur du header : 5.6rem */
		height: calc(100dvh - 5.6rem);
		overflow-y: auto;
	}

	/* nav */
	header nav.wp-block-navigation ul.wp-block-navigation__container {
		display: block;
	}

	/* nav liste des pages */
	header nav.wp-block-navigation ul.wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		/* hauteur du header : 5.6rem
		min-height: calc(100dvh - 5.6rem); */
		/* typographie */
		order: 2;
		font-size: 1.5rem;
	}

	/* bouton de la nav */
	header nav.wp-block-navigation .wp-block-buttons {
		margin-top: var(--wp--preset--spacing--40);
		order: 1;
	}

	/* nav ouverte */
	header nav.wp-block-navigation.menu-ouvert {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
}



/* -----------------------------------------------------------
	Fin de NAV MOBILE PERSO
----------------------------------------------------------- */





/* -----------------------------------------------------------
	PAGE ACTIVE
----------------------------------------------------------- */



.page-id-501 .wp-block-template-part nav ul li:nth-child(1),
.page-id-435 .wp-block-template-part nav ul li:nth-child(1),
.page-id-13 .wp-block-template-part nav ul li:nth-child(1),
.page-id-228 .wp-block-template-part nav ul li:nth-child(1),
.page-id-296 .wp-block-template-part nav ul li:nth-child(1),
.page-id-15 .wp-block-template-part nav ul li:nth-child(2),
.page-id-17 .wp-block-template-part nav ul li:nth-child(4),
.page-id-19 .wp-block-template-part nav ul li:nth-child(3)  {
	color: var(--wp--preset--color--contraste-1);
	background-color: var(--wp--preset--color--base-sombre);
	padding: .5rem;
}



/* -----------------------------------------------------------
	Fin de PAGE ACTIVE
----------------------------------------------------------- */





/* -----------------------------------------------------------
	SVG MULTIPLES
----------------------------------------------------------- */


.svg-multiples {
	background-image: url(assets/images/note-1.svg), url(assets/images/note-2.svg);
	background-repeat: no-repeat;
	background-size: 2rem;
	background-position: 62% 80%, 39% 20%;
}


@media (min-width: 1029px) and (max-width: 1230px) {
	.svg-multiples {
		background-image: url(assets/images/note-1.svg), url(assets/images/note-2.svg);
		background-repeat: no-repeat;
		background-size: 2rem;
		background-position: 62% 80%, 39% 20%;
	}
}

@media (min-width: 900px) and (max-width: 1028px) {
	.svg-multiples {
		background-image: url(assets/images/note-1.svg), url(assets/images/note-2.svg);
		background-repeat: no-repeat;
		background-size: 1rem;
		background-position: 62% 80%, 39% 20%;
	}
}


@media (min-width: 830px) and (max-width: 899px) {
	.svg-multiples {
		background-image: url(assets/images/note-1.svg), url(assets/images/note-2.svg);
		background-repeat: no-repeat;
		background-size: 1rem;
		background-position: 62% 80%, 39% 20%;
	}
}

@media (min-width: 683px) and (max-width: 829px) {
	.svg-multiples {
		background-image: url(assets/images/note-1.svg), url(assets/images/note-2.svg);
		background-repeat: no-repeat;
		background-size: 1rem;
		background-position: 62% 80%, 39% 20%;
	}
}

@media (max-width: 682px) {
	.svg-multiples {
		background-image: url(assets/images/note-1.svg), url(assets/images/note-2.svg);
		background-repeat: no-repeat;
		background-size: 1rem;
		background-position: 72% 80%, 29% 20%;
	}
}

/* -----------------------------------------------------------
	Fin de SVG MULTIPLES
----------------------------------------------------------- */




/* ----------------------------------------------------------------------------------
COLONNES PROJETS MOBILE HERO
----------------------------------------------------------------------------------*/
@media (max-width: 782px) {

	.colonnes-projets-mobile h1,
	.colonnes-projets-mobile p {
		text-align: left;
	}

	.colonnes-projets-mobile {
		border-right: 0px;
	}

}

/* ----------------------------------------------------------------------------------
Fin de COLONNES PROJETS MOBILE HERO
----------------------------------------------------------------------------------*/








/* ----------------------------------------------------------------------------------
     EMPLACEMENT ESPACES VIDES BENTO UJUC ET KIWI
----------------------------------------------------------------------------------*/

.empilement-ujuc a {
	font-family: 'Cabin', sans-serif;
	color: #F6EFD7;
	font-size: 2rem;
}

@media (max-width: 782px) {
	.empilement-ujuc a {
		font-size: 1.5rem;
	}


}

.empilement-ujuc {
	background-color: #9A191A;
	cursor: pointer;
}

.empilement-ujuc-2 {
	background-color: #52422C;
}

.empilement-kiwi-2 {
	background-color: #996600;
}


/* ----------------------------------------------------------------------------------
     Fin de EMPLACEMENT ESPACES VIDES BENTO UJUC ET KIWI
----------------------------------------------------------------------------------*/




/* ----------------------------------------------------------------------------------
       HOVER CARDS PROJETS
----------------------------------------------------------------------------------*/


.card1,
.card2,
.card3,
.card4 {
	transition: all 0.5s ease;
}




.card1:hover {
	transform: scale(1.01);
	box-shadow: 0 0 20px var(--wp--preset--color--accent-2);
	border-radius: .8rem;
}


.card2:hover {
	transform: scale(1.01);
	box-shadow: 0 0 20px var(--wp--preset--color--accent-1);
	border-radius: .8rem;
}

.card3:hover {
	transform: scale(1.01);
	box-shadow: 0 0 20px var(--wp--preset--color--accent-1);
	border-radius: .8rem;
}

.card4:hover {
	transform: scale(1.01);
	box-shadow: 0 0 20px var(--wp--preset--color--accent-2);
	border-radius: .8rem;
}

/* ----------------------------------------------------------------------------------
      Fin de HOVER CARDS PROJETS
----------------------------------------------------------------------------------*/



/* ----------------------------------------------------------------------------------
COLONNES ALTERNEES
----------------------------------------------------------------------------------*/

@media screen and (max-width: 782px) {

	.colonnes-ordre-mobile .wp-block-column:nth-child(1) {
		order: 2;

	}

	.colonnes-ordre-mobile .wp-block-column:nth-child(2) {
		order: 1;

	}
}



/* ----------------------------------------------------------------------------------
Fin de COLONNES ALTERNEES
----------------------------------------------------------------------------------*/




/* -----------------------------------------------------------
	FORMULAIRE DE CONTACT
----------------------------------------------------------- */
/* Dans le cas où box-sizing: border-box; n’est pas intégré au code CSS de votre thème */
.wpcf7-form,
.wpcf7-form *,
.wpcf7-form *:before,
.wpcf7-form *:after {
	box-sizing: border-box;
}

/*Général */
.wpcf7-form {
	padding: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--base-clair);
	border-radius: .5rem;
}

.wpcf7-form label {
	color: var(--wp--preset--color--base-sombre);
}

.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form textarea {
	width: 100%;
	padding: .5rem;
	margin-bottom: .75rem;
	border: .25rem solid var(--wp--preset--color--base-clair);
	color: var(--wp--preset--color--contraste-3);
	font-size: 1rem;
	/* Enlever styles par défaut */
	outline: none;
	appearance: none;
	box-shadow: none;
	border-radius: 0;
	/*Transition*/ 
	transition: border 0.3s;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	border: .25rem solid var(--wp--preset--color--accent-2);
	/* Enlever styles par défaut */
	outline: none !important;
	outline-width: 0 !important;
}

.wpcf7-form textarea {
	height: 9rem;
	resize: vertical;
	/* redimensionnement possible seulement vertical */
}

.wpcf7-form input[type=submit] {
	padding: .6rem 1rem;
	background-color: var(--wp--preset--color--contraste-2);
	color: var(--wp--preset--color--base-clair);
	font-size: 1rem;
	border-radius: 2rem;
	border: 1px solid transparent;
	cursor: pointer;
}

.wpcf7-form input[type=submit]:hover {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contraste-2);
	border: 1px solid var(--wp--preset--color--contraste-2);
}

/* spécifique à Contact Form 7 */
.wpcf7-list-item.first,
.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form p input[type=text],
.wpcf7-form p input[type=email],
.wpcf7-form p input[type=tel],
.wpcf7-form p textarea {
	margin-bottom: 0;
}

/* -----------------------------------------------------------
	FIN FORMULAIRE DE CONTACT
----------------------------------------------------------- */

































/* ----------------------------
BLOC FAQ
---------------------------- */
.wp-block-details {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--contrast-1);
	border-radius: 1rem;
	transition: background-color .2s;
}

/* état survolé et ouvert */
.wp-block-details:hover,
.wp-block-details[open] {
	background-color: var(--wp--preset--color--contrast-2);
}

/* summary */
.wp-block-details summary {
	font-weight: bold;
	font-size: var(--wp--preset--font-size--l);
	/* supprimer le ::marker flèche par défaut */
	list-style-type: none;
	/* gérer l’alignement de ::before et du contenu */
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

/* supprimer l’outline de summary */
.wp-block-details summary:focus {
	outline: none;
}

/* définir la flèche dans ::before */
.wp-block-details summary::before {
	content: '';
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(assets/images/SVG/fleche-bas.svg);
	/* animation de ::before */
	transition: transform .2s;
}

/* modifier ::before quand details est ouvert */
.wp-block-details[open] summary::before {
	transform: rotate(90deg);
}

/* cacher le marker pour Apple Safari */
.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* ----------------------------
Fin de BLOC FAQ
---------------------------- */






































/* -----------------------------------------------------------
	BOUTON TOP
----------------------------------------------------------- */
.bouton-top {
	display: block;
	position: fixed;
	bottom: 3rem;
	right: 4.2rem;
	width: 3rem;
	height: 3rem;
	cursor: pointer;
}

.bouton-top path {
	fill: var(--wp--preset--color--contraste-2);
}

.bouton-top path:hover {
	fill: var(--wp--preset--color--accent-2) !important;
}

/* -----------------------------------------------------------
	fin BOUTON TOP
----------------------------------------------------------- */



















/* -----------------------------------------------------------
	REGLAGE TAILLE LIENS NOTES BAS DE PAGE 
----------------------------------------------------------- */

.notes-bas-de-page a {
	font-size: var(--wp--preset--font-size--small);
}

/* -----------------------------------------------------------
	Fin de REGLAGE TAILLE LIENS NOTES BAS DE PAGE 
----------------------------------------------------------- */











/* ----------------------------------------------------------------------------------
	BLOC DE CITATION
----------------------------------------------------------------------------------*/
blockquote,
.wp-block-quote {
	--hauteur-guillemets: 3rem;
	position: relative;
	border: none;
	padding: var(--hauteur-guillemets) 0 var(--hauteur-guillemets) 0;
}

blockquote::before,
blockquote::after {
	position: absolute;
	content: ' ';
	display: inline-block;
	width: var(--hauteur-guillemets);
	height: var(--hauteur-guillemets);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

blockquote::before {
	top: 0;
	left: 0;
	background-image: url(assets/images/SVG/guillemets.svg);
}

blockquote::after {
	bottom: 1.5rem;
	right: 0;
	background-image: url(assets/images/SVG/guillemets-fermer.svg);
}

/* ----------------------------------------------------------------------------------
	fin BLOC DE CITATION
----------------------------------------------------------------------------------*/












/* ----------------------------------------------------------------------------------
	BLOC DE LISTE
----------------------------------------------------------------------------------*/
.liste-cible {
	margin: 0;
	padding: 0;
	list-style-type: none;
	/*padding: 1.5rem;
	list-style-image: url(assets/images/SVG/puce-cible.svg);*/
}

/*
.liste-cible li::marker {
	font-size: 1.5rem;
}
	*/
.liste-cible li {
	padding-left: 1.75rem;
	background-position: top .30rem left;
	background-repeat: no-repeat;
	background-size: 1.175rem;
	background-image: url(assets/images/SVG/puce-cible.svg);
}

/* ----------------------------------------------------------------------------------
	Fin de BLOC DE LISTE
----------------------------------------------------------------------------------*/























/* ----------------------------------------------------------------------------------
	TEXTURES
----------------------------------------------------------------------------------*/
.bruit {
	background-image: url(assets/images/bruit.svg);
}

/* ----------------------------------------------------------------------------------
	fin de TEXTURES
----------------------------------------------------------------------------------*/







/* ----------------------------------------------------------------------------------
	BLOG
----------------------------------------------------------------------------------*/
/*
.blog .wp-block-post-title :where(a),
.archive .wp-block-post-title :where(a),
.single-post .wp-block-post-title :where(a) {
	display: unset;
}


.wp-block-query h2,
.blog h2 {
	font-size: var(--wp--preset--font-size--x-large);
	à adapter 
	list-style: 1.3;
}

.wp-block-query h3,
.blog h3 {
	font-size: var(--wp--preset--font-size--large);
}

.blog .wp-block-post-excerpt,
.archive .wp-block-post-excerpt {
	margin-block-start: .6rem;
}

.wp-block-categories {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1rem;
}

.wp-block-categories a {
	display: inline-block;
	background-color: var(--wp--preset--color--contrast-2);
	border-radius: .5rem;
	border-color: transparent;
	border-width: 2px;
	border-style: solid;
	color: var(--wp--preset--color--contrast-1);
	font-weight: 400;
	padding-top: var(--wp--preset--spacing--10);
	padding-right: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--10);
	padding-left: var(--wp--preset--spacing--20);
}

.wp-block-categories a:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-1);
	border: 2px solid var(--wp--preset--color--contrast-1);
}


.wp-block-query ul li .survol-groupe:hover {
	transform: translateY(-10px);
	transition: 0.2s ease-out;
}

.wp-block-query ul li .wp-block-post-excerpt__more-link {
	border: 2px solid var(--wp--preset--color--contrast-1);
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem;
	padding-top: .5rem;
	border-radius: .5rem;
}

.wp-block-query ul li .wp-block-post-excerpt__more-link:hover {
	border: 2px solid var(--wp--preset--color--contrast-1);
	background-color: var(--wp--preset--color--base);
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem;
	padding-top: .5rem;
	border-radius: .5rem;
}

/* ----------------------------------------------------------------------------------
	fin BLOG
----------------------------------------------------------------------------------*/






















/* ----------------------------------------------------------------------------------
	FOOTER
----------------------------------------------------------------------------------*/
footer {
	margin-top: 0 !important;
}





#logo-jslp-footer {
	width: 5rem;

}


#logo-jslp-footer .cls-1 {
	fill: var(--wp--preset--color--contraste-1);
}



#instagram, #linkedin {
	width: 3rem;
}



.mentions-politique a {
	font-size: medium;
}
/* ----------------------------------------------------------------------------------
	fin de FOOTER
----------------------------------------------------------------------------------*/