/*
 * Adaptation aux petits écrans. Au-dessus de 830 px, rien ne change : l'affichage de bureau reste
 * celui de l'ancien site, au pixel près (seule règle hors media query : le sélecteur de langue
 * texte, masqué). En dessous, les tableaux de 810 px passent en colonne : langues en haut, menu
 * en grille tactile, contenu pleine largeur, encadrés sous le contenu, globe masqué.
 */
.yt-lang {
	display: none;
}

@media (max-width: 829px) {
	/* Dans un tableau, max-width sur une image ne contraint rien : la bande de 810 px imposerait
	   sa largeur. La structure principale passe donc en blocs. */
	table.yt,
	table.yt > tbody,
	table.yt > tbody > tr,
	table.yt > tbody > tr > td,
	table.yt-nav,
	table.yt-nav > tbody,
	table.yt-nav > tbody > tr:first-child,
	table.yt-nav > tbody > tr:first-child > td {
		display: block;
		width: 100% !important;
	}
	table.yt img {
		max-width: 100%;
		height: auto;
	}

	/* En-tête : logo à gauche, langues à droite. */
	table.yt > tbody > tr:first-child table,
	table.yt > tbody > tr:first-child table > tbody {
		display: block;
		width: 100% !important;
	}
	table.yt > tbody > tr:first-child table tr {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 12px;
		padding: 8px 12px 12px;
	}
	table.yt > tbody > tr:first-child table td {
		display: block;
		width: auto !important;
		font-size: 0;
	}
	.yt-lang {
		display: inline-flex;
		gap: 4px;
	}
	.yt-lang a,
	.yt-lang a:visited {
		display: inline-block;
		min-width: 34px;
		padding: 8px 0;
		border: 1px solid #d8d2b8;
		border-radius: 4px;
		font-size: 13px;
		font-weight: bold;
		line-height: 1;
		color: #585342;
		text-align: center;
		text-decoration: none;
	}
	.yt-lang a[aria-current] {
		background: #9a8211;
		border-color: #9a8211;
		color: #fff;
	}
	tr.yt-flags {
		display: none !important;
	}

	/* Menu : grille de libellés, cibles tactiles de 44 px, page courante en jaune. */
	.yt-nav-img {
		display: none;
	}
	.yt-nav-txt {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1px;
		background: #e2dcc4;
		border-bottom: 1px solid #e2dcc4;
	}
	.yt-nav-txt td {
		display: block;
		height: auto;
		background: #f7f5ee;
		font-size: 0;
	}
	.yt-nav-txt a.nav,
	.yt-nav-txt a.nav:visited {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px;
		font-size: 14px;
		line-height: 1.2;
		color: #585342;
	}
	.yt-nav-txt a.nav[aria-current] {
		background: #9a8211;
		color: #fff;
		font-weight: bold;
	}

	/* Colonne de contenu puis colonne de droite, l'une sous l'autre. */
	table.yt-body,
	table.yt-body > tbody,
	table.yt-body > tbody > tr,
	table.yt-body > tbody > tr > td.yt-left,
	table.yt-body > tbody > tr > td.yt-right {
		display: block;
		width: auto !important;
	}
	td.yt-globe,
	td.yt-title-spacer {
		display: none;
	}

	/* Contenu : titre, bandeau, texte lisible (11 px sur l'ancien site). */
	table.yt-content {
		width: 100% !important;
		margin-top: 20px !important;
	}
	table.yt-content table[height="36"] {
		height: auto;
	}
	/* Bandeau du titre : l'image de 511 px est étirée au lieu de se répéter avec une couture. */
	table.yt-content > tbody > tr:first-child > td {
		background-size: 100% 100%;
	}
	table.yt-content td.is {
		padding: 8px 16px 10px;
	}
	table.yt-content img[width="511"] {
		width: 100%;
	}
	table.yt-content td[cellpadding],
	table.yt-content table[cellpadding="20"] > tbody > tr > td {
		padding: 16px;
	}
	table.yt-content .text {
		font-size: 15px;
		line-height: 1.6;
	}
	table.yt-content .text ul {
		padding-left: 22px;
	}

	/* Encadrés : côte à côte si la place le permet, sinon l'un sous l'autre. */
	td.yt-right > table {
		width: 100% !important;
		margin: 8px 0 0 !important;
	}
	td.yt-right > table > tbody {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		padding: 0 12px;
	}
	td.yt-right > table > tbody > tr {
		display: block;
	}
	td.yt-right > table > tbody > tr:nth-child(2),
	td.yt-right > table > tbody > tr:nth-child(4) {
		display: none;
	}
	/* Cadre de l'encadré seulement : les tableaux de texte qu'il contient gardent leurs largeurs
	   en pourcentage, sinon le texte passe sur l'illustration. */
	td.yt-right > table > tbody > tr > td > table {
		margin: 0 auto;
		width: 225px !important;
	}

	/* Pied de page. */
	.signature,
	a.signature,
	a.signature2 {
		font-size: 12px;
	}
}

/* Tablette : le texte ne s'étale pas sur toute la largeur. */
@media (min-width: 600px) and (max-width: 829px) {
	table.yt-content {
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
	.yt-nav-txt {
		grid-template-columns: repeat(6, auto);
	}
}

/* Petit téléphone : menu sur deux colonnes. */
@media (max-width: 400px) {
	.yt-nav-txt {
		grid-template-columns: 1fr 1fr;
	}
}