/*
Theme Name: Starter Block Theme v0.4
Theme URI: https://jakson.co/
Author: Jakson
Author URI: https://jakson.co/
Description: 
Requires at least: 6.0
Tested up to: 6.5-RC3-57856
Requires PHP: 5.7
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blank-block-starter-v0-4
Tags: block-patterns, full-site-editing
*/

/*  Smoot Scroll */
html {
	scroll-behavior: smooth;
}

/*  Reduced motion prefs  */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/*  Navigation Block Breakpoint. Credit: https://wpdocs.io/  ============= inutile, pas de menu hamburger
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: block !important;
}

body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none !important;
}

@media (min-width: 800px) {
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
		;
	}

	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
	}
} */

/* Fixes for Core Weirdnress whereby auto padding is applied that can drive you a litle bit nuts - better to add your own when and where you need it! */
.has-global-padding>.alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid))> :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]), p, h1, h2, h3, h4, h5, h6, ul, ol) {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/*  Stop core margin top on groups and others */
/* semble mettre le brin dans les espacement de blocs de la carte de visite contact */
/*.wp-block-group,  
.wp-block-columns,
.wp-block-cover {
	margin-block-start: 0; 
} */

/* Remove underlines / show on hover  */
a {
	text-decoration: none !important;
}

a:hover:not(.wp-block-site-title a, .wp-block-button__link.wp-element-button) {
	text-decoration: underline !important;
} 

/* Search Button default: color */
.wp-block-search__button.wp-element-button {
	color: var(--wp--preset--color--base);
}

/* Button hover 
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
} */

/* ------- Hide the Page Title in the Editor - it can get anoying! ------- */
 .editor-editor-canvas__post-title-wrapper.edit-post-visual-editor__post-title-wrapper.has-global-padding h1 {
	display: none;
} 

/* ============================================== ajouté par dja ============================================== */
/* largeur mini d'écran sans débordement horizontal : 350px */

/* redéfinition préçise du dégradé vertical beige et blanc (les réglages de l'éditeur ne sont pas précis) */
/* page ACCUEIL REPARATION RESTAURATION PASSION */
:root { --wp--preset--gradient--custom-sections-2-couleurs: linear-gradient(90deg,#efebe8 25%,#ffffff 25%) !important; }

/* ne pas afficher */
/* pour les TESTs */
.dja-no-display { display: none !important; }

/* texte justifié à droite et à gauche */
/* page A PROPOS */
.dja-texte-justifie ,
.dja-texte-justifie p { text-align: justify; }


/* ------------ REGLAGE ENTETE ------------ */
/* ======================================== */

/* afficher l'entrée courante du menu en rouge */
.dja-navigation-principale .current-menu-item {	color: #d32b32; }

/* ------------ hauteurs sticky ------------ */
/* Définition des variables de hauteur des blocs sticky d'entête 
 * utilisées pour définir le décalage haut pour l'affichage des menus secondaires sticky (via css) */
:root {
	--dja-ht-admin-bar: 0px;			/* modifié si session admin */
	--dja-ht-bande-rouge: 32px;
	--dja-ht-menu-scrolle: 70px; 		/* modifié en responsive */
}

/* ------------ si session admin */
:root:has(.admin-bar) { --dja-ht-admin-bar: 32px; } 
@media (max-width:782px) { :root:has(.admin-bar) { --dja-ht-admin-bar: 46px; }}
/* la barre d'admin n'est plus sticky en dessous de 600px */
@media (max-width:600px) { :root:has(.admin-bar) { --dja-ht-admin-bar: 0px; }}


/* ------------ au SCROLL ------------ */
/* le script js.js permet d'ajouter la classe dja-is-scroll à .dja-surveille-scroll quand le scroll est > 100px */
/* (il faut la classe dja-surveille-scroll sur le bloc logo) */

/* diminuer la hauteur du logo */
.dja-surveille-scroll.dja-is-scroll img { width: 50px !important; }
/* en douceur */
.dja-surveille-scroll img ,
.dja-surveille-scroll.dja-is-scroll img { transition: all 0.3s ease-in-out; }


/* ------------ RESPONSIVE ------------ */
/* ------------ tablette */
@media (max-width:1150px) { 
	/* diminuer la hauteur du logo */
	.dja-surveille-scroll img { width: 50px !important; 	margin: 5px 0 !important; }
	
	/* réduction padding */
	.dja-ligne-menu-entete , .dja-ligne-rouge-entete { padding: 0 3vw !important; }

	/* garder la place à gauche pour le logo si débordement */
	.dja-surveille-scroll a { width: 70px !important; }

	/* le menu reste sur une seule ligne, débordement caché scrollable */
	.dja-navigation-principale { overflow: scroll ;		text-wrap: nowrap ; }

	/* modif variables hauteurs sticky */
	:root { --dja-ht-menu-scrolle: 60px; } 
} 

/* ------------ mobile */
/* cacher les icones RS de la bande rouge */
@media (max-width:625px) { .dja-hidden-mobile { display: none !important; } }

/* réduire la police de la bande rouge */
@media (max-width:380px) { .dja-ligne-rouge-entete p { font-size: 13px !important; } }

/* réduire le padding */
@media (max-width:360px) { .dja-ligne-menu-entete , .dja-ligne-rouge-entete { padding: 0 1vw !important; } }


/* ------------ REGLAGE FOOTER ------------ */
/* ======================================== */

/* suppression de la marge du footer */
footer { margin-block-start: 0; }

/* ------------ bouton back-to-top */
/* il s'agit d'une icone, avec la classe dja-bouton-scroll-to-top */
/* l'opacité passe de 0 à 1 au scroll via le script js */
.dja-bouton-scroll-to-top {
	position: fixed;
	bottom: 10vh;
	right: 10px;
	opacity: 0;
	transition: all 1s;
/*	width: 50px;
	height: 50px;*/
	z-index: 100;
}


/* ------------ REGLAGE COMMUN AUX PAGES ------------ */
/* ================================================== */

/* ------------ ANIMATIONS ------------ */
/* bannieres hautes */
@keyframes slidedown {
	0%{ transform: translateY(-4%); /*opacity: 0.7; */}
	100%{}
}
.dja-banniere-haut { animation-name: slidedown; animation-duration: 1000ms;	animation-delay: 0ms; animation-timing-function: ease-in-out; animation-iteration-count: 1;}

/* bannieres basses */
/* l'animation ne doit se déclencher que lorsque la banière est visible */
/* il faut positionner .dja-scroll-declenche sur la bannière pour récupérer la classe .dja-visible via le script JS */
@keyframes slideup {
	0%{ transform: translateY(10%); /*opacity: 0.7; */}
	100%{ }
}
.dja-scroll-declenche.dja-visible { animation-name: slideup; animation-duration: 1000ms; animation-delay: 0ms; animation-timing-function: ease-in-out; animation-iteration-count: 1;}

/* sous menus */
@keyframes slidedown-menu {
	0%{ transform: translateY(-50%); opacity: 0; }
	50%{ transform: translateY(-50%); opacity: 0; }
	100%{ }
}
.dja-anim-slidedown { animation-name: slidedown-menu; animation-duration: 2000ms; animation-delay: 0ms; animation-timing-function: ease-in-out; animation-iteration-count: 1;}


/* ------------ OFFSET STICKY MENUS SECONDAIRES ------------  */
/* par défaut le groupe est épinglé en haut de l'écran, il faut ajouter à l'offset la hauteur de l'entête (épinglée elle aussi) */
.dja-menu-sec-sticky { 
	top: calc( var(--dja-ht-admin-bar) + var(--dja-ht-bande-rouge) + var(--dja-ht-menu-scrolle) ) ; 
	overflow-y: hidden; /* pour masquer le débord du à l'animation */
} 


/* ------------ BANNIERES ------------ */
/* ------------ hauteur des bannières */
.dja-banniere-haut { height: 60vh !important; max-height: 475px !important; }
.dja-banniere-bas { height: 50vh !important; max-height: 475px !important; }

/* ------------ ombre texte  */
.dja-banniere-haut * , .dja-banniere-bas * { text-shadow: 0.08em 0.08em 0.08em #000000; }

/* ------------ animation au survol du bouton, y compris celui du formulaire (.dja-envoi)  */
.dja-bouton a {
	transition: all .3s ease-in-out ; 
}

.dja-bouton a::after {
	content: '>';
	position: absolute;
	margin-left: 10px;
	opacity: 0;
}

.dja-bouton a:hover {
	padding-right: 30px;
	border-radius: 4px !important;
}

.dja-bouton a:hover::after {
	transition: all .3s ease-in-out ; 
	opacity: 1;
}

/* ------------ IMAGES ------------ */
/* couleur de fond de la visionneuse photo */
.scrim { background-color: rgba(0,0,0,0.9) !important; }


/* ------------ GALERIES ------------ */
/* lightbox - ajout marge, liseret blanc et accentuation ombre */
#baguetteBox-overlay .full-image img {
	border: 1px solid white;
	box-shadow: 0px 2px 35px 40px black !important;
	max-width: 96%;
	max-height: 96%;
}

/* régler le ratio selon l'orientation */
.dja-galerie-portrait img { aspect-ratio: 3 / 4 ; }
.dja-galerie-paysage img { aspect-ratio: 4 / 3; }

/* conserver une taille d'image identique sur les lignes non remplies */
.dja-galerie-portrait figure , .dja-galerie-paysage figure { flex-grow: 0 !important; }

/* ------------ Responsive portrait */
/* la galerie est réglée sur 5 images par lignes, WP prévoit seulement le passage à 2 à partir de 600px */
/* passage sur 4 images / ligne */
@media (max-width: 980px) { .dja-galerie-portrait .wp-block-image { width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px)*.75) !important; }}

/* passage sur 3 images / ligne */
@media (max-width: 750px) { .dja-galerie-portrait .wp-block-image { width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667) !important;} }

/* passage sur 2 images / ligne */
@media (max-width: 600px) { .dja-galerie-portrait .wp-block-image { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.5) !important; } }

