/* ========================================================= */
/* RESPONSIVE V6 - LE MONDE D'EURIKO                         */
/* Convention officielle : tactile = pointer: coarse         */
/* Scene 16/9 stable - paysage prioritaire                    */
/* ========================================================= */


/* ========================================================= */
/* 1. TACTILE COMMUN                                         */
/* ========================================================= */

@media (pointer: coarse) {

  /* ========================= */
  /* VARIABLES TACTILES */
  /* ========================= */

  :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;
  }


  /* ========================= */
  /* CALQUES VISUELS */
  /* ========================= */

  .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 CONTENT */
  /* ========================= */

  /*
   * Le PNJ content pédagogique reste masqué
   * sur appareil tactile.
   *
   * Le PNJ principal plein écran est géré
   * indépendamment dans ui.css.
   */

  .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 TACTILE */
  /* ========================= */

  .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 {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
  }

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


  /* ========================= */
  /* CHOIX NIVEAU GUIDÉ */
  /* ========================= */

  .guided-level-screen {
    width: 100%;
    max-width: 100%;

    margin: 0;

    padding:
      8px
      6px
      20px;

    box-sizing: border-box;
  }

  .guided-level-screen
    .content-header {
    margin-bottom: 12px;

    text-align: center;
  }

  .guided-level-screen
    .content-title {
    font-size:
      clamp(
        1.15rem,
        3.5vw,
        1.55rem
      );

    line-height: 1.15;
  }

  .guided-level-screen
    .content-subtitle,
  .guided-level-screen
    .content-instruction {
    font-size:
      clamp(
        0.78rem,
        2vw,
        0.95rem
      );

    line-height: 1.35;
  }

  .guided-level-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 8px;

    width: 100%;
    min-width: 0;
  }

  .guided-level-card {
    width: 100%;
    min-width: 0;

    min-height: 62px;

    padding:
      10px
      12px;

    box-sizing: border-box;
  }

  .guided-level-card strong {
    margin-bottom: 3px;

    font-size:
      clamp(
        0.92rem,
        2.2vw,
        1.08rem
      );

    line-height: 1.2;
  }

  .guided-level-card span {
    font-size:
      clamp(
        0.72rem,
        1.8vw,
        0.9rem
      );

    line-height: 1.25;
  }


  /* ========================= */
  /* RESULTAT TEST GUIDÉ */
  /* ========================= */

  .placement-result {
    width: 100%;
    max-width: 100%;

    margin: 0;

    padding:
      10px
      8px
      24px;

    box-sizing: border-box;
  }

  .placement-result
    .content-title {
    font-size:
      clamp(
        1.1rem,
        3.2vw,
        1.5rem
      );
  }

  .placement-result
    .content-subtitle {
    font-size:
      clamp(
        0.82rem,
        2.2vw,
        1rem
      );

    line-height: 1.35;
  }

  .placement-result
    .content-text {
    font-size:
      clamp(
        0.8rem,
        2vw,
        0.95rem
      );

    line-height: 1.4;
  }


  /* ========================= */
  /* MENU TACTILE */
  /* ========================= */

  .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 TACTILE */
  /* ========================= */

  .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 TACTILE */
  /* ========================= */

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

    right:
      calc(
        env(safe-area-inset-right, 0px) +
        6px
      );

    bottom:
      calc(
        env(safe-area-inset-bottom, 0px) +
        6px
      );

    padding: 0;

    align-items: flex-end;

    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"]
    .reseaux-layer,
  [data-page="home"]
    .home-language-selector {
    pointer-events: auto;
  }

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

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

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


  /* ========================= */
  /* LANGUE HOME */
  /* ========================= */

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

    left: auto;

    right:
      calc(
        env(safe-area-inset-right, 0px) +
        8px
      );

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

  [data-page="home"]
    .home-language-toggle {
    min-height: 32px;

    padding:
      6px
      9px;

    font-size: 0.78rem;
  }

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

    min-width: 156px;

    max-height:
      min(
        250px,
        64dvh
      );
  }


  /* ========================= */
  /* TUTORIEL HOME */
  /* ========================= */

  [data-page="home"]
    .home-tutorial-button {
    position: absolute;

    top:
      calc(
        env(safe-area-inset-top, 0px) +
        48px
      );

    left: auto;

    right:
      calc(
        env(safe-area-inset-right, 0px) +
        8px
      );

    z-index:
      calc(
        var(--z-ui) +
        3
      );

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 30px;

    padding:
      5px
      9px;

    border:
      1px solid
      rgba(
        255,
        245,
        220,
        0.55
      );

    border-radius: 999px;

    background:
      rgba(
        15,
        23,
        42,
        0.76
      );

    color: #fff8ee;

    font-family:
      system-ui,
      sans-serif;

    font-size: 0.74rem;
    font-weight: 800;

    cursor: pointer;
    pointer-events: auto;

    backdrop-filter:
      blur(6px);

    box-shadow:
      0 4px 12px
      rgba(
        0,
        0,
        0,
        0.24
      );
  }

  [data-page="home"]
    .home-tutorial-button:active {
    transform:
      scale(0.96);
  }

  [data-page="home"]
    .home-tutorial-icon {
    font-size: 0.65rem;
  }

  [data-page="home"]
    .home-video-presentation {
    display: none;
  }


  /* ========================= */
  /* FOOTER LEGAL HOME */
  /* ========================= */

  [data-page="home"]
    .legal-footer {
    left: 50%;

    bottom:
      calc(
        env(safe-area-inset-bottom, 0px) +
        4px
      );

    width:
      min(
        48%,
        430px
      );

    max-width: none;

    padding:
      3px
      7px;

    border-radius: 10px;

    font-size:
      clamp(
        0.46rem,
        1.25dvh,
        0.62rem
      );

    line-height: 1.2;

    background:
      rgba(
        15,
        23,
        42,
        0.56
      );
  }

  [data-page="home"]
    .legal-footer p {
    white-space: normal;
  }


  /* ========================= */
  /* MESSAGE ORIENTATION */
  /* PAR DEFAUT MASQUÉ */
  /* ========================= */

  [data-page="home"]
    .home-orientation-message {
    display: none;
  }
}


