/*
 * plg_system_hubertiere : calendrier des disponibilités, tarifs, page de mise à jour.
 * Couleurs en variables : le template peut les redéfinir (partiel SCSS _hubertiere.scss du template).
 */
:root {
	--hub-libre: #e6f4ea;
	--hub-libre-texte: #1e4620;
	--hub-pris: #b3261e;
	--hub-pris-texte: #ffffff;
	--hub-choisi: #0b57d0;
	--hub-choisi-texte: #ffffff;
	--hub-bord: #c9c9c9;
	--hub-danger: #b3261e;
}

/* ---- Calendrier ---- */
.hub-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.hub-pastille { display: inline-block; width: 1.1em; height: 1.1em; border-radius: .25em; vertical-align: -.15em; border: 1px solid var(--hub-bord); }
.hub-pastille.hub-libre { background: var(--hub-libre); }
.hub-pastille.hub-pris { background: var(--hub-pris); }
.hub-pastille.hub-choisi { background: var(--hub-choisi); }

.hub-mois-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 1rem 0; }
/* 0.2.2 : nombre de colonnes choisi par le plugin pour des lignes pleines (6 mois = 3 + 3, 12 mois = 4 × 3) */
@media (min-width: 40rem) { .hub-mois-grille { grid-template-columns: repeat(var(--hub-c-s, 2), minmax(0, 1fr)); } }
@media (min-width: 60rem) { .hub-mois-grille { grid-template-columns: repeat(var(--hub-c-m, 3), minmax(0, 1fr)); } }
@media (min-width: 75rem) { .hub-mois-grille { grid-template-columns: repeat(var(--hub-c-l, 4), minmax(0, 1fr)); } }
.hub-mois { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; margin: 0; }
.hub-mois caption { font-weight: 700; text-transform: capitalize; padding-bottom: .3rem; }
.hub-mois th { font-size: .85em; font-weight: 600; text-align: center; }
.hub-mois th abbr { text-decoration: none; }
.hub-mois td { padding: 0; text-align: center; }
.hub-jour { display: block; width: 100%; aspect-ratio: 1; line-height: 1; padding: 0; border: 0; border-radius: .3rem; font: inherit; font-size: .9em;
	display: flex; align-items: center; justify-content: center; }
.hub-libre .hub-jour { background: var(--hub-libre); color: var(--hub-libre-texte); }
.hub-pris .hub-jour { background: var(--hub-pris); color: var(--hub-pris-texte); }
.hub-passe .hub-jour { opacity: .35; }
.hub-aujourdhui .hub-jour { outline: 2px solid currentColor; outline-offset: -2px; font-weight: 700; }

/* ---- Tarifs ---- */
.hub-tarifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.hub-tarif { border-top: 2px solid var(--hub-bord); padding-top: .5rem; text-align: center; }
.hub-tarif p { margin: 0 0 .3rem; }
.hub-tarif-mention { font-size: .9em; font-style: italic; }
.hub-tarif-prix { font-size: 1.6em; font-weight: 700; }
.hub-tarifs-infos .hub-important { color: var(--hub-danger); font-weight: 600; }

