/*
 * Verre 2026 MAX
 * Couche de finition appliquée après les styles fonctionnels de l’agenda.
 * Les valeurs de matière, d’ombre et d’animation viennent du prompt de référence.
 */

html {
  min-height: 100%;
  max-width: 100%;
  background: var(--scene-c);
  /* iOS gonfle les polices en rotation paysage sans cette neutralisation. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  /* clip n'ouvre pas de conteneur de défilement : sticky et backdrop restent stables sur iOS. */
  overflow-x: clip;
}

/* Garde-fou anti-débordement : aucun média inline ne dépasse la largeur disponible. */
img, svg, video, canvas, table { max-width: 100%; }

body {
  position: relative;
  min-height: 100dvh;
  background: transparent;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

button,
a,
label,
select,
input,
textarea,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 1. Scène atmosphérique : le matériau reste visible parce qu’il réfracte ce fond. */
.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.scene > * {
  position: fixed;
  pointer-events: none;
}

.bg-base {
  inset: 0;
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0) 0 0/30px 30px,
    radial-gradient(circle at 12% 10%, rgba(235,102,139,.11), transparent 32%),
    radial-gradient(circle at 82% 4%, rgba(18,60,124,.24), transparent 34%),
    radial-gradient(circle at 50% 110%, rgba(47,107,255,.22), transparent 42%),
    linear-gradient(180deg, var(--scene-a) 0%, var(--scene-b) 48%, var(--scene-c) 100%);
}

.aurora {
  inset: -20%;
  opacity: .7;
  filter: blur(80px);
  background: conic-gradient(
    from 140deg at 50% 50%,
    rgba(18,60,124,.08),
    rgba(235,102,139,.12),
    rgba(47,107,255,.22),
    rgba(235,102,139,.07),
    rgba(18,60,124,.08)
  );
  animation: drift 32s var(--ease) infinite alternate;
}

.scene .halo {
  margin: 0;
  border-radius: 50%;
  opacity: .55;
  filter: blur(110px) saturate(1.25);
  animation: breathe 12s var(--ease) infinite alternate;
}

.scene .halo-blue {
  width: 460px;
  height: 460px;
  top: -150px;
  left: -70px;
  background: rgba(18,60,124,.34);
}

.scene .halo-rose {
  width: 460px;
  height: 460px;
  top: -150px;
  right: -70px;
  background: rgba(235,102,139,.16);
  animation-duration: 14s;
  animation-delay: -4s;
}

[data-theme="dark"] .aurora { opacity: .5; }
[data-theme="dark"] .scene .halo { opacity: .38; }

.grain {
  inset: 0;
  opacity: .45;
  mix-blend-mode: overlay;
  background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

@keyframes drift {
  from { transform: translate(-2%, -2%) rotate(0deg) scale(1.06); }
  to { transform: translate(2%, 2%) rotate(7deg) scale(1.16); }
}

@keyframes breathe {
  from { opacity: .5; transform: translateY(0) scale(1); }
  to { opacity: .92; transform: translateY(-16px) scale(1.12); }
}

.topbar { position: sticky; z-index: 20; }
.app-shell { position: relative; z-index: auto; }
.mobile-tabbar { position: relative; z-index: 1; }
.toast-region { position: fixed; z-index: 100; }

/* 2. Matériau de panneau MAX + double liseré taillé. */
.glass-card {
  position: relative;
  isolation: isolate;
  border: 0;
  background: linear-gradient(135deg, var(--glass-hi), var(--glass-lo) 58%);
  backdrop-filter: blur(40px) saturate(1.9) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(1.9) brightness(1.06);
  box-shadow:
    0 2px 6px rgba(var(--shadow-ink),.05),
    0 18px 40px -12px rgba(var(--shadow-ink),.20),
    0 48px 90px -28px rgba(var(--shadow-ink),.32),
    inset 0 1.5px 1px var(--glass-inner),
    inset 0 0 0 1px var(--glass-edge),
    inset 0 -30px 56px rgba(18,60,124,.07);
  text-shadow: 0 1px 1px rgba(255,255,255,.3);
}

[data-theme="dark"] .glass-card {
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  opacity: .9;
  background: linear-gradient(125deg, var(--glass-edge), transparent 18%, transparent 82%, var(--glass-edge));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  opacity: .9;
  background:
    conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(var(--shadow-ink),.3), transparent 8% 42%,
      rgba(var(--shadow-ink),.3) 50%, transparent 58% 92%,
      rgba(var(--shadow-ink),.3)
    ),
    linear-gradient(180deg, var(--glass-edge), var(--glass-edge));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: --angle-1 .8s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .glass-card:hover::before { --angle-1: -125deg; }
}

/* 3. Verre interactif : boutons, pilules et onglets. */
.icon-button,
.secondary-button,
.nav-item,
.danger-button,
.primary-button,
.conflict-button,
.mobile-tab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background: linear-gradient(-75deg, rgba(255,255,255,.05), rgba(255,255,255,.20), rgba(255,255,255,.05));
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.05),
    inset 0 -2px 2px rgba(255,255,255,.55),
    0 4px 2px -2px rgba(0,0,0,.2),
    inset 0 0 2px 4px rgba(255,255,255,.22),
    0 12px 22px -10px rgba(var(--shadow-ink),.38);
  transition:
    transform var(--v-time) var(--v-ease),
    box-shadow var(--v-time) var(--v-ease),
    background var(--v-time);
}

