/*
 Theme Name:   Inspiro Child
 Theme URI:    https://www.wpzoom.com/themes/inspiro/
 Description:  Thème enfant Inspiro — personnalisations et renforcement du responsive.
 Author:       CERA Nord
 Author URI:   https://www.cerafnord.org
 Template:     inspiro
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  inspiro-child
*/

/* ==========================================================================
   Variables responsive (réutilisation des variables du thème parent)
   ========================================================================== */

:root {
	--inspiro-child-mobile-padding: 15px;
	--inspiro-child-tablet-padding: 20px;
	--inspiro-child-breakpoint-tablet: 1024px;
	--inspiro-child-breakpoint-mobile: 768px;
	--inspiro-child-breakpoint-small: 480px;
}

/* ==========================================================================
   Base — images et conteneurs fluides
   ========================================================================== */

.inspiro-child-wrap img,
.elementor-widget-image img,
.elementor-section img {
	max-width: 100%;
	height: auto;
}

/* Conteneurs Elementor : éviter les débordements */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 100%;
}

/* ==========================================================================
   Tablette (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	.wrap,
	.inner-wrap,
	.elementor-section .elementor-container {
		padding-left: var(--inspiro-child-tablet-padding);
		padding-right: var(--inspiro-child-tablet-padding);
	}

	/* Titre du site : taille fluide */
	.site-title {
		font-size: clamp(1.75rem, 4vw, 3.5rem);
	}

	/* Colonnes Elementor : empiler si trop étroites */
	.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
		padding: 15px;
	}
}

/* ==========================================================================
   Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.wrap,
	.inner-wrap {
		padding-left: var(--inspiro-child-mobile-padding);
		padding-right: var(--inspiro-child-mobile-padding);
	}

	.site-title {
		font-size: clamp(1.5rem, 6vw, 2.5rem);
		padding-bottom: 15px;
		margin-bottom: 20px;
	}

	/* Sections Elementor : padding réduit sur mobile */
	.elementor-section .elementor-container {
		padding-left: var(--inspiro-child-mobile-padding);
		padding-right: var(--inspiro-child-mobile-padding);
	}

	.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
	.elementor-column-gap-narrow > .elementor-column > .elementor-element-populated {
		padding: 10px;
	}

	/* Boutons pleine largeur sur mobile pour une meilleure UX */
	.elementor-button-wrapper .elementor-button {
		width: 100%;
		justify-content: center;
	}

	/* Texte : éviter le dépassement */
	.elementor-widget-text-editor,
	.elementor-widget-heading-title {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
}

/* ==========================================================================
   Petit mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
	:root {
		--container-padding: 15px;
	}

	.wrap,
	.inner-wrap,
	.elementor-section .elementor-container {
		padding-left: var(--inspiro-child-mobile-padding);
		padding-right: var(--inspiro-child-mobile-padding);
	}

	.site-title {
		font-size: clamp(1.25rem, 5vw, 2rem);
	}

	/* Footer : widgets en une colonne si besoin */
	.site-footer .widget-columns-1 .widget-column,
	.site-footer .widget-columns-2 .widget-column,
	.site-footer .widget-columns-3 .widget-column,
	.site-footer .widget-columns-4 .widget-column {
		flex: 0 0 100%;
	}
}

/* ==========================================================================
   Compatibilité Elementor — largeurs fluides
   (Elementor gère déjà les colonnes en responsive ; ces règles corrigent les débordements.)
   ========================================================================== */

@media (max-width: 768px) {
	.elementor-section .elementor-container {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Navigation mobile — renforcement
   ========================================================================== */

@media (max-width: 64em) {
	.navbar-toggle {
		padding: 12px 15px;
	}

	.site-header .navbar {
		padding: 10px 0;
	}
}

/* ==========================================================================
   WooCommerce (si actif)
   ========================================================================== */

@media (max-width: 768px) {
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: 100%;
		margin-bottom: 1.5em;
	}

	.woocommerce .col2-set .col-1,
	.woocommerce .col2-set .col-2,
	.woocommerce-page .col2-set .col-1,
	.woocommerce-page .col2-set .col-2 {
		float: none;
		width: 100%;
	}
}

@media (max-width: 480px) {
	.woocommerce table.cart td.actions,
	.woocommerce-page table.cart td.actions {
		text-align: left;
	}

	.woocommerce .quantity .qty {
		width: 100%;
	}
}