/* Club Dispo – styles front. Les couleurs s'ajustent via les variables ci-dessous. */
.cd-wrap {
	--cd-accent: #2b6cb0;
	--cd-accent-ink: #fff;
	--cd-line: #dfe3ea;
	--cd-head: #f3f5f9;
	--cd-bg: #fff;
	--cd-yes: #dcf3e4;
	--cd-yes-ink: #1c7c45;
	--cd-low: #fdf0d5;
	--cd-low-ink: #9a5b00;
	--cd-mine: #eef4ff;
	--cd-muted: #6b7280;
	margin: 1.5em 0;
	font-size: 15px;
	line-height: 1.4;
	scroll-margin-top: 80px;
}
.cd-wrap *, .cd-wrap *::before, .cd-wrap *::after { box-sizing: border-box; }

.cd-notice { padding: .7em 1em; border-radius: 6px; background: var(--cd-head); margin: 0 0 1em; }
.cd-notice-ok { background: var(--cd-yes); color: var(--cd-yes-ink); }
.cd-notice-err { background: var(--cd-low); color: var(--cd-low-ink); }

.cd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; margin-bottom: .8em; }
.cd-tabs { display: inline-flex; border: 1px solid var(--cd-line); border-radius: 8px; overflow: hidden; }
.cd-tab { appearance: none; border: 0; background: var(--cd-bg); color: inherit; padding: .45em 1em; font: inherit; cursor: pointer; }
.cd-tab + .cd-tab { border-left: 1px solid var(--cd-line); }
.cd-tab.is-active { background: var(--cd-accent); color: var(--cd-accent-ink); }
.cd-meta { color: var(--cd-muted); font-size: .9em; }
.cd-export { margin-left: auto; font-size: .9em; padding: .4em .9em; border: 1px solid var(--cd-accent); border-radius: 6px; color: var(--cd-accent); text-decoration: none; }
.cd-export:hover { background: var(--cd-accent); color: var(--cd-accent-ink); }

.cd-js .cd-panel[hidden] { display: none; }

