/* Briques communes des formulaires « personne » V2 (profil, inscription au club, inscription à un cours).
   Utilisé avec assets/v2/js/formulaire-personne.js ; base : pages.css + tokens de dashboard.css (clair/sombre). */

.pf2-puce {
	display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px;
	background: var(--accent-soft); color: var(--accent-text); font-size: 0.75rem; font-weight: 650; white-space: nowrap;
}
.pf2-puce svg { inline-size: 13px; block-size: 13px; }
.pf2-puce--ok { background: var(--success-soft); color: var(--success); }

.pf2-note { display: flex; gap: 0.4rem; align-items: flex-start; margin: 1rem 0 0; font-size: 0.75rem; color: var(--text-3); }
.pf2-note svg { inline-size: 14px; block-size: 14px; flex: none; margin-top: 1px; }

.form-input[readonly]:not(.birthdate):not(.pf2-date-aff) { background: var(--surface-2); color: var(--text-2); }
.form-input[disabled] { cursor: default; }
.form-input.birthdate, .form-input.pf2-date-aff { cursor: pointer; } /* pf2-date-aff = copie affichée par flatpickr (format du pays) */
.form-field.is-error .form-label { color: var(--danger); }
.form-select--sm { padding-block: 0.4rem; font-size: 0.8125rem; }
@media (max-width: 640px) { .form-grid--two { grid-template-columns: minmax(0, 1fr); } }

/* champ secret avec œil */
.pf2-secret { position: relative; }
.pf2-secret .form-input { padding-right: 2.6rem; inline-size: 100%; }
.pf2-oeil {
	position: absolute; inset-block: 0; right: 0.25rem; margin: auto; block-size: 2rem; inline-size: 2rem;
	display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer;
}
.pf2-oeil:hover, .pf2-oeil.is-on { color: var(--accent-text); background: var(--accent-soft); }
.pf2-oeil svg { inline-size: 16px; block-size: 16px; }

/* téléphone (intlTelInput) en pleine largeur */
.iti, .intl-tel-input { inline-size: 100%; }
.intl-tel-input .form-input, .iti .form-input { inline-size: 100%; }
.intl-tel-input .selected-flag { border-radius: var(--radius) 0 0 var(--radius); }
.intl-tel-input .country-list { z-index: 30; color: var(--text); background: var(--surface); border-color: var(--border); }

/* ---------------------------------------------------------------- photo */
.pf2-photo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.pf2-photo__apercu {
	flex: none; inline-size: 72px; block-size: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
	background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-3);
}
.pf2-photo--petite .pf2-photo__apercu { inline-size: 56px; block-size: 56px; }
.pf2-photo__apercu img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pf2-photo__apercu svg { inline-size: 26px; block-size: 26px; }
.pf2-photo__actions .form-label { margin: 0 0 0.4rem; }
.pf2-photo__boutons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf2-photo.is-error .pf2-photo__apercu { border-color: var(--danger); }
.pf2-photo .form-error { display: block; margin-top: 0.3rem; }
.pf2-photo .form-error[hidden] { display: none; }

.pf2-cropper { margin: 0 auto; }
.pf2-recadrage .page-modal, .pf2-camera .page-modal { inline-size: min(520px, calc(100vw - 2rem)); }
.pf2-camera video { inline-size: 100%; border-radius: var(--radius); background: #000; aspect-ratio: 4 / 3; object-fit: cover; }


/* ---------------------------------------------------------------- bascules (interrupteurs) */
.pf2-bascules { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; }
.pf2-bascules li + li { border-top: 1px solid var(--border); }
.pf2-bascule { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; cursor: pointer; }
.pf2-bascule span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pf2-bascule strong { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.pf2-bascule small { font-size: 0.75rem; color: var(--text-3); }
.pf2-bascule input { position: absolute; opacity: 0; pointer-events: none; }
.pf2-bascule i {
	flex: none; position: relative; inline-size: 40px; block-size: 24px; border-radius: 999px; background: var(--border-strong);
	transition: background .18s var(--ease-out);
}
.pf2-bascule i::after {
	content: ""; position: absolute; top: 3px; left: 3px; inline-size: 18px; block-size: 18px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .18s var(--ease-out);
}
.pf2-bascule input:checked + i { background: var(--accent); }
.pf2-bascule input:checked + i::after { transform: translateX(16px); }
.pf2-bascule input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- abonnements */
.pf2-abos { list-style: none; margin: 0; padding: 0; }
.pf2-abo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.7rem 0.5rem; }
.pf2-abo + .pf2-abo { border-top: 1px solid var(--border); }
.pf2-abo__saison { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.pf2-abo__vide { font-size: 0.75rem; color: var(--text-3); }
.pf2-abo__dates { inline-size: 100%; text-align: right; font-size: 0.75rem; color: var(--text-3); }
.pf2-abo .form-select { inline-size: auto; min-inline-size: 12rem; max-inline-size: 100%; }

/* champs « choix multiples » du club */
.pf2-choix-multiples { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf2-coche { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; font-size: 0.8125rem; }
.pf2-coche:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.pf2-coche input { accent-color: var(--accent); }
.pf2-fichier { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--accent-text); }
.pf2-fichier svg { inline-size: 14px; block-size: 14px; }


/* ---------------------------------------------------------------- calendrier flatpickr aux couleurs V2 (clair/sombre) */
.flatpickr-calendar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); color: var(--text); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months, .flatpickr-month, .flatpickr-current-month { background: transparent; color: var(--text); fill: var(--text); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--text-2); fill: var(--text-2); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: var(--text); font-weight: 600; }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--surface); color: var(--text); }
span.flatpickr-weekday { color: var(--text-3); font-weight: 600; background: transparent; }
.flatpickr-weekdays { background: transparent; }
.flatpickr-day { color: var(--text); border-radius: var(--radius-sm); border-color: transparent; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--surface-3); border-color: var(--surface-3); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-3); opacity: .45; }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--text-3); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--text-3); }

/* bouton d'action d'un formulaire : détaché des champs (pages.css ne prévoit pas de marge haute) */
.pf2-form .form-actions { margin-top: 1.25rem; }