/**
 * Le rendu téléphone des pages de location de van.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ⚠️ POURQUOI CETTE FEUILLE EXISTE, ET POURQUOI SES SÉLECTEURS SONT LOURDS
 *
 * Les blocs historiques de ces pages (cartes de vans, comparatif des
 * compagnies, filtres, quiz) portent leur CSS dans un « <style> » posé DANS
 * LE CORPS de la page, par widget. À spécificité égale, c'est le dernier
 * dans le document qui gagne : une feuille chargée dans l'en-tête perd donc
 * systématiquement. D'où le préfixe « body » et les chaînes de deux classes,
 * qui ne sont pas une coquetterie mais la seule façon de l'emporter sans
 * aller réécrire huit widgets en base.
 *
 * Chargée uniquement là où le moteur MHR est présent (voir inc-mhr.php),
 * c'est-à-dire sur les pages van.
 *
 * Constats du 12/08/2026 sur un écran de 375 px, avant correction :
 *  - le moteur de réservation recevait 276 px et débordait (voir mhr.css) ;
 *  - 277 nœuds de texte sous 14 px, dont 30 à 10,4 px ;
 *  - le détail des vans les moins chers n'était accessible QU'AU SURVOL,
 *    donc jamais sur un téléphone.
 */

/**
 * ════════════ 1. LES LARGEURS, DU TÉLÉPHONE À LA TABLETTE ════════════
 *
 * Tout ce qui suit vaut jusqu'à 991 px, parce que les trois pertes de
 * largeur mesurées le 12/08/2026 se produisent AUSSI à 768 px, où elles
 * font défiler la page horizontalement.
 */
