/**
 * Mise en forme du comparateur Motorhome Republic, a la charte du site.
 *
 * ─────────────────────────────────────────────────────────────────────────
 *  ⚠️ A LIRE AVANT DE TOUCHER A CE FICHIER. UNE PREMIERE VERSION A CASSE
 *     LE WIDGET EN PRODUCTION, ET VOICI POURQUOI.
 *
 *  Ce widget n'est pas un iframe : son script injecte son DOM dans la page,
 *  sous « #VehicleSearchForm ». Tout est donc atteignable au CSS. C'est un
 *  piege, parce que sa mise en page n'est PAS faite en CSS.
 *
 *  Le script MESURE la largeur du conteneur, puis pose sur le formulaire une
 *  classe de taille : republic-size-lg, -md, -sm, -xs ou -xxs. Chaque classe
 *  correspond a une disposition differente, libelles en ligne ou empiles,
 *  champs accoles ou separes, dates en un ou deux blocs. Le style en ligne du
 *  conteneur, « max-width: 700px », choisit donc la disposition.
 *
 *  LA PREMIERE VERSION FORCAIT « max-width: none !important » sur le
 *  conteneur. Le widget est passe en disposition « lg », et par-dessus, des
 *  regles « width: 100% », « height: 46px » et « display: flex » sur les
 *  champs se battaient avec cette disposition. Resultat a l'ecran : libelles
 *  coinces dans les cases, dates affichees en double, bouton par-dessus les
 *  champs, carte qui debordait du visuel.
 *
 *  D'OU LES TROIS REGLES QUI SUIVENT, ET QUI NE SE DISCUTENT PAS :
 *
 *   1. NE JAMAIS TOUCHER max-width, width, height, display NI position sur
 *      « #VehicleSearchForm », « .republic-widget-searchform », « .republic-row »,
 *      « .republic-field » ou un champ. C'est la mise en page du widget.
 *   2. NE JAMAIS TOUCHER AUX TAILLES DE POLICE du widget : elles conditionnent
 *      la tenue du texte dans des cases dont la largeur est calculee ailleurs.
 *   3. NE JAMAIS MASQUER NI AFFICHER republic-for-mobile / republic-not-for-mobile.
 *      Le widget sert deux entrees par date et masque lui-meme la bonne. Toute
 *      surcharge « important » sur ces champs fait apparaitre les deux.
 *
 *  Ce qui reste permis, et suffit a brander : les COULEURS, la carte d'accueil
 *  autour du widget, et le bouton. C'est exactement la surface que Motorhome
 *  Republic personnalise elle-meme dans le code d'integration fourni
 *  (.republic-field, div.republic-label, .republic-button span) : on reprend
 *  ses selecteurs plutot que d'en inventer.
 *
 *  Si MHR change son balisage, ce fichier cesse d'agir et le widget reprend son
 *  apparence d'origine. Aucune page ne casse.
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════ la carte qui accueille ═══════ */

/**
 * Le widget est pose dans une carte, sur le visuel du haut de page : le
 * visiteur trouve le formulaire sans faire defiler, et la carte le detache
 * du decor.
 *
 * ⚠️ La largeur de la carte est calee sur celle du widget, 700 px, plus ses
 * marges internes. On adapte la carte au widget, jamais l'inverse : voir
 * l'avertissement en tete de fichier.
 */
.rta-mhr {
	position: relative;
	z-index: 5;
	box-sizing: border-box;
	max-width: 752px;
	margin: 0 auto 36px;
	padding: 24px 26px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(9, 32, 46, .16);
}

/**
 * La remontee sur le visuel n'a lieu QUE si le widget est dans le premier
 * conteneur de la page : c'est inc-mhr.php qui pose cette classe apres avoir
 * lu l'arbre Elementor. Ailleurs, remonter la carte la ferait chevaucher le
 * bloc qui la precede.
 */
.rta-mhr--hero {
	margin-top: -66px;
}

.rta-mhr-titre {
	margin: 0 0 4px !important;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--rta-encre, #09202E);
	text-align: left;
}

.rta-mhr-sous {
	/* Le formulaire du widget apporte deja 25 px de retrait en haut. */
	margin: 0 !important;
	font-size: .9rem;
	line-height: 1.5;
	color: #5A6772;
	text-align: left;
}

