:root {
        --text: #ffffff;
        --muted: #55627a;
        --accent: #4f46e5;

        --left-open: 360px;
        --left-compact: 88px;
        --right-open: 320px;
        --right-compact: 92px;

        --gap: 18px;
        --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

        --bg-image: url("2026.svg");
        --bg-image-opacity: 0.18;
        --bg-image-size: cover;
        --bg-image-position: center;

        /* ===== WEEKS (look) ===== */
        --wk-radius-open: 28px;
        --wk-radius-compact: 18px;
        /* Prefer the compact “week” look everywhere (home + inner + weeks). */
        --wk-radius: var(--wk-radius-compact);

        /* Trou cliquable */
        --wk-hole: 34px;
        --wk-hole-y: 20%;
        --wk-opaque: rgba(9, 25, 45, 0.28);

        /* Colonne (glass) */
        --wk-glass-maxw: 110px;
        --wk-glass-radius: 28px;

        /* “Bord diffus” (dégradé) */
        --wk-edge-1: rgba(255, 255, 255, 0.34);
        --wk-edge-2: rgba(255, 255, 255, 0.12);
        --wk-edge-3: rgba(79, 70, 229, 0.12);

        /* Fond bleuté / profondeur */
        --wk-bg-1: rgba(120, 190, 225, 0.32);
        --wk-bg-2: rgba(120, 190, 225, 0.18);
        --wk-bg-3: rgba(255, 255, 255, 0.06);

        /* Hauteurs */
        --wk-controls-h: 98px;
      }

      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        font-family: var(--font);
        color: var(--text);
        background: #1b4772;
        overflow: hidden;
        position: relative;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: var(--bg-image);
        background-size: var(--bg-image-size);
        background-position: var(--bg-image-position);
        background-repeat: no-repeat;
        opacity: var(--bg-image-opacity);
        pointer-events: none;
        z-index: -1;
        filter: saturate(1.05);
      }

      .page {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: var(--gap);
        padding: 18px;
        min-height: 0;
      }

      header,
      footer,
      .panel,
      .panel-head,
      .panel-body {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
      }

      header {
        padding: 8px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 56px;
        min-width: 0;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }
      .logo {
        width: 100px;
        height: auto;
        border-radius: 14px;
        flex: 0 0 auto;
      }
      .brand strong {
        display: block;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .brand small {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .header-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .btn {
        border: 1px solid rgba(2, 6, 23, 0.14);
        background: rgba(255, 255, 255, 0);
        border-radius: 999px;
        padding: 10px 12px;
        cursor: pointer;
        font-size: 13px;
        transition: transform 0.15s ease, border-color 0.15s ease,
          background 0.15s ease;
        white-space: nowrap;
      }
      .btn:hover {
        transform: translateY(-1px);
        border-color: rgba(2, 6, 23, 0.22);
        background: rgba(255, 255, 255, 0.18);
      }
      .btn.primary {
        border-color: rgba(79, 70, 229, 0.28);
        background: rgba(79, 70, 229, 0.08);
      }
      .btn.primary:hover {
        border-color: rgba(79, 70, 229, 0.4);
        background: rgba(79, 70, 229, 0.12);
      }

      .shell {
        min-height: 0;
        display: grid;
        gap: var(--gap);
        grid-template-columns: var(--left-open) 1fr var(--right-open);
        transition: grid-template-columns 0.28s ease;
        align-items: stretch;
      }
      .shell[data-route="inner"] {
        grid-template-columns: var(--left-compact) 1fr var(--right-compact);
      }

      /* Home: keep the right “weeks” menu in the same compact style as week pages. */
      .shell[data-route="home"] {
        grid-template-columns: var(--left-open) 1fr var(--right-compact);
      }

      /* Hide the right panel title (matches the compact week look). */
      .shell[data-route="home"] #rightPanel .panel-head h2,
      .shell[data-route="inner"] #rightPanel .panel-head h2 {
        display: none;
      }

/* Week pages: compact LEFT + compact RIGHT (keep week numbers visible) */
.shell[data-route="week"] {
  grid-template-columns: var(--left-compact) 1fr var(--right-compact);
}
.shell[data-route="week"] #rightPanel .panel-head h2 {
  display: none;
}

