/* =====================================================================
   Thème « Lagon » — inspiré de la palette Aqua Mist, Crystal Lagoon,
   Lotus Pink, Water Lily, Mint Bloom. Décor dessiné par pond.js.
   ===================================================================== */

/* Nunito : police arrondie et très lisible de loin (une seule police « variable » pour toutes les graisses) */
@font-face {
  font-family: "Nunito";
  font-weight: 200 1000;
  font-display: swap;
  src: url("vendor/fonts/nunito-latin-wght-normal.woff2") format("woff2-variations"),
       url("vendor/fonts/nunito-latin-wght-normal.woff2") format("woff2");
}

.pond, .ed-deco, .clock-deco { display: none; }

:root[data-theme="lagon"] {
  --ink: #1b4b57;
  --bg: #a9e6f0;
  --surface: rgb(255 255 255 / .5);
  --surface-2: rgb(255 255 255 / .22);
  --text: var(--ink);
  --muted: #4e7f8a;
  --line: rgb(74 150 168 / .2);
  --line-strong: rgb(74 150 168 / .34);
  --accent: #3aa6c4;
  --today-bg: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(242 199 219 / .4));
  --now: #e06a9f;
  --bad: #b5527f;
  --shadow: 0 10px 40px rgb(36 115 138 / .16);
  --radius: 26px;
  --ev-mix: 30%;
  --font: "Nunito", "Varela Round", system-ui, sans-serif;
  --glass: rgb(255 255 255 / .5);
  --glass-border: rgb(255 255 255 / .75);
  color-scheme: light;
}

/* ---------- Décor ---------- */

[data-theme="lagon"] .pond {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pond-scene, .pond-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.caustics {
  position: absolute;
  inset: -12%;
  opacity: .42;
  mix-blend-mode: soft-light;
  will-change: transform;
  animation: caustic-drift 70s ease-in-out infinite alternate;
}
.caustics.c2 { opacity: .3; mix-blend-mode: screen; animation-duration: 95s; animation-direction: alternate-reverse; }
.caustics svg { width: 100%; height: 100%; }
@keyframes caustic-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

.petals { position: absolute; inset: 0; }
.petal {
  position: absolute;
  opacity: .85;
  filter: drop-shadow(0 4px 4px rgb(43 127 150 / .25));
  will-change: transform;
  animation: petal-float 40s ease-in-out infinite;
}
@keyframes petal-float {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r0)) scale(var(--s)); }
  50%  { transform: translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--r0) + 50deg)) scale(var(--s)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--r0)) scale(var(--s)); }
}

/* Écran au repos : l'eau se fige, pour ménager la tablette */
.still .caustics, .still .petal { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .caustics, .petal { animation: none; } }

[data-theme="lagon"] .calendar { position: relative; z-index: 1; }
/* La barre du haut passe devant le planning (son menu d'orientation s'ouvre par-dessus) */
[data-theme="lagon"] .topbar { position: relative; z-index: 5; }
[data-theme="lagon"] .topbar { padding-left: 32px; padding-right: 32px; }
[data-theme="lagon"] .calendar { margin: 0 32px max(28px, env(safe-area-inset-bottom)); }

/* Nénuphar fleuri à côté de l'horloge */
[data-theme="lagon"] .clock { display: flex; align-items: center; gap: 4px; }
[data-theme="lagon"] .clock-deco {
  display: block;
  flex-shrink: 0;
  margin: -16px -4px -16px -18px;
  filter: drop-shadow(0 6px 10px rgb(43 127 150 / .25));
}
[data-theme="lagon"] .clock-deco svg { display: block; }
@container app (max-width: 700px) {
  [data-theme="lagon"] .calendar { margin: 0 10px 12px; }
  [data-theme="lagon"] .topbar { padding-left: 16px; padding-right: 16px; }
  [data-theme="lagon"] .clock-deco { display: none; }
}

/* ---------- Typographie ---------- */

[data-theme="lagon"] body,
[data-theme="lagon"] button,
[data-theme="lagon"] .event-dialog { font-family: var(--font); }
[data-theme="lagon"] .clock-time { font-size: 3.6rem; font-weight: 800; letter-spacing: -.01em; }
[data-theme="lagon"] .period { font-size: 1.7rem; font-weight: 800; white-space: nowrap; }
[data-theme="lagon"] .clock-time,
[data-theme="lagon"] .period,
[data-theme="lagon"] .clock-date {
  text-shadow: 0 0 18px rgb(255 255 255 / .95), 0 0 4px rgb(255 255 255 / .8);
}
[data-theme="lagon"] .clock-date { color: var(--ink); font-weight: 700; font-size: 1.1rem; }

