/* ─────────────────────────────────────────────────────────────────────────── */
/* FICHIER : calendrier-preview.css                                            */
/* CHEMIN  : /var/www/cm-platform/frontend/modules/calendrier/calendrier-preview.css */
/* RÔLE    : Calendrier public réel + bloc de prévisualisation dashboard       */
/*                                                                            */
/* DESIGN FINAL ALEX :                                                         */
/* - Minimal / Free  : bleu clair, carré, sans points bleus.                  */
/* - Pro / Basic     : bleu foncé, week-end bleu clair, carré, sans orange.   */
/* - Chic / Premium  : gris + rouge + or doux, carré, premium, sans pastilles.*/
/* - Aucun calendrier ne doit hériter des couleurs Premium personnalisées.     */
/* ─────────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────── */
/* 1. BASE GÉNÉRALE                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */

.cm-cal-preview,
.cm-cal-preview *{
  box-sizing:border-box;
}

.cm-cal-preview{
  width:100%;
  color:#132f57;
  font-family:Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cm-cal-preview button{
  font:inherit;
}

.cm-cal-preview__shell{
  width:100%;
  border:1px solid #dce6f1;
  border-radius:20px;
  background:#ffffff;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(17,43,84,.08);
}

.cm-cal-preview__shell.is-compact{
  box-shadow:none;
}


/* ─────────────────────────────────────────────────────────────────────────── */
/* 2. EN-TÊTE DU BLOC DE PRÉVISUALISATION                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

.cm-cal-preview__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px;
  background:#ffffff;
  border-bottom:1px solid #dce6f1;
}

.cm-cal-preview__identity{
  min-width:0;
}

.cm-cal-preview__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  margin-bottom:10px;
  padding:6px 11px;
  border-radius:999px;
  background:#eef5ff;
  color:#204a9d;
  font-size:11px;
  font-weight:950;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cm-cal-preview__title{
  margin:0;
  color:#132f57;
  font-size:28px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.045em;
}

.cm-cal-preview__subtitle{
  margin:8px 0 0;
  color:#6a7d97;
  font-size:13px;
  line-height:1.5;
}

.cm-cal-real__owner{
  margin:8px 0 0;
  color:#28446e;
  font-size:17px;
  line-height:1.35;
  font-weight:650;
}

.cm-cal-preview__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.cm-cal-preview__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border:1px solid #dce6f1;
  border-radius:999px;
  background:#f8fbff;
  color:#6a7d97;
  padding:8px 13px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.cm-cal-preview__pill strong{
  margin-left:4px;
  color:#204a9d;
}

.cm-cal-preview__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  border:1px solid #dce6f1;
  border-radius:13px;
  background:#ffffff;
  color:#132f57;
  padding:9px 12px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.cm-cal-preview__btn:hover{
  transform:translateY(-1px);
  border-color:#b9cfef;
  box-shadow:0 10px 24px rgba(17,43,84,.10);
}

.cm-cal-preview__btn--primary{
  border-color:#204a9d;
  background:#204a9d;
  color:#ffffff;
}

.cm-cal-preview__btn--primary:hover{
  border-color:#183d86;
  background:#183d86;
}


/* ─────────────────────────────────────────────────────────────────────────── */
/* 3. ZONE CALENDRIER COMMUNE                                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

.cm-cal-preview__template{
  padding:26px 24px 20px;
  background:#ffffff;
}

.cm-cal-template{
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:#ffffff;
}

.cm-cal-template,
.cm-cal-template *{
  box-sizing:border-box;
}

.cm-cal-template__monthBar{
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  min-height:48px;
  border:1px solid #d7dfea;
  border-bottom:0;
  border-radius:0;
  background:#f5f8fc;
  overflow:hidden;
  box-shadow:none;
}

.cm-cal-template__monthBar button,
.cm-cal-template__monthBar span{
  display:grid;
  place-items:center;
  width:100%;
  height:48px;
  border:0;
  border-right:1px solid #d7dfea;
  background:transparent;
  color:#1f365b;
  font-size:21px;
  font-weight:950;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
  border-radius:0;
  box-shadow:none;
}

.cm-cal-template__monthBar button:last-child,
.cm-cal-template__monthBar span:last-child{
  border-right:0;
  border-left:1px solid #d7dfea;
}

.cm-cal-template__monthBar button:hover{
  background:#dfe9f7;
  color:#204a9d;
}

.cm-cal-template__monthBar strong{
  text-align:center;
  color:#1f365b;
  font-size:16px;
  font-weight:950;
  text-transform:capitalize;
}


/* ─────────────────────────────────────────────────────────────────────────── */