/*
 * Habillage du tunnel de réservation — demande client du 21/09/2026 (point 1
 * de la liste "1) le style de cette page https://demo64.epnb.net/reserver/
 * ne correspond pas à la maquette (revoir tout le tunnel)"). Remplace le
 * style minimal/fonctionnel livré depuis la v0.1.0 (cf. commentaire
 * d'origine conservé dans templates/tunnel.php).
 *
 * Couleurs codées en dur ci-dessous plutôt que lues depuis le theme.json du
 * thème actif : ce fichier vit dans le PLUGIN, qui ne doit jamais dépendre
 * du thème installé (cf. CLAUDE.md §4, "zéro couplage thème ↔ plugin" — une
 * règle sur les appels PHP/JS directs, pas sur la cohérence visuelle).
 * Valeurs alignées sur la charte skifun-manigod (theme.json du thème) pour
 * que le tunnel ait l'air natif au site, mais totalement autonomes : sur une
 * instance avec un autre thème, ces variables continuent de fonctionner
 * seules, avec ces couleurs par défaut.
 */
.par-tunnel {
	--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-ground: #F2EDE6;
	--par-line: #E4DCD0;
	--par-error: #A33;
	--par-error-bg: #FBEAE7;
	--par-radius: 14px;
	/* Décalage du retour en haut à chaque changement d'étape (brief du
	   24/09/2026, §D2) — un thème à en-tête collant le surcharge. */
	--par-scroll-offset: 16px;
	/* v0.18.1 : un thème à en-tête collant peut aussi définir
	   `--par-sticky-top` (hauteur de son en-tête) — les éléments collants du
	   tunnel (bandeau récapitulatif de l'étape 1, panier de l'étape 2) se
	   placent alors dessous. Non déclarée ici : repli 0px dans chaque var(). */

	max-width: 1080px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--par-ink);
}
.par-tunnel * { box-sizing: border-box; }
.par-tunnel h2, .par-tunnel h3 { font-family: inherit; }

.par-error {
	background: var(--par-error-bg);
	color: #611a15;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 14px;
}

.par-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--par-accent-tint);
	color: var(--par-accent-dark);
	border-radius: var(--par-radius);
	padding: 14px 20px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 14px;
}

/* ---------------- Stepper (haut de tunnel) ---------------- */
.par-steps {
	display: flex;
	gap: 8px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--par-line);
	padding-bottom: 20px;
}
.par-steps button {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: var(--par-ink-soft);
}
.par-steps button:disabled { cursor: not-allowed; opacity: .45; }
.par-step-num {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	background: var(--par-surface-2);
	border: 1px solid var(--par-line);
	color: var(--par-ink-soft);
}
.par-steps button.is-active .par-step-num {
	background: var(--par-accent-dark);
	border-color: var(--par-accent-dark);
	color: #fff;
}
.par-step-text { display: flex; flex-direction: column; line-height: 1.25; }
.par-step-label { font-weight: 700; font-size: 13.5px; color: var(--par-ink); }
.par-steps button:not(.is-active) .par-step-label { color: var(--par-ink-soft); }
.par-step-sub { font-size: 11.5px; color: var(--par-ink-soft); }
@media (max-width: 640px) {
	.par-step-sub { display: none; }
}
/* v0.18.1 : à 375px la barre d'étapes débordait de 15px (boutons flex sans
   min-width:0, libellés insécables) → défilement horizontal de toute la page. */
.par-steps button { min-width: 0; }
/* v0.21.1 : sous 480px, seul le libellé de l'étape en cours est affiché
   (les autres gardent leur numéro) — avant, les trois libellés se
   coupaient au milieu des mots (« Sélecti/on », « matérie/l »). */
@media (max-width: 480px) {
	.par-steps button:not(.is-active) .par-step-text { display: none; }
	.par-steps button:not(.is-active) { flex: none; }
	.par-steps button.is-active { flex: 1 1 auto; }
}

/* ---------------- Étape 1 : dates ---------------- */
.par-dates-card, .par-material-card, .par-next-card, .par-card {
	background: var(--par-surface);
	border: 1px solid var(--par-line);
	border-radius: var(--par-radius);
	padding: 24px;
	margin-bottom: 20px;
}
.par-dates-title, .par-material-title, .par-card-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
}
.par-material-sub, .par-card-sub {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: var(--par-ink-soft);
}
.par-dates { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.par-days-count {
	display: inline-block;
	margin: 14px 0 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--par-accent-tint);
	color: var(--par-accent-dark);
	font-size: 12.5px;
	font-weight: 700;
}
.par-days-count-error { background: var(--par-error-bg); color: var(--par-error); }