/* Notre promesse, celle que nous tenons vraiment : aucune commission. */
.rta-mhr-gage {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 12px 0 0 !important;
	padding-top: 11px;
	border-top: 1px solid var(--rta-ligne, #E5E7EB);
	font-size: .72rem; /* reduit le 10/08/2026 a la demande de Lucas */
	line-height: 1.4;
	color: #5A6772;
	text-align: left;
}

.rta-mhr-gage b {
	color: var(--rta-encre, #09202E);
	font-weight: 700;
}

/* ═════════════════════════════ les couleurs du widget, rien de plus ═══ */

/**
 * Le formulaire se fond dans la carte blanche. Le code d'integration lui pose
 * « background-color: #ffffff !important » : sur fond blanc, transparent est
 * plus propre, et l'ombre reste celle de la carte.
 */
.rta-mhr .republic-widget-searchform form {
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;   /* sinon une boite encadree dans la carte encadree */
}

/**
 * Le texte de la carte s'aligne sur la colonne des champs.
 *
 * Le formulaire du widget s'ecarte de 26 px de plus que ma marge interne, a
 * cause de son propre remplissage. Valeur RELEVEE sur la page, pas estimee :
 * carte a 264 px, titre a 290, premier champ a 316.
 *
 * ⚠️ Cette compensation ne vaut QUE sur grand ecran. En dessous, le widget
 * change de classe de taille et son remplissage n'est plus le meme : on laisse
 * alors le texte suivre la marge de la carte. Ne pas etendre a tous les ecrans
 * sans avoir remesure.
 */
@media (min-width: 992px) {

	.rta-mhr-titre,
	.rta-mhr-sous,
	.rta-mhr-gage {
		padding-left: 26px;
		padding-right: 26px;
	}
}

/* La boite encadree, c'est le CHAMP, pas l'input. Couleurs seulement. */
.rta-mhr .republic-field {
	border-color: var(--rta-ligne, #DDE3E9) !important;
	background-color: #F7F9FB !important;
}

.rta-mhr div.republic-label,
.rta-mhr label.republic-switch-label2 {
	color: #6B7280 !important;
}

/* ------------------------------------------------------- le bouton ---- */

/**
 * ⚠️ La couleur du bouton est portee par le SPAN interne, pas par le bouton :
 * c'est ainsi que MHR l'expose, avec un selecteur par classe de taille. On
 * reprend sa liste telle quelle, sinon la regle ne s'applique qu'a une taille.
 */
.rta-mhr .republic-widget-searchform.republic-size-lg .republic-button span,
.rta-mhr .republic-widget-searchform.republic-size-md .republic-button span,
.rta-mhr .republic-widget-searchform.republic-size-sm .republic-button span,
.rta-mhr .republic-widget-searchform.republic-size-xs .republic-button span,
.rta-mhr .republic-widget-searchform.republic-size-xxs .republic-button span {
	background-color: var(--rta-bleu, #1770ED) !important;
	font-weight: 700 !important;
	letter-spacing: .01em !important;
}

.rta-mhr .republic-widget-searchform.republic-size-lg .republic-button:hover span,
.rta-mhr .republic-widget-searchform.republic-size-md .republic-button:hover span,
.rta-mhr .republic-widget-searchform.republic-size-sm .republic-button:hover span,
.rta-mhr .republic-widget-searchform.republic-size-xs .republic-button:hover span,
.rta-mhr .republic-widget-searchform.republic-size-xxs .republic-button:hover span {
	background-color: #1461cf !important;
}

.rta-mhr button.republic-button {
	border-color: var(--rta-bleu, #1770ED) !important;
	background-color: transparent !important;
	box-shadow: 0 6px 18px rgba(23, 112, 237, .22) !important;
}

/* L'interrupteur du permis reprend le bleu de la charte. */
.rta-mhr .republic-switch input[type="checkbox"]:checked + .slider {
	background-color: var(--rta-bleu, #1770ED) !important;
	border-color: var(--rta-bleu, #1770ED) !important;
}

/* ═══════════════════════════════════════════════════════ mobile ═══════ */

/**
 * ⚠️ Ici non plus on ne touche pas au widget : seule la carte s'adapte. Le
 * widget se reorganise seul, puisqu'il mesure la largeur qu'on lui laisse.
 */
@media (max-width: 991px) {

	.rta-mhr {
		margin: 0 16px 32px;
		padding: 20px 18px 16px;
		border-radius: 14px;
	}

	.rta-mhr--hero {
		margin-top: -34px;
	}

	.rta-mhr-titre {
		font-size: 1.06rem;
	}
}

@media (max-width: 575px) {

	.rta-mhr {
		margin: 0 12px 26px;
		padding: 18px 14px 14px;
	}

	.rta-mhr--hero {
		margin-top: -20px;
	}

	.rta-mhr-gage {
		gap: 4px 14px;
		font-size: .79rem;
	}
}

/**
 * La carte fondue : quand le widget est deja pose dans un bandeau-carte
 * (pages van), l'habillage perd son fond, son ombre et ses angles pour se
 * fondre dans le decor. La classe est posee a l'execution par le script
 * d'inc-mhr.php, qui detecte un ancetre proche ombre ou arrondi. Les champs
 * du formulaire gardent leur propre filet : une seule bordure, la leur.
 */
.rta-mhr--fondu {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	padding-left: 8px;
	padding-right: 8px;
}

/**
 * ═══════════ LE MOTEUR SUR TÉLÉPHONE (constaté le 12/08/2026) ═══════════
 *
 * Sur un écran de 375 px, le formulaire ne recevait que 276 px et son
 * contenu débordait de sa propre boîte : 99 px étaient perdus en chemin,
 * dont 40 px par les marges et le rembourrage de « .rta-mhr--fondu » et
 * 36 px par une largeur de 90 % réglée dans Elementor pour le bureau
 * (corrigée dans mobile-van.css). Le widget imposait en plus des champs de
 * 219 px dans des colonnes de 137 px, d'où deux dates qui se chevauchaient.
 *
 * ⚠️ RIEN N'EST TOUCHÉ AU SCRIPT NI À L'IDENTIFIANT D'AFFILIATION : ce sont
 *    des règles de présentation, et elles ciblent « #VehicleSearchForm »
 *    parce que le script du widget RÉÉCRIT la classe du conteneur, alors
 *    que l'identifiant survit.
 *
 * ⚠️ LES LIBELLÉS SONT DÉJÀ LÀ : ce sont les « .republic-size-xxs-header ».
 *    Ne pas révéler « .republic-label » en plus, cela fait deux libellés
 *    par champ (essayé, constaté).
 *
 * ⚠️ LE POINT DE RUPTURE EST 991 px, PAS 640. À 768 px, c'est-à-dire sur une
 *    tablette en portrait, le bandeau du héros restait en deux colonnes : le
 *    moteur n'avait que 325 px pour un contenu qui en réclamait 700, et la
 *    page défilait horizontalement. Ne pas redescendre ce seuil sans avoir
 *    remesuré à 768 px.
 */
@media (max-width: 991px) {

	/* la carte fondue ne garde aucune marge latérale : c'est le conteneur
	   Elementor qui donne déjà le retrait */
	.rta-mhr--fondu {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* un champ par ligne, sur toute la largeur disponible */
	#VehicleSearchForm .republic-row,
	#VehicleSearchForm .republic-date,
	#VehicleSearchForm .republic-time,
	#VehicleSearchForm .republic-field,
	#VehicleSearchForm .republic-input,
	#VehicleSearchForm .republic-input input,
	#VehicleSearchForm select,
	#VehicleSearchForm .republic-size-xxs-header {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* la boîte doit grandir avec son contenu : elle était figée à 40 px de
	   haut alors que le champ de date mobile en fait 65 */
	#VehicleSearchForm .republic-field,
	#VehicleSearchForm .republic-input {
		height: auto !important;
		min-height: 0 !important;
	}

	#VehicleSearchForm .republic-for-mobile {
		height: 42px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/**
	 * Les dates gardent DEUX colonnes, et ce n'est pas un oubli : le widget
	 * écrit les deux intitulés PUIS les deux champs. Empilés, on lirait
	 * « Départ, Retour, 20/08, 23/08 ». Une grille de deux colonnes remet
	 * chaque intitulé au-dessus de son champ.
	 */
	#VehicleSearchForm .republic-section-dates {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
	}

	#VehicleSearchForm .republic-section-dates > *:nth-child(n+5) {
		grid-column: 1 / -1;
	}

	/* le bouton : pleine largeur et 48 px de haut, c'est LE geste de la page */
	#VehicleSearchForm .republic-button {
		width: 100% !important;
		min-height: 48px !important;
		font-size: 1rem !important;
	}
}

/**
 * ════════ LE FORMULAIRE RESSERRÉ, POUR QUE LE BOUTON TIENNE À L'ÉCRAN ════════
 *
 * Suite du héros mobile (voir mobile-van.css, section 3). Une fois le moteur
 * remonté en tête de page, il restait un problème mesuré à 390 × 844 px :
 * le bouton « Rechercher » tombait à 904 px, soit 60 px SOUS la ligne de
 * flottaison. L'internaute voyait un formulaire sans en voir l'action.
 *
 * ATTENTION : LA PLACE EST PRISE SUR LES BLANCS DU FORMULAIRE, PAS SUR L'IMAGE
 *    NI SUR LE TEXTE. Le réflexe aurait été de raboter la bande d'image ou le
 *    chapeau du moteur ; c'est justement ce qui porte le sens. Le formulaire,
 *    lui, dépensait 570 px pour six champs — soit 95 px par champ, quand un
 *    intitulé et un champ en occupent 68. Le reste était de la marge.
 *
 * ATTENTION : ON NE TOUCHE PAS À LA HAUTEUR DES CHAMPS (42 px) NI À CELLE DU
 *    BOUTON (48 px). Ce sont des cibles tactiles ; les rétrécir pour gagner
 *    des pixels rendrait le formulaire plus court et moins utilisable, ce qui
 *    est le contraire du but.
 *
 * Détail des 74 px récupérés :
 *   · intitulés  26 px → 20 px, sur cinq lignes d'intitulés     −30 px
 *   · champs et rangées, marge basse 10 px → 6 px, cinq fois    −20 px
 *   · sections « lieux » et « dates », marge basse 20 px → 12   −16 px
 *   · rangée de l'interrupteur, 10 + 10 → 6 + 6                  −8 px
 */
@media (max-width: 991px) {

	/* Les intitulés : 26 px de haut pour un texte de 13 px, dont 5 px de
	   remplissage bas. On garde la taille du texte, on rend le blanc. */
	#VehicleSearchForm .republic-size-xxs-header {
		height: auto !important;
		min-height: 0 !important;
		line-height: 1.25 !important;
		padding-bottom: 2px !important;
		margin-bottom: 0 !important;
	}

	/* L'espace entre un champ et l'intitulé suivant. */
	#VehicleSearchForm .republic-field,
	#VehicleSearchForm .republic-row {
		margin-bottom: 6px !important;
	}

	/* L'espace entre les grands blocs du formulaire. */
	#VehicleSearchForm .republic-section-locations,
	#VehicleSearchForm .republic-section-dates,
	#VehicleSearchForm .republic-section-driver {
		margin-bottom: 12px !important;
	}

	/* La ligne de l'interrupteur « âge du conducteur ». */
	#VehicleSearchForm .republic-switch-row {
		margin-top: 6px !important;
		margin-bottom: 6px !important;
	}
}

