/* Planificateur — composants propres, construits sur cgm.css. */

/* ---------- En-tête de page ---------- */
.page-head { border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.page-head .meta-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: var(--pad) var(--pad) 0; }
.page-head .headline { padding: clamp(24px, 4vw, 56px) var(--pad) clamp(20px, 3vw, 32px); position: relative; z-index: 1; }
.page-head .headline .line { background: var(--paper); padding-right: .12em; }
.page-head .headline .hl { color: var(--accent); }
.page-head .halftone { right: -4vw; bottom: -2vw; font-size: clamp(8rem, 20vw, 17rem); }
.page-head .lede { padding: 0 var(--pad) var(--pad); position: relative; z-index: 1; }

/* ---------- Accueil : liste des formats ---------- */
.formats a { display: grid; grid-template-columns: 90px 1fr auto; align-items: stretch; text-decoration: none; border-bottom: 1px solid var(--rule); }
.formats a > * { padding: 22px var(--pad); display: flex; align-items: center; }
.formats a > * + * { border-left: 1px solid var(--rule); }
.formats a:hover, .formats a:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.formats a:hover .muted, .formats a:focus-visible .muted { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.formats a:hover .chip, .formats a:focus-visible .chip { border-color: var(--paper); }
.formats .info { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.formats .facts-inline { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.formats .go { font-family: var(--mono); color: var(--accent); font-size: 1.2rem; }

/* ---------- Réservation ---------- */
.booking { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.booking > * + * { border-left: 1px solid var(--rule); }
.booking-info { padding: var(--pad); display: grid; gap: 18px; align-content: start; }
.booking-main { padding: var(--pad); min-height: 520px; display: grid; gap: 18px; align-content: start; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.facts li { background: var(--paper); padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px; }
.facts li > :last-child { text-align: right; }
.host { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.mark { min-width: 42px; padding: 0 8px; height: 42px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: .95rem; letter-spacing: -.03em; flex: none; }
.host:hover .mark { background: var(--accent); color: var(--accent-ink); }

.step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.dates { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78px, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); overflow-x: auto; scrollbar-width: thin; }
.date { background: var(--paper); border: 0; border-radius: 0; color: var(--ink); padding: 10px 6px 9px; display: grid; justify-items: center; gap: 3px; cursor: pointer; font: inherit; }
.date .n { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 1.75rem; line-height: 1; letter-spacing: -.03em; }
.date .count { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--muted); }
.date:hover { background: var(--ink); color: var(--paper); }
.date:hover .count { color: inherit; }
.date[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.date[aria-pressed="true"] .count { color: inherit; }
.date.more { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; align-content: center; }

.period { grid-column: 1 / -1; margin-top: 8px; }
.period:first-child { margin-top: 0; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot { font-family: var(--mono); font-size: .92rem; font-weight: 500; padding: 12px 0; border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.slot:hover, .slot:focus-visible { background: var(--ink); color: var(--paper); outline: none; }

.chosen { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--rule); padding: 12px 14px; background: var(--paper-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

.empty { border: 1px dashed var(--muted); padding: 40px 20px; display: grid; gap: 8px; justify-items: center; text-align: center; }

.summary { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.summary > div { background: var(--paper); display: grid; grid-template-columns: 130px 1fr; }
.summary > div > * { padding: 11px 12px; }
.summary > div > * + * { border-left: 1px solid var(--rule); }
.summary .cap::first-letter { text-transform: uppercase; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Tableau de bord ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.tabs button {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  background: none; border: 0; border-right: 1px solid var(--rule); border-radius: 0; color: var(--ink); padding: 14px 20px; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tabs button:hover:not([aria-selected="true"]) { color: var(--accent); }

.stats { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.stat { padding: var(--pad); display: grid; gap: 12px; min-height: 120px; align-content: space-between; }
.stat .value { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat.lead { background: var(--accent); color: var(--accent-ink); }
.stat.lead.zero { background: var(--paper); color: var(--ink); }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: var(--pad); border-bottom: 1px solid var(--rule); }
.filters { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.filters > div { padding: 12px var(--pad); display: grid; gap: 6px; }
.filters select { padding: 8px 10px; font-size: .9rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
td + td, th + th { border-left: 1px solid var(--rule-soft); }
tbody tr:hover { background: var(--paper-2); }
td .sub { display: block; color: var(--muted); font-size: .84rem; margin-top: 3px; }
td .quote { display: block; margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--accent); color: var(--muted); font-size: .86rem; max-width: 40ch; }
td .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.when { font-family: var(--mono); font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.when::first-letter { text-transform: uppercase; }
.table-empty { padding: 40px 12px; text-align: center; }

.split { display: grid; grid-template-columns: 1.3fr 1fr; }
.split > * + * { border-left: 1px solid var(--rule); }
.block { padding: var(--pad); display: grid; gap: 14px; align-content: start; }
.block + .block { border-top: 1px solid var(--rule); }

.rule-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.rule-row:last-child { border-bottom: 0; }
.rule-row strong { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; padding-top: 10px; }
.ranges { display: grid; gap: 8px; justify-items: start; }
.range { display: flex; gap: 8px; align-items: center; }
.range input { width: 128px; font-family: var(--mono); font-size: .9rem; padding: 8px 10px; }
.x-btn { font-family: var(--mono); background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; padding: 6px 9px; }
.x-btn:hover { border-color: var(--accent); color: var(--accent); }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-grid .full { grid-column: 1 / -1; }
.exception-form { display: grid; grid-template-columns: 1.3fr auto 1fr 1fr; gap: 12px; align-items: end; }
.exception-form .reason { grid-column: 1 / 4; }

.copy-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* Connexion */
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--gutter); }
.login form { width: min(420px, 100%); border: 1px solid var(--rule); }
.login .form-body { padding: var(--pad); display: grid; gap: 14px; }

.site-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px var(--pad); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .booking, .split { grid-template-columns: minmax(0, 1fr); }
  .booking > * + *, .split > * + * { border-left: 0; border-top: 1px solid var(--rule); }
  .booking-main { min-height: 0; }
  .stats, .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .form-grid, .settings-grid { grid-template-columns: 1fr; }
  .formats a { grid-template-columns: 1fr auto; }
  .formats a > :first-child { display: none; }
  .formats a > :nth-child(2) { border-left: 0; }
  .summary > div { grid-template-columns: 96px 1fr; }
  .exception-form { grid-template-columns: 1fr 1fr; }
  .exception-form .reason { grid-column: 1 / -1; }
  .rule-row { grid-template-columns: 1fr; gap: 4px; }
}