.par-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.par-field span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--par-ink-soft); }
.par-field input {
	padding: 10px 12px;
	border: 1px solid var(--par-line);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: var(--par-ink);
	background: var(--par-surface);
}
.par-field input:focus { outline: 2px solid var(--par-accent); outline-offset: 1px; }
/* Sélecteur de pays (retour client du 22/09/2026 : "le sélecteur de pays
   n'est pas homogène avec les autres champs") — le <select> ne reprenait
   jusqu'ici aucun style de `.par-field input` (bordure, rayon, police,
   hauteur), ne restant qu'avec l'apparence par défaut du navigateur.
   `appearance: none` + flèche en arrière-plan : sinon la flèche native du
   navigateur se superposerait à un champ qui n'a plus l'air d'un <select>. */
.par-field select {
	padding: 10px 32px 10px 12px;
	border: 1px solid var(--par-line);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: var(--par-ink);
	background-color: var(--par-surface);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236B6660' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
}
.par-field select:focus { outline: 2px solid var(--par-accent); outline-offset: 1px; }
.par-field-full { grid-column: 1 / -1; }

/* ---------------- Sélecteur de plage de dates ----------------
   Déplacé dans assets/daterange.css le 24/09/2026 (v0.16.0) : composant
   partagé avec le widget de dates autonome [plugandrent_date_range] (héro de
   l'accueil). Chargé avant ce fichier (dépendance déclarée dans
   Frontend\Shortcode::register_assets()). */
.par-btn-sm { padding: 7px 14px; font-size: 12px; }

