/* =Child-Theme responsive styles starts here
------------------------------------------------------------ */

/*--------------------------------------------------------------------------
--------------------------Global------------------------------------
----------------------------------------------------------------------------*/

@media (max-width: 767px) {
	.slider_container {
		overflow-x: hidden !important;
	}

	html, body {
		overflow-x: hidden !important;
		max-width: 100%;
	}
    .grid.grid-3,
    .grid.grid-5 {
        grid-template-columns: 1fr !important;
    }
	h2 strong {
		font-size: 26px;
	}

	/* Empeche la coupure automatique des mots (hyphenation) sur mobile */
	*,
	*::before,
	*::after {
		hyphens: none !important;
		-webkit-hyphens: none !important;
		-ms-hyphens: none !important;
	}
	h1, h2, h3, h4, h5, h6, p, a, span, li, div {
		word-break: normal !important;
		overflow-wrap: normal !important;
	}
}

/*--------------------------------------------------------------------------
--------------------------Header + Hero------------------------------------
----------------------------------------------------------------------------*/
@media (max-width: 1340px) {
	header .sc_layouts_menu_nav>li>a{
		font-size: 14px;
		padding-left: 5px;
		padding-right: 5px;
	}
	header a.sc_layouts_logo {
		max-width: 200px;
		width: auto;
		display: block;
	}
	.top_panel .sc_layouts_column_align_right .sc_layouts_cart_icon, 
	.top_panel .sc_layouts_column_align_right .search_submit {
		width: 20px !important;
		height: 20px !important;
		font-size: 20px !important;
		line-height: 20px !important;
	}
	.sc_layouts_item_phone_link:after{
		width: 20px;
		height: 20px;
	}
	.sc_layouts_column_align_right .sc_layouts_item:not(.elementor-widget-divider):not(.elementor-widget-spacer){
		margin-left: 1em;
	}
}
@media (max-width: 1150px) {
	.top_panel .sc_layouts_column_align_right{
		justify-content: end;
	}
	.sc_layouts_item_menu_mobile_button, .sc_layouts_menu_mobile_button {
		display: block !important;
	}
	.hide_on_mobile, .sc_layouts_hide_on_mobile {
        display: none !important;
    }
	.menu_mobile .menu_mobile_inner .menu_mobile_widgets_area{
		display : none;
	}
	.menu_mobile,
	.menu_mobile_inner,
	.menu_mobile_header_wrap,
	.menu_mobile_content_wrap,
	.menu_mobile_content_wrap_inner,
	.menu_mobile_nav_area,
	.menu_mobile_nav {
		background-color: #ffffff !important;
	}
	.top_panel .sc_layouts_column_align_left.column-1_4 {
		width: 25%;
		padding: 0;
	}
/* 	.menu_mobile .socials_mobile{
		bottom: 5rem;
	} */
	.menu_mobile .socials_mobile{
		margin: 0 0 50px;
	}

}