/* Week pages: fold the LEFT panel like inner pages (buttons stay accessible) */
.shell[data-route="week"] #leftPanel .who,
.shell[data-route="week"] #leftPanel .meta,
.shell[data-route="week"] #leftPanel .left-extra,
.shell[data-route="week"] #leftPanel .panel-head h2 {
  display: none;
}
.shell[data-route="week"] #leftPanel .panel-head {
  justify-content: center;
}
.shell[data-route="week"] #leftPanel .panel-body {
  display: grid;
  place-items: start center;
}
.shell[data-route="week"] #leftPanel .profile {
  justify-content: center;
}


      .panel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }
/* Allow the right glass to keep its edges/shadows (avoid clipping in compact) */
#rightPanel {
  overflow: visible;
}

      .panel-head {
        padding: 8px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .panel-head h2 {
        margin: 0;
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .panel-body {
        height: calc(100% - 40px);
        overflow: auto;
        padding: 0;
      }

      /* Main content: prevent “double scrollbars” when we render iframes */
      #main.is-frame {
        overflow: hidden;
      }

      /* LEFT (simple) */
      .profile {
        display: flex;
        gap: 12px;
        align-items: center;
        padding-top: 8px;
      }
      .avatar {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        background: radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.8),
            transparent 40%
          ),
          linear-gradient(
            135deg,
            rgba(79, 70, 229, 0.85),
            rgba(16, 185, 129, 0.65)
          );
        flex: 0 0 auto;
      }
      .who h3 {
        margin: 0;
        font-size: 16px;
      }
      .who p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 12px;
      }
      .meta {
        margin-top: 12px;
        display: grid;
        gap: 8px;
        color: var(--muted);
        font-size: 12px;
      }
      .meta strong {
        color: var(--text);
      }

      .card {
        margin-top: 12px;
        padding: 12px 12px;
        border: 1px solid rgba(2, 6, 23, 0.1);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.22);
      }
      .card h4 {
        margin: 0;
        font-size: 14px;
      }
      .card p {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 12px;
      }

      .shell[data-route="inner"] #leftPanel .who,
      .shell[data-route="inner"] #leftPanel .meta,
      .shell[data-route="inner"] #leftPanel .left-extra,
      .shell[data-route="inner"] #leftPanel .panel-head h2 {
        display: none;
      }
      .shell[data-route="inner"] #leftPanel .panel-head {
        justify-content: center;
      }
      .shell[data-route="inner"] #leftPanel .panel-body {
        display: grid;
        place-items: start center;
      }
      .shell[data-route="inner"] #leftPanel .profile {
        justify-content: center;
      }

      /* CENTER */
      .crumb {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--muted);
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-top: 8px;
      }
      .crumb::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 4px;
        background: var(--accent);
        box-shadow: 0 10px 22px rgba(79, 70, 229, 0.18);
      }
      .title {
        margin: 10px 0 0;
        font-size: 34px;
        letter-spacing: -0.02em;
      }

      .home-divider {
        width: min(520px, 100%);
        height: 2px;
        margin: 12px 0 0;
        border-radius: 999px;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.75),
          rgba(255, 255, 255, 0)
        );
        opacity: 0.85;
      }
      .lead {
        margin: 10px 0 0;
        color: var(--muted);
        max-width: 70ch;
      }

      /* Make the HOME copy more readable on the blue background */
      .shell[data-route="home"] .lead {
        color: rgba(255, 255, 255, 0.92);
        line-height: 1.75;
        font-weight: 300;
      }
      .shell[data-route="home"] .card {
        background: rgba(255, 255, 255, 0.26);
        border-color: rgba(255, 255, 255, 0.18);
      }
      .shell[data-route="home"] .card p {
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.65;
      }
      .content {
        margin-top: 14px;
        display: grid;
        gap: 12px;
      }

      /* ===== RIGHT (weeks glass) ===== */
      .shell[data-route="inner"] #rightPanel .panel-head h2 {
        display: none;
      }

      #rightPanel .panel-body {
        overflow: visible;
        display: grid;
        grid-template-rows: 1fr var(--wk-controls-h);
        gap: 12px;
        justify-items: center;
        align-content: start;
        min-height: 0;
        padding-top: 4px;
      }

      .wk-glass {
        width: 100%;
        max-width: var(--wk-glass-maxw);
        height: 100%;
        min-height: 0;
        position: relative;
        border-radius: var(--wk-glass-radius);
        background: radial-gradient(
            120px 160px at 50% 28%,
            rgba(255, 255, 255, 0.22),
            transparent 70%
          ),
          linear-gradient(
            180deg,
            var(--wk-bg-1),
            var(--wk-bg-2) 55%,
            var(--wk-bg-3)
          );
        box-shadow: 0 34px 90px rgba(2, 6, 23, 0.1),
          0 12px 40px rgba(2, 6, 23, 0.08);
        overflow: hidden;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .wk-glass::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
          180deg,
          var(--wk-edge-1),
          var(--wk-edge-2) 48%,
          var(--wk-edge-3)
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.95;
        pointer-events: none;
      }

      .wk-glass::after {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: calc(var(--wk-glass-radius) - 10px);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
          inset 0 0 46px rgba(255, 255, 255, 0.12);
        pointer-events: none;
        opacity: 0.75;
      }

      .wk-slider {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        padding: 14px 0;
        min-height: 0;
      }

      .wk-mask {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
          circle at 50% var(--wk-hole-y),
          rgba(255, 255, 255, 0) calc(var(--wk-hole) * 0.92),
          rgba(0, 0, 0, 0) calc(var(--wk-hole) * 1),
          var(--wk-opaque) calc(var(--wk-hole) * 1.05),
          var(--wk-opaque) 100%
        );
        z-index: 5;
      }

      .wk-list {
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: max-content;
        transform: translateX(-50%) translateY(var(--wk-offset, 0px));
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.25s ease;
        will-change: transform;
        z-index: 1;
        padding: 8px 0;
      }

      .wk-item {
        /* Compact week item (used everywhere). */
        width: 84px;
        text-align: center;
        cursor: pointer;
        outline: none;
        user-select: none;
        padding: 8px 0 12px;
        opacity: 0.86;
        transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
        filter: saturate(0.96);
      }

      /* ===== Week thumb: glass circle with inline --thumb-image ===== */
      .wk-thumb{
        width: calc(var(--wk-radius) * 1.58);
        height: calc(var(--wk-radius) * 1.58);
        border-radius: 999px;
        overflow: hidden;
        position: relative;
        margin: 0 auto;

        /* soft glass base */
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.20);
        box-shadow: 0 16px 30px rgba(2, 6, 23, 0.16);
      }

      /* image fill (set per item with style="--thumb-image:url('...')") */
      .wk-thumb::before{
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 999px;
        background: var(--thumb-image) center / cover no-repeat;
        filter: saturate(1.05) contrast(1.02);
      }

      /* diffuse gradient border/glow (less sharp) */
      .wk-thumb::after{
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 999px;
        background:
          radial-gradient(closest-side, rgba(255,255,255,0.40), rgba(255,255,255,0.00) 65%),
          conic-gradient(from 180deg, rgba(123,97,255,0.35), rgba(0,212,255,0.25), rgba(0,200,83,0.22), rgba(255,213,79,0.22), rgba(123,97,255,0.35));
        filter: blur(14px);
        opacity: 0.55;
        pointer-events: none;
      }

      .wk-label {
        margin-top: 8px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.86);
        text-shadow: 0 1px 0 rgba(2, 6, 23, 0.28);
      }

      .wk-item.active {
        opacity: 1;
        transform: translateY(-1px);
        filter: saturate(1.05);
      }
      .wk-item.active .wk-thumb {
        border-color: rgba(255, 255, 255, 0.26);
        box-shadow: 0 20px 36px rgba(2, 6, 23, 0.18),
          0 0 0 2px rgba(255, 255, 255, 0.4);
      }
      /* Keep week numbers visible everywhere (home + inner + week). */