/* ---------------- Filtres catégorie ---------------- */
.par-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.par-filters button {
	padding: 7px 16px;
	border: 1px solid var(--par-line);
	background: var(--par-surface);
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--par-ink);
	font-family: inherit;
}
.par-filters button.is-active { background: var(--par-accent-dark); border-color: var(--par-accent-dark); color: #fff; }

/* ---------------- Grille produits ---------------- */
.par-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.par-product {
	border: 1px solid var(--par-line);
	border-radius: var(--par-radius);
	overflow: hidden;
	background: var(--par-surface);
	display: flex;
	flex-direction: column;
}
.par-product.has-lines { border-color: var(--par-accent); box-shadow: 0 0 0 1px var(--par-accent); }
.par-product-photo {
	position: relative;
	height: 140px;
	background:
		repeating-linear-gradient(45deg, var(--par-surface-2), var(--par-surface-2) 10px, var(--par-ground) 10px, var(--par-ground) 20px);
	border-bottom: 1px dashed var(--par-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--par-ink-soft);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
/* Vraie photo produit (22/09/2026, cf. Domain\Product::$image_url) —
   remplit la même vignette que le placeholder "Photo à venir", jamais les
   deux en même temps (cf. tunnel.js renderProductCard()). */
.par-product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.par-product-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--par-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.par-product-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.par-product-eyebrow { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--par-accent-dark); }
.par-product-body h3 { margin: 0; font-size: 16px; }
.par-product-desc { font-size: 13px; color: var(--par-ink-soft); margin: 0 0 8px; }
.par-product-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
/* v0.21.1 : prix de la période (« 139,00 € pour 6 jours ») — le prix
   passe au-dessus du bouton plutôt que de se casser mot par mot. */
.par-product-footer .par-price { flex: 1 1 9em; }
.par-price-unit { font-weight: 400; white-space: nowrap; }
.par-price { font-weight: 700; font-size: 13.5px; margin: 0; line-height: 1.5; }
/* v0.21.12 : durée au-delà du dernier palier de la grille. */
.par-price.par-price-unavailable { font-weight: 400; color: var(--par-ink-soft); }
/* Remise selon la période (22/09/2026, cf. Api\PricePreviewController /
   tunnel.js refreshPricePreview()) : tarif plein barré + badge de
   pourcentage, tarif réel de la période juste en dessous. */
.par-price-reference { font-weight: 400; color: var(--par-ink-soft); }
.par-price-daily { font-weight: 400; font-size: 12.5px; color: var(--par-ink-soft); }
.par-price-discount-badge {
	display: inline-block;
	background: var(--par-accent-tint);
	color: var(--par-accent-dark);
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 700;
}

/* ---------------- Charte des boutons (brief tunnel du 24/09/2026, §B) ----------------
   Trois niveaux, appliqués à tout le tunnel :
   - primaire (.par-btn, .par-btn-primary) : fond #A5661F / texte blanc
     ≈ 4,6:1 (AA), survol #8A5419 ≈ 6,2:1. `.par-btn` seul était noir
     (--par-ink) — "+ Ajouter un skieur", action principale de la carte,
     passe donc en primaire ; le blanc sur --par-accent #C97F2E (≈ 3,2:1)
     n'était pas conforme AA, d'où --par-accent-dark comme fond.
   - secondaire (.par-btn-secondary) : transparent, bordure 1,5px #A5661F,
     texte --par-ink ; survol --par-accent-tint.
   - tertiaire (.par-btn-tertiary, .par-link-secondary) : lien #A5661F,
     souligné au survol.
   Tous : :focus-visible contour 2px #A5661F décalé de 2px. */
.par-btn {
	padding: 10px 18px;
	border: 1.5px solid var(--par-accent-dark);
	border-radius: 9px;
	background: var(--par-accent-dark);
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	font-size: 13px;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
	line-height: 1.2;
}
.par-btn:hover:not(:disabled) { background: var(--par-accent-hover); border-color: var(--par-accent-hover); }
.par-btn:disabled { opacity: .5; cursor: not-allowed; }
.par-btn-primary { background: var(--par-accent-dark); }
.par-btn-secondary { background: transparent; color: var(--par-ink); border-color: var(--par-accent-dark); }
.par-btn-secondary:hover:not(:disabled) { background: var(--par-accent-tint); border-color: var(--par-accent-dark); }
.par-btn-block { width: 100%; margin-top: 16px; }

.par-btn-tertiary,
.par-link-secondary {
	border: 0;
	background: none;
	color: var(--par-accent-dark);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 0 0;
	text-align: left;
	text-decoration: none;
	font-family: inherit;
}
a.par-btn-tertiary { display: inline-block; }
.par-btn-tertiary:hover,
.par-link-secondary:hover { text-decoration: underline; }
.par-tunnel button:focus-visible,
.par-tunnel a:focus-visible,
.par-modal-overlay button:focus-visible,
.par-modal-overlay a:focus-visible,
.par-modal-overlay select:focus-visible { outline: 2px solid var(--par-accent-dark); outline-offset: 2px; }

/* ---------------- Mini-lignes panier (sur une carte produit) ---------------- */
.par-line-mini { border-top: 1px dashed var(--par-line); margin-top: 10px; padding-top: 10px; font-size: 12.5px; }
.par-line-mini-header { display: flex; align-items: center; gap: 8px; }
.par-line-mini-label { flex: 1; font-weight: 700; }
.par-line-mini-price { font-weight: 700; color: var(--par-accent-dark); }
.par-line-mini-icon {
	border: 0;
	background: var(--par-surface-2);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	color: var(--par-ink-soft);
	flex: none;
}
.par-line-mini-addons { display: flex; gap: 4px 16px; flex-wrap: wrap; margin-top: 6px; }
.par-line-mini-addons label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--par-ink-soft); }

/* Poubelle (22/09/2026, remplace la croix "×" texte) : SVG centré dans le
   même bouton rond que .par-line-mini-icon, sans changer sa taille. */
