/* ═══════════════════════════════════════════════════════════════════════════
   Mini-calendrier partagé (minical) — le MÊME sélecteur de date partout.
   Améliore tout <input type="date"> en un calendrier maison (jours → mois →
   années), thème-aware (jetons globaux uniquement), PC + mobile (tactile).
   Logique : static/minical.js. Doc : docs/architecture/ui_pitfalls.md
   ═══════════════════════════════════════════════════════════════════════════ */

.mc-field { position:relative; display:inline-flex; align-items:center; gap:6px; }
/* input natif conservé (valeur + validation required) mais masqué visuellement,
   tout en restant focusable pour la validation navigateur (pas de display:none). */
.mc-native { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; opacity:0; pointer-events:none; }

.mc-btn { display:inline-flex; align-items:center; gap:7px; background:var(--surface-inset);
  border:1px solid var(--line); border-radius:9px; color:var(--text); font:inherit; font-size:1rem;
  padding:9px 12px; cursor:pointer; text-align:left; min-height:40px; }
.mc-btn:hover { border-color:var(--accent); }
.mc-btn.mc-set { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.mc-btn .mc-ico { font-size:1.05em; line-height:1; }

.mc-clear { display:inline-flex; align-items:center; justify-content:center; min-height:40px;
  padding:0 10px; background:var(--surface-inset); border:1px solid var(--line); border-radius:9px;
  color:var(--muted); font:inherit; font-size:1.15em; line-height:1; cursor:pointer; }
.mc-clear:hover { color:var(--accent-strong); border-color:var(--accent); }
.mc-clear[hidden] { display:none; }

.mc-pop { position:absolute; z-index:60; top:calc(100% + 6px); left:0; background:var(--surface-2);
  border:1px solid var(--line); border-radius:13px; padding:10px; width:288px; max-width:94vw;
  box-shadow:var(--shadow); }
.mc-pop[hidden] { display:none; }
.mc-head { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:7px; }
.mc-title { font:inherit; font-weight:800; font-size:.98rem; text-transform:capitalize;
  color:var(--accent-strong); background:none; border:1px solid transparent; border-radius:8px;
  padding:3px 9px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.mc-title:hover { background:var(--accent-soft); border-color:var(--line); }
.mc-title .mc-caret { font-size:.62rem; opacity:.7; }
.mc-nav { background:none; border:1px solid var(--line); border-radius:8px; color:var(--text);
  font-size:1.1rem; line-height:1; padding:4px 11px; cursor:pointer; }
.mc-nav:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }

.mc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.mc-wd { text-align:center; font-size:.7rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; padding:3px 0; }
.mc-day { background:none; border:1px solid transparent; border-radius:8px; color:var(--text);
  font:inherit; font-size:.9rem; padding:7px 0; cursor:pointer; text-align:center; }
.mc-day:hover { border-color:var(--accent); background:var(--accent-soft); }
.mc-day.mc-blank { visibility:hidden; pointer-events:none; }
.mc-day.mc-today { border-color:var(--line); font-weight:800; }
.mc-day.mc-sel { background:var(--accent); color:var(--on-accent); font-weight:800; border-color:var(--accent); }
.mc-day.mc-off { opacity:.32; cursor:not-allowed; }
.mc-day.mc-off:hover { border-color:transparent; background:none; }

.mc-months, .mc-years { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:4px 2px; }
.mc-grid[hidden], .mc-months[hidden], .mc-years[hidden] { display:none; }
.mc-cell { background:none; border:1px solid transparent; border-radius:9px; color:var(--text);
  font:inherit; font-size:.9rem; padding:12px 0; cursor:pointer; text-align:center; text-transform:capitalize; }
.mc-cell:hover { border-color:var(--accent); background:var(--accent-soft); }
.mc-cell.mc-cur { border-color:var(--line); font-weight:800; }
.mc-cell.mc-sel { background:var(--accent); color:var(--on-accent); font-weight:800; border-color:var(--accent); }
.mc-cell.mc-off { opacity:.32; cursor:not-allowed; }
.mc-cell.mc-off:hover { border-color:transparent; background:none; }

/* Téléphone : cases plus grandes au doigt, champ ≥16px (anti-zoom iOS). */
@media (max-width:759px){
  .mc-btn, .mc-clear { font-size:16px; }
  .mc-pop { width:320px; padding:12px; }
  .mc-day { padding:10px 0; font-size:1rem; }
  .mc-cell { padding:15px 0; font-size:1rem; }
}