@media (max-width: 991px) {

	/**
	 * Elementor écrit une classe « elementor-widget__width-… » quand on fixe
	 * une largeur en pourcentage. Ici le moteur était à 90 %, soit 36 px
	 * perdus. On ne rétablit 100 % que s'il n'existe AUCUNE largeur mobile
	 * ou tablette explicite : si l'auteur en a réglé une, c'est un choix.
	 */
	.elementor [class*="elementor-widget__width-"]:not([class*="elementor-widget-mobile__width"]):not([class*="elementor-widget-tablet__width"]) {
		width: 100% !important;
	}

	/**
	 * Le bandeau du héros restait en DEUX COLONNES à 768 px : le texte d'un
	 * côté, le moteur de l'autre, 325 px chacun. On les empile, le moteur
	 * récupère toute la largeur.
	 */
	#search {
		flex-wrap: wrap !important;
	}

	#search > .e-con {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	#search .e-con-full {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/**
	 * ⚠️ AUCUN CONTENEUR NE DOIT DÉPASSER L'ÉCRAN. Le conteneur du bloc
	 * « quand partir » gardait une largeur de 1 094 px à 768 px : à lui seul
	 * il faisait défiler la page de 336 px. La règle ne fait que plafonner,
	 * elle n'élargit jamais rien.
	 */
	.elementor [data-element_type="container"] {
		max-width: 100% !important;
	}

	/**
	 * ══════════════ 2. LISIBILITÉ ET ACCÈS AU TOUCHER ══════════════
	 *
	 * ⚠️ CES RÈGLES VALENT JUSQU'À 991 px, PAS SEULEMENT SUR TÉLÉPHONE.
	 *    Une tablette n'a pas plus de survol qu'un téléphone, et 10 px
	 *    n'y sont pas plus lisibles. Limitées à 640 px, elles laissaient
	 *    71 textes sous 12 px à 768 px (mesuré).
	 */

	/**
	 * CE QUI N'ÉTAIT VISIBLE QU'AU SURVOL
	 *
	 * Les trois cartes « vans les moins chers » cachent leur équipement dans
	 * une infobulle en opacité 0, révélée au survol de la souris. Sur un
	 * téléphone il n'y a pas de survol : le contenu était inatteignable. On
	 * le pose sous l'image, en clair.
	 */
	body .cheap-van-list .cheap-van-image-container {
		overflow: visible !important;
		height: auto !important;
	}

	body .cheap-van-list .cheap-van-tooltip {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		width: auto !important;
		height: auto !important;
		transform: none !important;
		padding: 12px 14px !important;
		background: #F7F9FB !important;
		border-top: 1px solid #E5E7EB !important;
		border-radius: 0 0 12px 12px !important;
	}

	body .cheap-van-list .cheap-van-tooltip * {
		color: #3C4043 !important;
	}

	body .cheap-van-list .cheap-van-tooltip li {
		font-size: .875rem !important;
		line-height: 1.5 !important;
	}

	/**
	 * LES TAILLES DE TEXTE DES BLOCS HISTORIQUES
	 *
	 * Aucune valeur en dessous de 12 px, et 14 px pour tout ce qui se lit
	 * comme une phrase. Les badges gardent le droit d'être petits, pas les
	 * descriptions ni les boutons.
	 */
	body .featured,
	body .filter-count {
		font-size: .78rem !important;
	}

	body .loueur-category,
	body .loueur-features,
	body .loueur-features strong,
	body .price-note {
		font-size: .875rem !important;
	}

	body .view-button,
	body .loueur-btn {
		font-size: .94rem !important;
		min-height: 44px !important;
	}

	/**
	 * LES MICRO-LIBELLÉS DE NOS PROPRES BLOCS
	 *
	 * Ils sont dessinés pour un écran large, où 11 px passent. Sur un
	 * téléphone, la même valeur devient illisible : les libellés de tuiles,
	 * les hypothèses du calculateur et les statistiques des cartes
	 * d'itinéraires remontent tous au-dessus de 12 px.
	 */
	.rta-bg .rta-bg__champ label,
	.rta-bg .rta-bg__aide,
	.rta-bg .rta-bg__unite,
	.rta-bg .rta-bg__table .hyp,
	.rta-bg .rta-bg__totlib {
		font-size: .8rem !important;
	}

	.rta-qp .rta-qp__lib,
	.rta-qp .rta-qp__tuile-lib,
	.rta-qp .rta-qp__tuile-sub,
	.rta-qp .rta-qp__jauge-lib,
	.rta-qp .rta-qp__etiq {
		font-size: .8rem !important;
	}

	.rta-pf .rta-pf__table thead th,
	.rta-pf .rta-pf__table thead th span {
		font-size: .8rem !important;
	}

	.rta-hv .rta-hv__lib,
	.rta-hv .rta-hv__ptt {
		font-size: .8rem !important;
	}

	/**
	 * Les repères du graphique de saisonnalité (« Pâques », « Noël », « le
	 * moins cher ») tiennent dans des colonnes de 55 px : les agrandir les
	 * couperait. Le bloc les remplace déjà par une pastille en dessous de
	 * 640 px ; on étend ce traitement à la tablette, où ils s'affichaient
	 * encore en 9,9 px.
	 */
	.rta-qp .rta-qp__pic,
	.rta-qp .rta-qp__mini {
		font-size: 0 !important;
		height: 11px !important;
	}

	.rta-qp .rta-qp__pic:not(:empty)::before,
	.rta-qp .rta-qp__mini:not(:empty)::before {
		content: '';
		display: block;
		width: 6px;
		height: 6px;
		margin: 2px auto 0;
		border-radius: 50%;
		background: currentColor;
	}
}