.par-line-mini-remove svg { width: 14px; height: 14px; display: block; margin: 0 auto; }
.par-line-mini-remove:hover { color: var(--par-danger, #c0392b); }

/* Les sous-lignes "+ Casque … 28,00 €" du 22/09 sont supprimées (brief du
   24/09/2026, §C5) : prix de l'option en infobulle de son interrupteur. */
.par-product-open { cursor: pointer; }
h3.par-product-open:hover { color: var(--par-accent-dark); }
.is-loading { opacity: .55; transition: opacity .15s ease; }

.par-next-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.par-next-title { margin: 0; font-weight: 700; }
.par-next-sub { margin: 2px 0 0; font-size: 13px; color: var(--par-ink-soft); }

/* Mini-résumé permanent pendant la sélection du matériel (étape 1), 21/09/2026
   — UX-BACKLOG.md "Sous-total visible pendant la sélection du matériel".
   `position: sticky` sous l'en-tête de la carte "Sélection matériel", même
   principe que `.par-cart-sidebar` à l'étape 2. */
.par-step1-sticky-bar {
	position: sticky;
	top: var(--par-sticky-top, 0px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--par-surface-2);
	border: 1px solid var(--par-line);
	border-radius: 10px;
	padding: 10px 16px;
	margin-bottom: 16px;
	font-weight: 600;
}
.par-step1-sticky-amount { color: var(--par-accent-dark); }
/* Bouton "Voir mon panier" du bandeau collant (22/09/2026) : compact pour
   rester lisible aux côtés du compteur/sous-total, y compris en mobile où
   le bandeau reste visible en permanence pendant le défilement. */
.par-step1-sticky-cart-btn { flex: none; padding: 8px 14px; font-size: 13px; }

/* ---------------- Bandeau de rappel, étapes 2 et 3 (brief du 24/09/2026, §D1) ---------------- */
.par-recall {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--par-surface);
	border: 1px solid var(--par-line);
	border-radius: var(--par-radius);
	padding: 12px 16px;
	margin-bottom: 20px;
}
.par-recall-back { flex: none; padding: 8px 14px; }
.par-recall-dates { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; container-type: inline-size; }
.par-recall-range { font-weight: 700; font-size: 14.5px; }
.par-recall-badge { margin: 0; }
.par-recall .par-range-label-short { display: none; }
@container (max-width: 380px) {
	.par-recall .par-range-label-long { display: none; }
	.par-recall .par-range-label-short { display: inline; }
}
@media (max-width: 480px) {
	.par-recall-dates { justify-content: flex-start; text-align: left; }
}

/* ---------------- Étape 2 : panier + coordonnées ---------------- */
/* Zones nommées (22/09/2026, remplace l'ancien bloc unique `.par-step2-main`) :
   desktop = 2 colonnes, Options/Coordonnées/Retour empilés dans la colonne de
   gauche, le panier occupant toute la hauteur de la colonne de droite ;
   mobile = 1 colonne réordonnée (retour client : "1 Votre panier 2 Option
   assurance 3 Vos coordonnées"). Un bloc absent (ex. aucune option de panier
   configurée) laisse simplement sa zone vide, sans casser la mise en page. */
.par-step2-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	grid-template-areas:
		"options cart"
		"coord   cart";
	grid-template-rows: auto 1fr;
	gap: 24px;
	align-items: start;
}
.par-step2-options { grid-area: options; }
.par-step2-coord { grid-area: coord; }
.par-step2-cart { grid-area: cart; }
@media (max-width: 860px) {
	.par-step2-grid {
		grid-template-columns: 1fr;
		/* Ordre du brief du 24/09/2026 (§E1) : Assurance, Vos
		   coordonnées, Votre panier (+ Continuer). Remplace l'ordre mobile
		   du 22/09 (panier en premier). */
		grid-template-areas:
			"options"
			"coord"
			"cart";
		grid-template-rows: auto;
	}
}
.par-cart-sidebar { position: sticky; top: calc(var(--par-sticky-top, 0px) + 16px); }
@media (max-width: 860px) {
	/* Une seule colonne : le panier n'a plus à rester collé. */
	.par-cart-sidebar { position: static; }
}

.par-cart-options { display: flex; flex-direction: column; gap: 4px; }
/* Ligne = toggle + lien "voir les détails" (22/09/2026) — le <label> du
   toggle garde son padding vertical propre, le lien s'aligne sous lui. */
.par-cart-option-row { padding-bottom: 4px; border-bottom: 1px dashed var(--par-line); }
.par-cart-option-row:last-child { border-bottom: 0; }
.par-cart-option-links { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 0 8px; }
.par-cart-option-links .par-btn-tertiary { padding: 0; font-size: 12.5px; }
/* Garantie sans article concerné : interrupteur grisé, liens actifs. */
.par-cart-option-row.is-inactive .par-switch { opacity: .5; cursor: not-allowed; }
.par-cart-option-row.is-inactive .par-switch input { cursor: not-allowed; }
.par-cart-option-note { margin: 0 0 6px; font-size: 13px; color: var(--par-ink-soft); }
.par-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; cursor: pointer; }
.par-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.par-toggle-track {
	position: relative;
	flex: none;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var(--par-line);
	transition: background .15s ease;
}
.par-toggle-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.par-toggle input:checked + .par-toggle-track { background: var(--par-accent); }
.par-toggle input:checked + .par-toggle-track::after { transform: translateX(18px); }

