:root {
			--bg: #edf3f7;
			--card: rgba(255,255,255,.45);
			--text: #0f172a;
			--muted: #64748b;
			--line: #e2e8f0;
			--primary: #2563eb;
			--primary2: #1d4ed8;
			--danger: #b91c1c;
			--success: #166534;
			--shadow: 0 10px 30px rgba(15,23,42,.08);
		}

		html {
			min-height: 100%;
		}

		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			min-height: 100vh;
			font-family: Arial, Helvetica, sans-serif;
			color: var(--text);
			background-color: var(--bg);
			background-image:
				linear-gradient(
					180deg,
					rgba(255,255,255,.45),
					rgba(255,255,255,.78)
				),
				var(--page-background-image);
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			background-attachment: fixed;
			position: relative;
		}

		body::before {
			content: "";
			position: fixed;
			inset: 0;
			background:
				radial-gradient(
					circle at top center,
					rgba(255,255,255,.08),
					rgba(255,255,255,.20) 55%,
					rgba(255,255,255,.30) 100%
				);
			pointer-events: none;
			z-index: 0;
		}

		body::after {
			content: "";
			position: fixed;
			inset: 0;
			background:
				center 22% /
				clamp(220px,26vw,420px)
				auto
				no-repeat;
			opacity: .06;
			filter: blur(.4px);
			pointer-events: none;
			z-index: 0;
		}

		a {
			color: var(--primary);
		}

		.shell {
			max-width: 1280px;
			margin: 0 auto;
			padding: 24px;
			position: relative;
			z-index: 1;
		}

		.topbar {
			display: flex;
			align-items: center;
			gap: 24px;
			margin-bottom: 22px;
		}

		.brand{
			display:flex;
			align-items:center;
			gap:18px;
			flex:0 0 auto;
		}

		.brand-copy {
			min-width: 0;
		}

		.brand h1 {
			margin: 0;
			font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem);
			line-height: 1.1;
		}

		.brand p {
			margin: 6px 0 0;
			color: var(--muted);
		}

		.brand-logo {
			display: block;
			width: clamp(220px,32vw,400px);
			max-height: 140px;
			object-fit: contain;
			flex: 0 0 auto;
			filter: drop-shadow(0 10px 20px rgba(15,23,42,.12));
			margin-left: -100px;
		}

.top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.top-note {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    padding: 8px 12px;
    border-radius: 999px;

    background: rgba(255,255,255,.85);
    border: 1px solid rgba(203,213,225,.9);

    font-weight: 700;
    font-size: .92rem;
    color: #0f172a;

    white-space: nowrap;
}

		.app-title {
			font-size: 1.6rem;
			font-weight: 700;
			color: #1e3a8a;
			letter-spacing: 0.05em;
			text-align: right;
			margin-bottom: 8px;
		}
		.app-title-subtitle {
			font-size: .95rem;
			font-weight: 600;
			color: #475569;
			letter-spacing: .02em;
			text-transform: none;
			margin-top: 4px;
		}


		.btn {
			display: inline-block;
			border: 0;
			border-radius: 12px;
			padding: 11px 16px;
			background: var(--primary);
			color: #fff;
			text-decoration: none;
			cursor: pointer;
			font-weight: 700;
		}

		.btn:hover {
			background: var(--primary2);
		}

		.btn-secondary {
			background: #334155;
		}

		.btn-secondary:hover {
			background: #1e293b;
		}

		.btn-ghost {
			background: #e2e8f0;
			color: #0f172a;
		}

		.btn-ghost:hover {
			background: #cbd5e1;
		}

		.card {
			background: rgba(255,255,255,.28);
			border: 1px solid rgba(255,255,255,.35);
			border-radius: 24px;
			padding: 20px;
			box-shadow: 0 8px 32px rgba(31,38,135,.18);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
		}

		.grid {
			display: grid;
			grid-template-columns: 1.5fr 1fr;
			gap: 18px;
		}

		.form-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 14px;
		}

		.field {
			margin-bottom: 14px;
		}

		.field label {
			display: block;
			font-weight: 700;
			margin-bottom: 7px;
		}

		.field {
			min-width: 0;
		}

		.field input,
		.field select,
		.field textarea {
			width: 100%;
			max-width: 100%;
			padding: 12px 14px;
			border-radius: 12px;
			border: 1px solid #cbd5e1;
			background: rgba(255,255,255,.95);
			font: inherit;
			min-width: 0;
		}

		.field input[type="date"] {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		display: block;
		-webkit-appearance: none;
		appearance: none;
		min-height:48px;
		height:48px;
		font-size:16px;
		}

		.field textarea {
			min-height: 110px;
			resize: vertical;
		}

		.field input:focus,
		.field select:focus,
		.field textarea:focus {
			outline: 2px solid rgba(37,99,235,.15);
			border-color: var(--primary);
		}

		.field.handicap label {
			display: flex;
			align-items: center;
			gap: 10px;
			font-weight: 700; /* même style que les autres labels */
			margin-bottom: 7px;
		}

		.field.handicap input[type="checkbox"] {
			width: auto;
			margin: 0;
		}

		.distance-limit-row,
		.admin-account-row {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr auto;
			gap: 12px;
			align-items: end;
			padding: 14px;
			border: 1px solid var(--line);
			border-radius: 16px;
			background: rgba(255,255,255,.92);
			margin-bottom: 12px;
		}

		.admin-account-row {
			grid-template-columns: 1fr 1fr auto;
		}

		.distance-limit-row.duplicate {
			outline: 2px solid var(--danger);
			background: #fff5f5;
		}

		.distance-limit-row .field {
			margin-bottom: 0;
		}

		.distance-limit-row .field label {
			margin-bottom: 6px;
		}

		.occupation-table {
			width: 100%;
			border-collapse: collapse;
		}

		.occupation-table th,
		.occupation-table td {
			padding: 10px 12px;
			border-bottom: 1px solid var(--line);
			text-align: left;
			vertical-align: top;
			font-size: .95rem;
		}

		.occupation-table th {
			font-size: .9rem;
			color: var(--muted);
		}

		.occupancy-full {
			background: #fee2e2;
			color: var(--danger);
		}

		.occupancy-warning {
			background: #ffedd5;
			color: #c2410c;
		}

		.occupancy-ok {
			background: #ecfdf5;
			color: var(--success);
		}

		.alert {
			padding: 14px 16px;
			border-radius: 16px;
			margin: 0 0 18px 0;
			border: 1px solid transparent;
		}

		.alert.error {
			background: #fef2f2;
			color: var(--danger);
			border-color: #fecaca;
		}

		.alert.success {
			background: #f0fdf4;
			color: var(--success);
			border-color: #bbf7d0;
		}

		.section-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
			margin-bottom: 16px;
		}

		.section-title h2 {
			margin: 0;
			font-size: 1.15rem;
		}

		.pill {
			display: inline-flex;
			align-items: center;
			padding: 7px 11px;
			border-radius: 999px;
			background: #eff6ff;
			color: #1d4ed8;
			font-size: .9rem;
			font-weight: 700;
		}
		
		.pillgrey {
			display: inline-flex;
			align-items: center;
			padding: 7px 11px;
			border-radius: 999px;
			background: #f3f4f6;
			color: #6b7280;
			font-size: .9rem;
			font-style: italic;
			font-weight: 400;
		}
		.checkbox-inline {
			display: inline-flex;
			align-items: center;
			justify-content: flex-start;
			gap: 8px;
			width: auto;
			margin: 0;
			cursor: pointer;
		}

		.checkbox-inline input[type="checkbox"] {
			margin: 0;
			flex: 0 0 auto;
		}

		.checkbox-inline span {
			white-space: nowrap;
		}
		.field label.checkbox-inline {
			display: inline-flex;
			width: 50px;
		}		
		.muted {
			color: var(--muted);
		}

		.small {
			font-size: .95rem;
		}

		.chips {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
		}

		.chip {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 8px 11px;
			border-radius: 999px;
			background: #f8fafc;
			border: 1px solid var(--line);
			font-size: .95rem;
		}

		.chip input {
			width: auto;
		}

		table {
			width: 100%;
			border-collapse: collapse;
		}

		th,
		td {
			padding: 10px 12px;
			border-bottom: 1px solid var(--line);
			text-align: left;
			vertical-align: top;
			font-size: .95rem;
		}

		th {
			font-size: .9rem;
			color: var(--muted);
		}

		.scroll {
			overflow: auto;
		}

		.intro {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 18px;
			margin-bottom: 18px;
		}

		.welcome-card {
			grid-column: 1 / -1;
			width: 100%;
		}

		.bullet-card ul {
			margin: 0;
			padding-left: 20px;
		}

		.bullet-card li {
			margin: 10px 0;
		}

		.login-box {
			max-width: 430px;
			margin: 0 auto;
		}

		.footer-note {
			margin-top: 12px;
			color: var(--muted);
			font-size: .92rem;
		}

		.occupancy-badge {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 6px 10px;
			border-radius: 999px;
			font-weight: 700;
			font-size: .9rem;
		}

		.occupancy-badge.ok {
			background: #ecfdf5;
			color: #166534;
		}

		.occupancy-badge.warning {
			background: #fff7ed;
			color: #9a3412;
		}

		.occupancy-badge.full {
			background: #fef2f2;
			color: #b91c1c;
		}

		.registration-meta {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 12px;
		}

		.registration-meta .chip {
			background: #f8fafc;
		}

		.registration-card-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 18px;
		}

		.registration-readonly {
			padding: 12px 14px;
			border: 1px solid var(--line);
			border-radius: 12px;
			background: #f8fafc;
		}

		.collapse-card {
			margin: 0;
		}

		.collapse-summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			cursor: pointer;
			list-style: none;
			user-select: none;
			padding: 0;
		}

		.collapse-summary::-webkit-details-marker {
			display: none;
		}

		.collapse-summary-title {
			display: flex;
			align-items: center;
			gap: 10px;
			flex-wrap: wrap;
			min-width: 0;
		}

		.collapse-summary .section-title {
			margin-bottom: 0;
		}

		.collapse-summary .section-title h2,
		.collapse-summary .section-title h3 {
			margin: 0;
		}

		.collapse-toggle {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 14px;
			border-radius: 999px;
			background: linear-gradient(180deg, #eff6ff, #dbeafe);
			color: #1d4ed8;
			font-weight: 800;
			border: 1px solid #bfdbfe;
			box-shadow: 0 6px 16px rgba(37,99,235,.12);
			white-space: nowrap;
		}

		.collapse-toggle .collapse-close {
			display: none;
		}

		details[open] > .collapse-summary .collapse-open {
			display: none;
		}

		details[open] > .collapse-summary .collapse-close {
			display: inline;
		}

		details[open] > .collapse-summary .collapse-toggle {
			background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
			color: #0f172a;
			border-color: #cbd5e1;
		}

		.collapse-summary:hover .collapse-toggle {
			transform: translateY(-1px);
		}

		.collapse-body {
			padding-top: 16px;
		}

		.guide-image {
			max-width: 100%;
			height: auto;
			border-radius: 18px;
			border: 1px solid var(--line);
			box-shadow: var(--shadow);
			background: #fff;
			display: block;
			margin: auto;
		}

		.app-layout {
			display: grid;
			grid-template-columns: 300px minmax(0, 1fr);
			gap: 18px;
			align-items: start;
		}

		.app-layout.plain-layout {
			grid-template-columns: minmax(0, 1fr);
		}

		.page-main {
			min-width: 0px;
		}

		.admin-sidebar {
			position: sticky;
			top: 18px;
			padding: 18px;
			border-radius: 24px;
			background: rgba(255,255,255,.46);
			border: 1px solid rgba(255,255,255,.45);
			box-shadow: 0 10px 30px rgba(15,23,42,.10);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
		}

		.admin-sidebar .section-title {
			margin-bottom: 12px;
		}

		.admin-nav {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.admin-nav-group {
			padding-top: 12px;
			border-top: 1px solid var(--line);
		}

		.admin-nav-group:first-child {
			padding-top: 0;
			border-top: 0;
		}

		.admin-nav-title {
			margin: 0 0 8px;
			font-size: .82rem;
			font-weight: 800;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--muted);
		}

		.admin-nav-link {
			display: block;
			padding: 10px 12px;
			border-radius: 12px;
			text-decoration: none;
			background: rgba(255,255,255,.88);
			border: 1px solid var(--line);
			color: var(--text);
			font-weight: 700;
			line-height: 1.25;
		}

		.admin-nav-link:hover {
			background: #f8fafc;
			border-color: #cbd5e1;
		}

		.admin-nav-link.active {
			background: linear-gradient(180deg, #eff6ff, #dbeafe);
			border-color: #bfdbfe;
			color: #1d4ed8;
		}

		.admin-nav-link.accent {
			background: #1d4ed8;
			border-color: #1d4ed8;
			color: #fff;
		}

		.admin-nav-link.accent:hover {
			background: #1e40af;
			border-color: #1e40af;
		}

		.admin-section[hidden] {
			display: none !important;
		}

		.admin-section-block {
			margin-bottom: 0;
		}

		@media (max-width: 900px) {
			.grid,
			.form-grid,
			.intro,
			.distance-limit-row {
				grid-template-columns: 1fr;
			}

			.topbar {
				flex-direction: column;
				align-items: flex-start;
			}

			.brand-logo {
				width: min(240px,72vw);
				max-height: 74px;
			}

			body {
				background-attachment: scroll;
			}

			body::after {
				background-position: center 110px;
				background-size: min(280px,78vw) auto;
				opacity: .045;
			}
		}
.scroll {
    overflow-x:auto;
}

display-rule-table{
    width:100%;
    border-collapse:collapse;
    min-width:1100px;
}

display-rule-table th,
display-rule-table td{
    padding:8px;
    border-bottom:1px solid var(--line);
    vertical-align:middle;
}

display-rule-table thead th{
    position:sticky;
    top:0;
    background:rgba(248,250,252,.96);
    backdrop-filter:blur(8px);
    z-index:1;
}

display-rule-table select{
    width:100%;
    min-width:110px;
}

display-rule-table tbody tr:nth-child(even){
    background:rgba(248,250,252,.45);
}

display-rule-table .btn{
    padding:6px 10px;
}
	

.club-search-input { width: 100%; }