[data-theme="dark"] .icon-button,
[data-theme="dark"] .secondary-button,
[data-theme="dark"] .nav-item,
[data-theme="dark"] .danger-button,
[data-theme="dark"] .mobile-tab {
  background: linear-gradient(-75deg, rgba(157,184,218,.05), rgba(157,184,218,.16), rgba(157,184,218,.05));
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.25),
    inset 0 -2px 2px rgba(157,184,218,.3),
    0 4px 2px -2px rgba(0,0,0,.45),
    inset 0 0 2px 4px rgba(157,184,218,.12),
    0 12px 22px -10px rgba(0,0,0,.55);
}

.primary-button {
  color: #fff;
  background:
    linear-gradient(-75deg, rgba(255,255,255,.10), rgba(255,255,255,.28), rgba(255,255,255,.10)),
    linear-gradient(135deg, rgba(235,102,139,.85), rgba(201,87,119,.88));
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.nav-item.active,
.mobile-tab.active,
.mobile-tab[aria-expanded="true"] {
  color: #fff;
  background:
    linear-gradient(-75deg, rgba(255,255,255,.10), rgba(255,255,255,.25), rgba(255,255,255,.10)),
    linear-gradient(135deg, rgba(18,60,124,.88), rgba(47,107,255,.78));
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.danger-button,
.conflict-button {
  color: var(--rose-dk);
  background:
    linear-gradient(-75deg, rgba(255,255,255,.08), rgba(255,255,255,.2), rgba(255,255,255,.08)),
    rgba(201,87,119,.14);
}

.icon-button::before,
.secondary-button::before,
.nav-item::before,
.danger-button::before,
.primary-button::before,
.conflict-button::before,
.mobile-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(0,0,0,.45), transparent 5% 40%,
      rgba(0,0,0,.45) 50%, transparent 60% 95%,
      rgba(0,0,0,.45)
    ),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5);
  transition: --angle-1 .5s ease;
}

[data-theme="dark"] .icon-button::before,
[data-theme="dark"] .secondary-button::before,
[data-theme="dark"] .nav-item::before,
[data-theme="dark"] .danger-button::before,
[data-theme="dark"] .mobile-tab::before {
  background:
    conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(157,184,218,.85), transparent 5% 40%,
      rgba(157,184,218,.85) 50%, transparent 60% 95%,
      rgba(157,184,218,.85)
    ),
    linear-gradient(180deg, rgba(157,184,218,.35), rgba(157,184,218,.35));
  box-shadow: inset 0 0 0 .5px rgba(157,184,218,.4);
}

.icon-button::after,
.secondary-button::after,
.nav-item::after,
.danger-button::after,
.primary-button::after,
.conflict-button::after,
.mobile-tab::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  top: .5px;
  left: .5px;
  border-radius: inherit;
  overflow: clip;
  pointer-events: none;
  background: linear-gradient(
    var(--angle-2),
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.5) 40% 50%,
    rgba(255,255,255,0) 55%
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  transition: background-position .5s var(--v-ease), --angle-2 .5s var(--v-ease);
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover,
  .secondary-button:hover,
  .nav-item:hover,
  .danger-button:hover,
  .primary-button:hover,
  .conflict-button:hover,
  .mobile-tab:hover {
    transform: scale(.975);
    box-shadow:
      inset 0 2px 2px rgba(0,0,0,.05),
      inset 0 -2px 2px rgba(255,255,255,.5),
      0 3px 1px -2px rgba(0,0,0,.25),
      inset 0 0 1px 2px rgba(255,255,255,.5),
      0 14px 24px -10px rgba(var(--shadow-ink),.42);
  }

  .icon-button:hover::before,
  .secondary-button:hover::before,
  .nav-item:hover::before,
  .danger-button:hover::before,
  .primary-button:hover::before,
  .conflict-button:hover::before,
  .mobile-tab:hover::before { --angle-1: -125deg; }

  .icon-button:hover::after,
  .secondary-button:hover::after,
  .nav-item:hover::after,
  .danger-button:hover::after,
  .primary-button:hover::after,
  .conflict-button:hover::after,
  .mobile-tab:hover::after { background-position: 25% 50%; }
}

.icon-button:active,
.secondary-button:active,
.nav-item:active,
.danger-button:active,
.primary-button:active,
.conflict-button:active,
.mobile-tab:active {
  transform: rotate3d(1,0,0,18deg) scale(.96);
  transform-origin: 50% 100%;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.06),
    inset 0 -2px 2px rgba(255,255,255,.35),
    0 2px 2px -2px rgba(0,0,0,.2),
    inset 0 4px 5px rgba(0,0,0,.12);
}

.icon-button:active::before,
.secondary-button:active::before,
.nav-item:active::before,
.danger-button:active::before,
.primary-button:active::before,
.conflict-button:active::before,
.mobile-tab:active::before { --angle-1: -75deg; }

.icon-button:active::after,
.secondary-button:active::after,
.nav-item:active::after,
.danger-button:active::after,
.primary-button:active::after,
.conflict-button:active::after,
.mobile-tab:active::after {
  --angle-2: -15deg;
  background-position: 50% 15%;
}

/* Verre vivant : liseré conique et reflet balayé en boucle, comme la référence. */
@keyframes gb-edge {
  from { --angle-1: -75deg; }
  to { --angle-1: -215deg; }
}

@keyframes gb-sheen {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.icon-button::before,
.secondary-button::before,
.nav-item::before,
.danger-button::before,
.primary-button::before,
.conflict-button::before,
.mobile-tab::before {
  animation: gb-edge 6s var(--v-ease) infinite alternate;
}

.icon-button::after,
.secondary-button::after,
.nav-item::after,
.danger-button::after,
.primary-button::after,
.conflict-button::after,
.mobile-tab::after {
  animation: gb-sheen 4.5s var(--v-ease) infinite alternate;
}

[data-theme="dark"] .icon-button::after,
[data-theme="dark"] .secondary-button::after,
[data-theme="dark"] .nav-item::after,
[data-theme="dark"] .danger-button::after,
[data-theme="dark"] .primary-button::after,
[data-theme="dark"] .conflict-button::after,
[data-theme="dark"] .mobile-tab::after {
  background: linear-gradient(
    var(--angle-2),
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 40% 50%,
    rgba(255,255,255,0) 55%
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
}

/* 4. Champs, cartes événement et badges en verre lisible. */
input,
select,
textarea,
.search-field {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--field-focus), var(--field-bg));
  box-shadow:
    inset 0 1px 1px var(--glass-inner),
    inset 0 -1px 1px rgba(255,255,255,.3);
}

