/* Désactive le pull-to-refresh natif de Chrome mobile et le
       overscroll bounce d'iOS Safari qui déclenchent un rechargement de page.
       touch-action: manipulation (et non pan-y) : sur Safari, pan-y bloquait les
       gestes horizontaux (retour Flutter / scroll) et donnait l'impression que le swipe
       ne quittait pas l'écran. */
    html, body {
      overscroll-behavior-y: none;
      overscroll-behavior-x: none;
      height: 100%;
      margin: 0;
      overflow: hidden;
      touch-action: manipulation;
      background: #F4F6F3;
      color: #10140F;
    }

    #app-loading {
      align-items: flex-start;
      overflow-y: auto;
      background: #F4F6F3;
      display: flex;
      inset: 0;
      justify-content: center;
      position: fixed;
      transition: opacity 180ms ease-out, visibility 180ms ease-out;
      z-index: 10;
    }

    /* Startup is a transient application state, identical for every JS client.
       The useful fallback is revealed on failure, or immediately without JS. */
    .app-starting #app-loading { align-items: center; }
    .app-starting .app-loading__content { max-width: 420px; }
    .app-starting .app-entry__header { flex-direction: column; justify-content: center; }
    .app-starting .app-entry__content { display: none; }

    #app-loading[hidden] { display: none; }

    #app-loading.is-complete {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    .app-loading__content {
      box-sizing: border-box;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 980px;
      padding: clamp(24px, 5vw, 56px) 24px;
      width: 100%;
    }

    .app-entry__header {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      justify-content: space-between;
    }

    .app-entry__hero { margin: 44px 0 36px; max-width: 760px; }
    .app-entry__hero h1 {
      font-size: clamp(32px, 5vw, 52px);
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin: 0 0 20px;
    }
    .app-entry__content p {
      font-size: 16px;
      line-height: 1.65;
      margin: 0 0 18px;
    }
    .app-entry__hero > p:first-of-type { font-size: 19px; }
    .app-entry__free { color: #00863C; font-weight: 700; }
    .app-entry__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
    .app-entry__actions a {
      align-items: center;
      border: 1px solid currentColor;
      border-radius: 10px;
      display: inline-flex;
      font-weight: 600;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      text-decoration: none;
    }
    .app-entry__actions a:first-child { background: #00863C; border-color: #00863C; color: white; }
    .app-entry__columns { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-entry__content h2 { font-size: 22px; line-height: 1.3; margin: 0 0 16px; }
    .app-entry__content a { color: inherit; text-underline-offset: 3px; }
    .app-entry__content a:focus-visible { outline: 3px solid #00863C; outline-offset: 4px; }
    .app-entry__footer { border-top: 1px solid #D9DFD8; margin-top: 32px; padding-top: 28px; }
    @media (max-width: 600px) {
      .app-entry__columns { grid-template-columns: 1fr; }
      .app-entry__hero { margin-top: 32px; }
      .app-entry__content p { font-size: 16px; }
    }

    .app-loading__brand {
      align-items: center;
      display: flex;
      gap: 12px;
    }

    .app-loading__mark {
      display: block;
      height: 56px;
      width: 56px;
    }

    .app-loading__name {
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 0;
    }

    .app-loading__state {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .app-loading__state[hidden] {
      display: none;
    }

    .app-loading__message,
    .app-loading__detail {
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
    }

    .app-loading__message {
      color: #00863C;
      font-size: 14px;
      font-weight: 600;
    }

    .app-loading__detail {
      color: #5C665C;
      font-size: 14px;
      line-height: 1.5;
      max-width: 36ch;
    }

    .app-loading__progress {
      background: #D9DFD8;
      border-radius: 999px;
      height: 4px;
      overflow: hidden;
      width: 132px;
    }

    .app-loading__progress::after {
      animation: app-loading-progress 1.1s ease-in-out infinite;
      background: #00A44A;
      border-radius: inherit;
      content: '';
      display: block;
      height: 100%;
      transform: translateX(-72%);
      width: 72%;
    }

    .app-loading__retry {
      align-items: center;
      background: #00863C;
      border: 0;
      border-radius: 8px;
      color: #FFFFFF;
      cursor: pointer;
      display: inline-flex;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
      font-weight: 700;
      justify-content: center;
      min-height: 44px;
      padding: 10px 18px;
    }

    .app-loading__retry:focus-visible {
      outline: 3px solid #10140F;
      outline-offset: 3px;
    }

    @keyframes app-loading-progress {
      50% {
        transform: translateX(138%);
      }
    }

    @media (prefers-color-scheme: dark) {
      html, body,
      #app-loading {
        background: #060806;
        color: #F2F4F1;
      }

      .app-entry__free,
      .app-loading__message {
        color: #00FF66;
      }

      .app-loading__detail {
        color: #A4ADA4;
      }

      .app-loading__progress {
        background: #1B241C;
      }

      .app-loading__progress::after,
      .app-loading__retry {
        background: #00FF66;
      }

      .app-entry__actions a:first-child { background: #00FF66; border-color: #00FF66; color: #060806; }

      .app-loading__retry {
        color: #060806;
      }

      .app-loading__retry:focus-visible {
        outline-color: #F2F4F1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #app-loading {
        transition: none;
      }

      .app-loading__progress::after {
        animation: none;
        transform: none;
        width: 42%;
      }
    }