/* passage sur 1 images / ligne */
@media (max-width: 450px) { .dja-galerie-portrait .wp-block-image { width: 100% !important; } }

/* ------------ Responsive paysage */
/* passage sur 3 images / ligne */
@media (max-width: 980px) { .dja-galerie-paysage .wp-block-image { width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667) !important;} }

/* passage sur 2 images / ligne */
@media (max-width: 767px) { .dja-galerie-paysage .wp-block-image { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.5) !important; } }

/* passage sur 1 images / ligne */
@media (max-width: 479px) { .dja-galerie-paysage .wp-block-image { width: 100% !important; } }


/* ------------ REGLAGE PAGE ACCUEIL ------------ */
/* ============================================== */

/* ------------ Colonnes Intro ------------ */
/* RESPONSIVE - (breakpoint empilement initial de WP à 781px) */
/* vue tablette -- empilé avec image à 50 % de largeur de 780 à 980px */
@media (max-width: 980px){
	.dja-col-image-text:not(.is-not-stacked-on-mobile)>.dja-col1-image {
			flex-basis: 50% !important;
	}

	.dja-col-image-text:not(.is-not-stacked-on-mobile)>.dja-col2-text {
		flex-basis: 100% !important;
	}

	.dja-col-image-text:not(.is-not-stacked-on-mobile)>.dja-col2-text p {
		padding-left: 10vw !important;
		padding-right: 10vw !important;
	}

	.dja-col-image-text:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}
}
/* vue mobile -- empilé avec image à 75 % de largeur jqa 780px */
@media (max-width: 780px){
	.dja-col-image-text:not(.is-not-stacked-on-mobile)>.dja-col1-image {
		flex-basis: 75% !important;
		flex-grow: 0;
	}
}


