.mcadvlp-min-nights-msg { color: #b91c1c; }
.mcadv-message.mcadvlp-total-message { color: var(--mcadv-primary, #2563eb); font-weight: 600; }

/* Calendrier public agrandi : quand un tarif par jour est affiché dans chaque cellule (voir
   onDayCreate, front.js), les cellules par défaut de Flatpickr (39×39px, chiffre centré) sont
   trop petites pour accueillir le numéro du jour ET le tarif sans que l'un ne recouvre l'autre —
   retour client : "on ne voit plus les dates dès qu'un tarif est défini". Flatpickr calcule
   lui-même la largeur du popup à partir de la largeur CSS de ".dayContainer" (fonction interne
   de flatpickr.min.js qui lit dayContainer.offsetWidth puis répercute cette valeur sur
   ".flatpickr-days" et ".flatpickr-calendar" via leur style inline) : il suffit donc d'élargir ce
   conteneur pour que tout le popup suive, sans avoir à forcer nous-mêmes la largeur du popup.
   ATTENTION — la largeur/hauteur de cellule ci-dessous ne suffit PAS à elle seule : la cause
   racine du symptôme signalé (bouton coloré illisible) est que ".mcadv-tarif" (le badge de
   tarif lui-même, créé par onDayCreate dans front.js) n'a ICI qu'un habillage minimal hérité du
   cœur (".mcadv-front", cf. cc-smart-calendar/assets/css/front.css : petite puce 10px
   bleue/verte) — sa définition COMPLÈTE (variante haute/rouge y compris) vit dans admin.css de
   CET add-on, qui n'est jamais chargé côté public (voir enqueue_on_core_page()/
   enqueue_on_own_pages(), tous deux accrochés à des hooks admin uniquement). Sans un badge
   pleinement défini ici, c'est Flatpickr lui-même (état :hover/:today/.selected, cf.
   flatpickr.min.css) qui fournissait le seul signal de couleur visible sur la cellule, et un
   badge quasi nu venait se superposer dessus. On redéfinit donc ".mcadv-tarif" et ses variantes
   entièrement ci-dessous (au lieu de compter sur admin.css ou sur le cœur), ET on neutralise le
   fond par défaut de Flatpickr pour une cellule "normale" (b, ci-dessous) : la couleur du badge
   redevient le seul signal coloré de la cellule. */
.flatpickr-calendar {
	max-width: calc(100vw - 24px);
}
/* Correctif (retour client, capture d'écran de son site réel) : les deux dernières colonnes du
   popup (chiffres + pastilles de tarif) étaient rognées sur une mise en page où le champ vit
   dans une colonne plus étroite que les 392px forcés ci-dessous. Cause : ".dayContainer" et
   ".flatpickr-days" avaient une largeur FIXE (width = min-width = max-width = 392px), totalement
   indépendante de la place réellement disponible — alors que ".flatpickr-calendar" ci-dessus, lui,
   peut être ramené en-dessous de 392px par son propre "max-width" (calc(100vw - 24px) ci-dessus,
   ou toute contrainte imposée par la page de Victor). Dans ce cas, ".flatpickr-innerContainer"
   (wrapper de Flatpickr lui-même, cf. flatpickr.min.css, "overflow:hidden" — nécessaire par
   ailleurs à l'animation de changement de mois) se retrouvait plus étroit que son contenu forcé à
   392px, et rognait silencieusement l'excédent plutôt que de le faire défiler : exactement le
   symptôme "1,5 colonne coupée" signalé (quelques colonnes perdues, pas tout le calendrier).
   Remplacé par "min(392px, 100%)" : le conteneur de jours reste à 392px tant qu'il y a la place
   (aucun changement visuel dans le cas courant, largement majoritaire), mais se réduit désormais
   avec son propre conteneur au lieu de le déborder dès que la place manque. ".flatpickr-rContainer"
   (parent direct, cf. flatpickr.min.css) est lui-même "display:inline-block" SANS largeur propre :
   par défaut il se contente d'épouser la largeur de son contenu ("shrink-to-fit"), ce qui rend le
   "100%" ci-dessous indéterminé (un pourcentage ne peut se résoudre contre un conteneur dont la
   largeur dépend justement de ce même pourcentage) — on lui fixe donc une largeur explicite
   (100% de ".flatpickr-innerContainer", qui lui a une largeur déterminée : boîte de bloc normale,
   "width:auto" qui épouse son propre parent) pour que la chaîne de pourcentages se résolve
   proprement jusqu'à ".dayContainer". Testé par le raisonnement (voir le rapport de session, pas
   d'environnement WordPress réel ici pour vérifier visuellement) plutôt qu'en conditions réelles :
   si le symptôme persiste malgré ce correctif, la suite logique est de demander à Victor l'URL de
   sa page (ou le CSS de son thème/conteneur) pour un diagnostic précis plutôt que de deviner une
   nouvelle valeur fixe. */
.flatpickr-rContainer {
	width: 100%;
	max-width: 100%;
}
.flatpickr-days,
.dayContainer {
	width: min(392px, 100%);
	max-width: min(392px, 100%);
	/* PAS de min-width:0 ici : laisse volontairement jouer le plancher naturel de contenu
	   (min-width:auto, hérité du mode flex) des cellules de jour et de leur pastille de tarif
	   (".mcadv-tarif", min-width:38px ci-dessous) — mieux vaut refuser de rétrécir sous ce seuil de
	   lisibilité et laisser le défilement horizontal de secours ci-dessous prendre le relais, que de
	   comprimer le numéro du jour et le tarif jusqu'à les rendre illisibles ou superposés. */
}
/* Filet de sécurité : si la largeur réellement disponible est encore plus étroite que ce que
   ".dayContainer" peut raisonnablement atteindre (plancher de lisibilité ci-dessus), l'utilisateur
   peut quand même défiler horizontalement pour voir les colonnes restantes au lieu de les perdre
   silencieusement comme avant ce correctif — on ne touche qu'à l'axe horizontal (overflow-x) et on
   conserve "hidden" sur l'axe vertical (overflow-y), dont dépend l'animation de Flatpickr au
   changement de mois. */
.flatpickr-innerContainer {
	overflow-x: auto;
	overflow-y: hidden;
}
/* On ne plafonne plus la largeur des cellules en-deçà de leur "flex-basis" (14.2857% = 1/7 du
   conteneur ci-dessus, cf. flatpickr.min.css) : à la différence du thème par défaut de Flatpickr
   (cellules rondes plus étroites que leur colonne, pour laisser un espace visuel autour), les
   cellules occupent ici toute leur colonne, bord à bord. Deux raisons : (1) ça laisse assez de
   largeur pour le tarif, (2) ça garde presque nul l'espace horizontal entre cellules, dont
   dépend l'effet de bande continue de Flatpickr sur une période sélectionnée
   (.startRange/.endRange/.inRange, box-shadow calé sur un espacement quasi nul) — un "max-width"
   trop serré aurait réintroduit un espace irrégulier entre cellules et cassé cette bande.
   Le numéro du jour passe en haut de cellule et le tarif en dessous (au lieu d'un tarif en
   position absolute superposé au chiffre) : cellule en colonne flex plutôt que texte centré.
   (a) fond/texte neutres explicites pour une cellule "normale" : Flatpickr ne définit lui-même
   aucun fond pour ce cas (background:none dans flatpickr.min.css), on le rend donc explicite
   plutôt que de laisser transparaître un fond de page potentiellement non blanc. Les états
   spéciaux de Flatpickr (:hover/.today/.selected/.inRange/.flatpickr-disabled) utilisent des
   sélecteurs plus spécifiques (2 classes) que ce simple ".flatpickr-day" : ils continuent donc de
   prendre le dessus normalement, ce fond neutre ne s'applique qu'aux jours "ordinaires". */
.flatpickr-day {
	max-width: 56px;
	height: 64px;
	line-height: 1.2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 7px;
	border-radius: 8px;
	background: #fff;
	color: #1e293b;
}
.flatpickr-day .mcadv-tarif {
	position: static;
	margin-top: 4px;
	pointer-events: none;
}
/* Badge de tarif : défini ICI en entier (voir pavé d'explication ci-dessus) — repris de la
   palette de admin.css (habillage du calendrier admin) pour que le calendrier public ait le
   même rendu que l'aperçu admin, mais réécrit intégralement pour ne dépendre que de cette
   feuille, réellement chargée côté public (contrairement à admin.css). Contraste vérifié :
   texte foncé sur fond clair dans les 3 cas (ratio ≥ 5:1), numéro du jour (#1e293b, ci-dessus)
   sur fond blanc de la cellule, bien séparé visuellement du badge grâce à la mise en page en
   colonne ci-dessus (numéro en haut, badge en dessous, jamais superposés). */
.mcadv-tarif {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	max-width: 100%;
	padding: 2px 7px;
	border-radius: 6px;
	background: #e0f2fe;
	color: #0369a1;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	box-sizing: border-box;
}
/* Vert pour le tarif le plus bas du bien affiché (voir minTarifFor()/onDayCreate dans front.js),
   rouge pour le plus haut — cette dernière variante n'est aujourd'hui posée que côté admin
   (decorateCell(), admin.js) et jamais par front.js, mais on la définit quand même ici pour
   rester cohérent avec admin.css si elle venait à être utilisée côté public. */
.mcadv-tarif.mcadv-tarif-low { background: #dcfce7; color: #166534; }
.mcadv-tarif.mcadv-tarif-high { background: #fee2e2; color: #b91c1c; }
/* Tarif de repli (tarif indicatif générique du cœur, aucun tarif propre défini pour cette date) :
   légèrement estompé pour rester lisible sans se confondre avec un tarif spécifique au bien. */
.mcadv-tarif.mcadv-tarif-indicative {
	background: rgba(255, 255, 255, .85);
	border: 1px dashed #94a3b8;
	color: #64748b;
}

/* Sous ~480px (téléphone), la largeur ci-dessus déborderait de l'écran : on revient près de la
   largeur d'origine de Flatpickr tout en gardant des cellules plus hautes, seul le point vraiment
   cassé sur mobile (chiffre recouvert par le tarif) — la largeur d'origine n'avait jamais posé
   de problème, inutile de la sacrifier plus que nécessaire. Mise à l'échelle proportionnelle au
   même facteur que le calendrier "bureau" ci-dessus (~12%), sans dépasser la largeur utile d'un
   écran de téléphone courant (cf. ".flatpickr-calendar{max-width:calc(100vw - 24px)}" ci-dessus). */
@media (max-width: 480px) {
	/* Même logique "min(X, 100%)" que la version bureau ci-dessus (".flatpickr-rContainer" y est
	   déjà réglé à 100%, s'applique aussi ici) : se réduit avec un conteneur mobile encore plus
	   étroit que 336px (ex. un thème avec marges latérales généreuses) au lieu de le déborder. */
	.flatpickr-days,
	.dayContainer {
		width: min(336px, 100%);
		max-width: min(336px, 100%);
	}
	.flatpickr-day {
		max-width: 48px;
		height: 54px;
		padding-top: 5px;
	}
	.mcadv-tarif {
		font-size: 10px;
		min-width: 30px;
		padding: 1px 4px;
	}
}

.mcadvlp-supplements {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0;
	padding: 10px 12px;
	background: var(--mcadv-card, #fff);
	border: 1px solid var(--mcadv-border, #dbe3ee);
	border-radius: 8px;
}
.mcadvlp-supp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.mcadvlp-supp-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mcadvlp-supp-amount { color: var(--mcadv-muted, #64748b); }
.mcadvlp-supp-input[type="number"] { width: 64px; padding: 3px 6px; border: 1px solid var(--mcadv-border, #dbe3ee); border-radius: 6px; }

/* Réservation directe (paiement immédiat, sans validation admin). */
.mcadvlp-direct {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0;
	padding: 12px;
	background: var(--mcadv-card, #fff);
	border: 1px solid var(--mcadv-border, #dbe3ee);
	border-radius: 8px;
}
.mcadvlp-direct-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mcadvlp-direct-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 160px;
	font-size: 12.5px;
	color: var(--mcadv-muted, #64748b);
}
.mcadvlp-direct-label input {
	padding: 7px 9px;
	border: 1px solid var(--mcadv-border, #dbe3ee);
	border-radius: 6px;
	font-size: 13.5px;
	color: inherit;
}
.mcadvlp-direct-submit {
	align-self: flex-start;
	padding: 9px 18px;
	background: var(--mcadv-primary, #2563eb);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.mcadvlp-direct-submit:disabled {
	background: var(--mcadv-border, #dbe3ee);
	color: var(--mcadv-muted, #64748b);
	cursor: not-allowed;
}
.mcadvlp-direct-error {
	font-size: 13px;
	color: #b91c1c;
	min-height: 1em;
}
.mcadvlp-direct-error.mcadvlp-direct-success { color: #15803d; }