/* ==========================================================================
   ClimaSud — 04. RESPONSIVE
   Du plus large au plus étroit. Chaque palier ne corrige que ce qui casse
   réellement à cette largeur.

   Paliers :
   1240  fin de la largeur maximale — le contenu commence à toucher les bords
   1100  la navigation devient à l'étroit à côté des actions
    900  bascule du menu en panneau plein écran
    782  point de rupture natif de WordPress : les colonnes s'empilent
    560  téléphone
    400  très petit téléphone
   ========================================================================== */

/* --------------------------------------------------------------------------
   1100 px — la navigation se resserre
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.cs-barre-contenu {
		gap: 16px;
	}

	.cs-barre .wp-block-navigation {
		font-size: 0.9rem;
	}

	.cs-barre .wp-block-navigation ul {
		gap: 18px;
	}

	.cs-logo-baseline {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   1080 px — le menu passe en panneau plein écran

   WordPress fait basculer le bloc Navigation à 600 px, ce qui est bien trop
   tard : entre 600 et 1080 px, les cinq entrées de menu, le téléphone et le
   bouton de devis ne tiennent pas sur une ligne. Mesuré : à 1024 px — la
   largeur d'un iPad en paysage et de beaucoup d'ordinateurs portables — la
   barre débordait de 13 px et provoquait un défilement horizontal sur
   l'ensemble du site. Les règles ci-dessous ramènent la bascule à 1080 px.

   Le !important est ici nécessaire et volontaire : quand WordPress charge les
   styles de bloc à la demande, la feuille du bloc Navigation est injectée
   dans le corps de la page, donc APRÈS celle du thème. Sans !important,
   l'ordre de cascade dépendrait d'un réglage d'optimisation du site.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.cs-barre .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	.cs-barre .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.cs-barre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: block !important;
	}

	/* Le bandeau d'informations coûte une ligne pour un contenu déjà présent
	   dans le pied de page et dans la barre d'action du bas. */
	.cs-entete-haut {
		display: none;
	}

	/* Sans bandeau, il n'y a plus rien à faire défiler avant la barre : le
	   décalage négatif du collage retombe à zéro. La règle porte sur « top »
	   et non sur la variable, pour rester juste même si le JavaScript ne
	   s'exécute pas. */
	.cs-entete-hote {
		top: 0;
	}

	/* Ordre des trois éléments de la barre une fois le menu replié :
	   logo à gauche, téléphone, puis le bouton du menu tout à droite — c'est
	   là que le pouce le cherche. Sans cette réorganisation, le bouton se
	   retrouverait entre le logo et le téléphone. */
	.cs-barre-contenu > .cs-logo {
		order: 1;
	}

	.cs-barre-actions {
		order: 2;
		margin-left: auto;
	}

	.cs-barre .wp-block-navigation {
		order: 3;
		margin-left: 0;
		flex: 0 0 auto;
	}
}

/* --------------------------------------------------------------------------
   960 px — les pages « formulaire + encadré » s'empilent

   WordPress n'empile les colonnes qu'à 782 px. Entre 782 et 960, la colonne
   étroite d'une page de conversion tombe sous 270 px : l'encadré de contact y
   devient illisible, et l'icône plus le libellé « TÉLÉPHONE » n'y tiennent
   plus côte à côte.

   Le !important est indispensable et volontaire : la largeur de colonne est
   posée par WordPress en style « en ligne » sur l'élément, et seule une
   déclaration !important peut la surcharger depuis une feuille de style.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.cs-deux-colonnes {
		flex-wrap: wrap;
	}

	.cs-deux-colonnes > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   900 px — la mise en page passe sur une colonne
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* Contenu principal et colonne latérale l'un sous l'autre. */
	.cs-avec-aside {
		grid-template-columns: minmax(0, 1fr);
	}

	.cs-aside {
		position: static;
	}

	.cs-hero-preuves {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 20px;
	}

	.cs-pied-colonnes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px;
	}

	.cs-section {
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}
}

