/* Couche adaptative « téléphone » (barre Menu / Appeler / Devis, une colonne).
   Ce fichier est copié par tools/ameliorations.py vers site/assets/css/mobile.css ;
   site/ est régénéré : modifier ici, pas dans site/.
   Chargé en dernier (après couteau-suisse.css). Tout est sous des requêtes média
   `screen` (téléphone uniquement, jamais à l'impression), sauf le masquage de la barre
   sur ordinateur et à l'impression. Polices en rem/em uniquement. */

.barre-mobile { display: none; }

@media screen and (max-width: 799.98px) {

	/* ---- Base ---- */
	body { font-size: 100%; }
	img { max-width: 100%; height: auto; }
	img[style*="height"] { height: auto !important; } /* styles en ligne de SPIP (logos) */
	.spip_documents, .spip_documents div { max-width: 100% !important; box-sizing: border-box; } /* bat les style="width:350px" en ligne */

	/* ---- Mise en page : une colonne ---- */
	#contenant { width: 100%; margin: 0; background: none; }
	#entete { height: auto; background: none; margin: 0; }
	#colgauche { float: none; width: 100%; margin: 0; padding: 0; }
	#colcentre { margin: 0 16px; padding: 0 0 1em 0; }
	#contenu { margin: 0 16px; padding: 0.5em 0 1em 0; }
	#pied { width: 100%; box-sizing: border-box; height: auto; min-height: 0; margin: 0;
		padding: 0 16px 1em 16px; background: none; }

	.menuGauche, #coldroite, #topmenu { display: none; }

	/* ---- Bandeau ---- */
	#entete .titre-site {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
	}
	#entete .titre-site a, #entete .titre-site a:link, #entete .titre-site a:visited {
		position: static; display: inline-block; height: auto; padding: 0.5rem 0; font-size: 1rem;
		color: #193485; text-decoration: underline;
	}
	/* le titre réapparaît pendant que son lien a le focus clavier (WCAG 2.4.7) */
	#entete .titre-site:focus-within {
		position: static !important; width: auto; height: auto; margin: 0; padding: 0 16px;
		overflow: visible; clip: auto; white-space: normal;
	}
	#entete .titre-site a:focus-visible { outline: 2px solid #193485; outline-offset: 2px; }
	#entete p {
		position: static; display: block; width: 100%; height: auto;
		aspect-ratio: 740 / 140; margin: 0; padding: 0;
		background-size: contain; background-position: center top;
	}

	/* ---- Barre mobile ---- */
	.barre-mobile {
		container-type: inline-size;
		display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start;
		min-height: 48px; box-sizing: border-box; padding: 0 0.5rem;
		background: #fff; border-bottom: 1px solid #BFBFBF; font-size: 1rem;
	}
	.menu-mobile { flex: 0 0 auto; order: 0; }
	.menu-mobile summary {
		display: flex; align-items: center; gap: 0.5rem; box-sizing: border-box;
		min-height: 48px; min-width: 48px; padding: 0 0.5rem; cursor: pointer;
		list-style: none; color: #993300; font-weight: bold;
	}
	.menu-mobile summary::-webkit-details-marker { display: none; }
	.burger {
		display: block; width: 1.25rem; height: 0.125rem; background: currentColor;
		box-shadow: 0 -0.375rem 0 currentColor, 0 0.375rem 0 currentColor;
	}
	.bm-appeler, .bm-devis {
		order: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
		box-sizing: border-box; min-height: 48px; min-width: 48px; padding: 0 0.75rem;
		font-weight: bold; text-decoration: none;
	}
	.bm-appeler, .bm-appeler:link, .bm-appeler:visited { color: #993300; margin-left: auto; }
	.bm-devis, .bm-devis:link, .bm-devis:visited {
		order: 2; background: #993300; color: #fff; margin: 0.25rem 0 0.25rem 0.25rem;
		min-height: 2.75rem; border-radius: 0.25rem;
	}
	.bm-devis:hover { text-decoration: underline; }

	/* menu ouvert : la liste prend toute la largeur sous la barre, le bouton Menu reste dans la barre */
	.menu-mobile[open] { flex: 0 0 100%; order: 3; position: relative; padding-top: 48px; margin-top: -48px; }
	.menu-mobile[open] summary { position: absolute; top: 0; left: 0; }
	.menu-mobile ul { list-style: none; margin: 0 0 0.5rem 0; padding: 0; }
	.menu-mobile li { margin: 0 0 0.375rem 0; }
	.menu-mobile li a, .menu-mobile li a:link, .menu-mobile li a:visited {
		display: block; box-sizing: border-box; min-height: 2.75rem; padding: 0.625rem 0.75rem;
		border: 1px solid #BFBFBF; color: #993300; font-weight: bold; line-height: 1.3;
		text-decoration: none;
	}
	.menu-mobile li a[aria-current] { border-color: #993300; background: #F6ECE6; }

	/* barre trop étroite pour tenir sur une ligne (texte agrandi) : elle passe sur plusieurs lignes ;
	   l'astuce de marge négative ci-dessus suppose une seule ligne, on la remplace par un flux normal.
	   Seuil en em du conteneur : suit la taille de police racine. */
	@container (max-width: 18.5em) { /* besoin mesuré : Menu + Appeler + Devis court = 287,5 px = 18 em ; à 320 px/100 %, 19 em disponibles */
		.menu-mobile[open] { order: 0; padding-top: 0; margin-top: 0; }
		.menu-mobile[open] summary { position: static; }
	}
	/* libellé long du Devis (≥ 440 px) : besoin ≈ 415 px = 26 em */
	@media (min-width: 440px) {
		@container (max-width: 26em) {
			.menu-mobile[open] { order: 0; padding-top: 0; margin-top: 0; }
			.menu-mobile[open] summary { position: static; }
		}
	}

	/* texte long masqué sous 400 px */
	.bm-long { display: inline; }

	/* ---- Focus ---- */
	summary:focus-visible, .barre-mobile a:focus-visible, .menu-mobile a:focus-visible {
		outline: 2px solid #193485; outline-offset: 2px;
	}
	.bm-devis:focus-visible { outline: 2px solid #193485; outline-offset: -4px; box-shadow: inset 0 0 0 2px #fff; }

	/* ---- Contenu ---- */
	#contenu, #colcentre, #contenu .texte, #colcentre #message_accueil { overflow-wrap: anywhere; }
	#contenu .texte, #colcentre #message_accueil, #colcentre p a, #colcentre p a:link,
	#colcentre p a:visited, #colcentre .nouveau-boite .introduction, #colcentre #message_accueil p a {
		font: inherit; font-size: 1rem; line-height: 1.5;
	}
	#contenu .texte { padding: 0.75rem; }
	/* liens dans le texte : soulignés (pas de survol au toucher ; Lighthouse link-in-text-block) */
	#colcentre #message_accueil p a, #colcentre #message_accueil p a:link,
	#colcentre #message_accueil p a:visited { text-decoration: underline; }
	p, #contenu p, #colcentre p { text-align: left; }
	#contenu .chapo, #contenu p.soustitre { font-size: 1rem; margin: 1em 0; }
	#contenu h1 { font-size: 1.35rem; line-height: 1.3; }
	#colcentre h2 { font-size: 1.5rem; }
	#colcentre h3 { font-size: 1.125rem; }
	#boite-srubrique-rubrique h3, #boite-srubrique-rubrique h2, #boite-articles-rubrique h3, #boite-liens-rubrique h3,
	#boite-syndic-rubrique h3 { font-size: 1.125rem; }
	#contenu .date, #contenu .auteur-titre { font-size: 1rem; }

	#contenu #boite-logo-article, #contenu #boite-logo-rubrique {
		float: none; width: auto; max-width: 100%; margin: 0 auto 1em auto; text-align: center;
	}
	#contenu #boite-logo-article img, #contenu #boite-logo-rubrique img { margin: 8px auto; }

	#colcentre .nouveau-boite, #colcentre .nouveau-boite div.logo { float: none; width: auto; }
	.contenu-nouveau { margin-left: 0; }

	/* listes de sous-rubriques / articles */
	.pairs a, .impairs a, #articles li a, #boite-srubrique-rubrique li a,
	#boite-liens-rubrique li a, #boite-syndic-rubrique li a {
		display: block; box-sizing: border-box; min-height: 2.75rem; padding-top: 0.625rem;
		padding-bottom: 0.625rem; font-size: 1rem; line-height: 1.4;
	}

	/* ---- Pied de page ---- */
	#pied, #pied a { overflow-wrap: anywhere; } /* adresse de courriel longue, texte agrandi */
	#pied .pied-infos { font-size: 1rem; text-align: center; }
	#pied .pied-infos a, #pied .pied-infos a:link, #pied .pied-infos a:visited,
	#pied .pied-nom { font-size: 1rem; }
	#pied .pied-liens li { display: block; padding: 0; }
	#pied .pied-liens li + li { border-left: 0; }
	#pied .pied-liens li a {
		display: block; box-sizing: border-box; min-height: 2.75rem; padding: 0.625rem 0;
	}
}

/* Petits écrans : le libellé long du bouton Devis ne tient pas, il reste lu par les lecteurs d'écran */
@media screen and (max-width: 439.98px) {
	.bm-long {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
	}
}
@media screen and (max-width: 399.98px) {
	.spip_documents_left, .spip_documents_right {
		float: none !important; display: block; margin: 0 auto 1em;
	}
}