/* ---------------- Interrupteur (brief du 24/09/2026, §C5/§E2) ----------------
   Remplace les cases à cocher/pastilles des options : sous chaque skieur
   (étape 1), dans la modale et pour l'assurance (étape 2). `.par-tooltip` :
   prix de l'option au survol ET au focus clavier (§C5). */
.par-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--par-ink); padding: 6px 0; max-width: 100%; flex-wrap: wrap; }
/* v0.21.1 : le montant passe à la ligne, aligné à droite, plutôt que de
   déborder du bloc en mobile (« 1,00 € / jour soit 7,00 € »). */
.par-switch-amount { margin-left: auto; }
.par-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.par-switch-track {
	position: relative;
	flex: none;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: #B9AFA2;
	transition: background .15s ease;
}
.par-switch-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.par-switch input:checked + .par-switch-track { background: var(--par-accent-dark); }
.par-switch input:checked + .par-switch-track::after { transform: translateX(16px); }
.par-switch input:focus-visible + .par-switch-track { outline: 2px solid var(--par-accent-dark); outline-offset: 2px; }
.par-switch-text { flex: 1 1 auto; }
.par-switch-amount { flex: none; font-weight: 700; color: var(--par-ink); }
/* v0.21.1 : le prix d'une option reste visible désactivée, grisé. */
.par-switch input:not(:checked) ~ .par-switch-amount { font-weight: 400; color: var(--par-ink-soft); opacity: .7; }
.par-switch-sm { font-size: 12.5px; padding: 3px 0; }
.par-switch-sm .par-switch-track { width: 30px; height: 17px; }
.par-switch-sm .par-switch-track::after { width: 13px; height: 13px; }
.par-switch-sm input:checked + .par-switch-track::after { transform: translateX(13px); }
.par-switch-wide { display: flex; width: 100%; padding: 10px 0 6px; font-weight: 600; }
.par-tooltip {
	position: absolute;
	left: 0;
	bottom: calc(100% + 2px);
	z-index: 5;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--par-ink);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(3px);
	transition: opacity .12s ease, transform .12s ease;
}
.par-tooltip:empty { display: none; }
.par-switch:hover .par-tooltip,
.par-switch:focus-within .par-tooltip { opacity: 1; transform: none; }

/* Pictogramme générique d'état coché/décoché (demande client 21/09) — un seul
 * pictogramme neutre pour toutes les options, cf. CLAUDE.md §4 : le noyau du
 * plugin reste générique, aucune icône spécifique métier (casque, chaussure…)
 * n'est encodée ici, seule l'API de catalogue connaît ces libellés. */
.par-option-icon {
	flex: none;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--par-surface-2);
	color: var(--par-ink-soft);
	opacity: .4;
	transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.par-option-icon svg { width: 13px; height: 13px; display: block; }
.par-toggle input:checked ~ .par-option-icon,
.par-addon-chip input:checked ~ .par-option-icon {
	opacity: 1;
	background: var(--par-accent);
	color: #fff;
}

.par-addon-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--par-ink-soft);
	cursor: pointer;
}
.par-addon-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.par-addon-chip .par-option-icon { width: 18px; height: 18px; }
.par-addon-chip .par-option-icon svg { width: 10px; height: 10px; }

.par-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
@media (max-width: 480px) {
	.par-form-grid { grid-template-columns: 1fr; }
}
.par-form-note { margin: 4px 0 0; font-size: 12px; color: var(--par-ink-soft); }

.par-summary { font-size: 13.5px; }
.par-summary.par-summary-error { color: var(--par-error); font-weight: 600; }
.par-recap-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--par-line); }
.par-recap-line:last-of-type { border-bottom: 0; }
/* Détail des options par ligne (casque, chaussures…), 21/09/2026 — sous forme de
   sous-ligne indentée et atténuée, rattachée visuellement à la ligne produit
   juste au-dessus plutôt que traitée comme une ligne de même niveau (cf.
   UX-BACKLOG.md "Niveau de détail du panier à l'étape 2" / "Saut de prix
   inexpliqué"). */
