/* =============================================================
   CEHIV Planning – planning.css  v1.5.0
   Thème JOUR – clair, propre, professionnel
   Préfixe cpn- sur tous les sélecteurs (pas de conflit WP)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Variables thème clair ── */
#cehiv-planning-wrap {
  --cpn-bg:         #f4f6f9;
  --cpn-surface:    #ffffff;
  --cpn-surface2:   #f0f2f6;
  --cpn-border:     #dde1e9;
  --cpn-border-m:   #c4cad6;
  --cpn-accent:     #1a56a0;
  --cpn-accent-lt:  #2d72cc;
  --cpn-accent-bg:  #e6edf8;
  --cpn-text:       #1c2333;
  --cpn-text-dim:   #6b7790;
  --cpn-text-lt:    #9aa4b8;
  --cpn-time-w:     52px;
  --cpn-hdr-h:      60px;

  all: initial;
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  background: var(--cpn-bg);
  color: var(--cpn-text);
  position: relative;
  box-sizing: border-box;
  border: 1px solid var(--cpn-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
}

#cehiv-planning-wrap *, #cehiv-planning-wrap *::before, #cehiv-planning-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ── TOP BAR ── */
.cpn-topbar {
  position: relative; z-index: 20;
  background: var(--cpn-surface);
  border-bottom: 1px solid var(--cpn-border);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cpn-brand       { display: flex; flex-direction: column; gap: 2px; margin-right: 6px; }
.cpn-brand-name  { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 900; line-height: 1; color: var(--cpn-accent); }
.cpn-brand-sub   { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--cpn-text-dim); }
.cpn-week-nav    { display: flex; align-items: center; gap: 4px; background: var(--cpn-surface2); border: 1px solid var(--cpn-border); border-radius: 8px; padding: 3px 5px; }
.cpn-nav-btn     { background: none; border: none; cursor: pointer; color: var(--cpn-text-dim); padding: 4px 10px; border-radius: 6px; font-size: 17px; line-height: 1; transition: all .15s; }
.cpn-nav-btn:hover { background: var(--cpn-accent-bg); color: var(--cpn-accent); }
.cpn-week-label  { font-size: 13px; font-weight: 500; color: var(--cpn-text); min-width: 200px; text-align: center; white-space: nowrap; cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background .15s; user-select: none; }
.cpn-week-label:hover { background: var(--cpn-accent-bg); }
.cpn-today-btn   { background: none; border: 1px solid var(--cpn-border-m); border-radius: 7px; color: var(--cpn-text-dim); font-family: inherit; font-size: 11px; letter-spacing: .8px; padding: 5px 13px; cursor: pointer; transition: all .15s; text-transform: uppercase; font-weight: 500; }
.cpn-today-btn:hover { background: var(--cpn-accent-bg); color: var(--cpn-accent); border-color: var(--cpn-accent-lt); }
.cpn-zone-wrap   { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cpn-zone-lbl    { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cpn-text-dim); }
.cpn-zone-sel    { background: var(--cpn-surface2); border: 1px solid var(--cpn-border-m); border-radius: 6px; color: var(--cpn-text); font-family: inherit; font-size: 11px; padding: 4px 8px; cursor: pointer; outline: none; }
.cpn-zone-sel:focus { border-color: var(--cpn-accent); }

/* ── FILTERS ── */
.cpn-filterbar {
  position: relative; z-index: 15;
  background: var(--cpn-surface2);
  border-bottom: 1px solid var(--cpn-border);
  padding: 9px 20px;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.cpn-filter-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cpn-filter-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--cpn-text-dim); white-space: nowrap; margin-right: 2px; }