/**
 * Deux réglages qui se défendent seuls, et qui rendent les 20 derniers pixels.
 *
 * Le bouton mesurait 65 px de haut alors que la règle plus haut n'en demande
 * que 48 au minimum : 65 px, c'est un bouton qui déborde de sa fonction. 52 px
 * reste très au-dessus des 44 px recommandés pour une cible tactile.
 *
 * Le chapeau du moteur affichait deux lignes à 21,5 px d'interligne pour un
 * texte de 14 px. 1,35 suffit et se lit mieux.
 */
@media (max-width: 991px) {

	#VehicleSearchForm .republic-button {
		height: 52px !important;
		min-height: 52px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.rta-mhr-sous {
		line-height: 1.35 !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   L'ENCRE DES EN-TETES DE CHAMP EN VERSION TELEPHONE (25/08/2026)

   ⚠️ ILS ETAIENT BLANCS SUR BLANC, DONC INVISIBLES, SUR LES 37 PAGES. Le bloc
      ci-dessus leur donnait bien une largeur, jamais une couleur : la
      plateforme les colore en blanc parce que son integration par defaut se
      pose sur une image sombre. Notre habillage, lui, met toujours le
      formulaire dans une CARTE BLANCHE. Les huit en-tetes (Pays, Lieu de
      depart, Lieu de retour, Depart, Retour, Permis de conduire, Nationalite,
      Age) disparaissaient donc purement et simplement, contraste mesure 1,0.
      Signale par Lucas sur la page Melbourne le 25/08/2026.

      On ne reprend QUE la couleur, avec la meme encre que « .republic-label »
      pour que les deux etats du formulaire se ressemblent. Le « important » est
      necessaire : la couleur blanche vient d'une feuille de la plateforme,
      chargee apres la notre.
   ═══════════════════════════════════════════════════════════════════════ */

.rta-mhr .republic-size-xxs-header,
.rta-mhr div.republic-size-xxs-header,
#VehicleSearchForm .republic-size-xxs-header {
	color: #6B7280 !important;
}