input:focus,
textarea:focus,
select:focus {
  box-shadow:
    inset 0 1px 1px var(--glass-inner),
    inset 0 -1px 1px rgba(255,255,255,.3),
    0 0 0 2px var(--blue);
}

.source-badge,
.status-badge,
.nav-badge,
.label-pill,
.event-card {
  box-shadow:
    inset 0 1px 1px var(--glass-inner),
    inset 0 -1px 1px rgba(255,255,255,.25),
    0 2px 6px -2px rgba(var(--shadow-ink),.25);
}

.event-card {
  isolation: isolate;
  background:
    linear-gradient(90deg, var(--source-color, var(--blue)) 0 4px, transparent 4px),
    var(--chip-bg);
  transition: transform .28s var(--v-ease), background .28s var(--v-ease), box-shadow .28s var(--v-ease);
}

.month-day-button {
  width: 100%;
  min-height: 0;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: left;
}

.month-event-dots { display: none; }

@media (hover: hover) and (pointer: fine) {
  .event-card:hover {
    transform: scale(.975);
    background:
      linear-gradient(90deg, var(--source-color, var(--blue)) 0 4px, transparent 4px),
      var(--field-focus);
  }
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.audit-item,
.notice,
.day-column {
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(214,228,244,.12));
  box-shadow:
    inset 0 1px 1px var(--glass-inner),
    inset 0 0 0 1px var(--glass-edge),
    0 12px 22px -16px rgba(var(--shadow-ink),.38);
}

[data-theme="dark"] .audit-item,
[data-theme="dark"] .notice,
[data-theme="dark"] .day-column {
  background: linear-gradient(135deg, rgba(46,64,90,.38), rgba(24,36,54,.30));
}

.topbar {
  background: linear-gradient(135deg, var(--glass-hi), var(--glass-lo) 58%);
  border: 0;
}

.sidebar {
  position: sticky;
  top: 104px;
}

.mobile-tabbar,
.sidebar-scrim,
.sidebar-handle {
  display: none;
}