/**
 * ════════════ 3. LE HÉROS SUR TÉLÉPHONE : LE MOTEUR D'ABORD ════════════
 *
 * Demande de Lucas, 24/08/2026 : « je veux qu'un utilisateur qui arrive sur la
 * page voie en premier le moteur, et ensuite les éléments de certification et
 * de réassurance », d'abord sur la page nationale, puis sur les treize pages
 * villes — en gardant l'image de héros propre à chaque ville.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * CE QUI ÉTAIT MESURÉ, à 390 × 844 px, sur les pages servies
 *
 *   page nationale   le moteur commençait à 959 px, le bouton à 1 566 px
 *   Sydney           le moteur à 929 px, le bouton à 1 473 px
 *   Cairns           le moteur à 588 px, le bouton à 1 093 px
 *   Melbourne        le moteur à 538 px, le bouton à 1 032 px
 *
 * L'écran fait 844 px : sur aucune de ces pages le bouton de recherche
 * n'était visible à l'arrivée, et sur trois d'entre elles le moteur lui-même
 * ne l'était pas.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * TROIS STRUCTURES DIFFÉRENTES, RELEVÉES UNE PAR UNE DANS L'ARBRE ELEMENTOR
 *
 *   A. « bande séparée + réassurance » — page nationale, Sydney.
 *      Un premier conteneur VIDE qui ne porte qu'une image de fond, puis un
 *      conteneur de contenu qui remonte par une marge négative de -330 px.
 *      Dedans, une rangée : bloc de réassurance à gauche, moteur à droite.
 *
 *   B. « bande séparée, réassurance en widget » — Cairns.
 *      Même bande vide, mais le bloc de réassurance est un widget de texte,
 *      pas un conteneur.
 *
 *   C. « tout-en-un » — les onze autres : Airlie Beach, Hobart, Brisbane,
 *      Melbourne, Perth, Adélaïde, Darwin, Gold Coast, Apollo,
 *      Melbourne–Sydney, Sydney–Cairns.
 *      Un seul conteneur porte l'image ET le contenu : titre, sous-titre,
 *      moteur. Le moteur y est DÉJÀ le premier élément après les deux titres :
 *      il n'y a rien à réordonner, seulement de la hauteur à rendre.
 *
 * ATTENTION : AUCUNE IMAGE N'EST TOUCHÉE. Les images de héros sont celles de
 *    chaque ville et elles sont justes ; les règles ne portent que sur des
 *    hauteurs, des marges et un ordre d'affichage. Rien n'est modifié en base
 *    non plus : tout est réversible en retirant cette section.
 */
