/* ============================================================
   Calendrier — Gérer mes entretiens (09/09/2026)
   Même langage que l'agenda du tableau de bord (.x4-dga-*) :
   jetons v2 avec repli, natures en couleur, échelle compressée.
   Préfixe x4-cal-, zéro collision avec l'ancien .cal-*.
   ============================================================ */
.x4-cal { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--v2-text, #16171a); letter-spacing: -.01em; line-height: 1.2; }
.x4-cal-tete { display: flex; align-items: center; gap: 14px; padding: 0 2px; }
.x4-cal-bascule { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-cal-bascule-b { border: 0; background: transparent; padding: 6px 14px; border-radius: 99px; font: inherit; font-size: 12.5px; font-weight: 620; color: var(--v2-text-2, #55595f); cursor: pointer; }
.x4-cal-bascule-b.est-actif { background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)); }
.x4-cal-titre { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.x4-cal-titre b { font-size: 17px; font-weight: 680; letter-spacing: -.015em; white-space: nowrap; }
.x4-cal-titre span { font-size: 12px; font-weight: 550; color: var(--v2-text-3, #6b6f76); }
.x4-cal-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.x4-cal-nav-b { height: 32px; min-width: 32px; padding: 0 10px; border-radius: var(--r-xs, 9px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); font: inherit; font-size: 15px; font-weight: 620; color: var(--v2-text-2, #55595f); cursor: pointer; }
.x4-cal-nav-b.est-auj { font-size: 12.5px; padding: 0 12px; color: var(--v2-text, #16171a); }
.x4-cal-nav-b:hover { border-color: var(--stroke-3, rgba(20, 20, 25, .17)); color: var(--v2-text, #16171a); }
.x4-cal-legende { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-cal-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 8px; background: var(--v2-text-3, #6b6f76); }
.x4-cal-legende i:first-child { margin-left: 0; }

/* ── Les natures : encre + fond dérivé ── */
.x4-cal [data-ton="info"] { --x4-enc: var(--info-fg, #3160b4); }
.x4-cal [data-ton="pos"] { --x4-enc: var(--pos-fg, #136d45); }
.x4-cal [data-ton="warn"] { --x4-enc: var(--v2-accent, #7d640d); }
.x4-cal-bloc[data-ton="warn"], .x4-cal-hors-l[data-ton="warn"], .x4-cal-chip[data-ton="warn"], .x4-cal-pill[data-ton="warn"] { background: color-mix(in srgb, var(--accent-bright, #f5d547) 45%, var(--panel-solid, #fff)); }
.x4-cal-bloc[data-ton="warn"] .x4-cal-bloc-t { color: var(--v2-text, #16171a); }
.x4-cal [data-ton="alt"] { --x4-enc: var(--alt-fg, #664cc2); }
.x4-cal [data-ton="teal"] { --x4-enc: var(--teal-fg, #0d6b78); }
.x4-cal [data-ton="neutre"] { --x4-enc: var(--v2-text-2, #55595f); }
.x4-cal [data-ton="relance"] { --x4-enc: var(--v2-text-2, #55595f); }
.x4-cal-legende i[data-ton] { background: var(--x4-enc); }
.x4-cal-legende i[data-ton="relance"] { border-radius: 99px; }
.x4-cal-legende i[data-ton="warn"] { background: var(--accent-bright, #f5d547); box-shadow: inset 0 0 0 1px var(--v2-accent, #7d640d); }

/* ── Semaine ── */
.x4-cal-sem { border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-radius: var(--r-lg, 26px); background: var(--panel-2, rgba(255, 255, 255, .42)); padding: 0 12px 10px; overflow: hidden; }
.x4-cal-rang { display: grid; grid-template-columns: 46px repeat(5, minmax(0, 1.2fr)) repeat(2, minmax(0, .7fr)); margin: 0 -12px; padding: 0 12px; min-width: 0; }
.x4-cal-axe-cell { min-width: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 9px; font-size: 10.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); }
.x4-cal-tetes { border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075)); }
.x4-cal-tete-j { min-width: 0; border: 0; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); background: transparent; padding: 10px 10px 9px; display: flex; align-items: center; gap: 8px; min-height: 60px; font: inherit; text-align: left; cursor: pointer; color: var(--v2-text, #16171a); }
.x4-cal-tete-j:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-cal-tete-jour { font-size: 11px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-cal-tete-num { font-size: 17px; font-weight: 680; }
.x4-cal-tete-n { margin-left: auto; font-size: 11px; font-weight: 550; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-cal-tete-j.est-we .x4-cal-tete-num { font-size: 14px; }
.x4-cal-tete-j.est-auj { box-shadow: inset 0 -3px 0 var(--accent-bright, #f5d547); background: linear-gradient(180deg, var(--accent-soft, rgba(245, 213, 71, .26)), transparent); }
.x4-cal-tete-j.est-auj .x4-cal-tete-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-xs, 9px); background: var(--accent-bright, #f5d547); color: #16171a; font-size: 16px; }
.x4-cal-tete-j.est-auj .x4-cal-tete-jour { color: var(--v2-accent, #7d640d); }

.x4-cal-jr { border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-cal-jr-cell { min-width: 0; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); padding: 5px; min-height: 32px; display: flex; flex-direction: column; gap: 3px; box-sizing: border-box; cursor: pointer; }
.x4-cal-pill { height: 22px; border: 0; border-radius: var(--r-xs, 9px); background: color-mix(in srgb, var(--x4-enc) 16%, var(--panel-solid, #fff)); box-shadow: inset 3px 0 0 var(--x4-enc); padding: 0 8px 0 10px; display: flex; align-items: center; gap: 5px; overflow: hidden; font: inherit; font-size: 11.5px; font-weight: 550; color: var(--v2-text, #16171a); text-align: left; cursor: pointer; }
.x4-cal-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-cal-pill[data-ton="relance"] { border-radius: 99px; box-shadow: none; background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-2, #55595f); }
.x4-cal-coche { flex: none; color: var(--x4-enc); }
.x4-cal-visio { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--x4-enc); color: var(--panel-solid, #fff); }

.x4-cal-hors { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-cal-hors + .x4-cal-corps, .x4-cal-corps + .x4-cal-hors { border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-cal-hors-cell { min-width: 0; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); padding: 4px 5px; min-height: 30px; display: flex; flex-direction: column; gap: 3px; box-sizing: border-box; }
.x4-cal-hors-l { height: 24px; border: 0; border-radius: var(--r-xs, 9px); background: color-mix(in srgb, var(--x4-enc) 20%, var(--panel-solid, #fff)); box-shadow: inset 3px 0 0 var(--x4-enc); padding: 0 8px 0 11px; display: flex; align-items: center; gap: 7px; overflow: hidden; font: inherit; text-align: left; cursor: pointer; color: var(--v2-text, #16171a); }
.x4-cal-hors-l > span:first-child { flex: none; font-size: 11px; font-weight: 680; color: var(--x4-enc); display: inline-flex; align-items: center; gap: 4px; }
.x4-cal-hors-l > span:last-child { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-cal-hors-l[data-passe] { opacity: .5; }

.x4-cal-corps { position: relative; }
.x4-cal-axe { position: relative; min-width: 0; }
.x4-cal-heure { position: absolute; right: 9px; font-size: 11.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); }
.x4-cal-now-h { position: absolute; right: 7px; font-size: 10.5px; font-weight: 680; color: var(--neg-fg, #a74137); background: var(--panel-solid, #fff); padding: 1px 3px; border-radius: 4px; z-index: 3; }
.x4-cal-couche { position: absolute; left: 58px; right: 12px; top: 0; bottom: 0; pointer-events: none; }
.x4-cal-filet { position: absolute; left: 0; right: 0; height: 1px; background: var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-cal-bande { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--pos-fg, #136d45) 7%, transparent); border-top: 1px dashed color-mix(in srgb, var(--pos-fg, #136d45) 30%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--pos-fg, #136d45) 30%, transparent); box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.x4-cal-bande > span { background: var(--panel-solid, #fff); padding: 0 11px; font-size: 10.5px; font-weight: 620; letter-spacing: .03em; color: var(--pos-fg, #136d45); white-space: nowrap; border-radius: 99px; }
.x4-cal-col { position: relative; min-width: 0; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); cursor: pointer; }
.x4-cal-col.est-auj { background: color-mix(in srgb, var(--accent-bright, #f5d547) 6%, transparent); }
.x4-cal-col.est-we { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-cal-col.est-we.est-auj { background: color-mix(in srgb, var(--accent-bright, #f5d547) 6%, transparent); }
.x4-cal-col-in { position: absolute; left: 5px; right: 5px; top: 0; bottom: 0; }
.x4-cal-bloc { position: absolute; box-sizing: border-box; border: 0; border-radius: var(--r-sm, 12px); background: color-mix(in srgb, var(--x4-enc) 20%, var(--panel-solid, #fff)); box-shadow: inset 4px 0 0 var(--x4-enc); overflow: hidden; cursor: pointer; font: inherit; text-align: left; color: var(--v2-text, #16171a); display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 0 12px; transition: transform .12s; }
.x4-cal-bloc:hover { transform: translateY(-1px); }
.x4-cal-bloc-h { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 680; color: var(--x4-enc); white-space: nowrap; }
.x4-cal-bloc-t { font-size: 12.5px; font-weight: 620; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--x4-enc) 72%, var(--v2-text, #16171a)); }
.x4-cal-bloc-m { font-size: 11.5px; color: var(--v2-text-2, #55595f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-cal-bloc.est-d3 { flex-direction: row; align-items: center; gap: 6px; padding: 0 9px 0 12px; }
.x4-cal-bloc.est-d3 .x4-cal-bloc-t { font-size: 12px; font-weight: 550; }
.x4-cal-bloc[data-passe] { opacity: .5; }
.x4-cal-bloc[data-live] { box-shadow: inset 4px 0 0 var(--pos-fg, #136d45), 0 0 0 1.5px var(--pos-fg, #136d45); }
.x4-cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px solid var(--neg-fg, #a74137); z-index: 6; pointer-events: none; }
.x4-cal-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 99px; background: var(--neg-fg, #a74137); }
.x4-cal-plus { border: 0; background: none; padding: 0 4px; font: inherit; font-size: 11px; font-weight: 620; color: var(--v2-text-3, #6b6f76); text-align: left; cursor: pointer; }
.x4-cal-plus:hover { color: var(--v2-text, #16171a); text-decoration: underline; }

/* ── Mois ── */
.x4-cal-mois { border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-radius: var(--r-lg, 26px); background: var(--panel-2, rgba(255, 255, 255, .42)); overflow: hidden; }
.x4-cal-mois-tetes { display: grid; grid-template-columns: repeat(5, minmax(0, 1.2fr)) repeat(2, minmax(0, .8fr)); border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075)); }
.x4-cal-mois-tetes span { padding: 10px 12px; font-size: 11px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-cal-mois-tetes span:first-child { border-left: 0; }
.x4-cal-mois-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1.2fr)) repeat(2, minmax(0, .8fr)); }
.x4-cal-cell { min-width: 0; min-height: 96px; padding: 8px 8px 6px; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.x4-cal-cell:nth-child(7n + 1) { border-left: 0; }
.x4-cal-cell:nth-child(-n + 7) { border-top: 0; }
.x4-cal-cell:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-cal-cell.est-we { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-cal-cell.est-hors { opacity: .45; }
.x4-cal-cell.est-auj { background: color-mix(in srgb, var(--accent-bright, #f5d547) 8%, transparent); }
.x4-cal-cell-tete { display: flex; align-items: center; justify-content: space-between; }
.x4-cal-cell-num { font-size: 13px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-cal-cell.est-auj .x4-cal-cell-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-xs, 9px); background: var(--accent-bright, #f5d547); color: #16171a; }
.x4-cal-cell-n { font-size: 11px; font-weight: 620; color: var(--v2-text-3, #6b6f76); }
.x4-cal-cell-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.x4-cal-chip { height: 22px; border: 0; border-radius: var(--r-xs, 9px); background: color-mix(in srgb, var(--x4-enc) 16%, var(--panel-solid, #fff)); box-shadow: inset 3px 0 0 var(--x4-enc); padding: 0 7px 0 9px; display: flex; align-items: center; gap: 5px; overflow: hidden; font: inherit; font-size: 11.5px; font-weight: 550; color: var(--v2-text, #16171a); text-align: left; cursor: pointer; }
.x4-cal-chip > .x4-num { flex: none; font-size: 10.5px; font-weight: 680; color: var(--x4-enc); }
.x4-cal-chip > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-cal-chip.est-relance { border-radius: 99px; box-shadow: none; background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-2, #55595f); font-weight: 620; justify-content: center; }
.x4-cal-chip:hover { filter: brightness(.97); }

/* ── Synchro Google ── */
.x4-cal-gsync { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 6px; font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-cal-gsync i { width: 8px; height: 8px; border-radius: 99px; background: var(--v2-text-3, #6b6f76); }
.x4-cal-gsync.est-live i { background: var(--pos-fg, #136d45); }
.x4-cal-gsync button { margin-left: 6px; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); font: inherit; font-size: 11.5px; font-weight: 620; color: var(--v2-text-2, #55595f); cursor: pointer; }

/* Sombre : fonds un peu plus francs, encres claires venant des jetons. */
[data-app-theme="dark"] .x4-cal-bloc, [data-app-theme="dark"] .x4-cal-hors-l { background: color-mix(in srgb, var(--x4-enc) 24%, var(--panel-solid, #17191c)); }
[data-app-theme="dark"] .x4-cal-chip, [data-app-theme="dark"] .x4-cal-pill { background: color-mix(in srgb, var(--x4-enc) 20%, var(--panel-solid, #17191c)); }
[data-app-theme="dark"] .x4-cal-tete-j.est-auj .x4-cal-tete-num, [data-app-theme="dark"] .x4-cal-cell.est-auj .x4-cal-cell-num { color: #16171a; }
[data-app-theme="dark"] .x4-cal-bloc[data-ton="warn"], [data-app-theme="dark"] .x4-cal-hors-l[data-ton="warn"], [data-app-theme="dark"] .x4-cal-chip[data-ton="warn"], [data-app-theme="dark"] .x4-cal-pill[data-ton="warn"] { background: color-mix(in srgb, var(--accent-bright, #f5d547) 26%, var(--panel-solid, #17191c)); }

.x4-cal [data-ton="visio"] { --x4-enc: var(--alt-fg, #664cc2); }
.x4-cal [data-ton="alt"] { --x4-enc: var(--x4c-pink-fg, #b0407a); }

/* ── Semaine : échelle fixe, quart d'heure, flèches (25/09/2026) ── */
.x4-cal-filet.est-demi { background: none; height: 0; border-top: 1px dashed var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-cal-nav-b { height: 34px; min-width: 34px; border-radius: 99px; display: inline-grid; place-items: center; padding: 0; color: var(--v2-text-2, #55595f); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)); }
.x4-cal-nav-b:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-cal-nav-b.est-auj { padding: 0 14px; background: var(--accent-bright, #f5d547); border-color: transparent; color: var(--sur-accent, #1b1a12); font-weight: 640; }
.x4-cal-col-in { cursor: copy; }
.x4-cal-fantome { position: absolute; left: 0; right: 0; box-sizing: border-box; z-index: 0; pointer-events: none; border: 1.5px dashed var(--v2-accent, #7d640d); border-radius: var(--r-xs, 9px); background: color-mix(in srgb, var(--accent-bright, #f5d547) 18%, transparent); display: flex; align-items: center; padding: 0 8px; }
.x4-cal-fantome[hidden] { display: none; }
.x4-cal-fantome span { font-size: 11.5px; font-weight: 680; color: var(--v2-accent, #7d640d); font-variant-numeric: tabular-nums; white-space: nowrap; }