/* 5. Version iPhone : structure, proportions et comportements d’application native. */
@media (max-width: 900px) {
  html {
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom));
    scrollbar-width: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar { display: none; }

  body {
    min-height: 100dvh;
    padding: 0 0 calc(82px + env(safe-area-inset-bottom));
    background-attachment: scroll;
  }

  body.mobile-sheet-open { overflow: hidden; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    min-height: calc(58px + env(safe-area-inset-top));
    margin: 0;
    padding: calc(7px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 7px max(14px, env(safe-area-inset-left));
    gap: 8px;
    border-radius: 0 0 25px 25px;
    /* Fond quasi opaque : le blur reste décoratif, le texte sous la barre ne transparaît plus. */
    background: linear-gradient(180deg, var(--bar-a), var(--bar-b));
    backdrop-filter: blur(24px) saturate(1.9) brightness(1.06);
    -webkit-backdrop-filter: blur(24px) saturate(1.9) brightness(1.06);
  }

  .topbar .mobile-menu { display: none; }
  .brand-copy .eyebrow { display: none; }
  .brand-copy h1 { font-size: 1.18rem; white-space: nowrap; }
  .top-actions { gap: 5px; }
  .top-actions .compact { width: 44px; min-width: 44px; padding: 0; }
  .top-actions .compact span { display: none; }

  .app-shell {
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 12px max(10px, env(safe-area-inset-right)) 20px max(10px, env(safe-area-inset-left));
    display: block;
  }

  main { gap: 10px; }

  .hero,
  .toolbar,
  .calendar {
    width: 100%;
    min-width: 0;
  }

  .hero {
    padding: 18px;
    gap: 14px;
    border-radius: 24px;
  }

  .hero h2 {
    margin-bottom: 6px;
    font-size: 1.42rem;
    line-height: 1.1;
  }

  .hero p { font-size: .88rem; line-height: 1.35; }

  .conflict-button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding: 0 14px;
    font-size: .78rem;
  }

  .toolbar {
    min-height: 0;
    padding: 9px 10px;
    gap: 8px;
    border-radius: 22px;
  }

  .date-nav {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 7px;
    width: 100%;
  }

  .date-nav h2 {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
  }

  #previousButton { grid-column: 1; grid-row: 1; }
  #nextButton { grid-column: 3; grid-row: 1; }

  .toolbar-actions { width: 100%; gap: 6px; }
  #todayButton { flex: 0 0 auto; min-height: 44px; padding: 0 10px; font-size: .78rem; }
  .search-field { min-width: 0; flex: 1; padding: 0 10px; gap: 6px; }
  .toolbar-actions select { width: 98px; max-width: 98px; padding: 0 26px 0 10px; font-size: .82rem; background-position: right 8px center; }

  .calendar {
    min-height: calc(100dvh - 250px);
    padding: 10px;
    border-radius: 24px;
    overflow: hidden;
  }

  .week-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .day-column {
    min-height: 44px;
    padding: 0 7px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    border: 0;
    border-radius: 17px;
  }

  .day-heading {
    min-height: 44px;
    margin: 0;
    padding: 2px 8px 2px 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0;
    border-right: 1px solid var(--line);
    line-height: 1;
  }

  .day-heading span { font-size: .64rem; }
  .day-heading strong { font-size: 1.1rem; }

  .day-events {
    min-width: 0;
    min-height: 44px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    align-content: start;
    gap: 5px;
  }

  .day-events > .audit-meta {
    grid-column: 1 / -1;
    min-height: 44px;
    margin: 0;
    display: flex;
    align-items: center;
  }

  .event-card {
    min-height: 44px;
    margin: 0;
    padding: 5px 7px 5px 11px;
    border-radius: 13px;
    text-align: left;
  }

  .event-card strong { font-size: .84rem; line-height: 1.2; }
  .event-card small { margin-top: 2px; font-size: .7rem; line-height: 1.25; }

  .month-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    border: 0;
    overflow: visible;
  }

  .month-weekday {
    display: grid;
    min-height: 28px;
    padding: 0;
    background: transparent;
    font-size: .62rem;
  }

  .month-day.muted { display: block; opacity: .34; }

  .month-day {
    min-height: 58px;
    padding: 2px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(214,228,244,.12));
    box-shadow: inset 0 0 0 1px var(--glass-edge);
  }

  .month-day-button {
    width: 100%;
    min-height: 52px;
    padding: 5px 2px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
  }

  .month-day-number {
    margin-bottom: 0;
    font-weight: 760;
    color: var(--blue-dk);
    font-size: .78rem;
  }

  .month-day.today .month-day-number {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, rgba(18,60,124,.88), rgba(47,107,255,.78));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 4px 10px -4px rgba(var(--shadow-ink),.42);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
  }

  .month-day .event-card,
  .month-day > .audit-meta { display: none; }
  .month-event-dots { display: flex; justify-content: center; gap: 2px; min-height: 5px; }
  .month-event-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--source-color, var(--blue)); }

  .list-view { gap: 8px; }
  .list-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 12px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(214,228,244,.10));
    box-shadow: inset 0 0 0 1px var(--glass-edge);
  }
  .list-row > :nth-child(n) { grid-column: 1; }
  .list-row button { min-height: 44px; padding: 0; }

  .mobile-tabbar {
    position: fixed;
    z-index: 50;
    /* Barre flottante REMONTÉE au-dessus de l'indicateur home : la compensation
       safe-area se fait par la position, plus par un padding interne (qui créait
       une bande de verre vide sous les libellés). */
    inset: auto max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 62px;
    padding: 6px;
    border-radius: 25px;
    isolation: isolate;
    /* Fond quasi opaque : les événements ne transparaissent plus à travers la barre. */
    background: linear-gradient(180deg, var(--bar-a), var(--bar-b));
    backdrop-filter: blur(24px) saturate(2.1) brightness(1.06);
    -webkit-backdrop-filter: blur(24px) saturate(2.1) brightness(1.06);
    box-shadow:
      0 18px 40px -12px rgba(var(--shadow-ink),.20),
      0 48px 90px -28px rgba(var(--shadow-ink),.32),
      inset 0 1.5px 1px var(--glass-inner),
      inset 0 0 0 1px var(--glass-edge);
    transition: transform .32s var(--ease), opacity .24s var(--ease);
  }

  .mobile-sheet-open .mobile-tabbar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 20px));
  }

  /* Tab bar type iOS : la barre est en verre, les onglets inactifs sont plats. */
  .mobile-tab {
    min-width: 0;
    min-height: 52px;
    padding: 5px 2px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 18px;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
  }

  .mobile-tab:not(.active):not([aria-expanded="true"])::before,
  .mobile-tab:not(.active):not([aria-expanded="true"])::after { display: none; }

  [data-theme="dark"] .mobile-tab:not(.active):not([aria-expanded="true"]) {
    background: transparent;
    box-shadow: none;
  }

  .search-field input::placeholder { font-size: .92rem; }

  /* Proportions tab bar iOS : glyphe ~25px, libellé 10px, respiration verticale. */
  .mobile-tab svg { width: 25px; height: 25px; stroke-width: 1.9; }
  .mobile-tab span { font-size: .64rem; font-weight: 720; letter-spacing: -.01em; }

  .sidebar-scrim {
    position: fixed;
    z-index: 55;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    background: rgba(7,26,58,.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity .25s var(--ease), visibility .25s;
  }

  .sidebar-scrim.open { opacity: 1; visibility: visible; }

  .sidebar {
    position: fixed;
    z-index: 60;
    inset: auto 6px 0;
    top: auto;
    left: 6px;
    width: calc(100% - 12px);
    max-height: min(76dvh, 680px);
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 30px 30px 0 0;
    transform: translateY(calc(100% + 24px));
    transition: transform .38s var(--spring);
    -webkit-overflow-scrolling: touch;
    /* Safari/Chromium compositent mal un backdrop-filter sur une grande feuille animée.
       Fond quasi opaque : sans blur, le contenu derrière ne doit pas saigner à travers. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(247,250,254,.97), rgba(230,238,250,.98));
  }

  [data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, rgba(26,39,60,.97), rgba(14,23,38,.98));
  }

  .sidebar.open { transform: translateY(0); }
  .sidebar-handle {
    display: block;
    width: 36px;
    height: 5px;
    margin: -8px auto 12px;
    border-radius: 999px;
    background: var(--glass-edge);
    box-shadow: inset 0 1px 1px var(--glass-inner);
  }
  /* La tabbar couvre Accueil/Jour/Semaine/Mois ; la feuille garde l’accès à la vue Liste. */
  .sidebar > nav .nav-item:not([data-view="list"]) { display: none; }
  .sidebar-section { margin-top: 8px; }
  .sidebar-section + .sidebar-section { margin-top: 18px; }
  .filter-check { min-height: 48px; border-radius: 14px; }
  .sidebar .nav-item { min-height: 48px; }

  .modal {
    /* Garde-fou définitif : le bord haut de la boîte du dialog est physiquement
       sous la zone heure/batterie (top-layer, donc hors de portée du voile body::before).
       var(--safe-top) et non env() : WebKit évalue env() à 0 dans le top-layer. */
    inset: calc(var(--safe-top, 0px) + 14px) 0 0;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - var(--safe-top, 0px) - 14px);
    margin: auto 0 0;
    border-radius: 30px 30px 0 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Panneau Centre (PLUS, Réglages, Labels…) : colonne flexible ; le contenu défile
     dans #panelContent sans jamais pousser l'en-tête ni dépasser la safe-area. */
  .panel-modal.modal[open] { display: flex; flex-direction: column; }
  .panel-modal.modal .modal-header { flex: 0 0 auto; }
  .panel-modal.modal #panelContent {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header {
    position: sticky;
    top: 0;
    padding: 25px 16px 12px;
  }

  .modal-header::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 5px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: var(--glass-edge);
    box-shadow: inset 0 1px 1px var(--glass-inner);
  }

  .modal form { padding: 0 16px 16px; }
  .panel-modal #panelContent { padding: 0 16px calc(18px + var(--safe-bottom, 0px)); }
  .form-grid { grid-template-columns: 1fr; gap: 13px; }
  .form-grid .wide { grid-column: auto; }

  input,
  select,
  textarea,
  .search-field input,
  .gmail-decision select {
    min-height: 50px;
    font-size: 16px;
    scroll-margin-bottom: 180px;
  }

  textarea { min-height: 112px; }
  .label-pill { min-height: 44px; }

  .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 18px -2px 0;
    padding: 10px 2px max(10px, var(--safe-bottom, 0px));
    background: linear-gradient(180deg, transparent, var(--sheet-a) 18%, var(--sheet-b));
  }

  .modal-actions span { display: none; }
  .modal-actions .danger-button { grid-column: 1 / -1; grid-row: 2; }
  .modal-actions > :only-child { grid-column: 1 / -1; }

  .toast-region {
    z-index: 100;
    left: 12px;
    right: 12px;
    bottom: calc(86px + max(10px, env(safe-area-inset-bottom)));
  }
  .toast { max-width: none; }
}

