/*
Mobile / Responsive styles
SoHappy Theme Astra Gutenberg
*/

/****************************/
/********DESKTOP ONLY********/
/****************************/
@media (min-width: 981px) {
	.no-tablet,
	.no-mobile {
		display: initial;
	}


	#main-header .header-wrapper,
	#main-header .header-menu,
	#main-header .header-menu ul {
		flex-wrap: nowrap;
	}

	#main-header .header-menu ul {
		gap: clamp(1rem, 1.8vw, 2rem);
	}

	#main-header .header-menu a {
		white-space: nowrap;
	}
}

/****************************/
/**********TABLETTE**********/
/****************************/
@media (max-width: 980px) {
	h1, .entry-content h1, body *:is(.is-h1) {
		font-size: clamp(3.25rem, 7vw, 5rem);
	}
	h1 strong, .entry-content h1 strong, body *:is(.is-h1) strong {
		font-size: clamp(3.75rem, 8vw, 6rem);
	}
	h2, .entry-content h2, body .entry-content *:is(.is-h2) {
		font-size: clamp(2.75rem, 6vw, 4.2rem);
	}
	h2 strong, .entry-content h2 strong, body *:is(.is-h2) strong {
		font-size: clamp(3.25rem, 7vw, 5.1rem);
	}
	h3, .entry-content h3, body .entry-content *:is(.is-h3) {
		font-size: clamp(2.25rem, 5vw, 3.5rem);
	}
	h4, .entry-content h4, body .entry-content *:is(.is-h4) {
		font-size: clamp(2rem, 4vw, 2.8rem);
	}
	h5, .entry-content h5, body .entry-content *:is(.is-h5) {
		font-size: clamp(1.75rem, 3.5vw, 2.4rem);
	}
	#masthead .main-header-menu li a.menu-link {
		font-size: 1.5rem;
	}
	/*#######################################*/
	#masthead .ast-primary-header > div {
		padding: 10px 0;
	}
	#masthead .site-header-primary-section-left {
		padding: 3px 15px;
	}
	#masthead .ast-mobile-header-wrap .ast-primary-header-bar,
	#masthead .ast-primary-header-bar .site-primary-header-wrap {
		min-height: 60px;
		padding: 0 10px !important;
	}


	/* menu toggle */
	html:has(body.ast-main-header-nav-open) {
		height: 100vh;
		overflow: hidden;
	}
	#masthead .menu-toggle {
		--btn-color : var(--yellow);
		position: relative;
		/* transform: translateY(-10px); */
	}
	body:is(.scroll0, .mob_scroll0) #masthead .menu-toggle {
		--btn-color : var(--main-color);
	}
	#masthead .menu-toggle:focus {
		border: none!important;
		outline: none!important;
	}
	#masthead .menu-toggle svg {
		fill: var(--btn-color);
		scale: 1.5;
	}
	#masthead .menu-toggle::after {
		position: absolute;
		content: "MENU";
		font-size: 1.3rem;
		width: max-content;
		height: 1lh;
		text-transform: uppercase;
		color: var(--btn-color);
		bottom: 0px;
		left: 50%;
		transform: translate(-50%, 50%);
		pointer-events: none;
	}
	#masthead .menu-toggle.toggled::after {
		content: "FERMER";
	}
	#masthead .main-header-menu {
		box-sizing: border-box;
		padding: 20px;
		padding-top: calc(20px + var(--masthead-height));
		width: 100%;
		max-width: 350px;
		margin: auto;
		gap: 0;
		background-color: transparent!important;
	}
	#masthead .main-header-menu li a.menu-link {
		padding: 15px 20px;
		font-size: 1.8rem;
		background-color: transparent!important;
		color: var(--black);
		text-align: center;
	}
	#masthead .main-header-menu li:first-child a.menu-link::before {
		display: block;
	}
	#masthead .ast-mobile-header-content {
		display: block!important;
		transition: all .3s ease-out;
		border-radius: 0 0 10px 10px;
		box-shadow: 0px 20px 18px 0px #00000050;
	}
	body #masthead .ast-mobile-header-content {
		height: 100vh;
		overflow: scroll;
		transform: translateY(calc(-1 * var(--masthead-height)));
	}
	body:is(.ast-main-header-nav-open) #masthead .menu-toggle {
		--btn-color: var(--main-color);
	}
	body:not(.ast-main-header-nav-open) #masthead .ast-mobile-header-content {
		opacity: 0;
		pointer-events: none;
		transform: translateY(calc(-1 * var(--masthead-height) - 50px));
	}
	#masthead .ast-mobile-header-content > * {
		justify-content: center;
	}
	#masthead .main-header-menu .ast-menu-toggle {
		top: 12px;
	}
	#masthead .main-header-menu .sub-menu {
		width: 100%;
		background-color: transparent;
	}
	#masthead .main-header-menu .sub-menu li a.menu-link {
		font-size: 1.4rem;
		padding: 10px 20px;
		width: 100%;
		text-align: left;
	}
	#masthead .main-header-menu .menu-item.focus > .sub-menu, #masthead .main-header-menu .menu-item:hover > .sub-menu, #masthead .main-header-menu .menu-item > .sub-menu.toggled-on, #masthead .main-header-menu .ast-submenu-expanded > .sub-menu {
		transform: none;
	}

	.no-desktop {
		display: unset!important;
	}
	.no-tablet {
		display: none!important;
	}

	#main-header .header-menu ul {
		--cols: 1;
	}
	#main-header .header-menu ul::after {
		display: none;
	}
	#main-header .header-wrapper {
		gap: 30px;
	}
	#main-header .header-menu {
		width: unset;
		max-width: min(500px, 75%);
	}

	.prestations-container {
		grid-template-columns: 1fr;
	}
	
	.prestations-container .prestation {
		width: calc(100% / 2);
	}

	/*#######################################*/
	body .slick-slider:has(.slick-arrow) {
		padding-top: 50px;
	}
	body .slick-slider .slick-arrow {
		right: 10px;
		top: 0;
	}
	body .slick-slider .slick-prev {
		left: 10px;
	}


	body .eb-counter-wrapper .eb-counter-number * {
		font-size: 4rem!important;
	}
	body .eb-counter-wrapper .eb-counter {
		font-size: clamp(4rem, 9vw, 7rem) !important;
	}

	.posts-grid {
		grid-template-columns: repeat(calc(var(--grid-col, 3) - 1), 1fr);
	}
	.posts-grid:not(.grid-full) .grid-item:first-child {
		grid-area: unset;
	}
	
}

