/*
 * Sélecteur de plage de dates — composant partagé (v0.16.0, 24/09/2026).
 *
 * Règles `.par-daterange*` déplacées telles quelles depuis tunnel.css :
 * utilisées à la fois par le tunnel de réservation et par le widget de
 * dates autonome `[plugandrent_date_range]` (Frontend\DateRangeShortcode,
 * héro de l'accueil). Voir assets/daterange.js.
 *
 * Variables de couleur redéclarées sur le composant lui-même (mêmes valeurs
 * que `.par-tunnel` dans tunnel.css) : hors du tunnel, le composant n'hérite
 * d'aucune variable `--par-*` — même piège que la popin profil skieur du
 * 21/09 (variables invalides hors de l'arbre `.par-tunnel`, repli silencieux
 * sur le style navigateur). Un thème peut les surcharger sur son propre
 * conteneur (`.mon-conteneur .par-datewidget { --par-accent: … }`).
 */
.par-daterange,
.par-datewidget {
	--par-accent: #C97F2E;
	--par-accent-dark: #A5661F;
	--par-accent-hover: #8A5419;
	--par-accent-tint: #F3DCC0;
	--par-accent-tint-strong: #EBC89D;
	--par-ink: #2C2C2C;
	--par-ink-soft: #6B6660;
	--par-surface: #FFFFFF;
	--par-surface-2: #F7F2EA;
	--par-line: #E4DCD0;
	--par-radius: 14px;
}
.par-daterange * { box-sizing: border-box; }

.par-daterange { position: relative; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.par-daterange > span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--par-ink-soft); }
.par-daterange-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--par-line);
	border-radius: 8px;
	background: var(--par-surface);
	color: var(--par-ink);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	width: 100%;
	/* Conteneur de requête pour le libellé long/court (§A1) — posé sur le
	   bouton et non sur .par-daterange : la containment de mise en page
	   créerait sinon un contexte d'empilement autour du panneau déroulant. */
	container-type: inline-size;
	container-name: par-daterange;
}
.par-daterange-field.is-open { outline: 2px solid var(--par-accent); outline-offset: 1px; }
.par-daterange-field-icon { flex: none; color: var(--par-ink-soft); }
/* Libellé de plage (brief tunnel du 24/09/2026, §A1) : "dimanche 20
   décembre → vendredi 25 décembre" ; variante mois abrégé ("déc.") quand le
   champ fait moins de 400px de large — requête de CONTENEUR (largeur réelle
   du composant, pas de l'écran), avec repli par media query pour les
   navigateurs qui ne la gèrent pas. Le jour n'est jamais abrégé. Le
   décompte "· X jours" du 23/09 est retiré (redondant avec le badge). */