@media (max-width: 767px) {
	.top_panel .columns_wrap {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	.top_panel .sc_layouts_column_align_left.column-1_4,
	.top_panel .sc_layouts_column_align_right.column-3_4 {
		width: auto !important;
		flex: 0 0 auto !important;
	}
	.top_panel .sc_layouts_column_align_left.column-1_4 .sc_layouts_item {
		width: auto !important;
	}
	.top_panel .sc_layouts_logo img {
		width: 240px !important;
            max-width: none !important;
            height: auto !important;
            max-height: none !important;
	}
	.hero-card {
		margin-left: 20px !important;
		max-width: calc(100% - 40px) !important;
		padding: 24px !important;
	}

	.hero-card h1 {
		font-size: 28px !important;
		line-height: 1.25 !important;
	}
	.hero-card .elementor-icon-list-text{
		font-size: 16px !important;
	}
	.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon{
		width: 18px !important;
	}
	.hero-buttons {
		flex-wrap: wrap !important;
	}

	.hero-card .elementor-icon-list-item {
		margin-bottom: 10px !important;
	}

	.page_content_wrap {
        padding-top: 45px;
        padding-bottom: 60px;
    }

	.top_panel_title .sc_layouts_title_caption {
		font-size: 28px !important;
	}
	.sc_layouts_column_align_right .sc_layouts_cart:not(.modern) .sc_layouts_cart_widget {
		margin-top: -40px;
		left: 0;
		right: 0;
	}
	.top_panel .content_wrap{
		padding: 0 30px;
	}
}

/*--------------------------------------------------------------------------
--------------------------Footer------------------------------------
----------------------------------------------------------------------------*/

@media (max-width: 767px) {
	.footer_wrap .footer-top-row {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 24px !important;
	}
	.footer_wrap {
		padding-top: 40px !important;
	}
	.footer_wrap .footer-top-row .elementor-widget-button {
		margin: 0 !important;
	}
	.footer_wrap .footer-social-icons {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		gap: 16px !important;
		margin-left: 0 !important;
	}

	.footer_wrap .sc_layouts_menu_nav li {
		display: inline-block !important;
		float: none !important;
		white-space: nowrap !important;
	}
	.footer_wrap .footer-bottom-row .sc_layouts_menu_nav {
		flex-wrap: nowrap !important;
		justify-content: center !important;
		gap: 4px !important;
		width: 100% !important;
		overflow-x: auto !important;
	}
	.footer_wrap .footer-bottom-row .sc_layouts_menu_nav a {
		font-size: 9.5px !important;
	}
	.footer_wrap .footer-bottom-row .sc_layouts_menu_nav li::after {
		font-size: 9.5px !important;
	}

	.footer_wrap .footer-bottom-row {
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
	}
	.footer_wrap .footer-credit {
		margin-bottom: 0 !important;
	}

	.footer_wrap {
		padding-bottom: 30px !important;
	}

	/* Ligne du haut (logo/reseaux, adresse, badges) : les badges de
	   certification ont une largeur fixe de 150px codee en dur, ce qui
	   les fait deborder de leur colonne et chevaucher l'adresse quand
	   la ligne se retrecit sur mobile. On empile les 3 blocs et on
	   reduit la taille des badges. */
	.footer_wrap .elementor-element-2d5894a {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		width: 100% !important;
		height: auto !important;
		gap: 28px !important;
	}
	.footer_wrap .elementor-element-2086475,
	.footer_wrap .elementor-element-ac281f2,
	.footer_wrap .elementor-element-add9922 {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		flex: 0 0 auto !important;
		justify-content: center !important;
		align-items: center !important;
	}
	.footer_wrap .elementor-element-add9922 img {
		max-width: 64px !important;
		width: 64px !important;
		height: auto !important;
	}
}


/*--------------------------------------------------------------------------
--------------------------WOOCOMMERCE------------------------------------
----------------------------------------------------------------------------*/

/* Des que le bouton "Tous les produits" n'a plus la place a cote du
   titre (meme apres l'avoir autorise a retrecir, cf. style.css), on
   bascule sur le bouton duplique deja present sous le carrousel plutot
   que de le laisser retomber a la ligne dans l'entete. */
@media (max-width: 1400px) {
	.products_cta_top {
		display: none !important;
	}
	.products_cta_bottom {
		display: flex !important;
		justify-content: center !important;
		margin: 30px auto 0 !important;
		padding-bottom: 30px !important;
	}
}
@media (max-width: 1023px) {
	.page_content_wrap {
		padding-top: 30px;
		padding-bottom: 80px;
	}
}
@media (max-width: 767px) {
	.products_header_row {
		flex-direction: column !important;
		align-items: center !important;
	}
	.products_header {
		width: 100% !important;
		text-align: center !important;
	}
	.products_header h2 {
		text-align: center !important;
	}
	.products_subtitle {
		justify-content: center !important;
		text-align: center !important;
	}

	.products_section .swiper-container-wrap {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
	.sc_layouts_cart_widget .widget_shopping_cart {
		position: absolute !important;
		top: 55px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		box-sizing: border-box !important;
		width: 100% !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.is-medium table.wc-block-cart-items .wc-block-cart-items__row,
	.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
	.is-small table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 120px 1fr !important;
	}
	.wc-block-cart-items__row {
		row-gap: 16px !important;
	}
	.wc-block-cart-item__wrap > * {
		margin-bottom: 10px !important;
	}
	.wc-block-cart-item__wrap > *:last-child {
		margin-bottom: 0 !important;
	}
	body.single-product .woocommerce-Reviews ol.commentlist {
		grid-template-columns: 1fr !important;
	}
	body.single-product .woocommerce-Reviews ol.commentlist > li.comment:nth-child(odd),
	body.single-product .woocommerce-Reviews ol.commentlist > li.comment:nth-child(even) {
		grid-column: 1 !important;
	}
	.woocommerce .woocommerce-result-count{
		font-size: 15px;
	}
	.eael-data-table .td-content{
		justify-content: flex-start;
	}
}


/*--------------------------------------------------------------------------
--------------------------PAGE Montage PC sur-mesure------------------------------------
----------------------------------------------------------------------------*/

/* Cette page (id 109) a une section "Pour qui ?" construite en Elementor
   avec 2 colonnes cote a cote sans reglage de reflow mobile (flex-wrap:
   nowrap), ce qui ecrase le texte de la carte "Exemple de realisation"
   et coupe son contenu. On force l'empilement vertical sur mobile. */
@media (max-width: 767px) {
	.elementor-109 .elementor-element-def6511 {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		height: auto !important;
	}
	.elementor-109 .elementor-element-7e46c19,
	.elementor-109 .elementor-element-5aa9604 {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		flex: 0 0 auto !important;
	}
}

/*--------------------------------------------------------------------------
--------------------------WIDGET ELEMENTOR------------------------------------
----------------------------------------------------------------------------*/

@media (max-width: 767px) {
	.tarif-table .eael-data-table thead tr.table-header th {
		padding: 14px !important;
	}
	.tarif-table .eael-data-table tbody td,
	.tarif-table .eael-data-table tbody td:first-child {
		padding: 12px 14px !important;
	}
	.tarif-table .eael-data-table tbody tr:hover td:first-child {
		padding-left: 14px !important;
	}
	.google_reviews_row {
		flex-direction: column !important;
	}
	.elementor-widget-icon-box{
		margin: 0 auto;
	}
	.services_row {
		flex-direction: column !important;
	}
	.service_card {
		width: 100% !important;
	}
}