.par-recap-amount { flex: none; white-space: nowrap; }
.par-recap-line-addon { padding-left: 14px; padding-top: 2px; padding-bottom: 2px; font-size: 0.92em; color: var(--par-ink-soft); border-bottom: 0; }
.par-recap-total {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size: 16px;
	border-top: 1px solid var(--par-line);
	margin-top: 8px;
	padding-top: 10px;
	color: var(--par-accent-dark);
}
.par-recap-total-row { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--par-line); margin-top: 8px; padding-top: 10px; }
.par-recap-total-line { display: flex; justify-content: space-between; align-items: baseline; }
.par-recap-total-amount { font-weight: 700; font-size: 22px; color: var(--par-accent-dark); }
.par-recap-total-perday { margin: 0; font-size: 12px; color: var(--par-ink-soft); text-align: right; }
/* Recalcul en cours (§E3, remplace le bouton "Actualiser le tarif") :
   lignes et total estompés, libellé "Mise à jour…" à la place de "Total". */
.par-summary.is-loading .par-recap-amount,
.par-summary.is-loading .par-recap-total-amount { opacity: .45; }
.par-summary.is-loading .par-recap-total-line > span:first-child { color: var(--par-ink-soft); font-style: italic; }
.par-summary-loading { color: var(--par-ink-soft); }

/* ---------------- Étape 3 : confirmation ---------------- */
.par-info-line { margin: 0 0 4px; font-size: 14px; }
.par-cgv { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; margin: 4px 0 20px; }
.par-cgv input { margin-top: 3px; }
.par-step3-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.par-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.par-card-head .par-btn-tertiary { padding: 0; font-size: 13px; }
.par-cgv a.par-btn-tertiary { padding: 0; font-size: inherit; text-decoration: underline; }
.par-payment-note { margin: 16px 0 0; font-size: 12.5px; font-style: italic; color: var(--par-ink-soft); }

/* ---------------- Popin profil skieur ---------------- */
/* Bug corrigé le 21/09/2026 (retour client sur l'audit Croogo) : ce popin est
 * ajouté à document.body (cf. tunnel.js), donc HORS de l'arbre DOM de
 * .par-tunnel — les variables CSS définies là-haut (--par-ink, --par-surface,
 * etc.) n'y résolvent à rien, et les champs du formulaire retombaient sur le
 * style par défaut du navigateur (texte blanc sur fond blanc, invisible hors
 * focus). On redéclare donc ici le même jeu de variables, pour que le popin
 * soit autonome quel que soit son emplacement dans le DOM. */
