/*
 * Planificateur de journée — mobile-first (section N du cahier des charges
 * LOT 9) : la mise en page de base cible un téléphone ; les élargissements
 * viennent ensuite par media query, jamais l'inverse.
 */

.vce-planner {
	max-width: 640px;
	margin: 2rem auto;
	font-family: inherit;
}

.vce-planner-title {
	margin-bottom: 0.25em;
}

.vce-planner-intro {
	margin-top: 0;
	color: #4a4a4a;
}

.vce-planner-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.vce-planner-field {
	border: none;
	padding: 0;
	margin: 0;
}

.vce-planner-field legend {
	font-weight: 600;
	margin-bottom: 0.5em;
	padding: 0;
}

/* ---------- LOT 10C.1 : 3 blocs visuellement distincts (rythme / repas /
   famille), section 3-4 du cahier des charges. ---------- */
.vce-planner-block {
	background: #fbf9f4;
	border: 1px solid #e4dfd2;
	border-radius: 12px;
	padding: 1rem 1.1rem;
}

.vce-planner-block .vce-planner-block-question {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.6em;
}

.vce-planner-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* L'attribut `hidden` doit toujours l'emporter.
   La feuille du navigateur declare `[hidden] { display: none }`, mais une
   regle de CLASSE qui pose un `display` a une specificite superieure : le
   bloc reste alors VISIBLE au premier affichage, avant que le JS ne prenne
   la main. C'est exactement ce qui se produisait ici, avec deux champs de
   dates vides affiches sous les raccourcis de temporalite (LOT 12). */
.vce-planner-chips[hidden] {
	display: none;
}


.vce-planner-chip {
	position: relative;
}

.vce-planner-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.vce-planner-chip span {
	display: inline-block;
	padding: 0.6em 1em;
	border: 1px solid #c9c2b4;
	border-radius: 999px;
	font-size: 0.92rem;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.vce-planner-chip:hover span {
	border-color: #2a4f48;
	box-shadow: 0 1px 4px rgba(42,79,72,.12);
}

.vce-planner-chip input:checked + span {
	background: #2a4f48;
	border-color: #2a4f48;
	color: #fff;
}

.vce-planner-chip input:checked:hover + span {
	background: #23453f;
}

.vce-planner-chip input:focus-visible + span {
	outline: 2px solid #2a4f48;
	outline-offset: 2px;
}

/* ---------- LOT 10C.1 : bloc famille — toggle explicite plutôt qu'une
   case à cocher nue, mêmes couleurs que les autres blocs. ---------- */
.vce-planner-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	cursor: pointer;
}

.vce-planner-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.vce-planner-toggle-track {
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #d8d2c2;
	border: 1px solid #c9c2b4;
	flex: none;
	transition: background .15s ease, border-color .15s ease;
}

.vce-planner-toggle-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s ease;
}

.vce-planner-toggle input:checked + .vce-planner-toggle-track {
	background: #2a4f48;
	border-color: #2a4f48;
}

.vce-planner-toggle input:checked + .vce-planner-toggle-track::after {
	transform: translateX(18px);
}

.vce-planner-toggle input:focus-visible + .vce-planner-toggle-track {
	outline: 2px solid #2a4f48;
	outline-offset: 2px;
}

.vce-planner-toggle-label {
	font-size: 0.95rem;
}

/* ---------- LOT 10C.1 : « Plus de filtres » — spécificité (0,2,x)
   DÉLIBÉRÉE (préfixe .vce-planner) : une règle générique de thème
   ".entry-content details {...}" (0,1,1) écraserait sinon silencieusement
   ce composant, exactement comme au LOT 10B (fond/rayon d'un tout autre
   accordéon du site) — corrigé ici AVANT la recette, pas après. ---------- */
.vce-planner .vce-planner-more {
	border: 1px solid #e4dfd2;
	border-radius: 10px;
	background: #fff;
	padding: 0;
}

.vce-planner .vce-planner-more summary {
	padding: 0.8em 1em;
	font-weight: 600;
	cursor: pointer;
	list-style-position: inside;
}

.vce-planner .vce-planner-more summary:focus-visible {
	outline: 2px solid #2a4f48;
	outline-offset: 2px;
}

.vce-planner .vce-planner-more[open] summary {
	border-bottom: 1px solid #e4dfd2;
}

.vce-planner-more-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.vce-planner-btn {
	display: inline-block;
	padding: 0.85em 1.4em;
	border-radius: 8px;
	border: none;
	background: #2a4f48;
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
	text-align: center;
}

