/* Ecrans larges mais courts, typiquement les portables 1366x768 et 1280x720.
 *
 * Le probleme constate : toute la typographie du site est calee sur la LARGEUR
 * de l'ecran, via des `clamp(..., vw, ...)`. Un portable de 1366 px de large est
 * assez large pour declencher les tailles maximales, mais bien trop court pour
 * les afficher. Mesure sur la page d'accueil en 1366x768 : l'en-tete faisait
 * 127 px et le heros 626 px, soit 753 px des 768 disponibles. Le visiteur voyait
 * l'en-tete, le heros, et rien d'autre : aucun indice qu'il y avait une suite.
 *
 * Ce fichier n'ajoute donc qu'un point de rupture sur la HAUTEUR, absent
 * jusqu'ici alors que tous les autres portent sur la largeur. Il ne touche a
 * rien en dessous de 1000 px de large, ou les regles mobiles existantes font
 * deja le travail, ni au-dessus de 860 px de haut, ou il n'y a pas de probleme.
 *
 * Charge APRES la feuille de la page, donc a specificite egale il l'emporte.
 * C'est pour cela que les selecteurs de titre reprennent le bloc parent
 * (`.hero h1` et non `h1`) : sinon la regle de la page, plus specifique,
 * gagnerait.
 *
 * Resultat mesure apres application, toujours en 1366x768 : fin du heros a
 * 572 px au lieu de 753, soit 196 px de la section suivante visibles, et son
 * titre « Ce que nous appareillons » apparait a l'ecran.
 */

@media (min-width: 1000px) and (max-height: 860px) {

	/* --- en-tete -----------------------------------------------------------
	   127 px, soit 17 % de la hauteur utile d'un 768. Le logo en fait 75 a lui
	   seul. On le reduit sans descendre au format mobile, et on resserre le
	   bandeau de services plutot que de le masquer : il porte les lieux et les
	   horaires, c'est une information utile. */
	.logo-img { height: 56px; }
	.hdr-serv-row { padding-top: .3rem; padding-bottom: .3rem; }

	/* --- blocs de tete -----------------------------------------------------
	   Chaque gabarit a le sien : .hero sur l'accueil, .ns-hero sur les soins,
	   .chero, .shero, .bhero, .phero ailleurs. Tous ont une marge verticale en
	   clamp() calee sur la largeur, donc maximale sur ces ecrans. */
	.hero { min-height: 0; padding: 1.75rem 0; }
	.chero, .shero, .bhero, .phero, .ns-hero { padding-top: 1.75rem; padding-bottom: 1.4rem; }
	.liste-tete, .vide-bloc { padding-top: 1.6rem; padding-bottom: 1.2rem; }

	/* --- titres ------------------------------------------------------------
	   56 px sur un ecran de 768 de haut, c'est un titre qui mange un quart de
	   ce qu'on voit. On garde une hierarchie nette, simplement moins haute. */
	.hero h1, .chero h1, .shero h1, .bhero h1, .phero h1, .ns-hero h1,
	.liste-tete h1, .vide-bloc h1, main h1 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); }

	/* --- accroche ----------------------------------------------------------
	   Sur l'accueil elle faisait 166 px, presque autant que le titre. On la
	   laisse respirer en largeur pour qu'elle prenne moins de lignes. */
	.hero .lede, .ns-hero .lede, .chero .lede {
		font-size: 1rem;
		line-height: 1.5;
		max-width: 62ch;
		margin-top: .8rem;
	}
	.hero .acts, .ns-hero .acts { margin-top: 1.1rem; }
	.hero-note { margin-top: 1.1rem; }
}