/* ============================================================
   AxoHost Business — couche mobile (v12.11)
   Chargée partout côté plateforme. Tout est sous media query :
   sur ordinateur, ce fichier ne change strictement rien.
   ============================================================ */

:root { --m-safe-b: env(safe-area-inset-bottom, 0px); --m-safe-t: env(safe-area-inset-top, 0px); }

/* Barre d'onglets + tiroir : masqués tant qu'on n'est pas sur petit écran */
/* Éléments réservés au téléphone : invisibles partout ailleurs.
   (Les feuilles .m-menu / .m-sheet aussi : sans cette ligne elles s'affichaient
   en bas de page sur ordinateur — bug corrigé en v12.11c.) */
.mtabs, .mtop, .mscrim, .m-burger, .m-menu, .m-sheet { display: none; }

@media (max-width: 860px) {

  /* ---------- Confort tactile ---------- */
  html { -webkit-text-size-adjust: 100%; }
  html { max-width: 100%; overflow-x: clip; }            /* rien ne dépasse à droite… */
  @supports not (overflow: clip) { html { overflow-x: hidden; } }
  body { max-width: 100%; }                             /* …sans bloquer le défilement vertical */
  body { overscroll-behavior-y: none; }
  .panel, .card, .kpi, .table-wrap, .dash-main { max-width: 100%; min-width: 0; }
  .input, input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=search], input[type=tel], input[type=url],
  select, textarea { font-size: 16px; }          /* empêche le zoom auto d'iOS */
  .btn, .dash-side a.item, .mtabs a { -webkit-tap-highlight-color: transparent; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }

  /* ---------- Coquille du dashboard / admin ---------- */
  .dash { grid-template-columns: 1fr; }
  .dash-topbar { display: none !important; }      /* remplacée par .mtop */
  .dash-main { padding: 14px 14px calc(76px + var(--m-safe-b)); }
  .dash-head { gap: 8px; margin-bottom: 16px; }
  .dash-head h1 { font-size: 1.32rem; }
  .dash-head .crumb { font-size: .78rem; max-width: 100%; min-width: 0; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
  .dash-head .spacer { display: none; }

  /* Barre du haut : titre + accès rapides */
  .mtop {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 55;
    padding: calc(9px + var(--m-safe-t)) 14px 9px;
    background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .mtop .m-brand { display: flex; align-items: center; gap: 9px; font-weight: 750; letter-spacing: -.02em; text-decoration: none; color: var(--ink); font-size: .95rem; }
  .mtop .m-brand img { height: 20px; }
  .mtop .sp { flex: 1; }
  .mtop .m-ic {
    width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line);
    background: transparent; color: var(--ink); display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; position: relative;
  }
  .mtop .m-ic .icon { width: 18px; height: 18px; }
  .mtop .m-ic .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }

  /* ---------- Barre d'onglets du bas ---------- */
  .mtabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(255, 255, 255, .93); backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line);
    padding-bottom: var(--m-safe-b);
  }
  .mtabs a, .mtabs button {
    flex: 1; min-width: 0; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 2px 8px; text-decoration: none; position: relative;
    font-family: inherit; font-size: .63rem; font-weight: 650; line-height: 1.1; color: var(--ink-4);
    transition: color .15s;
  }
  .mtabs .icon { width: 21px; height: 21px; }
  .mtabs a span, .mtabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtabs a.on, .mtabs button.on { color: var(--ink); }
  .mtabs a.on::before, .mtabs button.on::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ink);
  }
  .mtabs .cnt {
    position: absolute; top: 4px; left: 50%; margin-left: 4px;
    background: var(--bad); color: #fff; border-radius: 999px; font-size: .58rem; font-weight: 750;
    min-width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
  }

  /* ---------- Tiroir « Plus » (la barre latérale devient une feuille) ---------- */
  .mscrim { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .38);
            opacity: 0; pointer-events: none; transition: opacity .25s; }
  .mscrim.open { opacity: 1; pointer-events: auto; }
  .dash-side {
    display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    height: auto; max-height: 82vh; z-index: 160; border-right: 0;
    border-radius: 22px 22px 0 0; padding: 8px 12px calc(16px + var(--m-safe-b));
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .22);
    transform: translateY(102%); transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .dash-side.open { transform: none; }
  .dash-side::before {
    content: ''; display: block; width: 42px; height: 4px; border-radius: 99px;
    background: var(--line-2, rgba(0,0,0,.18)); margin: 4px auto 12px; flex: none;
  }
  .dash-side .dash-brand { display: none; }
  .dash-side .grp { margin: 10px 10px 4px; }
  .dash-side a.item { padding: 12px; font-size: .95rem; }

  /* ---------- Panneaux, KPI, formulaires ---------- */
  .panel { padding: 17px 15px; border-radius: 17px; margin-bottom: 14px; }
  .panel h2 { font-size: 1.02rem; }
  .panel-head-row { gap: 10px; }
  .panel-head-row .list-actions { width: 100%; }
  .panel-head-row .list-actions .btn { flex: 1; justify-content: center; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .kpi { padding: 14px 15px; border-radius: 15px; }
  .kpi .k-value { font-size: 1.3rem; }
  .kpi .k-label { font-size: .72rem; }
  .form-grid { grid-template-columns: 1fr !important; }
  .field { margin-bottom: 14px; }

  /* ---------- Tableaux transformés en cartes ---------- */
  table.data.m-cards, table.tb.m-cards { display: block; font-size: .9rem; }
  .m-cards thead { display: none; }
  .m-cards tbody, .m-cards tr, .m-cards td { display: block; width: auto; }
  .m-cards tr {
    border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 15px;
    padding: 4px 14px; margin-bottom: 10px; background: var(--paper, #fff);
  }
  .m-cards tbody tr:hover { background: var(--paper, #fff); }
  .m-cards td {
    border: 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.07));
    padding: 10px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    min-height: 0; min-width: 0; text-align: left;
    overflow-wrap: anywhere; word-break: break-word;
  }
  .m-cards td > * { min-width: 0; max-width: 100%; }
  .m-cards tr td:last-child { border-bottom: 0; }
  .m-cards td::before {
    content: attr(data-l); flex: none; min-width: 34%;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-4, #777);
  }
  .m-cards td.m-main { padding-top: 13px; }
  .m-cards td.m-main::before { display: none; }
  .m-cards td.m-main { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
  .m-cards td.m-act { justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-bottom: 13px; }
  .m-cards td.m-act::before { display: none; }
  .m-cards td.m-act > * { min-height: 40px; display: inline-flex; align-items: center; }
  .m-cards td.m-act .btn, .m-cards td.m-act form { flex: 1 1 auto; }
  .m-cards td.m-act .btn { width: 100%; justify-content: center; }
  .m-cards td.m-act a:not(.btn) {
    border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; min-width: 44px;
    justify-content: center; color: var(--ink);
  }
  .m-cards td.m-empty { display: none; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* le conteneur ne doit pas doubler la bordure des cartes */
  .table-wrap.m-wrap { border: 0 !important; background: none; padding: 0; overflow: visible; }
  /* tableaux sans en-tête (listes courtes de l'aperçu) : on les garde en lignes, mais qui respirent */
  table.data:not(.m-cards) { width: 100%; font-size: .86rem; }
  table.data:not(.m-cards) td { padding: 11px 8px; overflow-wrap: anywhere; word-break: break-word; }
  table.data:not(.m-cards) td:first-child { width: auto; }
  table.data:not(.m-cards) td:not(:first-child) {
    white-space: nowrap; width: 1%; overflow-wrap: normal; word-break: normal; text-align: right;
  }

  /* ---------- Modales : feuilles qui montent du bas ---------- */
  .dmodal { top: auto; bottom: 0; height: 93vh; border-radius: 22px 22px 0 0; overflow: hidden;
            display: none; background: var(--paper-2); }
  .dmodal.open { display: flex; flex-direction: column; animation: msheet .34s cubic-bezier(.22, 1, .36, 1); }
  @keyframes msheet { from { transform: translateY(100%); } to { transform: none; } }
  .dmodal-head { padding: 6px 16px 12px; flex-direction: column; align-items: stretch; gap: 4px; position: relative; }
  .dmodal-head::before {
    content: ''; display: block; width: 42px; height: 4px; border-radius: 99px;
    background: rgba(0, 0, 0, .16); margin: 6px auto 10px;
  }
  .dmodal-head h2 { font-size: 1.02rem; padding-right: 44px; }
  .dmodal-head .sub { font-size: .8rem; padding-right: 44px; }
  /* bouton de fermeture : rond, sans libellé (le texte brut est masqué par font-size:0) */
  .dmodal-close {
    position: absolute; top: 12px; right: 14px; margin: 0; width: 38px; height: 38px;
    padding: 0; justify-content: center; border-radius: 50%; font-size: 0; gap: 0;
  }
  .dmodal-close .icon { width: 17px; height: 17px; font-size: 1rem; }
  .dmodal-body { padding: 16px 15px calc(28px + var(--m-safe-b)); overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
  .dmodal-body .btn[type=submit], .dmodal-body button.btn-primary { width: 100%; justify-content: center; }

  /* ---------- Vitrine ---------- */
  .nav-inner { gap: 10px; }
  .m-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: auto; border: 1px solid var(--line);
    border-radius: 11px; background: transparent; color: var(--ink); cursor: pointer;
  }
  .m-burger .icon { width: 19px; height: 19px; }
  .nav-cta { margin-left: 0; }
  .nav-cta .btn-ghost { display: none; }
  .nav .brand { gap: 8px; }
  .nav .brand span { font-size: .92rem; white-space: nowrap; }
  .nav .brand img { height: 22px; }
  .nav-cta select { display: none; }
  .hero { padding: 62px 0 44px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .container { padding-left: 16px; padding-right: 16px; }

  /* Menu vitrine en feuille */
  .m-menu, .m-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    background: #fff; border-radius: 22px 22px 0 0; padding: 10px 14px calc(18px + var(--m-safe-b));
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .22);
    transform: translateY(102%); transition: transform .32s cubic-bezier(.22, 1, .36, 1);
  }
  .m-menu.open { transform: none; }
  .m-menu::before { content: ''; display: block; width: 42px; height: 4px; border-radius: 99px; background: rgba(0,0,0,.16); margin: 4px auto 12px; }
  .m-menu a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 600; }
  .m-menu a:active { background: var(--paper-2); }
  .m-menu .sep { height: 1px; background: var(--line); margin: 8px 4px; }

  /* ---------- Feuille « Installer l'application » ---------- */
  .m-install { padding-bottom: calc(18px + var(--m-safe-b)); }
  .m-install ol { margin: 10px 0 0; padding-left: 20px; font-size: .92rem; line-height: 1.75; }
  .m-install .m-step-ic { display: inline-flex; vertical-align: -.2em; }
}

/* Mode application installée : on gagne la place de la barre d'URL */
@media (display-mode: standalone) {
  .nav { display: none; }
  .m-appbadge { display: inline-flex !important; }
}