.par-modal-overlay {
	--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-ground: #F2EDE6;
	--par-line: #E4DCD0;
	--par-error: #A33;
	--par-error-bg: #FBEAE7;
	--par-radius: 14px;

	position: fixed; inset: 0; background: rgba(44,34,24,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* Hors de .par-tunnel : même box-sizing que le tunnel (sinon les champs
   width:100% + padding débordaient à droite de la modale). */
.par-modal-overlay * { box-sizing: border-box; }
.par-modal .par-field input,
.par-modal .par-field select { width: 100%; }
.par-modal { position: relative; background: var(--par-surface); color: var(--par-ink); padding: 24px; border-radius: var(--par-radius); width: 340px; max-width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; }
.par-modal h3 { margin: 0 0 14px; font-size: 16px; color: var(--par-ink); }
/* "×" de fermeture (23/09/2026, cf. tunnel.js closeModalKeepingLine()) —
   ferme sans rien changer, commun aux deux variantes de la popin d'ajout
   au panier. Coin haut-droit, discret, ne déplace aucun autre élément. */
.par-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border: 0;
	background: none;
	color: var(--par-ink-soft);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.par-modal-close:hover { background: var(--par-surface-2); color: var(--par-ink); }
/* Aperçu produit en en-tête de la popin d'ajout au panier (22/09/2026, cf.
   tunnel.js openAddToCartModal()) — photo + nom + tarif, systématique quel
   que soit le produit (contrairement aux champs skieur qui suivent,
   affichés seulement si le produit en a besoin). Agrandi le 23/09/2026
   (retour client "équilibrer la taille de présentation du produit avec le
   profil skieur") : popin élargie (340px → 400px sur cette variante),
   photo et titre agrandis pour donner plus de présence au produit. */
.par-modal-addtocart { width: 400px; padding-top: 30px; }
/* v0.21.4 : fenêtre « Voir les conditions » (détail de la garantie) plus large sur desktop. */
.par-modal-details { width: 560px; }
.par-modal-preview { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--par-line); }
/* 01/10/2026 : article sans profil ni option — pas de filet ni d'espace sous l'en-tête produit. */
.par-modal-preview.par-modal-preview-alone { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.par-modal-preview-photo {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	background: repeating-linear-gradient(45deg, var(--par-surface-2), var(--par-surface-2) 8px, var(--par-ground) 8px, var(--par-ground) 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--par-ink-soft);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .03em;
}
.par-modal-addtocart .par-modal-preview-photo { width: 88px; height: 88px; }
.par-modal-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.par-modal-preview-eyebrow { margin: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--par-accent-dark); }
.par-modal-preview-title { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--par-ink); }
.par-modal-addtocart .par-modal-preview-title { font-size: 18px; }
.par-modal-preview-price { margin: 4px 0 0; font-size: 13px; color: var(--par-ink-soft); }
.par-modal-preview-price strong { font-size: 17px; color: var(--par-ink); }
.par-modal-preview-price-error { color: var(--par-error); font-weight: 600; }
.par-modal-detail-link { margin-top: 4px; padding: 0; }
/* Modale (brief du 24/09/2026, §C3/§C4) : "Réutiliser un skieur" et options. */
.par-modal-reuse { margin-bottom: 14px; }
.par-modal .par-field select { color: var(--par-ink); }
.par-modal-options { display: flex; flex-direction: column; margin-bottom: 8px; }
.par-modal-options .par-switch { display: flex; width: 100%; }
.par-modal h3 { margin-top: 4px; }
.par-modal-note { font-size: 13.5px; color: var(--par-ink-soft); margin: 0 0 16px; }
.par-option-details-text { white-space: pre-line; font-size: 13.5px; line-height: 1.5; color: var(--par-ink-soft); margin: 0 0 16px; }
.par-option-details-terms { margin: -6px 0 16px; font-size: 13.5px; }
.par-modal .par-field span { color: var(--par-ink-soft); }
.par-modal .par-field input {
	color: var(--par-ink);
	background: var(--par-surface);
	border: 1px solid var(--par-line);
}
/* Grille 2 colonnes pour les 5 champs du profil skieur (23/09/2026, cf.
   tunnel.js openAddToCartModal()) — même pattern que `.par-form-grid` du
   formulaire de coordonnées (étape 2), réutilise `.par-field-full`
   (déjà défini plus haut) pour que le prénom garde toute la largeur.
   Réduit la hauteur du bloc profil d'environ moitié par rapport à
   l'empilement vertical d'origine, sans retirer aucun champ. */
.par-modal-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 16px; }
/* v0.21.1 : 2 colonnes conservées sur mobile (Prénom | Genre, etc. —
   une ligne de gagnée par paire), 1 seule sous 340px. */
@media (max-width: 340px) {
	.par-modal-fields-grid { grid-template-columns: 1fr; }
}
/* v0.21.1 : sur mobile, la modale devient un panneau ancré en bas, pleine
   largeur, avec les boutons toujours visibles en bas du panneau. */
@media (max-width: 560px) {
	.par-modal-overlay { padding: 0; align-items: flex-end; }
	.par-modal,
	.par-modal-details,
	.par-modal-addtocart { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: var(--par-radius) var(--par-radius) 0 0; padding: 22px 16px 0; }
	.par-modal-addtocart .par-modal-preview-photo { width: 64px; height: 64px; }
	.par-modal-addtocart .par-modal-preview-title { font-size: 16px; }
	.par-modal-preview { margin-bottom: 12px; padding-bottom: 12px; }
	.par-modal h3 { margin-bottom: 8px; }
	.par-modal .par-field { margin-bottom: 8px; }
	.par-modal-actions { position: sticky; bottom: 0; margin: 12px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--par-surface); border-top: 1px solid var(--par-line); }
	.par-modal-actions .par-btn { flex: 1; }
}
.par-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
/* "Retirer du panier" (23/09/2026) supprimé le 24/09/2026 (brief §C4) : remplacé par "Annuler" (bouton secondaire). */

/* ---------------- Confirmation finale ---------------- */
.par-confirmation {
	text-align: center;
	padding: 56px 24px;
	background: var(--par-surface);
	border: 1px solid var(--par-line);
	border-radius: var(--par-radius);
}
.par-confirmation h2 { margin: 0 0 10px; color: var(--par-accent-dark); }
.par-confirmation p { font-size: 15px; color: var(--par-ink-soft); }
/* Écran post-confirmation enrichi, 21/09/2026 (UX-BACKLOG.md "Écran
   post-confirmation") : numéro de dossier mis en avant, récapitulatif dates/
   articles/total, puis message email + prochaine étape. */
