/* ==========================================================================
   Pause Ménage — responsive.css
   Reproduit les breakpoints Tailwind utilisés dans le dump :
     sm: 640px   md: 768px   lg: 1024px (← burger)   xl: 1280px   2xl: 1536px
   À charger APRÈS custom.css.
   ========================================================================== */

/* ==========================================================================
   CONTAINER — padding latéral en dessous du viewport max
   --------------------------------------------------------------------------
   Sur desktop wide (≥ 1536px), les containers n'ont pas de padding (matche
   le live `max-w-[96rem]`). Sur écrans plus étroits, on redéfinit la variable
   `--pm-container-px` au niveau racine pour propager le padding à TOUS les
   containers qui l'utilisent (header, footer, sections, etc.).
   ========================================================================== */
@media (max-width: 1535.98px) {
	:root {
		--pm-container-px: 1.25rem;
	}
}

/* ==========================================================================
   HEADER — < 1024px : bascule menu burger, offcanvas actif
   ========================================================================== */

@media (max-width: 1023.98px) {
	.pm-header__nav--desktop { display: none !important; }

	.pm-header__container {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	/* Mobile header layout :
	   - ligne 1 : statement (gauche, occupe toute la largeur dispo) + bouton CTA (droite)
	   - ligne 2 : logos (gauche) + burger (droite, sous le CTA)
	   On utilise `display: contents` sur les conteneurs intermédiaires pour aplatir
	   leurs enfants directement dans le grid de la rangée. */
	.pm-header__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"statement cta"
			"logos     burger";
		align-items: center;
		column-gap: 0.75rem;
		row-gap: 0.35rem;
		min-height: auto;
		padding: 0.25rem 0;
	}

	.pm-header__brand-group { display: contents; }
	.pm-header__statement--mobile { grid-area: statement; align-self: center; }
	.pm-header__logos             { grid-area: logos;     align-self: center; }

	.pm-header__nav--mobile { display: contents !important; }
	.pm-header__nav--mobile .pm-btn { grid-area: cta;    justify-self: end; align-self: center; }
	.pm-header__burger              { grid-area: burger; justify-self: end; align-self: center; }
}

/* ==========================================================================
   HEADER — < 1280px : brand-group vertical (slogan au-dessus des logos)
   ========================================================================== */

@media (max-width: 1279.98px) {
	.pm-header__brand-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
	.pm-header__statement--mobile  { display: block; order: -1; }
	.pm-header__statement--desktop { display: none; }

	.pm-header__logos       { gap: 0.75rem; }
	.pm-header__logo-link   { height: 5rem; }
}

/* ==========================================================================
   MOBILE (< 768px) — base
   ========================================================================== */

@media (max-width: 767.98px) {
	/* Tailles typographiques mobile */
	.pm-body h1 { font-size: var(--pm-h1-m); }
	.pm-body h2 { font-size: var(--pm-h2-m); }
	.pm-body h3 { font-size: var(--pm-h3-m); }
	.pm-body h4 { font-size: var(--pm-h4-m); }
	.pm-body h5 { font-size: var(--pm-h5-m); }
	.pm-body h6 { font-size: var(--pm-h6-m); }

	/* Header — tailles alignées sur le live (logo 104px de haut, texte tél 14px) */
	.pm-header__logo-link { height: 6.5rem; }
	.pm-header__logo      { max-width: none; }

	.pm-header__statement {
		font-size: 0.875rem;
		white-space: normal;
	}

	.pm-btn {
		min-height: 2.5rem;
		padding: 0.5rem 0.9rem;
	}
	.pm-btn--sm {
		min-height: 2rem;
		padding: 0.35rem 0.7rem;
		font-size: 0.75rem;
	}

	/* Footer */
	.pm-footer__top {
		padding: 3rem 0;
		flex-direction: column;
	}
	.pm-footer__brand-col {
		width: 100%;
		flex: 0 0 100%;
	}
	.pm-footer__logos      { gap: 0.75rem; }
	.pm-footer__logo-link  { height: 5rem; }

	.pm-footer__menus {
		flex-direction: column;
		gap: 1rem;
	}
	.pm-footer__col { min-width: 0; }

	.pm-footer__bottom {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 1rem;
	}

	.pm-footer__legal-links {
		flex-direction: column;
		gap: 0.5rem;
	}
}