/* In WEEK compact mode, keep week numbers visible and readable */
.shell[data-route="week"] .wk-item {
  width: 84px;
  padding: 8px 0 12px;
}
.shell[data-route="week"] .wk-label {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
}


      .wk-controls {
        max-width: var(--wk-glass-maxw);
        height: var(--wk-controls-h);
        display: grid;
        place-items: center;
        gap: 10px;
        padding-bottom: 6px;
      }

      .wk-controls .btnRow {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: center;
      }

      .wk-controls button {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.12);
        cursor: pointer;
        color: rgba(15, 23, 42, 0.86);
        font-size: 18px;
        transition: transform 0.15s ease, background 0.15s ease,
          border-color 0.15s ease, opacity 0.15s ease;
        box-shadow: 0 14px 28px rgba(2, 6, 23, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .wk-controls button:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.28);
      }
      .wk-controls button.inactif-next {
        opacity: 0.45;
        cursor: not-allowed;
      }

      footer {
        padding: 10px 0;
        color: var(--muted);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        min-width: 0;
        border-top: 1px solid rgba(2, 6, 23, 0.1);
      }

      @media (max-height: 720px) {
        :root {
          --wk-controls-h: 82px;
          --wk-hole: 52px;
        }
        .wk-controls button {
          width: 20px;
          height: 20px;
          border-radius: 6px;
        }
      }

      @media (max-width: 740px) {
        body {
          overflow: auto;
        }
        .page {
          height: auto;
          min-height: 100vh;
        }
        .shell {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto;
        }
        .shell[data-route="inner"] {
          grid-template-columns: 1fr;
        }
        .panel {
          height: auto;
        }
        .panel-body {
          height: auto;
          overflow: visible;
        }
        footer {
          border-top: 0;
        }

        #rightPanel .panel-body {
          overflow: visible;
          grid-template-rows: auto auto;
        }
        .wk-glass {
          max-width: 100%;
          height: 560px;
        }
        .wk-controls {
          max-width: 100%;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .shell,
        .btn,
        .wk-list,
        .wk-item {
          transition: none !important;
        }
      }

