/* Couche responsive pour la mise en page historique en tableaux à largeur fixe
   (gabarit famille wepdf).
   les derniers ajouts). Les gabarits HTML ne sont pas touchés : tout se joue ici. */

img {
	max-width: 100%;
	height: auto;
}

/* Les blocs AdSense ont une largeur en dur dans leur attribut style (728px, 336px).
   Un max-width en % ne les contraint pas : dans une cellule de tableau dimensionnée
   par son contenu, le pourcentage n'a pas de référence et est ignoré. D'où le vw,
   qui est une longueur absolue. C'est ce bloc qui élargissait toute la page. */
ins.adsbygoogle {
	max-width: calc(100vw - 32px) !important;
}


/* Les iframes tierces (bouton Facebook data-width=450, pubs) ont une largeur en
   dur ; comme les blocs AdSense, seul un vw absolu les contraint dans une
   cellule de tableau. */
iframe {
	max-width: calc(100vw - 32px) !important;
}

@media (max-width: 860px) {
	/* Les images à grande taille naturelle (logo 481px…) imposent une largeur
	   minimale à la cellule de tableau : le max-width:100% global est ignoré,
	   comme pour AdSense. Seule une longueur absolue (vw) les contraint. */
	img {
		max-width: calc(100vw - 32px) !important;
		height: auto !important;
	}

	/* La rangée d'en-tête logo / bouton Facebook ne tient pas côte à côte :
	   on l'empile. Le widget fb-like (data-width=450) est aussi plafonné. */
	td:has(.fb-like),
	td:has(.fb-like) ~ td {
		display: block;
		width: 100% !important;
		text-align: center;
	}
	.fb-like {
		display: block;
		max-width: calc(100vw - 32px) !important;
		overflow: hidden;
	}


	body {
		margin: 0;
		padding: 0 8px;
	}

	/* Sans ça, les bordures des tableaux imbriqués s'ajoutent aux width:100%
	   et chaque niveau d'imbrication déborde de quelques pixels. */
	table, td, th, div, input {
		box-sizing: border-box;
	}

	/* Neutralise les width/height en dur des tableaux de mise en page. */
	table {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	td, th {
		height: auto !important;
	}

	/* Les cellules à largeur fixe en pixels repassent en fluide. */
	td[width], th[width] {
		width: auto !important;
	}

	td[nowrap], td[nowrap="nowrap"] {
		white-space: normal !important;
	}

	/* Les <form> sont écrits entre <tr> et <td> : le parseur les sort du tableau,
	   donc aucun sélecteur descendant de form ne matche. On cible les champs. */
	input[type="text"], input.searchinput {
		/* size="40" impose une largeur mini qui débordait l'écran. */
		width: 100% !important;
		min-width: 0;
		box-sizing: border-box;
		/* 16px minimum, sinon iOS zoome sur le champ au focus. */
		font-size: 16px !important;
	}

	input[type="submit"] {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		height: 44px !important;
		font-size: 16px;
	}

	/* La ligne du formulaire (libellé / champ / bouton) s'empile. */
	td:has(input[type="text"]),
	td:has(input[type="submit"]),
	td:has(input[type="text"]) + td,
	td:has(> table td.links) {
		display: block;
		width: 100% !important;
		padding: 4px 0;
		text-align: left;
	}

	/* Le 11px arial d'origine est illisible sur un écran de téléphone. */
	body, .normal-text, .small-text, .adsense, .links, .description, .tags, a, a:hover {
		font-size: 14px;
		line-height: 1.45;
	}

	.exemple {
		font-size: 12px;
	}

	/* Cibles tactiles : les liens de résultats sont collés les uns aux autres. */
	.numbers a, a.pagination {
		display: inline-block;
		padding: 6px 8px;
	}

	/* Les URL et noms de fichiers PDF, très longs, débordaient la cellule. */
	td, p, .description, .small-text {
		/* break-word césure à l'affichage mais est ignoré dans le calcul de
		   largeur minimale des tableaux : une URL longue force quand même un
		   débordement. Seul overflow-wrap:anywhere (et word-break:break-word
		   chez les anciens navigateurs) compte dans le min-content. */
		word-wrap: break-word;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}