@charset "UTF-8";
/* CSS Document */

    :root {
      /* valeurs initiales, ajustées par JS au chargement */
      --sbw: 0px;                    /* largeur de la barre de défilement (calculée) */
      --vh: 100vh;                   /* hauteur du viewport (calculée) */
      --min-panel: 180px;            /* hauteur minimale du label */
      --panel-height: 180px;         /* hauteur courante du label (scroll) */
      --image-fixed-height: calc(var(--vh) - var(--min-panel)); /* hauteur fixe de l'image */
    }

    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background: #0f0f10;
      overflow-y: auto;               /* défilement de la fenêtre */
      overscroll-behavior: none;      /* évite les rebonds sur certains navigateurs */
      -webkit-font-smoothing: antialiased;
      font-family: Papyrus, sans-serif;
    }

    /* Zone image : fixe en haut, centrée, taille constante (ne change pas au scroll) */
    .image-area {
      position: fixed;
      top: 0;
      left: 0;
      width: calc(100vw - var(--sbw)); /* pleine largeur moins la barre de défilement */
      height: var(--image-fixed-height);
      display: flex;
      align-items: flex-start;  /* image collée au sommet */
      justify-content: center;  /* centrée horizontalement */
      overflow: hidden;         /* la zone sera progressivement recouverte par le label */
      background: white;         /* fond si l'image est plus petite */
    }
    .image-area img {
      height: 100%;
      width: auto;              /* conserve le ratio, centrée */
      object-fit: contain;      /* insiste pour tout montrer dans la hauteur fixée */
      object-position: top center;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }

    /* Label (panneau) : fixe en bas, s'agrandit vers le haut avec le scroll/roulette */
    .label {
      position: fixed;
      left: 0;
      bottom: 0;
      width: calc(100vw - var(--sbw));
      height: var(--panel-height);
      box-sizing: border-box;
      background: rgba(200, 200, 200, 1);
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      box-shadow: 0 -16px 32px rgba(0,0,0,0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      overflow: hidden;  /* pas de bande de défilement interne */
      transition: border-radius 160ms ease;
    }
    /* Quand le label a atteint le sommet (plein écran), on arrondit moins les coins */
    .label.is-full {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    /*
    .label .grip {
        width: 56px;
        height: 5px;
        margin: 10px auto 12px;
        border-radius: 999px;
        background: #6d6f78;
        opacity: 0.85;
    }
   /*
/* Bouton chevron (toggle ouvrir/fermer) */
    .chevron-btn {
      position: absolute;
      top: 8px;
      right: 12px;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: none;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      color: black;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
      cursor: pointer;
      z-index: 3;
    }
   .chevron-btn:hover { background: rgba(255,255,255,0.18); }
    .chevron-btn:active { transform: scale(0.98); }
    .chevron-btn svg { width: 20px; height: 20px; transition: transform 180ms ease; }
    .chevron-btn.is-open svg { transform: rotate(180deg); }

    .label .content {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px 28px;
    }
    .label h1 {
      margin: 0 0 6px;
      font-size: 20px;
      font-weight: 650;
      letter-spacing: 0.2px;
    }
    .label p { margin: 0.35rem 0; color: #d9d9df; }
    .muted { color: #a9abb4; font-size: 13px; }
   /*
    Petite aide visuelle : badge indiquant la progression (peut être retiré)
    .badge {
      position: fixed;
      right: calc(10px + var(--sbw));
      bottom: calc(var(--panel-height) + 12px);
      font-size: 12px;
      background: rgba(0, 0, 0, 1);
      border: 1px solid rgba(255,255,255,0.2);
      padding: 6px 10px;
      border-radius: 999px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    */
    /* Accessibilité focus (si on ajoute des liens/boutons) */
    :focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }