/* Corrections d'affichage mobile (sous le breakpoint md de Tailwind, 768px).
 *
 * CSS ecrit a la main, PAS genere par Tailwind : la chaine de build ne tourne pas sur ce
 * serveur (ni node ni npm) et build/app.css est un build purge qui ne contient que les 45
 * variantes md: deja employees. Une classe responsive ajoutee dans un gabarit serait donc
 * inerte. Meme contrainte et meme convention que cards.css.
 *
 * Charge APRES build/app.css dans base.html.twig. app.css range ses utilitaires dans
 * @layer utilities ; les regles ci-dessous sont hors couche et l'emportent donc quelle que
 * soit la specificite.
 *
 * Deux debordements horizontaux corriges, d'origines independantes. Mesures au navigateur
 * (largeur de defilement du document contre largeur visible) avant / apres :
 *   /search              911px pour 360px  ->  360px pour 360px
 *   /rent-exeed-dubai    697px pour 360px  ->  360px pour 360px
 */


/* =========================================================================
 * 1. BARRE DE RECHERCHE  (template_page/show.html.twig, search/index.html.twig)
 *
 * La barre etait un unique `flex items-center` sans retour a la ligne, alignant
 * loupe + champ + modele + bouton + periode + filtres : ~890px de contenu pour ~327px
 * disponibles sur un ecran de 375px. Les deux menus deroulants (min-w-[220px] et
 * min-w-[400px]), poses en absolu sous leur bouton, debordaient a leur tour a l'ouverture.
 *
 * Sous 768px la barre passe a trois rangees :
 *   1. loupe | champ | bouton (loupe seule)
 *   2. selecteur de modele, pleine largeur
 *   3. periode | plus de filtres
 * Les bases flex sont explicites (100% puis 50%) : les ruptures sont deterministes a toute
 * largeur d'ecran et ne dependent pas de la longueur du texte traduit.
 * ========================================================================= */

@media (max-width: 767px) {

	.search-bar {
		flex-wrap: wrap;
		row-gap: 0.5rem;
		padding: 0.5rem;
		border-radius: 1.25rem; /* rounded-full sur trois rangees donnerait une ellipse */
		position: relative;     /* devient le bloc conteneur des menus deroulants */
	}

	/* ---- Rangee 1 : loupe | champ | bouton ---- */

	.search-bar__icon {
		padding-left: 0.25rem;
	}

	.search-bar__field {
		flex: 1 1 8rem; /* base basse : le champ cede la place, il ne pousse pas les autres */
		min-width: 0;   /* sans ca, la largeur intrinseque d'un <input> (~177px) fait plancher */
	}

	.search-bar__field input,
	input.search-bar__field {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.search-bar__submit {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Loupe seule : le libelle est repris par l'aria-label du bouton, deja traduit. */
	.search-bar__submit > span {
		display: none;
	}

	/* ---- Rangees 2 et 3 : les trois selecteurs ---- */

	.search-bar__opt {
		order: 1;         /* passent apres le bouton, qui les suit pourtant dans le DOM */
		position: static; /* les menus s'ancrent alors sur .search-bar, pas sur le bouton */
		margin-left: 0;
		margin-right: 0;
		min-width: 0;
	}

	.search-bar__opt--model {
		flex: 1 1 100%;
	}

	.search-bar__opt--period,
	.search-bar__opt--filter {
		flex: 1 1 calc(50% - 0.25rem);
	}

	.search-bar__opt > button {
		width: 100%;
		justify-content: space-between;
		padding-top: 0.625rem;
		padding-bottom: 0.625rem;
	}

	/* Le selecteur de modele est sans cadre : seul sur sa rangee, il flotterait. */
	.search-bar__opt--model > button {
		border: 1px solid #d1d5db;
	}

	.search-bar__opt > button > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.search-bar__opt > button > svg {
		flex-shrink: 0;
	}

	/* Le bouton « plus de filtres » EST l'element flex, pas un enfant. */
	.search-bar__opt--filter {
		padding: 0.625rem 0.75rem;
	}

	/* ---- Menus deroulants : cales sur la largeur de la barre ---- */

	.search-bar__menu {
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-width: 100%;
	}

	/* Quotidien / hebdo / mensuel : trois boutons pour ~279px utiles, il leur faut la ligne. */
	.search-bar__periods {
		flex-wrap: wrap;
	}

	.search-bar__periods > button {
		flex: 1 1 auto;
	}
}


/* =========================================================================
 * 2. TABLEAUX DU CONTENU EDITORIAL
 *
 * 202 des 204 pages publiees contiennent un tableau comparatif de quatre colonnes.
 * Il mesure ~480px pour ~262px utiles sur un ecran de 375px et faisait defiler la PAGE
 * entiere vers la droite. `display:block` + `overflow-x:auto` enferme le defilement dans
 * le tableau : la page ne bouge plus, le tableau se parcourt seul. Le contenu n'est pas
 * modifie -- c'est une contrainte de place, quatre colonnes ne tiennent pas en 262px.
 * ========================================================================= */

@media (max-width: 767px) {

	.prose table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Mots insecables (URL, references) : ils cassent au lieu de pousser la page. */
	.prose {
		overflow-wrap: break-word;
	}
}