/* ==========================================================================
   TABLETTE (768–1023px) — footer stack
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023.98px) {
	.pm-footer__brand-col {
		width: 100%;
		flex: 0 0 100%;
	}
	.pm-footer__menus { gap: 1.5rem 2rem; }
	.pm-footer__col   { min-width: 140px; flex: 0 1 auto; }
}

/* ==========================================================================
   ≥ 1536px (2xl) — espacements plus larges
   ========================================================================== */

@media (min-width: 1536px) {
	.pm-header__brand-group  { gap: 2rem; }
	.pm-header__logos        { gap: 2rem; }
	.pm-header__nav--desktop { gap: 1rem; }
}

/* ==========================================================================
   PAGE D'ACCUEIL — tablette & mobile
   ========================================================================== */

/* Tablette (< 1024px) */
@media (max-width: 1023.98px) {
	.pm-home__hero { padding-bottom: 4rem; }

	/* Hero slider : hauteur réduite en tablette/mobile */
	.pm-home__hero-slider .pm-home__slider { height: 500px; }
	.pm-home__services,
	.pm-home__trust,
	.pm-home__blog,
	.pm-home__testimonials { padding: 4rem 0; }
	.pm-home__cta { padding: 4rem 0; margin-top: 0; }
	.pm-home__cta--with-margin { margin-top: 4rem; }

	.pm-home__hero-grid,
	.pm-home__trust-grid,
	.pm-home__features-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	/* En mobile/tablette, on ne respecte plus la position --left :
	   on remet l'ordre naturel (texte d'abord, média/liste ensuite) pour la lisibilité. */
	.pm-home__trust--left .pm-home__trust-text,
	.pm-home__trust--left .pm-home__trust-video,
	.pm-home__features--left .pm-home__features-text,
	.pm-home__features--left .pm-home__features-list {
		grid-column: auto;
		grid-row: auto;
	}

	/* Padding tablette pour features (cohérent avec services/trust/blog/testimonials) */
	.pm-home__features { padding: 4rem 0; }

	/* En tablette : tous les variants (cols-2/3/4) descendent à 2 colonnes max.
	   On garde 2 colonnes pour cols-2 sans gap excessif. */
	.pm-home__cards,
	.pm-home__services--cols-2 .pm-home__cards,
	.pm-home__services--cols-3 .pm-home__cards,
	.pm-home__services--cols-4 .pm-home__cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.pm-home__postal-card {
		padding: 3rem 2rem;
	}
}

/* Features list — overrides mobile */
@media (max-width: 767.98px) {
	.pm-home__features         { padding: 3rem 0; }
	.pm-home__features-title   { font-size: var(--pm-h2-m); }
	.pm-home__feature-title    { font-size: var(--pm-h5-m); }
	.pm-home__feature-row      { gap: 1rem; }
	.pm-home__feature-item     { padding-bottom: 2rem; }
}

/* page_header split : empile en 1 colonne sous 1024px (tablette + mobile) */
@media (max-width: 1023.98px) {
	.pm-page-header--split .pm-page-header__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.pm-page-header__col--main,
	.pm-page-header__col--aside { padding: 0; }
}