/* ===== Embedded external pages (works without a server) ===== */
.view-frame {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.16);
  overflow: visible;
  }
.shell[data-route="inner"] .view-frame {
  min-height: 560px;
}
@media (max-width: 740px) {
  .view-frame { min-height: 640px; }
}


/* =========================================================
   HOME / WEEK GLASS — CLEAN, CONSISTENT (no clipping)
   Goal:
   - Glass stays inside right panel (like ref #2)
   - Labels show full "WEEK 01/02"
   - On Home: glass slightly closer to center
   - On Week active: a bit more toward center + center content gains space
========================================================= */

/* Make sure the right panel doesn't clip anything */
#rightPanel { overflow: visible; padding-right: 22px; }

/* Give enough width for labels */

.wk-label{
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  width: 100%;
  text-align: center;
  letter-spacing: .12em;
}

/* Keep week items centered */
.wk-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* --- POSITIONING --- */
/* Default: keep glass centered inside right panel */
#rightPanel .panel-body{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Home: move glass a bit toward the center (left) */
.shell[data-route="home"] .wk-glass{ transform: translateX(-74px); }
.shell[data-route="home"] .wk-controls{ transform: translateX(-74px); }

/* Week active: move a bit more toward center */
.shell.week-active .wk-glass{ transform: translateX(-54px); }
.shell.week-active .wk-controls{ transform: translateX(-54px); }

/* Reserve space so center content never goes under the glass */
.shell[data-route="home"] main.panel .panel-head,
.shell[data-route="home"] main.panel .panel-body{
  padding-right: 150px;
}
.shell.week-active main.panel .panel-head,
.shell.week-active main.panel .panel-body{
  padding-right: 190px;
}

/* Prevent mask from clipping labels */
.wk-mask{ overflow: visible; }
.wk-slider, .wk-list{ overflow: visible; }



/* ===============================
   PAGE TRANSITIONS (smoother)
================================ */

#main{
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1),
              transform 420ms cubic-bezier(.22,.61,.36,1),
              filter 420ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform, filter;
}

#main.is-transitioning{
  pointer-events:none;
}

#main.view-exit{
  opacity:0;
  transform: translateY(10px);
  filter: blur(1.2px);
}

#main.view-enter{
  opacity:0;
  transform: translateY(-8px);
  filter: blur(1.2px);
}

/* Iframe: fade in once loaded */
.view-frame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1);
}

#main.is-frame .view-frame.is-loaded{
  opacity: 1;
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  #main, .view-frame{ transition: none !important; }
  #main.view-exit, #main.view-enter{ transform:none !important; filter:none !important; opacity:1 !important; }
}