@media (max-width: 991px) {

	/**
	 * 3.1 — L'ORDRE : LE MOTEUR PASSE DEVANT LA RÉASSURANCE
	 *
	 * ATTENTION : LA CONDITION « :not(:has(> .elementor-widget-heading)) » EST
	 *    LE CŒUR DE LA RÈGLE, PAS UN DÉTAIL. Sans elle, le conteneur du moteur
	 *    remonterait aussi au-dessus du H1 de la page — à chaque niveau de
	 *    l'arbre, la branche qui mène au moteur passerait devant. On n'inverse
	 *    donc QUE dans un conteneur qui ne porte pas de titre : c'est-à-dire
	 *    exactement le niveau où le moteur cohabite avec la réassurance, et
	 *    jamais celui où il cohabite avec le titre de la page.
	 *
	 *    Vérifié sur les quatre structures : elle attrape la rangée de la page
	 *    nationale, celle de Sydney, le conteneur de Cairns dont le frère est
	 *    un widget de texte — et elle laisse tranquilles les onze pages
	 *    « tout-en-un », où le moteur est un widget et non un conteneur.
	 *
	 * ATTENTION : L'ORDRE DU DOCUMENT N'EST PAS MODIFIÉ, seulement l'ordre
	 *    d'affichage. Le H1 reste le premier titre du document.
	 */
	.elementor .e-con:not(:has(> .elementor-widget-heading)) > .e-con:has(#VehicleSearchForm),
	.elementor .e-con-inner:not(:has(> .elementor-widget-heading)) > .e-con:has(#VehicleSearchForm) {
		order: -1 !important;
	}

	/* La rangée du héros s'empile franchement au lieu de compter sur le
	   retour à la ligne, pour que « order » s'applique sans ambiguïté. */
	.elementor .e-con:has(> .e-con #VehicleSearchForm) {
		flex-direction: column !important;
	}

	/**
	 * 3.2 — LA BANDE D'IMAGE QUAND ELLE EST UN CONTENEUR À PART
	 *       (structures A et B : nationale, Sydney, Cairns)
	 *
	 * Cette bande est VIDE : aucun élément enfant, son seul rôle est le décor.
	 * Elle occupait 591 px, dont 261 px de bande nue avant que le contenu ne
	 * vienne la recouvrir.
	 *
	 * ATTENTION : SA HAUTEUR ET LA MARGE NÉGATIVE DU CONTENEUR SUIVANT VONT
	 *    PAR PAIRE, et les deux valeurs se lisent ensemble : 300 − 170 = 130 px
	 *    de bande nue. C'est le CHEVAUCHEMENT qui est augmenté, pas l'image qui
	 *    est écrasée : elle garde ses 300 px et reste ample en fond, c'est la
	 *    carte blanche qui monte plus haut dessus — le parti pris du héros
	 *    desktop. Raboter l'image aurait donné les mêmes pixels en abîmant le
	 *    décor.
	 *
	 *    La barre de menu occupe les 94 premiers pixels. Avec 130 px de bande
	 *    nue, le titre se pose 31 px sous elle : c'est la limite basse, ne pas
	 *    descendre le chevauchement plus loin sans revérifier ce dégagement.
	 *
	 * « :not(:has(*)) » désigne un conteneur sans aucun élément enfant : c'est
	 * ce qui distingue une bande purement décorative d'un héros tout-en-un.
	 */
	.elementor > .e-con:first-child:not(:has(*)):not(:has(#VehicleSearchForm)) {
		min-height: 300px !important;
		height: auto !important;
		padding-top: 70px !important;
		padding-bottom: 30px !important;
	}

	.elementor > .e-con:first-child:not(:has(*)):not(:has(#VehicleSearchForm)) + .e-con {
		margin-top: -170px !important;
	}

	/**
	 * 3.3 — LE HÉROS TOUT-EN-UN (structure C : les onze pages villes)
	 *
	 * Ici le même conteneur porte l'image et le contenu. Il se voyait imposer
	 * une hauteur de 439 px sur téléphone, alors que son contenu en demande
	 * davantage : la hauteur en dur ne servait qu'à ajouter du vide. On laisse
	 * le contenu décider, et on rend les rembourrages excessifs.
	 */
	/**
	 * ATTENTION : NE PAS AJOUTER DE REMBOURRAGE ICI. C'est l'enveloppe interne
	 *    « .e-con-inner » qui porte 110 px en haut et 130 px en bas, pas le
	 *    conteneur externe. Une première version posait 56 px sur l'externe :
	 *    ils s'ADDITIONNAIENT aux 110 px de l'interne et le formulaire de
	 *    Melbourne est descendu de 538 à 553 px — la correction avait empiré la
	 *    page qu'elle devait améliorer. Mesuré, puis corrigé.
	 *
	 *    Les 110 px du haut, eux, ne bougent pas : ils dégagent la barre de
	 *    menu, qui occupe les 94 premiers pixels. Les 130 px du bas, en
	 *    revanche, n'allongent la page pour rien.
	 */
	.elementor > .e-con:first-child:has(#VehicleSearchForm) {
		min-height: 0 !important;
		height: auto !important;
	}

	.elementor > .e-con:first-child:has(#VehicleSearchForm) > .e-con-inner {
		padding-bottom: 28px !important;
	}

	/**
	 * Le sous-titre du héros des pages villes — « Comparez et réservez votre
	 * van aménagé ou camping car au meilleur prix… » — tenait sur CINQ lignes
	 * en 18 px, soit 115 px de haut, juste au-dessus du moteur.
	 *
	 * Il est visé comme « le titre qui suit un titre » : c'est le sous-titre
	 * par construction, et le H1 n'est jamais touché.
	 */
	.elementor .e-con:has(#VehicleSearchForm)
		.elementor-widget-heading + .elementor-widget-heading .elementor-heading-title {
		font-size: 1rem !important;
		line-height: 1.35 !important;
	}

	/**
	 * 3.4 — LES TITRES DU HÉROS, SUR TOUTES LES PAGES
	 *
	 * Le H1 de la page nationale portait une interligne de 52 px pour une
	 * police de 24 px et 50 px de marge basse : 102 px pour une ligne de
	 * texte, juste au-dessus de ce qu'on veut mettre en avant. Sur Melbourne,
	 * titre et sous-titre occupaient 194 px à eux deux.
	 */
	.elementor .e-con:has(#VehicleSearchForm) .elementor-widget-heading {
		margin-bottom: 8px !important;
	}

	.elementor .e-con:has(#VehicleSearchForm) .elementor-widget-heading .elementor-heading-title {
		line-height: 1.2 !important;
	}

	/**
	 * 3.5 — LE BLANC JUSTE AU-DESSUS DU MOTEUR
	 *
	 * Les pages villes posent une marge haute de 30 px sur le widget du
	 * moteur, et notre habillage y ajoute son propre rembourrage. Additionné
	 * au reste, cela faisait 184 px de blanc entre le sous-titre et le premier
	 * champ sur Melbourne.
	 */
	.elementor .elementor-widget-html:has(#VehicleSearchForm) {
		margin-top: 8px !important;
	}

	.rta-mhr {
		padding-top: 10px !important;
	}
}