/* form_wpforms : empile FAQ sous le formulaire en mobile/tablette (< 1024px) */
@media (max-width: 1023.98px) {
	.pm-form--with-faq .pm-form__layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* Nouveaux layouts — responsive */
@media (max-width: 767.98px) {
	.pm-page-header      { padding: 3rem 0; }
	.pm-page-header__title { font-size: var(--pm-h1-m); }

	.pm-text-block       { padding: 3rem 0; }
	.pm-text-block__title { font-size: var(--pm-h2-m); }
	.pm-text-block__content h2 { font-size: var(--pm-h2-m); }
	.pm-text-block__content h3 { font-size: var(--pm-h3-m); }
	.pm-text-block__content h4 { font-size: var(--pm-h4-m); }

	.pm-faq              { padding: 3rem 0; }
	.pm-faq__title       { font-size: var(--pm-h2-m); }
	.pm-faq__question    { font-size: 1rem; padding: 1.25rem 0; }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
	.pm-home__hero {
		padding-top: 1rem;
		padding-bottom: 3rem;
	}

	/* Hero slider : hauteur encore plus réduite en mobile */
	.pm-home__hero-slider .pm-home__slider { height: 380px; }
	.pm-home__services,
	.pm-home__trust,
	.pm-home__blog,
	.pm-home__testimonials { padding: 3rem 0; }
	.pm-home__cta { padding: 3rem 0; margin-top: 0; }
	.pm-home__cta--with-margin { margin-top: 3rem; }

	/* Chaîne `.pm-body` pour aligner la spécificité (0,2,0) sur la règle desktop
	   `.pm-body .pm-home__hero-title` de custom.css — sinon le 3.5rem desktop
	   l'emporte même en mobile. */
	.pm-body .pm-home__hero-title { font-size: var(--pm-h1-m); }
	.pm-home__section-title,
	.pm-home__trust-title  { font-size: var(--pm-h2-m); }
	.pm-home__postal-title,
	.pm-home__cta-title    { font-size: var(--pm-h3-m); }
	.pm-home__card-title   { font-size: var(--pm-h5-m); }
	.pm-home__blog-title   { font-size: var(--pm-h4-m); }  /* 1.5rem en mobile comme h4 du live */

	/* Bouton "Lire l'article" centré sur mobile */
	.pm-home__blog-actions { justify-content: center; }

	/* En mobile : 1 colonne pour tous les variants */
	.pm-home__cards,
	.pm-home__services--cols-2 .pm-home__cards,
	.pm-home__services--cols-3 .pm-home__cards,
	.pm-home__services--cols-4 .pm-home__cards {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.pm-home__postal-card {
		padding: 2.5rem 1.5rem;
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}
	.pm-home__postal-form {
		flex-direction: column;
		width: 100%;
	}
	.pm-home__postal-input,
	.pm-home__postal-form .pm-btn { width: 100%; }

	.pm-home__cta-actions { flex-direction: column; }
	.pm-home__cta-actions .pm-btn { width: 100%; }

	.pm-home__video-play { width: 4rem; height: 4rem; font-size: 1.5rem; }

	/* Sliders : contrôles plus compacts en mobile (on garde dots + flèches plus petites) */
	.pm-slider-controls { margin-top: 1.5rem; }
	.pm-slider-arrow { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
}

/* ==========================================================================
   CARDS SERVICES — bouton centré sous le breakpoint sm (640px)
   --------------------------------------------------------------------------
   Le live utilise `flex justify-center sm:justify-end` sur le wrapper du
   bouton : centré sur très petits écrans, à droite à partir de 640px.
   Notre `.pm-home__card .pm-btn { align-self: flex-end }` (custom.css) couvre
   le desktop ; ici on rétablit le centrage en dessous de 640px.
   ========================================================================== */
@media (max-width: 639.98px) {
	.pm-home__card .pm-btn { align-self: center; }
}

/* ==========================================================================
   SINGLE ARTICLE — responsive
   ========================================================================== */

/* Tablette : gap plus serré */
@media (max-width: 1279.98px) {
	.pm-article__grid { column-gap: 2rem; }
}

/* Mobile : 1 seule colonne, tout empile */
@media (max-width: 767.98px) {
	.pm-article__grid {
		grid-template-columns: 1fr;
		padding: 3rem 0;
	}
	.pm-article__cell { margin-top: 3rem; }
	.pm-article__cell--full,
	.pm-article__cell--half { grid-column: span 1 / span 1; }

	.pm-article__title { font-size: var(--pm-h1-m); }
	.pm-article__text h2 { font-size: var(--pm-h2-m); }
	.pm-article__text h3 { font-size: var(--pm-h3-m); }
	.pm-article__text h4 { font-size: var(--pm-h4-m); }
}

/* ==========================================================================
   Impression
   ========================================================================== */

@media print {
	.pm-header,
	.pm-footer,
	.pm-header__burger { display: none !important; }
}