/* Grille */
.cd-scroll { overflow-x: auto; border: 1px solid var(--cd-line); border-radius: 8px; background: var(--cd-bg); }
.cd-grid { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; font-size: .92em; }
.cd-grid th, .cd-grid td { border: 0; border-bottom: 1px solid var(--cd-line); padding: .45em .55em; text-align: center; vertical-align: middle; background: var(--cd-bg); }
.cd-grid thead th { background: var(--cd-head); font-weight: 600; }
.cd-grid .cd-day { border-left: 1px solid var(--cd-line); text-transform: none; }
.cd-grid .cd-slot { font-weight: 500; white-space: nowrap; min-width: 4.5em; }
.cd-grid .cd-sep { border-left: 1px solid var(--cd-line); }
.cd-grid .cd-name { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 10em; max-width: 14em; border-right: 1px solid var(--cd-line); font-weight: 500; }
.cd-grid thead .cd-name { background: var(--cd-head); z-index: 2; }
.cd-grid tbody tr:hover > * { background-color: #fafbfd; }
.cd-grid td.cd-yes { background: var(--cd-yes); color: var(--cd-yes-ink); font-weight: 700; }
.cd-grid tr.cd-mine > * { background: var(--cd-mine); }
.cd-grid tr.cd-mine td.cd-yes { background: #c9ebd6; }
.cd-grid tr.cd-mine .cd-who::after { content: " (vous)"; color: var(--cd-muted); font-weight: 400; font-size: .85em; }
.cd-grid tfoot th, .cd-grid tfoot td { border-bottom: 0; border-top: 2px solid var(--cd-line); font-weight: 700; background: var(--cd-head); }
.cd-grid td.cd-ok { color: var(--cd-yes-ink); }
.cd-grid td.cd-low { background: var(--cd-low); color: var(--cd-low-ink); }
.cd-grid td.cd-zero { color: var(--cd-muted); }
.cd-need { font-weight: 400; opacity: .75; }
.cd-empty { color: var(--cd-muted); padding: 1.2em !important; }
.cd-has-comment { cursor: help; font-size: .85em; margin-left: .2em; }
.cd-del { float: right; margin-left: .4em; color: #b32d2e; text-decoration: none; font-weight: 700; line-height: 1; opacity: .5; }
.cd-del:hover { opacity: 1; }

.cd-comments { margin-top: 1em; font-size: .92em; }
.cd-comments h4 { margin: 0 0 .4em; font-size: 1em; }
.cd-comments ul { margin: 0; padding-left: 1.2em; }

/* Planning */
.cd-plan-day + .cd-plan-day { margin-top: 1.2em; }
.cd-plan-day h4 { margin: 0 0 .5em; font-size: 1.05em; }
.cd-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7em; }
.cd-plan-card { border: 1px solid var(--cd-line); border-radius: 8px; background: var(--cd-bg); overflow: hidden; }
.cd-plan-head { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .5em .7em; background: var(--cd-head); font-weight: 600; }
.cd-plan-card ul { list-style: none; margin: 0; padding: .4em .7em .6em; }
.cd-plan-card li { padding: .15em 0; border-bottom: 1px dashed var(--cd-line); }
.cd-plan-card li:last-child { border-bottom: 0; }
.cd-nobody { margin: 0; padding: .6em .7em; color: var(--cd-muted); font-style: italic; font-size: .9em; }
.cd-badge { font-size: .82em; padding: .1em .5em; border-radius: 999px; background: var(--cd-bg); white-space: nowrap; }
.cd-badge.cd-ok { background: var(--cd-yes); color: var(--cd-yes-ink); }
.cd-badge.cd-low { background: var(--cd-low); color: var(--cd-low-ink); }
.cd-badge.cd-zero { color: var(--cd-muted); }

/* Formulaire */
.cd-form-box { margin-top: 1.6em; }
.cd-form { border: 1px solid var(--cd-line); border-radius: 10px; padding: 1.1em 1.2em; background: var(--cd-bg); }
.cd-form h3 { margin: 0 0 .6em; font-size: 1.2em; }
.cd-hint { color: var(--cd-muted); margin: .3em 0 .6em; font-size: .93em; }
.cd-field { display: block; margin: 0 0 1em; }
.cd-field > span { display: block; font-weight: 600; margin-bottom: .3em; }
.cd-field input, .cd-field textarea { width: 100%; max-width: 32em; padding: .55em .7em; border: 1px solid #c6ccd6; border-radius: 6px; font: inherit; background: #fff; color: #111; }
.cd-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8em; margin-bottom: 1em; }
.cd-choice-day { border: 1px solid var(--cd-line); border-radius: 8px; padding: .5em .7em .6em; margin: 0; min-width: 0; }
.cd-choice-day legend { font-weight: 700; padding: 0 .3em; }
.cd-check { display: flex; align-items: center; gap: .6em; padding: .45em .3em; border-radius: 6px; cursor: pointer; }
.cd-check:hover { background: var(--cd-head); }
.cd-check input { width: 1.25em; height: 1.25em; margin: 0; accent-color: var(--cd-yes-ink); flex: none; }
.cd-check-label { flex: 1; }
.cd-check-count { font-size: .8em; color: var(--cd-muted); }
.cd-check:has(input:checked) { background: var(--cd-yes); }
.cd-btn { appearance: none; border: 0; border-radius: 8px; padding: .7em 1.4em; background: var(--cd-accent); color: var(--cd-accent-ink); font: inherit; font-weight: 600; cursor: pointer; }
.cd-btn:hover { filter: brightness(1.08); }
.cd-delete-form { margin-top: .6em; }
.cd-link { appearance: none; background: none; border: 0; padding: 0; color: #b32d2e; text-decoration: underline; cursor: pointer; font: inherit; font-size: .9em; }
.cd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
	.cd-wrap { font-size: 14px; }
	.cd-grid .cd-name { min-width: 7.5em; max-width: 9em; }
	.cd-export { margin-left: 0; }
	.cd-form { padding: .9em; }
}