.par-range-label-short { display: none; }
.par-daterange-field .par-range-label { min-width: 0; }
@media (max-width: 480px) {
	.par-range-label-long { display: none; }
	.par-range-label-short { display: inline; }
}
@container par-daterange (min-width: 400px) {
	.par-range-label-long { display: inline; }
	.par-range-label-short { display: none; }
}
@container par-daterange (max-width: 399px) {
	.par-range-label-long { display: none; }
	.par-range-label-short { display: inline; }
}
.par-daterange-panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	background: var(--par-surface);
	border: 1px solid var(--par-line);
	border-radius: var(--par-radius);
	box-shadow: 0 8px 28px rgba(44,34,24,.18);
	padding: 16px;
	width: max-content;
	max-width: min(620px, 92vw);
}
.par-daterange-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.par-daterange-nav-btn {
	border: 1px solid var(--par-line);
	background: var(--par-surface);
	color: var(--par-ink);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	font-family: inherit;
}
.par-daterange-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.par-daterange-months { display: flex; gap: 20px; }
@media (max-width: 620px) {
	.par-daterange-months { flex-direction: column; gap: 14px; }
	/* Centré sur le champ plutôt qu'aligné à gauche : aligné à gauche, un
	   panneau de 92vw ouvert depuis un champ en retrait (carte avec padding)
	   débordait de l'écran à droite (constaté à 390px, v0.16.0). */
	.par-daterange-panel { max-width: 92vw; left: 50%; right: auto; transform: translateX(-50%); }
}
.par-daterange-month-title { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; text-align: center; text-transform: capitalize; }
.par-daterange-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.par-daterange-weekdays span { font-size: 10.5px; font-weight: 700; text-align: center; color: var(--par-ink-soft); text-transform: uppercase; }
.par-daterange-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.par-daterange-day {
	border: 0;
	background: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 12.5px;
	font-family: inherit;
	color: var(--par-ink);
	cursor: pointer;
}
.par-daterange-day:hover:not(:disabled):not(.is-empty):not(.is-range-start):not(.is-range-end):not(.is-in-range) { background: var(--par-surface-2); }
.par-daterange-day.is-empty { cursor: default; visibility: hidden; }
.par-daterange-day.is-disabled { color: var(--par-line); cursor: not-allowed; text-decoration: line-through; }
.par-daterange-day.is-in-range { background: var(--par-accent-tint); border-radius: 0; }
.par-daterange-day.is-range-start { background: var(--par-accent); color: #fff; border-radius: 50% 0 0 50%; }
.par-daterange-day.is-range-end { background: var(--par-accent); color: #fff; border-radius: 0 50% 50% 0; }
.par-daterange-day.is-range-start.is-range-end { border-radius: 50%; }
/* v0.21.1 : entre le 1er clic et le choix de la fin, la fin pré-calée
   n'est qu'une proposition — fin et plage en teinte claire, contour en
   pointillé, pour inviter à cliquer la vraie date de fin. */
.par-daterange-panel.is-pending .par-daterange-day.is-in-range { background: var(--par-accent-tint); opacity: .8; }
.par-daterange-panel.is-pending .par-daterange-day.is-range-end:not(.is-range-start) { background: var(--par-accent-tint-strong, var(--par-accent-tint)); color: inherit; outline: 2px dashed var(--par-accent); outline-offset: -2px; }
/* Survol / focus clavier (brief tunnel du 24/09/2026, §A2). Avant : la
   règle de survol générique ci-dessus (fond #F7F2EA) l'emportait sur
   .is-range-start/.is-range-end, laissant un texte blanc sur fond crème
   (contraste ≈ 1,1:1). Les bornes et les jours de la période en sont
   désormais exclus et ont leur propre survol :
   - bornes : #A5661F / blanc ≈ 4,6:1 (AA) ;
   - jour de la période : #EBC89D / #2C2C2C > 9:1. */
.par-daterange-day.is-range-start:hover,
.par-daterange-day.is-range-end:hover,
.par-daterange-day.is-range-start:focus-visible,
.par-daterange-day.is-range-end:focus-visible { background: var(--par-accent-dark); color: #fff; }
.par-daterange-day.is-in-range:hover,
.par-daterange-day.is-in-range:focus-visible { background: var(--par-accent-tint-strong); color: var(--par-ink); }
.par-daterange-day:focus-visible:not(.is-range-start):not(.is-range-end):not(.is-in-range) { background: var(--par-surface-2); }
.par-daterange-day:focus-visible,
.par-daterange-field:focus-visible,
.par-daterange-nav-btn:focus-visible { outline: 2px solid var(--par-accent-dark); outline-offset: 2px; }
.par-daterange-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--par-line); flex-wrap: wrap; }
.par-daterange-hint { margin: 0; font-size: 12px; color: var(--par-ink-soft); }

/* ---------------- Widget autonome [plugandrent_date_range] ---------------- */
.par-datewidget { display: block; margin: 0; }
.par-datewidget .par-daterange { margin-bottom: 10px; }
.par-datewidget-native { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.par-datewidget-native label { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; }
.par-datewidget-native input { font: inherit; padding: 9px 10px; border: 1px solid var(--par-line); border-radius: 8px; }
.par-datewidget-days { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; min-height: 1.4em; }
.par-datewidget-submit {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-radius: 10px;
	background: var(--par-accent-dark);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
/* Charte des boutons (brief tunnel du 24/09/2026, §B) : primaire #A5661F /
   blanc ≈ 4,6:1, survol #8A5419 ≈ 6,2:1 — le blanc sur #C97F2E (≈ 3,2:1)
   n'était pas conforme AA. */
.par-datewidget-submit:hover { background: var(--par-accent-hover); }
.par-datewidget-submit:focus-visible { outline: 2px solid var(--par-accent-dark); outline-offset: 2px; }
/* Bouton "Valider ces dates" du panneau : hors du tunnel, les classes
   `.par-btn*` de tunnel.css ne sont pas chargées — style minimal équivalent. */
.par-datewidget .par-btn {
	border: 0;
	border-radius: 9px;
	padding: 7px 14px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
	color: #fff;
	background: var(--par-accent-dark);
	cursor: pointer;
}
.par-datewidget .par-btn:hover:not(:disabled) { background: var(--par-accent-hover); }
.par-datewidget .par-btn:focus-visible { outline: 2px solid var(--par-accent-dark); outline-offset: 2px; }
.par-datewidget .par-btn:disabled { opacity: .5; cursor: not-allowed; }