/****************************/
/*********SMARTPHONE*********/
/****************************/
@media (max-width: 768px) { 
	body {
		overflow-x: hidden;
	}

	/**********SPECIFIC**********/
	.is-mobile-center, .is-mobile-center * {
		text-align: center;
    }
    .is-mobile-left, .is-mobile-left * {
		text-align: left;
    }
    .is-mobile-fullwidth {
		width: 100%!important;
    }
	.is-mobile-fullheight {
		height: 100%!important;
    }
	.no-mobile-border {
		border: none;
    }
    .no-mobile-margin {
		margin: 0!important;
    }
    .no-mobile-padding {
		padding: 0!important;
    }
	body .is-mobile-column {
		flex-direction: column;
	}
    .is-mobile-reverted {
		flex-direction: column-reverse;
        flex-wrap: nowrap !important;
    }
	.is-mobile-justify-center {
		justify-content: center !important;
	}
	.is-mobile-align-center {
		align-items: center !important;
	}

	.no-tablet {
		display: unset!important;
	}
	.no-mobile {
		display: none!important;
	}

	/****************************/
	h1, .entry-content h1, body *:is(.is-h1) {
		font-size: clamp(2.75rem, 10vw, 4rem);
	}
	h1 strong, .entry-content h1 strong, body *:is(.is-h1) strong {
		font-size: clamp(3.25rem, 12vw, 5rem);
	}
	h2, .entry-content h2, body .entry-content *:is(.is-h2) {
		font-size: clamp(2.35rem, 8vw, 3.5rem);
	}
	h2 strong, .entry-content h2 strong, body *:is(.is-h2) strong {
		font-size: clamp(2.75rem, 10vw, 4.3rem);
	}
	h3, .entry-content h3, body .entry-content *:is(.is-h3) {
		font-size: clamp(2rem, 7vw, 2.8rem);
	}
	h4, .entry-content h4, body .entry-content *:is(.is-h4) {
		font-size: clamp(1.75rem, 6vw, 2.4rem);
	}
	h5, .entry-content h5, body .entry-content *:is(.is-h5) {
		font-size: clamp(1.5rem, 5vw, 2rem);
	}
	/****************************/

	#main-header .header-menu {
		width: 100%;
	}

	#main-header .header-subtitle, #main-header .header-subtitle * {
		font-size: 1.6rem;
	}
	#main-header .header-menu {
		width: unset;
		max-width:100%;
	}
	#main-header .header-menu ul {
		gap: 10px;
	}

	#main-header.header-page {
		--thumb-width: 0%;
	}
	#main-header.header-page .header-thumb {
		left: calc(0% - var(--thumb-width));
		width: calc(100% + var(--offset));
		opacity: 0.2 !important;
	}

	body .eb-counter-wrapper .eb-counter-number * {
		font-size: 3rem!important;
	}
	body .eb-counter-wrapper .eb-counter {
		font-size: clamp(3.5rem, 15vw, 5rem) !important;
	}

	/* CONTACT FORM 7 */
	.CForm .CF-half, .CForm .CF-onethird, .CForm .CF-twothird, .CForm .CF-onequarter, .CForm .CF-threequarter  {
		width: 100%;
	}

	.CForm .CF-checkbox .wpcf7-list-item {
		width: 99%;
	}

	.wpcf7 {
		padding: 20px 16px;
		border-radius: 20px;
	}
	/* étapes : seul le titre de l'étape en cours reste affiché */
	.wpcf7 .cf7-dnd-step-marker:not(.is-active) .cf7-dnd-step-marker__title {
		display: none;
	}
	/* boutons Précédent / Suivant : plus compacts */
	.cf7-dnd-step-navigation button {
		--ico-size: 30px;
		--ico-gap: 8px;
		padding-block: 12px;
		font-size: 1.4rem;
	}

	.prestations-container .prestation {
		width: calc(100% / 1);
	}

	.posts-grid {
		grid-template-columns: repeat(1, 1fr);
	}

	/* Keep the footer navigation inside the viewport. */
	.menu-footer-big-menu-container,
	.menu-footer-big-menu-container .footer-big-menu,
	.menu-footer-big-menu-container .footer-big-menu > li,
	.menu-footer-big-menu-container .footer-big-menu .sub-menu {
		width: 100%;
		max-width: 100%;
	}
	.menu-footer-big-menu-container {
		min-width: 0;
	}
	.wp-block-columns:has(.menu-footer-big-menu-container) {
		flex-direction: column;
	}
	.wp-block-columns:has(.menu-footer-big-menu-container) > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
		min-width: 0;
	}
	#menu-footer-big-menu {
		display: block !important;
	}
	#menu-footer-big-menu > li {
		width: 100%;
		max-width: 100%;
		flex: none;
		margin-inline: 0;
	}
	#menu-footer-big-menu .sub-menu {
		display: block !important;
		width: 100%;
		max-width: 100%;
	}
	#menu-footer-menu {
		display: block;
		width: 100%;
		max-width: 100%;
	}
	#menu-footer-menu > li {
		margin-inline: 0;
		text-align: center;
	}
	.menu-footer-big-menu-container,
	.menu-footer-big-menu-container *,
	.menu-footer-menu-container,
	.menu-footer-menu-container * {
		text-align: center;
	}
	.menu-footer-big-menu-container .sub-menu,
	.menu-footer-menu-container ul {
		padding-inline: 0;
	}
	.menu-footer-big-menu-container .sub-menu li,
	.menu-footer-menu-container li {
		list-style: none;
	}
	#main-header .header-menu-wrapper {
		width: 100%;
	}
}

@media (max-width: 480px) {
	h1 strong, .entry-content h1 strong, body *:is(.is-h1) strong,
	h2 strong, .entry-content h2 strong, body *:is(.is-h2) strong {
		font-size: 1em;
	}

	#masthead .site-header-primary-section-left {
		padding-inline: 10px;
	}

	.posts-grid {
		gap: 1.25rem;
	}

}