.vce-planner-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.vce-planner-btn-ghost {
	background: transparent;
	color: #2a4f48;
	border: 1px solid #2a4f48;
}

.vce-planner-submit {
	width: 100%;
}

.vce-planner-state {
	text-align: center;
	padding: 1rem 0;
}

.vce-planner-error {
	color: #a33;
}

.vce-planner-day {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.vce-planner-slot-title {
	margin: 0 0 0.5em;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
}

.vce-planner-card {
	border: 1px solid #e4dfd2;
	border-radius: 10px;
	padding: 0.9rem 1rem;
	background: #fdfcf9;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* LOT 10D, section 23 : élévation légère au survol, DESKTOP UNIQUEMENT
   (`hover: hover` exclut le tactile — un doigt ne peut pas "survoler" une
   carte, la garder pressée ne doit jamais y rester visuellement collée). */
@media (hover: hover) and (pointer: fine) {
	.vce-planner-card:hover {
		border-color: #b8a06a;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
		transform: translateY(-1px);
	}
}

.vce-planner-card:focus-within {
	border-color: #b8a06a;
	box-shadow: 0 0 0 2px rgba(184, 160, 106, 0.35);
}

/* Dupliquées de discovery.css (LOT 10) : planner.js et discovery.js
   partagent .vce-planner-card comme classe de base commune, mais chaque
   script doit rester chargeable SEUL sans dépendre implicitement de
   l'autre fichier CSS — même leçon que l'incident d'enqueue du LOT 10. */
.vce-discovery-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 0.4em;
}

.vce-discovery-badge {
	display: inline-block;
	margin-bottom: 0.4em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: #efe8d8;
	color: #6b5a2f;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* LOT 10D — même règle honnête que discovery.css, dupliquée pour la même
   raison (planner.js doit rester chargeable seul). */
.vce-discovery-price {
	display: inline-block;
	flex-shrink: 0;
	padding: 0.1em 0.5em;
	border: 1px solid #b8a06a;
	border-radius: 999px;
	color: #6b5a2f;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.vce-planner-card-name {
	margin: 0 0 0.25em;
	font-size: 1.05rem;
	color: #2f3437;
}

.vce-planner-card-meta,
.vce-planner-card-reasons {
	margin: 0.25em 0;
	font-size: 0.9rem;
	color: #6b6b6b;
}

.vce-planner-card-desc {
	margin: 0.5em 0;
}

.vce-planner-card-warning {
	margin: 0.5em 0;
	font-size: 0.85rem;
	color: #a3711f;
}

.vce-planner-card-link {
	display: inline-block;
	margin-top: 0.4em;
	font-size: 0.9rem;
	font-weight: 600;
	color: #2a4f48;
	text-decoration: none;
}

.vce-planner-card-link:hover {
	color: #1d3733;
	text-decoration: underline;
}

.vce-planner-card-actions {
	margin-top: 0.75em;
}

.vce-planner-alternatives {
	margin-top: 0.9em;
	padding-top: 0.9em;
	border-top: 1px dashed #d8d2c2;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.vce-planner-alternatives-title {
	margin: 0;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
}

/* Correctif LOT 10C.1 (section 13) : ces boutons n'avaient AUCUNE couleur
   de texte explicite — vérifié aux styles calculés dans le vrai
   navigateur, pas seulement en lisant ce fichier (même méthode que le
   bug de spécificité CSS trouvé au LOT 10B). Fixée en dur ici pour ne
   plus jamais dépendre d'un héritage de couleur venant du thème. */
.vce-planner-alt-btn {
	text-align: left;
	padding: 0.7em 0.9em;
	border: 1px solid #d8d2c2;
	border-radius: 8px;
	background: #fff;
	color: #2f3437;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vce-planner-alt-btn:hover,
.vce-planner-alt-btn:focus-visible {
	border-color: #2a4f48;
	box-shadow: 0 1px 4px rgba(42,79,72,.12);
	outline: none;
}

.vce-planner-alt-btn:focus-visible {
	outline: 2px solid #2a4f48;
	outline-offset: 2px;
}

.vce-planner-alt-name {
	font-weight: 600;
	color: #2f3437;
}

.vce-planner-alt-badge {
	align-self: flex-start;
	margin-bottom: 0;
}

.vce-planner-alt-reason {
	font-size: 0.82rem;
	color: #6b6b6b;
}

.vce-planner-restart {
	margin-top: 1rem;
	width: 100%;
}

.vce-planner-nojs {
	display: none;
}

.vce-planner-attribution {
	margin-top: 1.5rem;
	font-size: 0.78rem;
	color: #8a8a8a;
}

@media (min-width: 640px) {
	.vce-planner-submit,
	.vce-planner-restart {
		width: auto;
	}
}

/* Sans JavaScript : le formulaire reste visible, le message l'explique. */
.no-js .vce-planner-nojs {
	display: block;
}

/* PALIER 12 — variantes de la pastille éditoriale, DUPLIQUÉES depuis
   discovery.css pour la même raison que `.vce-discovery-badge` ci-dessus :
   planner.js doit rester chargeable seul (leçon de l'incident planner.css du
   LOT 10). Valeurs strictement identiques — un test compare les deux
   fichiers, une divergence serait un bug invisible hors production. */
.vce-discovery-badge-favourite,
.vce-discovery-badge-favourite-double,
.vce-discovery-badge-tested {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	max-width: 100%;
}

.vce-discovery-badge-favourite {
	background: #f4e3e3;
	color: #8a3a3a;
}

.vce-discovery-badge-favourite-double {
	background: #f0d6d6;
	color: #7a2e2e;
}

.vce-discovery-badge-tested {
	background: #e4ebe0;
	color: #46603c;
}

/* =====================================================================
   LOT 15A — MÉMOIRE DU SÉJOUR.

   AUCUNE REFONTE (section 9 du cahier des charges) : pas une couleur, pas
   une taille, pas une marge des règles ci-dessus n'est modifiée. Tout ce
   qui suit est ADDITIF et porte des classes qui n'existaient pas.

   Les boutons réutilisent `.vce-planner-btn-ghost` tel quel : ce sont des
   actions secondaires, elles doivent peser MOINS que « Composer ma journée »
   et pas plus que « Remplacer cette activité ». `.vce-planner-btn-stay` ne
   fait que les réduire pour qu'une carte n'ait jamais deux boutons de même
   poids visuel.

   MOBILE (360 px) : la rangée passe à la ligne (`flex-wrap`) et chaque
   bouton garde 44 px de hauteur tactile — jamais de débordement
   horizontal, jamais de cible trop petite.
   ===================================================================== */

.vce-planner-card-stay {
	margin-top: 0.55em;
	padding-top: 0.55em;
	border-top: 1px dashed #e2ddd0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}

.vce-planner-card-stay[hidden] {
	display: none;
}

.vce-planner-btn-stay {
	padding: 0.5em 0.9em;
	min-height: 44px;
	font-size: 0.85rem;
	line-height: 1.2;
	max-width: 100%;
	white-space: normal;
}

/* L'ÉTAT SE LIT EN TOUTES LETTRES, jamais dans une seule couleur : même
   règle que les pastilles éditoriales du palier 12 (« le sens ne repose
   jamais sur le seul pictogramme »). La teinte ne fait que confirmer. */
.vce-planner-stay-state {
	display: inline-block;
	padding: 0.25em 0.6em;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	max-width: 100%;
}

.vce-planner-stay-state-planned {
	background: #e7eef0;
	color: #2a4f48;
}

.vce-planner-stay-state-done {
	background: #e4ebe0;
	color: #46603c;
}

.vce-planner-stay-state-ignored,
.vce-planner-stay-state-cancelled {
	background: #eeece6;
	color: #5d584c;
}

.vce-planner-stay-summary {
	margin-top: 1rem;
	padding: 0.9rem 1rem;
	border: 1px solid #e2ddd0;
	border-radius: 10px;
	background: #fbfaf7;
}

.vce-planner-stay-summary[hidden] {
	display: none;
}

.vce-planner-stay-summary-title {
	margin: 0 0 0.35em;
	font-size: 1rem;
}

.vce-planner-stay-summary-count {
	margin: 0 0 0.3em;
	font-size: 0.9rem;
}

.vce-planner-stay-summary-note {
	margin: 0 0 0.7em;
	font-size: 0.82rem;
	color: #5d584c;
}

/* LOT 15A.1 — bandeau de contexte : « Jour N de votre séjour ». Discret,
   informatif, jamais une alerte : il rappelle ou vont atterrir les activites
   ajoutees, il ne reclame pas d'action. */
.vce-planner-stay-context {
	margin: 0 0 0.8em;
	padding: 0.5em 0.8em;
	border-left: 3px solid #b8a06a;
	background: #fbfaf7;
	font-size: 0.88rem;
	color: #2a4f48;
}