/* ========================================================= */
/* 2. TACTILE PAYSAGE                                        */
/* ========================================================= */

@media
  (pointer: coarse)
  and (orientation: landscape) {

  /* ========================= */
  /* VARIABLES PAYSAGE */
  /* ========================= */

  :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 PAYSAGE */
  /* ========================= */

  .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;
  }


  /* ========================= */
  /* GUIDED LEVEL PAYSAGE */
  /* ========================= */

  .guided-level-screen {
    padding:
      4px
      4px
      18px;
  }

  .guided-level-screen
    .content-header {
    margin-bottom: 8px;
  }

  .guided-level-grid {
    grid-template-columns: 1fr;

    gap: 6px;
  }

  .guided-level-card {
    min-height: 54px;

    padding:
      8px
      10px;
  }

  .guided-level-card strong {
    margin-bottom: 2px;

    font-size:
      clamp(
        0.82rem,
        1.8vw,
        1rem
      );
  }

  .guided-level-card span {
    font-size:
      clamp(
        0.68rem,
        1.45vw,
        0.82rem
      );

    line-height: 1.2;
  }


  /* ========================= */
  /* MENU / BOUTIQUE PAYSAGE */
  /* ========================= */

  .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
      );
  }


  /* ========================= */
  /* HOME PAYSAGE */
  /* ========================= */

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

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


/* ========================================================= */
/* 3. TACTILE PORTRAIT                                       */
/* ========================================================= */

@media
  (pointer: coarse)
  and (orientation: portrait) {

  /* ========================= */
  /* SCENE PORTRAIT */
  /* ========================= */

  .app-scene {
    width: 100vw;

    height:
      calc(
        100vw *
        9 /
        16
      );

    max-height: 100dvh;

    margin:
      auto
      0;
  }


  /* ========================= */
  /* CONTENT PORTRAIT */
  /* ========================= */

  .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;
  }


  /* ========================= */
  /* GUIDED LEVEL PORTRAIT */
  /* ========================= */

  .guided-level-screen {
    padding:
      6px
      4px
      16px;
  }

  .guided-level-grid {
    grid-template-columns: 1fr;

    gap: 6px;
  }

  .guided-level-card {
    min-height: 52px;

    padding:
      8px
      10px;
  }


  /* ========================= */
  /* MESSAGE ORIENTATION HOME */
  /* ========================= */

  [data-page="home"]
    .home-orientation-message {
    position: fixed;
    inset: 0;

    z-index:
      calc(
        var(--z-transition) +
        20
      );

    display: grid;
    place-items: center;

    padding: 24px;

    background:
      rgba(
        2,
        6,
        23,
        0.96
      );

    pointer-events: auto;
  }

  [data-page="home"]
    .home-orientation-card {
    width:
      min(
        86vw,
        420px
      );

    padding:
      24px
      22px;

    border:
      2px solid
      rgba(
        245,
        211,
        107,
        0.72
      );

    border-radius: 20px;

    background:
      rgba(
        15,
        23,
        42,
        0.94
      );

    color: #fff8e6;

    text-align: center;

    box-shadow:
      0 18px 50px
      rgba(
        0,
        0,
        0,
        0.5
      );
  }

  [data-page="home"]
    .home-orientation-icon {
    display: block;

    margin-bottom: 10px;

    font-size: 2.5rem;
    line-height: 1;
  }

  [data-page="home"]
    .home-orientation-card p {
    margin: 0;

    font-family:
      system-ui,
      sans-serif;

    font-size:
      clamp(
        1rem,
        4.6vw,
        1.25rem
      );

    font-weight: 750;
    line-height: 1.4;
  }
}