/* Composant commun « calendrier de culture » (includes/calendrier.php) :
   fiche produit (lecture) et admin (saisie). Jetons de grilles.css
   (.og-grille sur la fiche, .og-charte dans l'admin). */

/* Couleur de chaque étape : barres, échantillons et cases cochées. */
:is(.og-cal-t-abri, .og-cal-case:checked[data-type="abri"]) {
	background: repeating-linear-gradient(135deg, var(--og-vert) 0 3px, var(--og-vert-clair) 3px 6px);
}

:is(.og-cal-t-semis, .og-cal-case:checked[data-type="semis"]) {
	background: var(--og-vert);
}

:is(.og-cal-t-plantation, .og-cal-case:checked[data-type="plantation"]) {
	background: var(--og-vert-clair);
	box-shadow: inset 0 0 0 1.5px var(--og-vert);
}

:is(.og-cal-t-recolte, .og-cal-case:checked[data-type="recolte"]) {
	background: var(--og-recolte);
}

:is(.og-cal-t-floraison, .og-cal-case:checked[data-type="floraison"]) {
	background: var(--og-or-clair);
}

.og-cal-t-auj {
	background: color-mix(in srgb, var(--og-brun) 8%, transparent);
	box-shadow: inset 2px 0 0 var(--og-brun);
}

.og-cal-echantillon.og-cal-t-auj {
	border-radius: 0;
}

.og-cal-echantillon {
	display: inline-block;
	flex: none;
	width: 26px;
	height: 10px;
	border-radius: 3px;
}

/* Lecture ------------------------------------------------------------------- */

.og-cal {
	overflow-x: auto;
	padding: 18px 20px 16px;
	border-radius: var(--og-arrondi);
	background: var(--og-blanc);
}

.og-cal-grille {
	position: relative;
	display: grid;
	grid-template-columns: 150px repeat(12, minmax(26px, 1fr));
	row-gap: 8px;
	min-width: 520px;
}

.og-cal-ligne {
	display: contents;
}

.og-cal-mois {
	padding: 6px 0;
	border-radius: 4px;
	color: var(--og-gris-texte);
	font: 600 var(--og-taille-xs)/1.2 var(--og-police-bouton);
	letter-spacing: 0.04em;
	text-align: center;
}

.og-cal-mois-lettre {
	display: none;
}

.og-cal-mois[data-auj] {
	background: var(--og-brun);
	color: var(--og-blanc);
}

.og-cal-libelle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 10px;
	color: var(--og-brun);
	font: 500 var(--og-taille-s)/1.3 var(--og-police-bouton);
}

.og-cal-piste {
	position: relative;
	display: grid;
	grid-column: 2 / -1;
	grid-template-columns: repeat(12, 1fr);
	height: 22px;
	border-radius: 4px;
	/* Piste vide en crème, mois séparés d’un filet gris (1.7.1 : un cran plus marqué). */
	background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), var(--og-gris) calc(100% / 12 - 1px) calc(100% / 12)) var(--og-creme);
}

.og-cal-barre {
	grid-row: 1;
	height: 100%;
	margin: 0 2px;
	border-radius: 4px;
}

.og-cal-barre[data-coupe-g] {
	margin-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.og-cal-barre[data-coupe-d] {
	margin-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* Colonne du mois en cours, sur toute la hauteur. */
.og-cal-auj {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(150px + (100% - 150px) / 12 * var(--og-cal-mois));
	width: calc((100% - 150px) / 12);
	background: color-mix(in srgb, var(--og-brun) 6%, transparent);
	border-left: 2px solid var(--og-brun);
	pointer-events: none;
}

.og-cal-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 14px 0 0;
	color: var(--og-brun);
	font: 400 var(--og-taille-s)/1.4 var(--og-police-bouton);
}

.og-cal-legende span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Saisie (admin) ------------------------------------------------------------ */

.og-cal-saisie {
	padding: 0;
	background: none;
}

.og-cal-saisie .og-cal-grille {
	grid-template-columns: 170px repeat(12, minmax(30px, 1fr));
	gap: 4px;
}

.og-cal-saisie .og-cal-libelle .og-cal-echantillon {
	width: 14px;
	height: 8px;
	border-radius: 2px;
}

/* Classe répétée : l'emporte sur les cases à cocher de l'admin. */
.og-cal-case.og-cal-case {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	height: 28px;
	margin: 0;
	border: 1px solid var(--og-gris);
	border-radius: 4px;
	background: var(--og-creme);
	cursor: pointer;
}

.og-cal-case.og-cal-case:hover {
	border-color: var(--og-or);
}

.og-cal-case.og-cal-case:checked {
	border-color: transparent;
}

.og-cal-case.og-cal-case:checked::before {
	content: none;
	display: none;
}

.og-cal-case.og-cal-case:focus-visible {
	outline: 2px solid var(--og-or);
	outline-offset: 1px;
}

@media (max-width: 576px) {
	.og-cal {
		padding: 14px 12px;
	}

	/* Téléphone : l'initiale du mois, le calendrier tient dans la largeur. */
	.og-cal-grille {
		grid-template-columns: 96px repeat(12, minmax(16px, 1fr));
		min-width: 0;
	}

	.og-cal:not(.og-cal-saisie) .og-cal-mois-court {
		display: none;
	}

	.og-cal:not(.og-cal-saisie) .og-cal-mois-lettre {
		display: inline;
	}

	.og-cal-auj {
		left: calc(96px + (100% - 96px) / 12 * var(--og-cal-mois));
		width: calc((100% - 96px) / 12);
	}

	.og-cal-libelle {
		font-size: var(--og-taille-xs);
	}
}

/* Mémo de saison (og_calendrier_memo) : une pastille par étape remplie et
   la ligne « En ce moment ». Fiche (sous l'achat) et panneau de l'aperçu. */
.og-cal-memo {
	display: grid;
	gap: 10px;
}

.og-cal-memo-etapes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.og-cal-memo-etapes li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	background: var(--og-creme);
	color: var(--og-brun);
	font: 500 var(--og-taille-s)/1.3 var(--og-police-bouton);
}

.og-cal-memo-etapes .og-cal-echantillon {
	width: 22px;
}

.og-cal-memo-etapes b {
	color: var(--og-texte);
	font-weight: 600;
}

/* Même retrait que les pastilles du dessus : le point au centre de la place
   de leur échantillon (8 px de bord, 22 px), le texte aligné sur le leur. */
.og-cal-maintenant {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding-left: 8px;
	color: var(--og-texte);
	font: 400 var(--og-taille-m)/1.45 var(--og-police-bouton);
}

.og-cal-point {
	flex: none;
	width: 10px;
	height: 10px;
	margin: 6px 6px 0;
	border-radius: 50%;
	background: var(--og-vert);
	box-shadow: 0 0 0 4px var(--og-vert-clair);
}

.og-cal-maintenant[data-calme] .og-cal-point {
	background: var(--og-gris);
	box-shadow: 0 0 0 4px var(--og-creme);
}