/* Le prompt impose la neutralisation des angles et de la 3D sur petit écran. */
@media (max-width: 640px) {
  .glass-card {
    backdrop-filter: blur(20px) saturate(1.75) brightness(1.05);
    -webkit-backdrop-filter: blur(20px) saturate(1.75) brightness(1.05);
  }

  .sidebar.glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .aurora,
  .scene .halo { animation: none; }
  .aurora { filter: blur(60px); opacity: .48; }
  .scene .halo { filter: blur(70px) saturate(1.15); opacity: .56; }
  .grain { opacity: .18; }

  .glass-card::before,
  .glass-card::after,
  .icon-button::before,
  .icon-button::after,
  .secondary-button::before,
  .secondary-button::after,
  .nav-item::before,
  .nav-item::after,
  .danger-button::before,
  .danger-button::after,
  .primary-button::before,
  .primary-button::after,
  .conflict-button::before,
  .conflict-button::after,
  .mobile-tab::before,
  .mobile-tab::after {
    transition: none;
  }

  .icon-button:active,
  .secondary-button:active,
  .nav-item:active,
  .danger-button:active,
  .primary-button:active,
  .conflict-button:active,
  .mobile-tab:active {
    transform: scale(.96);
  }
}

@media (max-width: 900px) and (max-height: 500px) {
  body { padding-bottom: 58px; }

  .topbar {
    min-height: calc(52px + env(safe-area-inset-top));
    padding-top: calc(4px + env(safe-area-inset-top));
    padding-bottom: 4px;
  }

  .hero {
    padding: 12px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .hero .eyebrow,
  .hero p { display: none; }
  .hero h2 { margin: 0; font-size: 1.15rem; }
  .conflict-button { width: auto; min-height: 44px; }

  .mobile-tabbar {
    min-height: 50px;
    padding: 4px;
    bottom: 4px;
  }

  .mobile-tab { min-height: 42px; padding: 3px; }
  .mobile-tab span { display: none; }

  .glass-card {
    backdrop-filter: blur(20px) saturate(1.75) brightness(1.05);
    -webkit-backdrop-filter: blur(20px) saturate(1.75) brightness(1.05);
  }

  .aurora,
  .scene .halo { animation: none; }
}

/* Le champ natif reste strictement contenu dans la capsule de recherche. */
.toolbar-actions,
.search-field { min-width: 0; }

.search-field input,
.search-field input:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Une bordure absolue dans une modale scrollable traversait le formulaire. */
.modal.glass-card::before,
.modal.glass-card::after { display: none; }

/* Cases de labels indépendantes du rendu incomplet des navigateurs. */
.label-pill input,
.toggle-row input[type="checkbox"],
.conflict-choice input[type="checkbox"],
.gmail-choice > input[type="checkbox"],
.gmail-thread-check,
.gmail-suspect-check {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(11,42,91,.38);
  border-radius: 6px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 2px rgba(11,42,91,.10), 0 1px 1px rgba(255,255,255,.7);
  cursor: pointer;
}

.label-pill input::after,
.toggle-row input[type="checkbox"]::after,
.conflict-choice input[type="checkbox"]::after,
.gmail-choice > input[type="checkbox"]::after,
.gmail-thread-check::after,
.gmail-suspect-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 8px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.7);
  transition: opacity .14s ease, transform .14s ease;
}