.par-confirmation-ref { font-size: 17px; font-weight: 700; color: var(--par-ink); margin: 0 0 18px; }
.par-confirmation-recap {
	list-style: none;
	margin: 0 auto 18px;
	padding: 0;
	max-width: 380px;
	text-align: left;
	font-size: 15px;
	color: var(--par-ink);
}
.par-confirmation-recap li { padding: 6px 0; border-bottom: 1px dashed var(--par-line); }
.par-confirmation-recap li:last-child { border-bottom: 0; font-weight: 700; }
.par-confirmation-next { font-weight: 600; color: var(--par-ink) !important; }

/* Commentaire repliable et newsletter (01/10/2026). */
.par-comment { margin: 8px 0 4px; }
.par-comment-toggle { padding: 0; font-size: 13px; }
.par-comment-input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--par-line); border-radius: 8px; font: inherit; font-size: 14px; color: var(--par-ink); background: var(--par-surface); resize: vertical; }
.par-comment-input[hidden] { display: none; }
.par-newsletter { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--par-ink); margin-top: 10px; }
.par-modal.par-modal-addtocart .par-field select { width: 100%; box-sizing: border-box; padding: 10px 32px 10px 12px !important; text-overflow: ellipsis; border: 1px solid var(--par-line); border-radius: 8px; font: inherit; font-size: 14px; background-color: var(--par-surface); }

/* Ruban de promotion et prix « au lieu de » (01/10/2026). */
.par-product-photo, .par-modal-preview-photo { position: relative; }
.par-ribbon { position: absolute; top: 8px; left: 0; z-index: 2; padding: 3px 9px 3px 7px; background: #B3261E; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; border-radius: 0 4px 4px 0; box-shadow: 0 1px 2px rgba(0,0,0,.25); pointer-events: none; }
.par-ribbon[hidden] { display: none; }
.par-modal-preview-photo .par-ribbon { top: 4px; font-size: 10.5px; padding: 2px 6px 2px 5px; }
.par-price-reference { font-size: .8em; font-weight: 400; color: var(--par-ink-soft); }
.par-recap-total-reference { margin-right: 6px; }
.par-recap-discount { color: #2E7D32; }

/* Compte client à l'étape « Vos coordonnées » (v0.21.1). */
.par-account-login { margin: -4px 0 6px; }
.par-account-login-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.par-account-login-row .par-field { flex: 1 1 200px; margin-bottom: 0; }
.par-account-note { margin: 0; font-size: 13.5px; color: var(--par-ink-soft); }
.par-account-error { margin: 6px 0 0; font-size: 13.5px; color: var(--par-error); }
.par-account-lost { display: inline-block; margin-top: 6px; font-size: 13px; }
.par-field-hint { display: block; margin-top: 4px; font-size: 12.5px; color: var(--par-ink-soft); }
.par-field-hint.is-error { color: var(--par-error); }

/* ---------------- Mode de paiement (v0.21.4) ---------------- */
.par-payment-methods .par-payment-method {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin: 0 0 8px;
	border: 1px solid var(--par-line);
	border-radius: 9px;
	cursor: pointer;
}
.par-payment-methods .par-payment-method.is-selected { border-color: var(--par-accent-dark); background: var(--par-surface-2); }
.par-payment-methods .par-payment-method input { margin: 0; accent-color: var(--par-accent-dark); }
/* v0.21.9 : moyen hors ligne indisponible (location trop proche). */
.par-payment-methods .par-payment-method.is-disabled { cursor: not-allowed; opacity: .5; }
.par-payment-methods-why { margin: 4px 0 0; }
.par-payment-method-name { font-weight: 600; }
.par-payment-info {
	margin: -2px 0 12px;
	padding: 10px 12px;
	border-left: 3px solid var(--par-accent-dark);
	background: var(--par-surface-2);
	font-size: 14px;
	line-height: 1.5;
}
.par-confirmation .par-payment-info { text-align: left; margin: 12px 0; }
.par-confirmation-status { font-weight: 600; color: var(--par-accent-dark); }
.par-payment-alt { margin: 16px 0 8px; }
.par-payment-alt-btn { margin: 0 8px 8px 0; }