/* --------------------------------------------------------------------------
   782 px — point de rupture natif de WordPress
   Les colonnes s'empilent. La barre d'action fixe apparaît.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	:root {
		/* Réserve la place de la barre fixe pour que le pied de page reste
		   entièrement lisible. 56 px de barre + le liseré supérieur. */
		--cs-hauteur-barre-mobile: 57px;
	}

	.cs-barre-mobile {
		display: block;
	}

	/* La colonne latérale devient un bloc de contenu comme un autre. */
	.cs-avec-aside {
		gap: var(--wp--preset--spacing--40);
	}

	/* Le téléphone de l'en-tête ferait doublon avec la barre du bas. */
	.cs-tel-entete .cs-tel-mention {
		display: none;
	}

	/* Sur les écrans les plus étroits ce lien se réduit à son icône : il doit
	   rester une cible d'au moins 44 px, sans quoi il devient impossible à
	   viser au pouce. */
	.cs-tel-entete {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}

	.cs-tel-numero {
		font-size: 1rem;
	}

	/* Le bouton Devis de l'en-tête ferait doublon avec celui de la barre. */
	.cs-barre-actions .wp-block-buttons,
	.cs-barre-actions .cs-entete-devis {
		display: none;
	}

	/* La gouttière se resserre pour TOUT le site d'un coup — sections, hero,
	   en-tête, pied de page — parce qu'elle est pilotée par la variable que
	   WordPress utilise lui-même. Sans cela, il faudrait la corriger bloc par
	   bloc, et un bloc oublié se verrait immédiatement.
	   Le sélecteur « html body » l'emporte sur la déclaration de WordPress
	   sans recourir à !important. */
	html body {
		--wp--style--root--padding-left: 18px;
		--wp--style--root--padding-right: 18px;
	}

	.cs-barre-contenu {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.cs-logo-nom {
		font-size: 1.3125rem;
	}

	.cs-hero {
		padding-top: 46px;
		padding-bottom: 44px;
	}

	/* Le hero photographique garde une hauteur et une réserve basse : c'est
	   cette réserve qui laisse voir le capot et le logo sous le texte. La règle
	   ci-dessus, écrite pour le hero sans image, les écraserait — elle a la
	   même spécificité et arrive plus tard dans la cascade. */
	.cs-hero--photo {
		padding-top: 38px;
		padding-bottom: 72px;
	}

	.cs-hero-actions {
		gap: 12px;
		margin-bottom: 0;
	}

	/* Sur téléphone, un bouton d'action occupe toute la largeur : la cible est
	   plus sûre et la hiérarchie reste lisible. */
	.cs-hero-actions .wp-block-button,
	.cs-hero-actions .wp-block-button__link {
		width: 100%;
	}

	.cs-carte {
		padding: 26px 22px;
	}

	.cs-partenaire {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 26px 24px;
	}

	.cs-urgence {
		padding: 32px 24px;
	}

	.cs-encadre {
		padding: 24px 22px;
	}

	.cs-faq summary {
		font-size: 1.0625rem;
		gap: 14px;
	}

	/* Le survol ne s'applique pas au doigt : l'effet resterait figé après
	   l'appui, la carte semblerait bloquée. */
	.cs-carte--lien:hover,
	.cs-carte:hover {
		transform: none;
		box-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   640 px — le formulaire passe sur une colonne
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.cs-form-grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.cs-form button[type="submit"] {
		width: 100%;
	}

	.cs-form-envoi {
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
   560 px — téléphone
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
	.cs-hero-preuves {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 16px;
	}

	/* Sur un écran étroit, un fondu de 68 px de chaque côté mange le tiers de
	   la bande : les images n'y seraient plus qu'à moitié visibles. */
	.cs-carrousel-cadre {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	}

	.cs-pied-colonnes {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.cs-pied-bas {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.cs-etape {
		padding-left: 0;
		padding-top: 58px;
	}

	.cs-etape-num {
		width: 40px;
		height: 40px;
	}

	.cs-coord {
		gap: 13px;
	}

	.cs-urgence-numero {
		gap: 10px;
	}

	.cs-urgence-numero svg {
		width: 26px;
		height: 26px;
	}

	.cs-a-fournir {
		padding: 16px 18px 16px 48px;
	}

	.cs-barre .wp-block-navigation__responsive-container.is-menu-open {
		padding: 20px;
	}
}

/* --------------------------------------------------------------------------
   400 px — très petit téléphone
   Le seul objectif ici : que rien ne déborde ni ne devienne illisible.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	html body {
		--wp--style--root--padding-left: 14px;
		--wp--style--root--padding-right: 14px;
	}

	.cs-barre-contenu {
		gap: 10px;
	}

	.cs-logo-nom {
		font-size: 1.1875rem;
	}

	/* Le numéro complet ne tient plus à côté du logo et du menu :
	   l'icône seule suffit, la barre du bas porte le libellé. */
	.cs-tel-entete .cs-tel-numero {
		display: none;
	}

	.cs-barre-mobile a {
		font-size: 0.875rem;
		gap: 7px;
	}

	.cs-carte {
		padding: 22px 18px;
	}

	.cs-hero-preuves {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.cs-preuve {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Écrans très larges — le contenu ne s'étire pas indéfiniment
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
	.cs-hero {
		padding-top: 116px;
		padding-bottom: 100px;
	}
}