/*
 * KLD – Méthode et indice : mise en place de la Lune et de la roue du jour
 * sur les 36 adresses de signe (jour, demain, après-demain).
 * Chargée seulement si kld_m_lune ou kld_m_roue est allumé, sur ces adresses.
 * Rien ici ne touche le reste du site : tout part de .kld-m-lune, .kld-m-roue
 * ou de la classe du body kld-m-roue-gauche.
 */

/* Phase lunaire : la carte prend toute la largeur du conteneur (l'ancien bloc
   était une rangée Bootstrap image + texte). */
#phase-lunaire.kld-m-lune .kld-lune {
	margin-left: auto;
	margin-right: auto;
}

/* Roue au-dessus d'« Ambiance » (téléphone, place « dessus », ou navigateur
   sans :has()) : un peu d'air sous le bloc de l'indice. */
.kld-m-roue {
	margin-top: 32px;
}
.kld-m-roue .kld-ciel {
	margin-left: auto;
	margin-right: auto;
}

/* Roue à gauche d'« Ambiance » (place par défaut, choix du client), sur
   ordinateur seulement, et seulement si la roue est réellement dans la page
   (:has). Sans :has(), la roue reste au-dessus. */
@media (min-width: 992px) {
	body.kld-m-roue-gauche #horoscope-cont:has(> .kld-m-roue) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 700px) minmax(0, 1fr);
		column-gap: 24px;
		align-items: start;
	}
	body.kld-m-roue-gauche #horoscope-cont:has(> .kld-m-roue) > * {
		grid-column: 1 / -1;
	}
	body.kld-m-roue-gauche #horoscope-cont:has(> .kld-m-roue) > .kld-m-roue {
		grid-column: 2;
		margin-top: 32px;
	}
	body.kld-m-roue-gauche #horoscope-cont:has(> .kld-m-roue) > .kld-m-roue > .container,
	body.kld-m-roue-gauche #horoscope-cont:has(> .kld-m-roue) > #ambiance-de-journee {
		width: 100%;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
	body.kld-m-roue-gauche #horoscope-cont:has(> .kld-m-roue) > #ambiance-de-journee {
		grid-column: 3;
		margin-top: 32px;
	}
	/* Colonne de 700 px : les quatre pourcentages passent en deux rangées (constaté au banc). */
	body.kld-m-roue-gauche #horoscope-cont:has(> .kld-m-roue) > #ambiance-de-journee #horoscope-notes {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: center;
		gap: 24px 32px;
	}
}