/* ---------- Verre dépoli ---------- */

[data-theme="lagon"] .segmented,
[data-theme="lagon"] .icon-btn,
[data-theme="lagon"] .today-btn,
[data-theme="lagon"] .person {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 24px rgb(36 115 138 / .14), inset 0 1px 0 rgb(255 255 255 / .85);
}
[data-theme="lagon"] .calendar {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(7px) saturate(1.2);
  backdrop-filter: blur(7px) saturate(1.2);
  box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / .9);
}
[data-theme="lagon"] .segmented button[aria-selected="true"],
[data-theme="lagon"] .ed-close {
  background: linear-gradient(135deg, #3fb2d0, #9179e0);
  color: #fff;
  box-shadow: 0 4px 14px rgb(120 110 210 / .3);
  text-shadow: 0 1px 2px rgb(40 60 120 / .3);
}
[data-theme="lagon"] .segmented button { color: var(--muted); }
[data-theme="lagon"] .icon-btn,
[data-theme="lagon"] .today-btn { color: var(--ink); }
[data-theme="lagon"] .status { color: var(--ink); text-shadow: 0 0 8px rgb(255 255 255 / .9); }
[data-theme="lagon"] .status.bad { color: var(--bad); }

[data-theme="lagon"] .person[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c) 22%, rgb(255 255 255 / .65));
  border-color: color-mix(in srgb, var(--c) 55%, white);
}
[data-theme="lagon"] .person[aria-pressed="false"] { background: rgb(255 255 255 / .3); }
[data-theme="lagon"] .person .dot { box-shadow: 0 0 0 3px rgb(255 255 255 / .8); }

/* ---------- Semaine ---------- */

[data-theme="lagon"] .wk-day-head .wd { font-size: 1.05rem; font-weight: 700; color: var(--muted); }
[data-theme="lagon"] .wk-day-head .dn { font-size: 1.7rem; font-weight: 800; }
[data-theme="lagon"] .wk-day-head.today .dn,
[data-theme="lagon"] .mo-cell.today .mo-num {
  background: linear-gradient(135deg, #ee9fc3, #a189e6);
  color: #fff;
  box-shadow: 0 4px 14px rgb(200 120 180 / .35);
}
[data-theme="lagon"] .wk-day-head.today .dn { font-size: 1.3rem; }
[data-theme="lagon"] .wk-allday-cell.today,
[data-theme="lagon"] .mo-cell.today { background: var(--today-bg); }
[data-theme="lagon"] .wk-col.today {
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px), var(--today-bg);
  background-size: 100% calc(100% / var(--hours)), 100% 100%;
}