/* ------------ grille 4 blocs services */
/* zoom au survol */
.dja-zoom-hover { transition: transform .2s ease-in-out ; } /* Animation */

.dja-zoom-hover:hover {
	box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.3) !important;
	transform: scale(1.01) !important;
}

/* gap horizontal */
.dja-grille { column-gap: clamp(30px,4%,48px);}

/* RESPONSIVE - passage à 2 colonnes/ligne , puis 1 */
@media (max-width:980px) { .dja-grille { grid-template-columns: repeat(2, minmax(0, 1fr)) ;	} }
@media (max-width:480px) { .dja-grille { grid-template-columns: repeat(1, minmax(0, 1fr)) ;	} } 


/*  marge carte visite */
@media (max-width: 400px){ .dja-groupe-contact { margin: auto -20px !important;	} }

/* ------------ centrage googlemaps dans son conteneur */
.dja-googlemaps iframe { max-width:100% !important; }


/* ------------ REGLAGE PAGE MECANIQUE & CARROSSERIE ------------ */
/* ============================================================== */

/* ------------ RESPONSIVE ------------ */
/* changer le breakpoint colonne de 781px (natif WP) à 981px (idem divi) */
@media (max-width:980px) {
	.dja-mod-breakpoint > .wp-block-column { flex-basis: 100% !important; }
	.dja-mod-breakpoint { flex-wrap: wrap !important; }
}


/* ------------ REGLAGE PAGE REPARATION ------------ */
/* =================================================== */

/* ------------ REGLAGE PAGE RESTAURATION ------------ */
/* =================================================== */

/* ------------ RESPONSIVE images intro */
@media (max-width: 980px) { .dja-image-intro-droite { max-width: 70%; } }
@media (max-width: 768px) { .dja-image-intro-droite { max-width: 100%; } }

/* ------------ REGLAGE PAGE PASSION ------------ */
/* ============================================== */

/* ------------ REGLAGE PAGE CONTACT ------------ */
/* ============================================== */

/* bouton du formulaire */
p:has(.dja-envoi) { 
	text-align: center;
}

.dja-envoi {
	background-color: #d32b32;
	color: white;
	padding: 15px 20px;
	transition: all .3s ease-in-out ; 
	font-size: 14px !important;
	border-width: 0px;
	font-weight: 500;
}

.dja-envoi:hover {
	padding: 15px 25px;
	border-radius: 4px !important;
	font-size: 15px !important;
}


/* SUITE à traiter
/* ====================================================================== */



/* ------------ modifier la largeur des images déco sur tablette/mobile ------------ 
@media (max-width:781px) {
	.dja-img-dimension {
/*		width: clamp(0 ,75% , 450px) !important;
		width: 75% !important;
		max-width: 450px !important;
		height: auto !important;
	}
}*/