/* ---- Page de mise à jour (contrastée, peu d'éléments ; tailles standard du site depuis 0.2.12 : Michelle n'a pas besoin de gros caractères) ---- */
.hub-espace { line-height: 1.5; max-width: 60rem; }
.hub-espace h2 { margin-top: 2rem; }
.hub-espace label { display: block; font-weight: 600; margin-bottom: .3rem; }
.hub-espace input[type="text"], .hub-espace input[type="password"], .hub-espace input[type="date"] {
	font-size: 1rem; padding: .45rem .7rem; min-height: 2.5rem; border: 1px solid #767676; border-radius: .4rem; max-width: 100%; }
.hub-espace .hub-case { display: flex; gap: .6rem; align-items: center; font-weight: 400; }
.hub-espace .hub-case input { width: 1.1rem; height: 1.1rem; }
.hub-bouton { box-sizing: border-box; font-size: 1rem; font-weight: 600; min-height: 2.5rem; padding: .45rem 1.2rem; border: 0; border-radius: .5rem;
	background: var(--hub-choisi); color: var(--hub-choisi-texte); cursor: pointer; }
.hub-bouton:disabled { opacity: .45; cursor: not-allowed; }
.hub-bouton--second { background: #e3e3e3; color: #1f1f1f; }
.hub-bouton--danger { background: var(--hub-danger); color: #fff; }
.hub-bouton:focus-visible, .hub-jour:focus-visible, .hub-voir:focus-visible { outline: 3px solid #f9ab00; outline-offset: 2px; }
.hub-voir { margin-left: .5rem; font-size: .9rem; min-height: 2.5rem; padding: 0 .8rem; border: 1px solid #767676; border-radius: .4rem; background: #fff; cursor: pointer; }
.hub-lien { background: none; border: 0; padding: 0; font-size: 1rem; text-decoration: underline; cursor: pointer; color: inherit; }
.hub-deconnexion { margin-top: 2.5rem; }
.hub-aide { font-size: .95rem; }
.hub-erreur { padding: .8rem 1rem; border-left: 6px solid var(--hub-danger); background: #fce8e6; font-weight: 600; }
.hub-etapes li { margin-bottom: .2rem; }
.hub-calendrier--saisie button.hub-jour { cursor: pointer; }
.hub-calendrier--saisie button.hub-jour:hover { box-shadow: inset 0 0 0 2px var(--hub-choisi); }
.hub-calendrier--saisie .hub-choisi .hub-jour, .hub-calendrier--saisie button.hub-jour.hub-choisi { background: var(--hub-choisi); color: var(--hub-choisi-texte); }
.hub-resume { font-size: 1.1rem; padding: .6rem 1rem; background: #f1f3f4; border-left: 6px solid var(--hub-choisi); border-radius: .3rem; }
.hub-dates { display: flex; flex-wrap: wrap; gap: 1rem; }
.hub-avenir { list-style: none; padding: 0; }
.hub-avenir li { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between;
	padding: .8rem 0; border-bottom: 1px solid var(--hub-bord); }
.hub-avenir form { margin: 0; }
/* 0.2.7 : « Modifier les dates » = volet dépliant (<details>) ; ouvert, il prend toute la ligne sous la réservation */
.hub-avenir li { gap: .8rem 1rem; }
.hub-avenir .hub-periode { flex: 1 1 14rem; }
.hub-modif > summary { list-style: none; display: inline-flex; align-items: center; }
.hub-modif > summary::-webkit-details-marker { display: none; }
.hub-modif[open] { flex-basis: 100%; order: 3; padding: .8rem 1rem; border: 1px solid var(--hub-bord); border-radius: .5rem; }
.hub-modif[open] > summary { margin-bottom: .8rem; }
.hub-modif form { margin: 0; }
/* Sur téléphone, le volet ouvert ne doit pas dépasser de la carte : champs et bouton à la largeur disponible */
.hub-modif { box-sizing: border-box; min-width: 0; max-width: 100%; }
.hub-modif .hub-dates label { flex: 1 1 12rem; min-width: 0; }
.hub-modif input[type="date"] { box-sizing: border-box; width: 100%; max-width: 100%; }
.hub-modif .hub-bouton { max-width: 100%; white-space: normal; }

/* ---- Écran des tarifs (0.2.0, Super Utilisateurs) ---- */
.hub-admin-tarifs { margin-top: 3rem; padding-top: 1rem; border-top: 3px solid var(--hub-bord); font-size: 1rem; }
.hub-admin-tarifs h2 { margin-top: 0; }
.hub-saisons a, .hub-saisons strong { margin-right: .6rem; }
.hub-note { font-style: italic; }
.hub-ligne { display: grid; grid-template-columns: 1fr; gap: .5rem 1rem; border: 1px solid var(--hub-bord); border-radius: .4rem; padding: .6rem 1rem 1rem; margin: 0 0 .8rem; }
.hub-ligne legend { font-weight: 700; padding: 0 .3rem; font-size: 1rem; }
.hub-ligne label { display: flex; flex-direction: column; font-weight: 600; font-size: .95rem; margin: 0; }
.hub-ligne label.hub-case { flex-direction: row; font-weight: 400; }
.hub-ligne input[type="text"] { font-size: 1rem; padding: .4rem .6rem; min-height: 2.4rem; border: 1px solid #767676; border-radius: .3rem; width: 100%; box-sizing: border-box; }
@media (min-width: 48rem) {
	.hub-ligne { grid-template-columns: 3fr 1fr; }
	.hub-ligne .hub-champ-large { grid-column: 1; }
	.hub-ligne .hub-champ-court { grid-column: 2; }
}
.hub-etat { font-weight: 700; padding: .6rem 1rem; border-radius: .3rem; }
.hub-etat--en-ligne { background: var(--hub-libre); color: var(--hub-libre-texte); }
.hub-etat--preparation { background: #fef7e0; color: #5c3c00; }