/*
 * Sélecteur et bandeau de dates — issue 10. Référence : planches 5 et 6,
 * maquettes 1 et 3. Balisage : inc/dates.php.
 *
 * Valeurs de la maquette ramenées à l'échelle : étiquettes 13 → 14 (celles de
 * pel-field, encre et non bronze : le bronze n'y fait que 4,36:1 sur
 * champagne pâle), résumé 15 → 16, écarts 10 → 8, 12 → 12, 14 → 16, 20 → 24.
 * Le bandeau n'est plus une pilule : il se déplie, et un formulaire n'y tient
 * pas en rayon 999.
 */

/* --- pel-date-picker ------------------------------------------------------ */
.pel-date-picker {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-xs);
	padding: var(--pel-space-s);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
	box-shadow: var(--pel-shadow-m);
}

.pel-date-picker__champs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: var(--pel-space-xs);
	align-items: end;
}

/* Le bouton s'aligne sur les champs, pas sur leurs messages d'erreur. */
.pel-date-picker__envoi {
	min-height: var(--pel-champ-h);
}

.pel-date-picker__champs:has(.is-invalid) {
	align-items: start;
}

.pel-date-picker__champs:has(.is-invalid) .pel-date-picker__envoi {
	margin-top: calc(var(--pel-fs-small) * var(--pel-lh-texte) + var(--pel-space-2xs));
}

.pel-date-picker__periode {
	margin: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* --- pel-date-banner ------------------------------------------------------ */
.pel-date-banner {
	padding: var(--pel-space-xs) var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-champagne);   /* décoratif */
	border-radius: var(--pel-radius-l);
	background: var(--pel-champagne-pale);
	scroll-margin-top: calc(var(--header-h, var(--pel-entete-h)) + var(--pel-space-s));   /* sous l'en-tête collant */
}

.pel-date-banner--empty {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-xs);
	padding-block: var(--pel-space-s);
}

/* « Plus long » : le renvoi vers la location longue durée (#52). */
.pel-date-banner__longue-duree {
	display: flex;
	align-items: center;
	min-height: var(--pel-cible);
	margin: 0;
}

.pel-date-banner__resume {
	display: flex;
	align-items: center;
	gap: var(--pel-space-xs);
	margin: 0;
	color: var(--pel-encre);
	font-size: var(--pel-fs-champ);
	line-height: var(--pel-lh-texte);
}

.pel-date-banner__icone {
	flex-shrink: 0;
	width: var(--pel-icone);
	height: var(--pel-icone);
	color: var(--pel-bronze);              /* pictogramme : 4,36:1, au-dessus des 3:1 */
}

.pel-date-banner__periode {
	display: block;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
}

/* Résumé et « Modifier les dates » sur une ligne : toute la ligne déplie. */
.pel-date-banner__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pel-space-2xs) var(--pel-space-s);
	min-height: var(--pel-cible);
	cursor: pointer;
	list-style: none;
}

.pel-date-banner__ligne::-webkit-details-marker {
	display: none;
}

.pel-date-banner__bouton {
	color: var(--pel-terre-foncee);        /* 5,63:1 sur champagne pâle */
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
	white-space: nowrap;
}

.pel-date-banner__modifier[open] .pel-date-banner__bouton {
	text-decoration: none;
}

.pel-date-banner__modifier[open] .pel-date-picker {
	margin-block: var(--pel-space-xs) var(--pel-space-2xs);
}

@media (max-width: 991px) {
	.pel-date-picker__champs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pel-date-picker__envoi {
		grid-column: 1 / -1;
	}

	/* Le bouton a sa propre rangée : plus rien à aligner sur les champs. */
	.pel-date-picker__champs:has(.is-invalid) .pel-date-picker__envoi {
		margin-top: 0;
	}
}

@media (max-width: 478px) {
	.pel-date-picker__champs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Hors secteur (#292) : l'alerte sous le bandeau, avec ses deux issues. */
.pel-date-banner__hors-secteur {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-xs);
	margin-block-start: var(--pel-space-xs);
	padding: var(--pel-space-s);
	border-inline-start: var(--pel-space-3xs) solid var(--pel-terre-foncee);
	border-radius: var(--pel-radius-m);
	background: var(--pel-champagne-pale);
	color: var(--pel-encre);
}

.pel-date-banner__hors-secteur-texte {
	margin: 0;
	line-height: var(--pel-lh-texte);
}

.pel-date-banner__hors-secteur-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-xs);
	margin: 0;
}