.cpn-pill         { padding: 3px 10px; border-radius: 20px; border: 1px solid var(--cpn-border-m); background: var(--cpn-surface); color: var(--cpn-text-dim); font-family: inherit; font-size: 11px; cursor: pointer; transition: all .15s; }
.cpn-pill:hover   { border-color: var(--cpn-accent-lt); color: var(--cpn-accent); }
.cpn-pill.on      { background: var(--cpn-accent); border-color: var(--cpn-accent); color: #fff; font-weight: 500; }
.cpn-pill.evt-on  { background: #e6f4e6; border-color: #4caf50; color: #2e7d32; }

/* ── LEGEND ── */
.cpn-legend {
  position: relative; z-index: 14; background: var(--cpn-surface); border-bottom: 1px solid var(--cpn-border);
  padding: 7px 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.cpn-leg-section { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cpn-text-lt); margin-right: 2px; }
.cpn-leg         { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--cpn-text-dim); }
.cpn-leg-dot     { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cpn-leg-sep     { width: 1px; height: 14px; background: var(--cpn-border); margin: 0 4px; }

/* ── VACANCES LOADING ── */
.cpn-vac-loading { display: none; position: relative; z-index: 16; background: var(--cpn-surface2); border-bottom: 1px solid var(--cpn-border); padding: 6px 20px; font-size: 11px; color: var(--cpn-text-dim); align-items: center; gap: 8px; }
.cpn-vac-loading.show { display: flex; }
.cpn-spin { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; border: 2px solid var(--cpn-border-m); border-top-color: var(--cpn-accent); border-radius: 50%; animation: cpn-spin .7s linear infinite; }
@keyframes cpn-spin { to { transform: rotate(360deg); } }

/* ── VACANCES BANNER ── */
.cpn-vac-banner { display: none; position: relative; z-index: 16; background: #fffae8; border-top: 1px solid #e8c840; border-bottom: 1px solid #e8c840; padding: 9px 20px; align-items: center; gap: 10px; flex-wrap: wrap; }
.cpn-vac-banner.show  { display: flex; }
.cpn-vac-icon         { font-size: 16px; }
.cpn-vac-text         { font-size: 13px; color: #7a5800; font-weight: 500; }
.cpn-vac-name         { font-family: 'Playfair Display', serif; font-weight: 700; color: #5a3d00; }
.cpn-vac-sub          { font-size: 11px; color: #9a7020; }
.cpn-vac-toggle       { margin-left: auto; background: none; border: 1px solid #c8a020; border-radius: 6px; color: #7a5800; font-family: inherit; font-size: 11px; padding: 4px 11px; cursor: pointer; transition: all .15s; }
.cpn-vac-toggle:hover { background: #ffedb0; }
.cpn-vac-toggle.show-anyway { background: #ffedb0; border-color: #a07010; }

/* ── CALENDAR ── */
.cpn-cal-outer {
  position: relative; z-index: 5; overflow-x: auto; padding-bottom: 40px;
  background: var(--cpn-surface);
  animation: cpn-fadeIn .25s ease;
}
@keyframes cpn-fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.cpn-cal-grid {
  display: grid;
  grid-template-columns: var(--cpn-time-w) repeat(7, minmax(110px, 1fr));
  min-width: 680px;
}

/* ── HEADERS ── */
.cpn-th-corner { height: var(--cpn-hdr-h); background: var(--cpn-surface); border-bottom: 2px solid var(--cpn-accent); border-right: 1px solid var(--cpn-border); position: sticky; top: 0; z-index: 30; }
.cpn-th-day    { height: var(--cpn-hdr-h); background: var(--cpn-surface); border-bottom: 2px solid var(--cpn-accent); border-right: 1px solid var(--cpn-border); position: sticky; top: 0; z-index: 28; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.cpn-th-day:last-child { border-right: none; }
.cpn-th-day .cpn-dname { font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 700; color: var(--cpn-text-lt); transition: color .2s; }
.cpn-th-day .cpn-ddate { font-size: 11px; color: var(--cpn-text-lt); }
.cpn-th-day.has-content .cpn-dname  { color: var(--cpn-text); }
.cpn-th-day.today .cpn-dname        { color: var(--cpn-accent) !important; }
.cpn-th-day.today .cpn-ddate        { background: var(--cpn-accent); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; }
.cpn-th-day.is-vac .cpn-dname       { color: #c08010 !important; }
.cpn-th-day.is-vac .cpn-ddate       { color: #c08010 !important; }

/* ── TIME ROWS & CELLS ── */
.cpn-tc { border-top: 1px solid var(--cpn-border); border-right: 1px solid var(--cpn-border); display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px 7px 0 0; font-size: 10px; color: var(--cpn-text-lt); background: var(--cpn-bg); }
.cpn-dc { border-top: 1px solid var(--cpn-border); border-right: 1px solid var(--cpn-border); position: relative; background: var(--cpn-surface); }
.cpn-dc:last-child { border-right: none; }
.cpn-dc.is-vac { background: repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(200,150,0,.05) 8px, rgba(200,150,0,.05) 16px) !important; }

/* ── SLOTS ── */
.cpn-slot { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 4px 7px; overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s; border-left: 3px solid transparent; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.cpn-slot:hover { transform: translateY(-1px) scale(1.015); box-shadow: 0 5px 16px rgba(0,0,0,.14); z-index: 40 !important; }
.cpn-slot .cpn-st { font-family: 'Playfair Display', serif; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpn-slot .cpn-sc { font-size: 9.5px; opacity: .8;  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpn-slot .cpn-sl { font-size: 9px;   opacity: .65; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpn-slot .cpn-sh { font-size: 9px;   opacity: .7;  margin-top: 2px; }

/* ── EVENT BANNERS (all-day) ── */
.cpn-evt-banner { position: absolute; left: 3px; right: 3px; top: 2px; border-radius: 4px; padding: 3px 6px; font-size: 10px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 12; cursor: pointer; border-left: 3px solid transparent; transition: filter .12s; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.cpn-evt-banner:hover { filter: brightness(.95); z-index: 40 !important; }

/* ── PALETTE COULEURS (fond clair) ── */
.c-sabre      { background: #fde8e8; border-left-color: #e05545; color: #7a1a10; }
.c-fleuret    { background: #e8f0fc; border-left-color: #2d72cc; color: #1a3a80; }
.c-eveil      { background: #fff8e0; border-left-color: #e8a800; color: #7a5500; }
.c-notredame  { background: #f3ecfc; border-left-color: #9b59b6; color: #4a1a6a; }
.c-motricite  { background: #e6f9f4; border-left-color: #1abc9c; color: #0d6655; }
.c-loisir     { background: #eaf2fb; border-left-color: #5b9bd5; color: #1a4a7a; }
.c-sante      { background: #e8f8ec; border-left-color: #27ae60; color: #145a30; }
.c-compe      { background: #fdecea; border-left-color: #e74c3c; color: #7a1a10; }
.c-stage      { background: #fef5e0; border-left-color: #f39c12; color: #7a4500; }
.c-initiation { background: #e6f9f4; border-left-color: #1abc9c; color: #0d6655; }
.c-autre      { background: #f0f2f6; border-left-color: #8898aa; color: #3a4a60; }

/* ── WEEK PICKER ── */
.cpn-wpop     { display: none; position: fixed; z-index: 9998; background: var(--cpn-surface); border: 1px solid var(--cpn-border-m); border-radius: 12px; padding: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.15); font-size: 13px; min-width: 256px; }
.cpn-wpop.open { display: block; }
.cpn-wphdr    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cpn-wptitle  { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--cpn-accent); }
.cpn-wpnav    { background: none; border: none; color: var(--cpn-text-dim); cursor: pointer; font-size: 16px; padding: 2px 9px; border-radius: 6px; }
.cpn-wpnav:hover  { background: var(--cpn-accent-bg); color: var(--cpn-accent); }
.cpn-wpgrid   { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.cpn-wpdh     { text-align: center; font-size: 9.5px; color: var(--cpn-text-lt); letter-spacing: .5px; text-transform: uppercase; padding: 2px; }
.cpn-wpcell   { text-align: center; padding: 5px 3px; border-radius: 5px; cursor: pointer; font-size: 12px; color: var(--cpn-text-dim); transition: all .12s; line-height: 1.4; }
.cpn-wpcell:hover    { background: var(--cpn-accent-bg); color: var(--cpn-accent); }
.cpn-wpcell.in-week  { background: var(--cpn-accent-bg); color: var(--cpn-accent); }
.cpn-wpcell.sel-week { background: var(--cpn-accent); color: #fff; font-weight: 600; }
.cpn-wpcell.today-c  { border: 1px solid var(--cpn-accent); color: var(--cpn-accent); font-weight: 600; }
.cpn-wpcell.other-m  { opacity: .35; }
.cpn-wpclose  { margin-top: 10px; width: 100%; background: var(--cpn-surface2); border: 1px solid var(--cpn-border); color: var(--cpn-text-dim); font-family: inherit; font-size: 12px; padding: 7px; border-radius: 7px; cursor: pointer; }
.cpn-wpclose:hover { background: var(--cpn-accent-bg); color: var(--cpn-accent); }

/* ── TOOLTIP ── */
.cpn-tip { position: fixed; max-width: 270px; background: var(--cpn-surface); border: 1px solid var(--cpn-border-m); border-top: 3px solid var(--cpn-accent); border-radius: 10px; padding: 12px 15px; font-size: 12px; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .14s, transform .14s; z-index: 9999; box-shadow: 0 8px 30px rgba(0,0,0,.14); font-family: 'DM Sans', sans-serif; color: var(--cpn-text, #1c2333); }
.cpn-tip.show { opacity: 1; transform: translateY(0); }
.cpn-tt  { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--cpn-accent); margin-bottom: 8px; }
.cpn-tr  { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.cpn-tk  { color: var(--cpn-text-dim); flex-shrink: 0; }
.cpn-tv  { color: var(--cpn-text); font-weight: 500; text-align: right; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .cpn-topbar     { padding: 10px 12px; gap: 8px; }
  .cpn-brand-name { font-size: 16px; }
  .cpn-week-label { min-width: 130px; font-size: 11px; }
  .cpn-filterbar  { padding: 8px 12px; gap: 8px; }
  .cpn-zone-wrap  { display: none; }
}