/* Rendez-vous : couleurs franches, texte gros et gras pour une lecture d'un coup d'œil */
[data-theme="lagon"] .event,
[data-theme="lagon"] .chip,
[data-theme="lagon"] .mo-ev {
  --ev-bg: color-mix(in srgb, var(--c) 58%, white);
  --ev-bg2: color-mix(in srgb, var(--c) 40%, white);
  --ev-ink: color-mix(in srgb, var(--c) 30%, #10303a);
}
[data-theme="lagon"] .event {
  font-size: 1rem;
  background: linear-gradient(160deg, var(--ev-bg), var(--ev-bg2));
  border: 2px solid rgb(255 255 255 / .9);
  border-left: 6px solid var(--c);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgb(36 115 138 / .22);
  color: var(--ev-ink);
  padding: 5px 9px;
}
[data-theme="lagon"] .event .ev-title { font-size: 1.05em; font-weight: 800; line-height: 1.15; }
[data-theme="lagon"] .event .ev-time { color: var(--ev-ink); font-size: .9em; font-weight: 700; opacity: .85; }
[data-theme="lagon"] .event .ev-loc { color: var(--ev-ink); font-size: .85em; font-weight: 600; opacity: .75; }

[data-theme="lagon"] .chip,
[data-theme="lagon"] .mo-ev.allday {
  background: linear-gradient(90deg, var(--ev-bg), var(--ev-bg2));
  color: var(--ev-ink);
  border: 2px solid rgb(255 255 255 / .9);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgb(36 115 138 / .18);
  font-weight: 800;
}
[data-theme="lagon"] .chip { font-size: 1rem; padding: 5px 10px; }

/* Rendez-vous déjà passés : estompés, pour que ceux à venir ressortent */
[data-theme="lagon"] .event.past,
[data-theme="lagon"] .chip.past,
[data-theme="lagon"] .mo-ev.past { opacity: .62; filter: saturate(.75); box-shadow: none; }

[data-theme="lagon"] .now-line {
  height: 3px;
  background: linear-gradient(90deg, #f29cc3, #a991ea);
  box-shadow: 0 0 10px rgb(226 106 159 / .6);
}
[data-theme="lagon"] .now-line::before {
  background: #f29cc3;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 0 12px rgb(226 106 159 / .7);
}

/* ---------- Mois ---------- */

[data-theme="lagon"] .mo-wd { font-size: 1.05rem; font-weight: 800; color: var(--muted); }
[data-theme="lagon"] .mo-num { font-size: 1.25rem; font-weight: 800; }
[data-theme="lagon"] .mo-list { gap: 3px; }
[data-theme="lagon"] .mo-ev {
  font-size: .95rem;
  padding: 3px 7px;
  border-radius: 8px;
  color: var(--ev-ink);
}
[data-theme="lagon"] .mo-ev:not(.allday) {
  background: color-mix(in srgb, var(--c) 24%, rgb(255 255 255 / .8));
  border-left: 4px solid var(--c);
}
[data-theme="lagon"] .mo-ev .dot { display: none; }
[data-theme="lagon"] .mo-ev .mo-time { color: var(--ev-ink); font-weight: 700; opacity: .8; }
[data-theme="lagon"] .mo-ev .mo-title { font-weight: 800; }
[data-theme="lagon"] .mo-more {
  background: linear-gradient(135deg, #3fb2d0, #9179e0);
  color: #fff; font-weight: 800; font-size: .9rem;
  box-shadow: 0 2px 8px rgb(120 110 210 / .3);
}

/* ---------- Fenêtre de détail ---------- */

[data-theme="lagon"] .event-dialog {
  overflow: visible;
  background: linear-gradient(160deg, rgb(255 255 255 / .94), rgb(236 250 252 / .92) 55%, rgb(246 238 255 / .94));
  border: 1px solid rgb(255 255 255 / .9);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgb(36 115 138 / .35);
}
[data-theme="lagon"] .event-dialog::backdrop {
  background: rgb(122 221 242 / .25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
[data-theme="lagon"] .event-dialog h2 { font-size: 2rem; font-weight: 800; padding-right: 70px; }
[data-theme="lagon"] .ed-person {
  background: color-mix(in srgb, var(--c) 30%, white);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--c) 50%, white);
}
[data-theme="lagon"] .ed-deco {
  display: block;
  position: absolute;
  top: -44px;
  right: -34px;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgb(43 127 150 / .3));
}

/* ---------- Écrans moyens (tablette 15" en mise à l'échelle Android ~1280 px) ---------- */
/* Barre du haut sur une seule ligne pour laisser un maximum de hauteur aux rendez-vous */
@container app (min-width: 1100px) and (max-width: 1500px) {
  [data-theme="lagon"] .topbar { gap: 16px; padding-top: 10px; padding-bottom: 10px; }
  [data-theme="lagon"] .clock-deco { margin: -20px -14px -20px -22px; transform: scale(.8); }
  [data-theme="lagon"] .clock-time { font-size: 2.8rem; }
  [data-theme="lagon"] .clock-date { font-size: .95rem; }
  [data-theme="lagon"] .nav { flex-wrap: nowrap; gap: 10px; }
  [data-theme="lagon"] .period { font-size: 1.35rem; min-width: 0; }
  [data-theme="lagon"] .segmented button { padding: 8px 16px; }
  [data-theme="lagon"] .icon-btn { width: 42px; height: 42px; font-size: 1.5rem; }
  [data-theme="lagon"] .icon-btn.small { width: 36px; height: 36px; font-size: 1rem; }
  [data-theme="lagon"] .today-btn { height: 42px; padding: 0 14px; }
  [data-theme="lagon"] .person { padding: 6px 12px 6px 9px; }
  [data-theme="lagon"] .side { gap: 4px; }
}