/* ========================================================= */
/* RESPONSIVE MOBILE V4 - LE MONDE D'EURIKO                  */
/* Version finale beta : scene 16/9 stable, mobile paysage   */
/* ========================================================= */

@media (max-width: 768px) and (hover: none) and (pointer: coarse),
  (max-height: 768px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  /* ========================= */
  /* VARIABLES MOBILE */
  /* ========================= */

  :root {
    --ui-safe-x: calc(env(safe-area-inset-left, 0px) + 10px);
    --ui-safe-y: calc(env(safe-area-inset-bottom, 0px) + 10px);

    --btn-retour-size: 64px;
    --btn-menu-size: 76px;
    --btn-continuer-size: 76px;
    --btn-boutique-size: 68px;
    --btn-aide-size: 68px;
    --btn-fullscreen-size: 34px;

    --btn-suivant-width: 72px;
    --btn-suivant-height: 36px;

    --btn-retour-left: var(--ui-safe-x);
    --btn-retour-bottom: var(--ui-safe-y);

    --btn-menu-left: calc(var(--ui-safe-x) + var(--btn-retour-size) + 6px);
    --btn-menu-bottom: var(--ui-safe-y);

    --btn-continuer-right: var(--ui-safe-x);
    --btn-continuer-bottom: var(--ui-safe-y);

    --btn-suivant-right: var(--ui-safe-x);
    --btn-suivant-bottom: var(--ui-safe-y);

    --btn-boutique-right: calc(var(--ui-safe-x) + var(--btn-suivant-width) + 6px);
    --btn-boutique-bottom: var(--ui-safe-y);

    --btn-aide-right: calc(
      var(--ui-safe-x) + var(--btn-suivant-width) + var(--btn-boutique-size) + 12px
    );
    --btn-aide-bottom: var(--ui-safe-y);

    --btn-fullscreen-top: calc(env(safe-area-inset-top, 0px) + 10px);
    --btn-fullscreen-right: calc(env(safe-area-inset-right, 0px) + 10px);
  }

  /* ========================= */
  /* BASE : SCENE 16/9 */
  /* ========================= */

  .app,
  [data-page="app"],
  [data-page="home"] {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .app-scene {
    position: relative;

    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));

    aspect-ratio: 16 / 9;

    overflow: hidden;
  }

  /* ========================= */
  /* ECRANS 16/9 */
  /* ========================= */

  .map-screen,
  .content-screen,
  .menu-screen,
  .boutique-screen {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }

  .map-container,
  .content-screen .map-container,
  .menu-container,
  .boutique-container {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }

  .map-image,
  .parchment-bg,
  .menu-image,
  .boutique-image,
  .svg-layer,
  .map-text-layer,
  .menu-svg,
  .boutique-svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
  }

  .map-image,
  .parchment-bg,
  .menu-image,
  .boutique-image {
    object-fit: fill;
  }

  /* ========================= */
  /* SVG INTERACTIFS */
  /* ========================= */

  .svg-layer,
  .map-text-layer {
    pointer-events: none;
  }

  .svg-layer [data-type] {
    pointer-events: auto;
  }

  .menu-svg {
    pointer-events: auto;
  }

  .menu-svg [data-type],
  .menu-svg .zone-svg {
    pointer-events: all;
  }

  .boutique-svg {
    pointer-events: none;
  }

  .boutique-svg [data-type],
  .boutique-svg .zone-svg {
    pointer-events: auto;
  }

  .map-text,
  .map-text-layer {
    pointer-events: none;
  }

  /* ========================= */
  /* PNJ MOBILE */
  /* PNJ masque, audio conserve */
  /* ========================= */

  #pnjBox,
  .pnj-box,
  .pnj-bubble,
  .content-pnj,
  .content-pnj-inner,
  .content-pnj-bubble,
  .content-pnj-image {
    display: none !important;
  }

  /* ========================= */
  /* UI APPLICATION */
  /* ========================= */

  .app-buttons {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: var(--z-ui);

    pointer-events: none;
  }

  .app-btn,
  .btn-fullscreen,
  .content-nav-btn {
    pointer-events: auto;
  }

  #btnRetour {
    width: var(--btn-retour-size);
  }

  #btnMenu {
    width: var(--btn-menu-size);
  }

  #btnContinuer {
    width: var(--btn-continuer-size);
  }

  #btnAide {
    width: var(--btn-aide-size);
  }

  #btnBoutique {
    width: var(--btn-boutique-size);
  }

  #btnSuivant {
    width: var(--btn-suivant-width);
    height: var(--btn-suivant-height);
  }

  #btnFullscreen {
    width: var(--btn-fullscreen-size);
  }

  /* ========================= */
  /* CONTENT MOBILE */
  /* ========================= */

  .content-safe {
    top: 7%;
    left: 13%;
    right: 9%;
    bottom: 17%;

    padding: 8px 12px 56px;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    box-shadow: inset -10px 0 0 rgba(255, 248, 230, 0.62);
  }

  .content-wrapper,
  .content-container,
  .content-parchment {
    width: 100%;
    max-width: 100%;

    margin: 0 auto;
  }

  .content-wrapper {
    gap: 12px;
  }

  .content-title {
    font-size: clamp(1.25rem, 4.4vw, 1.8rem);
    line-height: 1.08;
  }

  .content-subtitle {
    font-size: clamp(0.95rem, 3.2vw, 1.25rem);
    line-height: 1.2;
  }

  .content-section-title,
  .content-block h2,
  .content-block h3,
  .content-block h4 {
    font-size: clamp(1rem, 3vw, 1.35rem);
    line-height: 1.15;
  }

  .content-text,
  .content-block p,
  .content-block li,
  .content-instruction {
    font-size: clamp(0.88rem, 2.5vw, 1.05rem);
    line-height: 1.45;
  }

  .content-block {
    padding: 12px 14px;
    border-radius: 14px;
  }

  .content-selectable-entry {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .content-selectable-entry audio,
  .content-audio,
  .content-audio audio {
    width: 100%;
    max-width: 100%;
  }

  .content-input,
  .content-textarea,
  .content-select,
  .content-transform-item .content-input {
    min-width: 0;
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
  }

  .content-inline-audio-button {
    min-width: 36px;
    min-height: 36px;
  }

  /* ========================= */
  /* MENU MOBILE */
  /* ========================= */

  .menu-bubble {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    bottom: auto;
    left: auto;

    max-width: 34%;

    padding: 8px 10px;

    font-size: clamp(0.72rem, 2.2vw, 0.95rem);
    line-height: 1.25;

    border-radius: 16px;

    pointer-events: none;
  }

  .menu-actions {
    right: 5%;
    bottom: 7%;

    gap: 6px;

    pointer-events: none;
  }

  .menu-action-btn {
    padding: 7px 10px;

    font-size: clamp(0.68rem, 1.8vw, 0.85rem);

    pointer-events: auto;
  }

  /* ========================= */
  /* BOUTIQUE MOBILE */
  /* ========================= */

  .boutique-bubble {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 28%;

    max-width: 34%;

    padding: 8px 10px;

    font-size: clamp(0.72rem, 2.2vw, 0.95rem);
    line-height: 1.25;

    border-width: 3px;
    border-radius: 16px;

    pointer-events: none;
  }

  .boutique-actions {
    pointer-events: none;
  }

  .boutique-action-btn {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 10px;

    padding: 7px 10px;

    font-size: clamp(0.72rem, 1.8vw, 0.9rem);

    pointer-events: auto;
  }

  /* ========================= */
  /* HOME / INDEX MOBILE */
  /* ========================= */

  [data-page="home"] .home-footer {
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);

    padding: 0 10px;

    z-index: var(--z-ui);

    pointer-events: none;
  }

  [data-page="home"] .home-footer-left,
  [data-page="home"] .home-footer-right,
  [data-page="home"] .home-footer-btn,
  [data-page="home"] .reseaux-wrapper,
  [data-page="home"] .reseaux-toggle,
  [data-page="home"] .reseaux-menu,
  [data-page="home"] .home-language-selector {
    pointer-events: auto;
  }

  [data-page="home"] .home-footer-left {
    gap: 8px;
  }

  [data-page="home"] .home-footer-btn img {
    height: clamp(32px, 9.5vw, 48px);
  }

  [data-page="home"] .reseaux-wrapper {
    height: clamp(30px, 8.5vw, 46px);
  }

  [data-page="home"] .home-language-selector {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 8px;
    right: auto;

    z-index: calc(var(--z-ui) + 2);
  }

  [data-page="home"] .home-language-toggle {
    padding: 7px 10px;
    font-size: 0.85rem;
  }

  [data-page="home"] .home-language-menu {
    left: 0;
    right: auto;

    max-height: 260px;
  }

  /* ========================= */
  /* MOBILE PAYSAGE PRIORITAIRE */
  /* ========================= */

  @media (orientation: landscape) {
    :root {
      --ui-safe-x: calc(env(safe-area-inset-left, 0px) + 8px);
      --ui-safe-y: calc(env(safe-area-inset-bottom, 0px) + 8px);

      --btn-retour-size: 54px;
      --btn-menu-size: 62px;
      --btn-continuer-size: 62px;
      --btn-boutique-size: 58px;
      --btn-aide-size: 58px;
      --btn-fullscreen-size: 30px;

      --btn-suivant-width: 60px;
      --btn-suivant-height: 30px;

      --btn-menu-left: calc(var(--ui-safe-x) + var(--btn-retour-size) + 5px);

      --btn-boutique-right: calc(var(--ui-safe-x) + var(--btn-suivant-width) + 5px);

      --btn-aide-right: calc(
        var(--ui-safe-x) + var(--btn-suivant-width) + var(--btn-boutique-size) + 10px
      );
    }

    .content-safe {
      top: 7%;
      left: 14%;
      right: 8%;
      bottom: 17%;

      padding: 6px 10px 48px;
    }

    .content-title {
      font-size: clamp(1.2rem, 3.2vw, 1.65rem);
    }

    .content-subtitle {
      font-size: clamp(0.9rem, 2.4vw, 1.15rem);
    }

    .content-text,
    .content-block p,
    .content-block li,
    .content-instruction {
      font-size: clamp(0.82rem, 2vw, 1rem);
      line-height: 1.42;
    }

    .content-block {
      padding: 10px 12px;
    }

    .menu-bubble,
    .boutique-bubble {
      padding: 7px 9px;

      font-size: clamp(0.68rem, 1.8vw, 0.85rem);
    }

    .menu-action-btn,
    .boutique-action-btn {
      padding: 6px 9px;

      font-size: clamp(0.66rem, 1.6vw, 0.8rem);
    }

    [data-page="home"] .home-footer-btn img {
      height: clamp(26px, 7dvh, 38px);
    }

    [data-page="home"] .reseaux-wrapper {
      height: clamp(24px, 6.5dvh, 36px);
    }
  }

  /* ========================= */
  /* MOBILE PORTRAIT */
  /* Usage possible mais paysage conseille */
  /* ========================= */

  @media (orientation: portrait) {
    .app-scene {
      width: 100vw;
      height: calc(100vw * 9 / 16);

      max-height: 100dvh;

      margin: auto 0;
    }

    .content-safe {
      top: 7%;
      left: 13%;
      right: 9%;
      bottom: 18%;

      padding-bottom: 44px;
    }

    .content-title {
      font-size: clamp(1rem, 4.8vw, 1.45rem);
    }

    .content-text,
    .content-block p,
    .content-block li,
    .content-instruction {
      font-size: clamp(0.78rem, 3.3vw, 0.92rem);
      line-height: 1.35;
    }
  }
}