.label-pill input:checked,
.toggle-row input[type="checkbox"]:checked,
.conflict-choice input[type="checkbox"]:checked,
.gmail-choice > input[type="checkbox"]:checked,
.gmail-thread-check:checked,
.gmail-suspect-check:checked,
.gmail-thread-check:indeterminate {
  border-color: var(--blue);
  /* Une seule coche : rendue par le pseudo-élément ::after (pas de SVG de fond superposé). */
  background: linear-gradient(135deg, var(--blue), var(--blue-lt));
  box-shadow: 0 4px 12px rgba(18,60,124,.22), inset 0 1px 1px rgba(255,255,255,.38);
}

.label-pill input:checked::after,
.toggle-row input[type="checkbox"]:checked::after,
.conflict-choice input[type="checkbox"]:checked::after,
.gmail-choice > input[type="checkbox"]:checked::after,
.gmail-thread-check:checked::after,
.gmail-suspect-check:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.gmail-thread-check:indeterminate::after {
  left: 4px;
  top: 9px;
  width: 11px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: white;
  opacity: 1;
  transform: none;
}

.gmail-thread-check:indeterminate {
  /* La barre d'état indéterminé est rendue par ::after uniquement (pas de fond superposé). */
  background: linear-gradient(135deg, var(--blue), var(--blue-lt));
}

/* Les cases personnalisées n'utilisent pas le halo box-shadow générique de :focus. */
.label-pill input:focus,
.toggle-row input[type="checkbox"]:focus,
.conflict-choice input[type="checkbox"]:focus,
.gmail-choice > input[type="checkbox"]:focus,
.gmail-thread-check:focus,
.gmail-suspect-check:focus {
  box-shadow: inset 0 1px 2px rgba(11,42,91,.10), 0 1px 1px rgba(255,255,255,.7);
}

.label-pill input:checked:focus,
.toggle-row input[type="checkbox"]:checked:focus,
.conflict-choice input[type="checkbox"]:checked:focus,
.gmail-choice > input[type="checkbox"]:checked:focus,
.gmail-thread-check:checked:focus,
.gmail-suspect-check:checked:focus,
.gmail-thread-check:indeterminate:focus {
  box-shadow: 0 4px 12px rgba(18,60,124,.22), inset 0 1px 1px rgba(255,255,255,.38);
}

/* Focus clavier net et cohérent sur les cases personnalisées (n'écrase pas le fond coché). */
.label-pill input:focus-visible,
.toggle-row input[type="checkbox"]:focus-visible,
.conflict-choice input[type="checkbox"]:focus-visible,
.gmail-choice > input[type="checkbox"]:focus-visible,
.gmail-thread-check:focus-visible,
.gmail-suspect-check:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* État désactivé lisible. */
.label-pill input:disabled,
.toggle-row input[type="checkbox"]:disabled,
.conflict-choice input[type="checkbox"]:disabled,
.gmail-choice > input[type="checkbox"]:disabled,
.gmail-thread-check:disabled,
.gmail-suspect-check:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.gmail-suggestion input[type="radio"] { accent-color: var(--blue); }

@media (max-width: 900px) and (pointer: coarse) {
  .glass-card::before,
  .glass-card::after,
  .icon-button::before,
  .icon-button::after,
  .secondary-button::before,
  .secondary-button::after,
  .nav-item::before,
  .nav-item::after,
  .danger-button::before,
  .danger-button::after,
  .primary-button::before,
  .primary-button::after,
  .conflict-button::before,
  .conflict-button::after,
  .mobile-tab::before,
  .mobile-tab::after { transition: none; animation-duration: 9s; }

  .icon-button:active,
  .secondary-button:active,
  .nav-item:active,
  .danger-button:active,
  .primary-button:active,
  .conflict-button:active,
  .mobile-tab:active { transform: scale(.96); }
}

/* 6. Mobile : la feuille latérale est remplacée par le panneau « Plus » (présentation
   identique à Réglages). La barre latérale reste dans le DOM (état des sources)
   mais n'est plus jamais affichée sur petit écran. */
@media (max-width: 900px) {
  .sidebar,
  .sidebar-scrim { display: none !important; }
}

/* Panneau « Plus » : sources cochables sur deux colonnes, cartes type Réglages. */
.more-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 4px;
}

.more-sources .filter-check {
  min-height: 48px;
  padding: 0 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(214,228,244,.08));
  box-shadow: inset 0 0 0 1px var(--line);
}

[data-theme="dark"] .more-sources .filter-check {
  background: linear-gradient(135deg, rgba(46,64,90,.30), rgba(24,36,54,.24));
}

.more-tools button { flex: 1 1 44%; }

/* Fiche événement : champs regroupés en cartes titrées, comme le panneau Réglages. */
.form-cards { display: grid; gap: 11px; }
.form-card h3 { margin-bottom: 10px; }

/* 6bis. PWA iPhone : la zone du Dynamic Island (heure, batterie) reste réservée.
   Le garde-fou principal est l'inset haut posé sur .modal (section 5) ; cette règle
   n'est qu'une redondance volontaire alignée sur la même valeur. */
@media (max-width: 900px) {
  .modal { max-height: calc(100dvh - var(--safe-top, 0px) - 14px); }
}

/* …et le contenu qui défile derrière la barre de statut est voilé par la couleur de scène. */
@media (max-width: 900px) and (display-mode: standalone) {
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 65;
    height: env(safe-area-inset-top);
    pointer-events: none;
    background: var(--scene-b);
  }
}

/* Repli iOS : certaines PWA exposent navigator.standalone avant que display-mode
   soit correctement reflété. app.js pose alors cette classe sur l'élément racine. */
@media (max-width: 900px) {
  html.pwa-standalone body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 65;
    height: env(safe-area-inset-top);
    pointer-events: none;
    background: var(--scene-b);
  }
}

/* 7. Stabilité tactile : sur écran tactile, le reflet balayé (bande blanche animée en
   mix-blend screen) est retiré et le liseré conique est figé. Moins de repaints, plus
   d'artefacts de lignes blanches pendant le défilement. */
@media (pointer: coarse) {
  .icon-button::before,
  .secondary-button::before,
  .nav-item::before,
  .danger-button::before,
  .primary-button::before,
  .conflict-button::before,
  .mobile-tab::before { animation: none; }

  .icon-button::after,
  .secondary-button::after,
  .nav-item::after,
  .danger-button::after,
  .primary-button::after,
  .conflict-button::after,
  .mobile-tab::after { display: none; }
}

/* 8. Anti-entremêlement mobile. Safari iOS composite mal le backdrop-filter sur les
   éléments sticky et les feuilles top-layer scrollables : quand le blur lâche, le fond
   translucide laisse transparaître la page → textes superposés illisibles. Comme pour
   la sidebar (§5), les feuilles modales reçoivent un fond quasi opaque ; le verre reste
   une décoration, jamais une condition de lisibilité. */
@media (max-width: 900px) {
  .modal.glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, var(--sheet-a), var(--sheet-b));
  }

  /* En-tête de fiche : plus de dégradé vers transparent, le formulaire ne passe plus au travers. */
  .modal .modal-header {
    background: linear-gradient(180deg, var(--sheet-a), var(--sheet-a) 82%, transparent);
  }

  /* Fond assombri et net sous la feuille + bandeau opaque sous l'heure/batterie :
     même si la feuille remontait, la zone de statut repose toujours sur un fond propre. */
  .modal::backdrop {
    background:
      linear-gradient(180deg, var(--scene-b, #e8eef7) 0 var(--safe-top, 0px), transparent var(--safe-top, 0px)),
      rgba(7, 26, 58, .52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* iOS laisse défiler la page derrière un <dialog> ouvert : verrou explicite posé par app.js. */
  html.dialog-open,
  html.dialog-open body {
    overflow: hidden;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card,
  .login-pedestal,
  .topbar,
  .mobile-tabbar,
  .sidebar,
  .audit-item,
  .notice,
  .day-column,
  .icon-button,
  .secondary-button,
  .nav-item,
  .danger-button,
  .primary-button,
  .conflict-button,
  .mobile-tab,
  input,
  select,
  textarea,
  .search-field,
  .source-badge,
  .status-badge,
  .nav-badge,
  .label-pill,
  .event-card {
    background-color: var(--field-focus);
  }
}

/* 8. iPhone : application plein écran verrouillée à 100dvh — la page ne défile jamais.
   Topbar, hero compact, toolbar et tabbar sont fixes ; la zone calendrier occupe le reste.
   Seul l'intérieur des listes (Jour/Liste) défile si le nombre d'événements dépasse l'écran. */
@media (max-width: 900px) {
  /* position: fixed (et non un simple overflow: hidden) : sur iOS, un document
     non défilable en overflow hidden rebondit encore élastiquement à chaque glissé
     (« la page saute »). Le verrou fixed supprime tout rebond du document ;
     seuls les défileurs internes (listes, panneaux) bougent. */
  html,
  body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .topbar { flex: 0 0 auto; }

  .app-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px max(10px, env(safe-area-inset-right)) calc(80px + max(10px, env(safe-area-inset-bottom))) max(10px, env(safe-area-inset-left));
  }

  main {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Hero compact : une ligne titre + bouton conflits ; sous-titre masqué. */
  .hero {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 18px;
  }

  .hero.hidden { display: none; }
  .hero .eyebrow,
  .hero p { display: none; }
  .hero h2 { margin: 0; font-size: 1rem; line-height: 1.2; }

  .conflict-button {
    width: auto;
    min-height: 40px;
    padding: 0 10px;
    font-size: .7rem;
  }

  .toolbar { flex: 0 0 auto; padding: 6px 8px; gap: 5px; }
  .date-nav { grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .date-nav h2 { font-size: .92rem; }
  #previousButton,
  #nextButton { width: 38px; min-width: 38px; height: 38px; }
  #todayButton { min-height: 40px; }
  .search-field input,
  .toolbar-actions select { min-height: 40px; }

  .calendar {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .calendar > * {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Mois : en-têtes + 6 semaines en fractions égales, tout le mois visible d'un coup. */
  .month-grid {
    height: 100%;
    grid-template-rows: 24px repeat(6, minmax(0, 1fr));
    gap: 2px;
    overflow: hidden;
  }

  .month-weekday { min-height: 0; }
  .month-day { min-height: 0; display: flex; overflow: hidden; }

  .month-day-button {
    min-height: 0;
    height: 100%;
    padding: 2px;
    gap: 2px;
  }

  .month-day-number { font-size: .72rem; }
  .month-day.today .month-day-number { width: 24px; height: 24px; }

  /* Semaine / Accueil : 7 jours en fractions égales ; les événements d'un jour
     se parcourent latéralement dans leur ligne, la page reste immobile. */
  .week-grid {
    height: 100%;
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: 4px;
    overflow: hidden;
  }

  .day-column {
    min-height: 0;
    overflow: hidden;
    align-items: center;
  }

  .day-heading { min-height: 0; }

  .day-events {
    min-height: 0;
    max-height: 100%;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(122px, max-content);
    align-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .day-events::-webkit-scrollbar { display: none; }

  .day-events .event-card {
    min-height: 38px;
    padding: 3px 8px 3px 11px;
  }

  .day-events .event-card strong {
    display: block;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .day-events .event-card small {
    font-size: .64rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Jour / Liste : cadre fixe ; seul l'intérieur défile si le contenu dépasse. */
  .list-view {
    height: 100%;
    min-height: 0;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .list-view::-webkit-scrollbar { display: none; }
  .list-row { padding: 10px 12px; gap: 4px; }
  .list-row button { min-height: 40px; }
}

/* 9. Toucher natif iOS (mobile uniquement) : chrome d'interface non sélectionnable,
   pas de menu contextuel au long-press, pas de double-tap zoom. La saisie et les
   codes de récupération restent sélectionnables. */
@media (max-width: 900px) {
  html { touch-action: manipulation; }

  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  input,
  textarea,
  .recovery-codes {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Champ recherche : rendu neutre, sans le style natif iOS du type=search. */
  input[type="search"] { -webkit-appearance: none; appearance: none; }
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

  /* Tableaux (journal Gmail, aperçu import) : défilement latéral contenu,
     sans barre visible ni entraînement de la feuille parente. */
  .table-wrap {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .table-wrap::-webkit-scrollbar { display: none; }

  /* Feuilles modales : arrivée en glissé depuis le bas, comme une sheet UIKit.
     (prefers-reduced-motion neutralise déjà toutes les animations.) */
  .modal[open] { animation: sheet-up .46s cubic-bezier(.32, 1.08, .48, 1); }
  .modal[open]::backdrop { animation: backdrop-in .32s ease-out; }
}

/* 10. Écran de connexion passkey : présentation premium type Apple.
   Aucune logique modifiée — habillage du panneau « Connexion » uniquement. */
.login-modal .modal-header { display: none; }
.login-modal #panelContent { display: flex; flex-direction: column; }

.login-hero {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 44px 24px 28px;
  text-align: center;
}

/* Halos d'ambiance internes à la feuille : dégradés radiaux, aucun filtre coûteux. */
.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 16%, rgba(18,60,124,.16), transparent 42%),
    radial-gradient(circle at 80% 10%, rgba(235,102,139,.13), transparent 40%),
    radial-gradient(circle at 50% 92%, rgba(47,107,255,.12), transparent 46%);
}

/* Piédestal en verre MAX : matériau, double liseré et reflet haut, comme les cartes. */
.login-pedestal {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--glass-hi), var(--glass-lo) 58%);
  backdrop-filter: blur(24px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(1.05);
  box-shadow:
    0 2px 6px rgba(var(--shadow-ink),.05),
    0 24px 48px -16px rgba(var(--shadow-ink),.4),
    inset 0 1.5px 1px var(--glass-inner),
    inset 0 0 0 1px var(--glass-edge);
}

.login-pedestal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(255,255,255,.5), transparent 38%);
  opacity: .8;
}

.login-icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow:
    0 14px 30px -12px rgba(var(--shadow-ink), .55),
    inset 0 1px 1px rgba(255,255,255,.4);
}

.login-title {
  margin: 12px 0 0;
  color: var(--blue-dk);
  font-size: 1.85rem;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.login-sub {
  margin: 0 0 20px;
  max-width: 30ch;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.45;
}

.login-cta {
  width: min(100%, 340px);
  min-height: 54px;
  gap: 10px;
  font-size: 1.02rem;
  border-radius: 999px;
}

.login-cta svg { width: 26px; height: 26px; }

.login-hint {
  margin: 8px 0 0;
  color: var(--muted2);
  font-size: .74rem;
}

.login-recovery {
  margin-top: 24px;
  width: min(100%, 340px);
  padding: 4px 14px 0;
  border-radius: 18px;
  color: var(--muted);
  font-size: .82rem;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(214,228,244,.12));
  box-shadow:
    inset 0 1px 1px var(--glass-inner),
    inset 0 0 0 1px var(--glass-edge),
    0 12px 22px -16px rgba(var(--shadow-ink),.38);
}

[data-theme="dark"] .login-recovery {
  background: linear-gradient(135deg, rgba(46,64,90,.38), rgba(24,36,54,.30));
}

.login-recovery[open] { padding-bottom: 14px; }

.login-recovery summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  color: var(--blue);
  font-weight: 720;
  cursor: pointer;
}

.login-recovery summary::-webkit-details-marker { display: none; }

.login-recovery form {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  text-align: left;
}

.login-recovery label { display: grid; gap: 7px; font-size: .78rem; font-weight: 680; }

.panel-modal.login-modal { width: min(460px, calc(100% - 24px)); }

@media (max-width: 900px) {
  /* Plein écran : la feuille de connexion occupe toute la hauteur disponible. */
  .login-modal.modal {
    height: calc(100dvh - var(--safe-top, 0px) - 14px);
    border-radius: 34px 34px 0 0;
  }
  .panel-modal.login-modal { width: 100%; }
  .login-modal #panelContent { padding-bottom: calc(24px + var(--safe-bottom, 0px)); }
}

@keyframes sheet-up {
  from { opacity: .55; transform: translateY(56px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora,
  .scene .halo { animation: none !important; }

  .glass-card::before,
  .glass-card::after,
  .icon-button::before,
  .icon-button::after,
  .secondary-button::before,
  .secondary-button::after,
  .nav-item::before,
  .nav-item::after,
  .danger-button::before,
  .danger-button::after,
  .primary-button::before,
  .primary-button::after,
  .conflict-button::before,
  .conflict-button::after,
  .mobile-tab::before,
  .mobile-tab::after {
    transition: none !important;
    animation: none !important;
  }

  .icon-button:active,
  .secondary-button:active,
  .nav-item:active,
  .danger-button:active,
  .primary-button:active,
  .conflict-button:active,
  .mobile-tab:active,
  .event-card:active {
    transform: none !important;
  }
}