/* ==========================================================================
   Simulateur de tarif
   ========================================================================== */

.sim-section { padding-top: 56px; }

.sim { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .sim { grid-template-columns: 1fr; } }

.sim-form { display: grid; gap: 20px; }
.sim-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.sim-step legend {
  display: flex; align-items: center; gap: 10px; float: left; width: 100%;
  font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; color: var(--forest-deep); margin-bottom: 14px;
}
.sim-step legend + * { clear: both; }
.sim-num {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--forest); color: #fff; font-family: var(--font-body); font-size: .95rem; font-weight: 800;
}
.sim-hint { font-size: .92rem; color: var(--muted); margin: 10px 0 0; }
.sim-hint.sim-error, .sim-error { color: var(--ember-dark); font-weight: 700; }
.sim-warn { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: #fdf1e9; color: var(--ember-dark); font-weight: 600; font-size: .95rem; }

.sim-choices { display: grid; gap: 8px; }
.sim-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s;
}
.sim-choice:hover { border-color: var(--moss); }
.sim-choice:has(input[type="checkbox"]:checked) { border-color: var(--ember); background: #fdf1e9; }
.sim-choice input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ember); flex: none; }
.sim-choice-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sim-choice-text strong { font-weight: 700; }
.sim-choice-text small { color: var(--muted); font-size: .85rem; }
.sim-choice-price { font-weight: 700; color: var(--forest-deep); white-space: nowrap; font-size: .92rem; }
.sim-qty { width: 64px; padding: 6px 8px; font: inherit; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; }
@media (max-width: 520px) {
  .sim-choice { flex-wrap: wrap; }
  .sim-choice-price { width: 100%; padding-left: 32px; }
}

.sim-summary { position: sticky; top: 92px; }
@media (max-width: 900px) { .sim-summary { position: static; } }
.sim-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.sim-card h2 { font-size: 1.6rem; margin-bottom: 4px; }
.sim-periode { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }

.sim-lines { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sim-lines th, .sim-lines td { padding: 9px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.sim-lines th { font-weight: 600; text-align: left; padding-right: 12px; }
.sim-lines th small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
.sim-lines td { text-align: right; white-space: nowrap; font-weight: 700; }
.sim-lines td.sim-empty { text-align: left; white-space: normal; font-weight: 400; color: var(--muted); }

.sim-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--forest); color: #fff;
}
.sim-total span { font-weight: 700; }
.sim-total strong { font-family: var(--font-head); font-size: 1.9rem; color: #f4c9a6; }

.sim-meta { margin: 14px 0 18px; display: grid; gap: 6px; font-size: .93rem; }
.sim-meta div { display: flex; justify-content: space-between; gap: 12px; }
.sim-meta dt { color: var(--muted); }
.sim-meta dd { margin: 0; font-weight: 700; white-space: nowrap; }

.sim-cta { width: 100%; }
.sim-cta[disabled] { opacity: .5; cursor: not-allowed; }
.sim-legal { font-size: .82rem; color: var(--muted); margin: 14px 0 0; }

.sim-dispo { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: .92rem; }
.sim-dispo strong { display: block; }
.sim-dispo ul { margin: 6px 0; padding-left: 18px; }
.sim-dispo.is-free { background: var(--moss-light); color: var(--forest-deep); }
.sim-dispo.is-free strong::before { content: "✓ "; }
.sim-dispo.is-busy { background: #fdf1e9; color: var(--ember-dark); }
.sim-dispo a { font-weight: 700; color: inherit; }

/* Barre de total fixe sur mobile */
.sim-bar { display: none; }
@media (max-width: 900px) {
  .sim-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--forest-deep); color: #fff; box-shadow: 0 -8px 24px -12px rgba(0,0,0,.4);
  }
  .sim-bar span { font-size: .85rem; color: #c9d6c0; display: block; }
  .sim-bar strong { font-family: var(--font-head); font-size: 1.4rem; color: #f4c9a6; }
  .sim-bar .btn { padding: 10px 16px; }
  .sim-section { padding-bottom: 120px; }
}

/* Capacité dépassée : estimation bloquée */
.sim-warn p { margin: 0; }
.sim-warn p + p { margin-top: 6px; }
.sim-warn { border-left: 4px solid var(--ember-dark); }
.sim-form input[aria-invalid="true"] { border-color: var(--ember-dark); background: #fdf1e9; }
.sim-blocked {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: #fbe3d6; color: #8a3a12; font-weight: 700; font-size: .92rem;
}
.sim-card.is-blocked .sim-lines, .sim-card.is-blocked .sim-meta { opacity: .45; }
.sim-card.is-blocked .sim-total { background: var(--muted); }

/* ==========================================================================
   Calendrier de sélection avec disponibilités
   ========================================================================== */

.cal { margin-top: 12px; container-type: inline-size; }
/* Deux mois si la place le permet, sinon un seul (la navigation avance mois par mois) */
@container (max-width: 660px) {
  .cal-months { grid-template-columns: 1fr !important; }
  .cal-month + .cal-month { display: none; }
}
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-nav {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--forest-deep);
}
.cal-nav:hover:not(:disabled) { border-color: var(--forest); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-info { flex: 1; margin: 0; text-align: center; font-size: .92rem; font-weight: 600; color: var(--forest-deep); }
.cal-info.is-warn { color: var(--ember-dark); }

.cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.cal-title { margin: 0 0 8px; font-family: var(--font-body); font-size: .95rem; font-weight: 800; text-align: center; color: var(--forest-deep); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; padding-bottom: 4px; }

.cal-day {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 50px; padding: 5px 0 4px; border: 1px solid transparent; border-radius: 8px;
  background: var(--paper); font: inherit; cursor: pointer; color: var(--ink);
}
.cal-day:hover:not(:disabled) { border-color: var(--forest); }
.cal-day:focus-visible { outline: 3px solid var(--ember); outline-offset: 1px; }
.cal-num { font-weight: 700; font-size: .92rem; line-height: 1; }
.cal-day.is-today .cal-num { color: var(--ember-dark); text-decoration: underline; text-underline-offset: 3px; }
.cal-day.is-past { opacity: .35; cursor: default; background: transparent; }

.cal-ind { display: flex; gap: 2px; }
.cal-ind i {
  width: 13px; height: 13px; border-radius: 3px; display: grid; place-items: center;
  font-style: normal; font-size: .55rem; font-weight: 800; line-height: 1; color: #fff;
}
.cal-ind .is-libre, .cal-dot.is-libre { background: #7fa35f; }
.cal-ind .is-partiel { background: linear-gradient(90deg, #7fa35f 50%, var(--pl-option, #e3a83a) 50%); }
.cal-ind .is-option, .cal-dot.is-option { background: var(--pl-option, #e3a83a); color: #3b2a07; }
.cal-ind .is-occupe, .cal-dot.is-occupe { background: #b4532a; }

/* Conflit avec les espaces choisis */
.cal-day.is-conflict-option { background: #fdf3df; }
.cal-day.is-conflict-occupe { background: #fbe3d6; }
.cal-day.is-conflict-occupe .cal-num { text-decoration: line-through; text-decoration-thickness: 2px; color: #8a3a12; }

/* Période choisie */
.cal-day.is-range { background: var(--moss-light); }
.cal-day.is-start, .cal-day.is-end { background: var(--forest); border-color: var(--forest); }
.cal-day.is-start .cal-num, .cal-day.is-end .cal-num { color: #fff; }
.cal-day.is-range.is-conflict-occupe, .cal-day.is-start.is-conflict-occupe, .cal-day.is-end.is-conflict-occupe { box-shadow: inset 0 0 0 2px #b4532a; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cal-legend-keys { gap: 12px !important; }

.sim-dates { margin-top: 14px; }
.sim-dates label { font-size: .85rem; }

/* Petits écrans : pastilles réduites, sans lettre (la légende et l'info-bulle restent) */
@container (max-width: 420px) {
  .cal-grid { gap: 2px; }
  .cal-day { min-height: 44px; padding-top: 6px; }
  .cal-ind { gap: 1px; }
  .cal-ind i { width: 9px; height: 9px; font-size: 0; border-radius: 2px; }
}
@media (max-width: 520px) {
  .sim-step { padding: 18px 14px; }
}