/* ====================================================================
   KTISO — Couche mobile (iPhone / smartphone)
   Ne s'applique QUE sous 700 px de large : l'affichage ordinateur et
   tablette reste strictement inchangé.
   Pour revenir en arrière : retirer les 2 lignes <link mobile.css> et
   <script mobile.js> des pages (ou restaurer la sauvegarde).
   ==================================================================== */

/* Le menu hamburger n'existe pas sur grand écran */
.kt-burger, .kt-menu { display: none; }

@media (max-width: 700px) {

  /* ---------- Base ---------- */
  html { -webkit-text-size-adjust: 100%; }

  /* iOS zoome sur les champs < 16 px : on évite ce saut de page */
  input, select, textarea { font-size: 16px !important; }
  .btn, button.btn { min-height: 46px; }

  /* Le menu du haut (liens minuscules sur 2 lignes) est remplacé par le bouton hamburger */
  nav.topnav, #compactLinks { display: none !important; }

  /* Accueil : la page ne déborde plus de côté */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Pages à grande photo : le contenu apparaît plus vite */
  .hero, .hero-photo { min-height: 78vh; min-height: 78svh; }

  /* ---------- Menu hamburger ---------- */
  .kt-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    z-index: 960;
    width: 46px; height: 46px;
    padding: 0;
    background: rgba(10, 13, 20, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 169, 97, 0.38);
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .kt-burger span {
    position: absolute;
    left: 13px; right: 13px;
    height: 1.5px;
    background: #F4EFE3;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease, background 0.2s ease;
  }
  .kt-burger span:nth-child(1) { top: 16px; }
  .kt-burger span:nth-child(2) { top: 22px; }
  .kt-burger span:nth-child(3) { top: 28px; }

  body.kt-menu-open .kt-burger { background: rgba(10, 13, 20, 0.95); }
  body.kt-menu-open .kt-burger span { background: #C9A961; }
  body.kt-menu-open .kt-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.kt-menu-open .kt-burger span:nth-child(2) { opacity: 0; }
  body.kt-menu-open .kt-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .kt-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed; inset: 0;
    z-index: 950;
    padding: 80px 28px calc(40px + env(safe-area-inset-bottom));
    background:
      radial-gradient(ellipse 90% 50% at 50% 0%, rgba(201, 169, 97, 0.10), transparent),
      rgba(6, 9, 15, 0.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
    font-family: 'DIN Next LT Pro', sans-serif;
    overflow-y: auto;
  }

  body.kt-menu-open { overflow: hidden; }
  body.kt-menu-open .kt-menu { opacity: 1; visibility: visible; transition: opacity 0.28s ease; }

  .kt-menu-logo { width: 110px; height: auto; margin-bottom: 26px; }

  .kt-menu a {
    display: block;
    width: 100%;
    max-width: 320px;
    padding: 14px 10px;
    text-align: center;
    color: rgba(244, 239, 227, 0.82);
    font-size: 17px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .kt-menu a + a { border-top: 1px solid rgba(201, 169, 97, 0.12); }
  .kt-menu a:active { color: #C9A961; }
  .kt-menu a.active { color: #C9A961; }

  .kt-menu a.kt-menu-cta {
    margin-top: 22px;
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 999px;
    color: #C9A961;
    padding: 15px 10px;
  }
  .kt-menu a.kt-menu-cta + a, .kt-menu a + a.kt-menu-cta { border-top-width: 1px; }

  /* Pages sans photo en haut : on réserve la place du bouton */
  body.kt-pad { padding-top: 66px; }

  /* ---------- Espace abonné ---------- */
  #view-dashboard { padding: 24px 14px 0; }

  /* En-tête : Retour + Déconnexion sur une ligne, puis 3 boutons égaux */
  .dash-header { position: relative; gap: 12px 10px; margin-bottom: 22px; }
  .dash-header > div[style] { display: contents !important; }
  .dash-header .tool-back-btn { order: 1; }
  .dash-header .logout-link { order: 2; margin-left: auto; padding: 10px 4px; }
  .dash-header::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .tools-picker, .family-picker, .accent-picker { order: 3; flex: 1 1 0; position: static; min-width: 0; }
  .tools-picker .accent-toggle,
  .family-picker .accent-toggle,
  .accent-picker .accent-toggle {
    width: 100%; justify-content: center; padding: 12px 6px; font-size: 12px; min-height: 46px;
  }

  /* Les 3 panneaux s'ouvrent sous l'en-tête, sur toute la largeur */
  .tools-dropdown, .family-dropdown, .accent-swatches {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important; right: 0 !important;
    width: auto !important; max-width: none !important;
  }
  .tools-dropdown, .accent-swatches { max-height: 58vh; overflow-y: auto; }

  /* Cartes moins encadrées : plus de place pour le contenu */
  .dash-col { padding: 18px 14px; }
  #analytics-dock { padding: 18px 14px; }
  .stats-row { gap: 10px; }
}