/* --------------------------------------------------------------------------
   Fiches « ville » — adoucissement de la mise en page
   --------------------------------------------------------------------------
   Les sections à fond coloré étaient des rectangles à angles vifs, empilés
   sans aucun écart : sur fond clair, la page se lisait comme une suite de
   gros blocs qui se heurtent. On arrondit, on aère, et on laisse respirer.

   Cette feuille est chargée après ville.css et ne fait qu'ajouter : la
   supprimer suffit à revenir à l'état d'origine.
   -------------------------------------------------------------------------- */

.astk-ville-corps {
	/* Un seul endroit à changer pour ajuster tout le rythme de la page. */
	--astk-rayon-bloc: 20px;
	--astk-ecart-bloc: 28px;
	--astk-marge-laterale: 24px;
	--astk-respiration: 48px;
}

/* Blocs à fond coloré : ce sont eux qui produisaient l'effet « carré ». */
.astk-ville-corps .astk-e-d6ea714,
.astk-ville-corps .astk-e-10acc40,
.astk-ville-corps .astk-e-9b9df76,
.astk-ville-corps .astk-e-2548eb0b,
.astk-ville-corps .astk-e-53ae177,
.astk-ville-corps .astk-e-e3c945f {
	border-radius: var( --astk-rayon-bloc );
	/* Sans overflow, les fonds d'enfants débordent par-dessus l'arrondi. */
	overflow: hidden;
}

/* Écart vertical entre sections consécutives. Le sélecteur d'adjacence évite
   d'ajouter une marge en tête de page, sous l'en-tête. */
.astk-ville-corps section.astk-c + section.astk-c {
	margin-top: var( --astk-ecart-bloc );
}

/* Marge intérieure des blocs colorés dont le contenu est aligné à gauche.
   Leur texte démarrait à 0 ou 10px du bord : sur un fond sombre, le titre
   semblait collé à l'arête du bloc. Les autres sections centrent leur contenu
   et n'ont donc pas ce défaut. */
.astk-ville-corps .astk-e-9b9df76 > .astk-in,
.astk-ville-corps .astk-e-2548eb0b > .astk-in,
.astk-ville-corps .astk-e-53ae177 > .astk-in,
.astk-ville-corps .astk-e-e3c945f > .astk-in {
	padding-left: var( --astk-respiration );
	padding-right: var( --astk-respiration );
}

/* Dernière section : le bouton de bas de page était posé à même le pied de
   page, sans aucune séparation. */
.astk-ville-corps > section.astk-c:last-child,
.astk-ville-corps section.astk-c:last-of-type {
	margin-bottom: calc( var( --astk-ecart-bloc ) * 2 );
}

/* Marge latérale : sur les écrans intermédiaires, les blocs venaient coller
   aux bords de la fenêtre. */
@media (max-width: 1200px) {
	.astk-ville-corps section.astk-c {
		margin-left: var( --astk-marge-laterale );
		margin-right: var( --astk-marge-laterale );
	}
}

/* Cartes internes : l'arrondi de 10px était trop discret face à des blocs
   désormais arrondis à 20px, l'ensemble paraissait incohérent. */
.astk-ville-corps .astk-el.astk-icone-box,
.astk-ville-corps .astk-c[class*="astk-e-"] > .astk-in > .astk-c[style*="background"],
.astk-ville-corps .astk-e-f7cc90f,
.astk-ville-corps .astk-e-7cb98bf,
.astk-ville-corps .astk-e-fb27c36,
.astk-ville-corps .astk-e-a592678 {
	border-radius: 14px;
}

/* Boutons : des rectangles nets au milieu de blocs arrondis. La classe est
   portée par le lien lui-même, pas par un conteneur. */
.astk-ville-corps a.astk-btn,
.astk-ville-corps .astk-bouton-zone a {
	border-radius: 10px;
}

/* Listes à puces : l'écart de 0,25em suffisait tant que les icônes Font Awesome
   ne s'affichaient pas. Une fois les chemins de police réparés, la croix venait
   coller au texte. */
.astk-ville-corps .astk-liste-item {
	gap: 0.6em;
	align-items: start;
}

/* L'icône garde la hauteur de la première ligne au lieu de se centrer sur un
   libellé qui passe sur deux lignes. */
.astk-ville-corps .astk-liste-icone {
	padding-top: 0.15em;
}

/* Le tableau comparatif n'était arrondi qu'en haut : les deux colonnes se
   terminaient à angle vif sur le fond clair. */
.astk-ville-corps .astk-e-0977d58 {
	border-radius: 14px 0 0 14px;
}

.astk-ville-corps .astk-e-36cfa65 {
	border-radius: 0 14px 14px 0;
}

/* En mobile les deux colonnes passent l'une sous l'autre : l'arrondi
   horizontal ne veut plus rien dire. */
@media (max-width: 767px) {
	.astk-ville-corps .astk-e-0977d58 {
		border-radius: 14px 14px 0 0;
	}

	.astk-ville-corps .astk-e-36cfa65 {
		border-radius: 0 0 14px 14px;
	}

	.astk-ville-corps {
		--astk-rayon-bloc: 16px;
		--astk-ecart-bloc: 18px;
		--astk-marge-laterale: 14px;
		--astk-respiration: 20px;
	}
}

/* Palier intermédiaire : 48px de marge intérieure en plus des marges latérales
   étranglent le texte sur les écrans de portable. */
@media (min-width: 768px) and (max-width: 1200px) {
	.astk-ville-corps {
		--astk-respiration: 32px;
	}
}