/* ============================================================
   mobile-prod.css — composants exacts des maquettes Blueprint
   gallery (mockup.css), wrappés en @media (max-width: 880px).
   Chargé après console.css sur les 4 sites prod.

   En mobile, on cache le shell desktop ; mobile.js injecte une
   structure équivalente aux maquettes en utilisant les classes
   définies ci-dessous (.app-bar, .card-m, .pill, .seclbl-m, etc.)
   ============================================================ */

@media (max-width: 880px){

/* ------------------------------------------------------------------
   FIX tap iOS/Safari : les boutons-icônes de la maquette mobile
   contiennent un <svg>. Au tap, la cible est le <svg> interne ; Safari
   (et iOS) ne synthétise PAS de `click` sur un <svg> non interactif, donc
   le handler délégué (sur .mobile-app) ne se déclenche jamais → les
   boutons (burger Menu, Recherche, Filtres…) paraissent « non cliquables ».
   On neutralise le tap sur les SVG pour que la cible soit toujours le
   bouton/lien parent, et on rend les divs interactifs (scrim, data-open/
   data-close) cliquables au tap (cursor:pointer = synthèse du click iOS). */
.mobile-app svg{ pointer-events:none; }
.mobile-app .scrim,
.mobile-app [data-open],
.mobile-app [data-close]{ cursor:pointer; }

/* Cache le rendu desktop en mobile ; la vue mobile est injectée
   par mobile.js dans <div class="mobile-app"> à côté. */
body.console > .shell{ display:none !important; }
body.console{ background:#0e0e10; color:#e6e6e6; }

/* Mode formulaire : on démasque le shell desktop (form de création/édition
   compte ou profil, ou attribution d'habilitation) et on cache la vue mobile.
   La sidebar reste cachée — le formulaire occupe tout l'écran. */
body.gu-form > .shell{
  display:grid !important;
  grid-template-columns:1fr !important;
}
body.gu-form > .shell > .side{ display:none !important; }
body.gu-form > .mobile-app{ display:none !important; }
body.gu-form .console .main{ padding-top:48px; }

/* Bouton retour en haut quand un formulaire est ouvert */
#gu-form-back{
  position:fixed; top:10px; left:12px; z-index:300;
  display:inline-flex; align-items:center; gap:6px;
  background:#1c1d22; border:1px solid #2a2b30;
  color:#e6e6e6; font-weight:600; font-size:13px;
  padding:7px 12px; border-radius:10px;
  cursor:pointer;
}
#gu-form-back svg{ width:16px; height:16px; }
body:not(.gu-form) #gu-form-back{ display:none; }

/* Cache le FAB palette (palette.js) en mobile : la personnalisation
   passe par le bouton dans le drawer. */
#abrt-pal-fab{ display:none !important; }

/* Highlight de la recherche : 2e couleur du thème (rounds) */
.mobile-app mark{
  background:var(--accent-2);
  color:#0e0e10;
  padding:0 3px; border-radius:3px;
}

/* Sheet recherche : layout stable (le panel ne saute pas) */
.mobile-app .sheet.search .panel{
  min-height:50vh;
  max-height:80vh;
}

/* Container plein écran de la vue mobile */
.mobile-app{
  display:flex; flex-direction:column;
  min-height:100vh;
  background:#15161a;
  color:#e6e6e6;
  position:relative;
  overflow-x:hidden;
}

/* ============ App bar ============ */
.mobile-app .app-bar{
  position:sticky; top:0; z-index:10;
  padding:14px 16px 12px;
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg, #1a1b20 0%, #15161a 100%);
  border-bottom:1px solid #26272c;
}
.mobile-app .app-bar .title{
  font-weight:600; font-size:17px; letter-spacing:-.01em;
}
.mobile-app .app-bar .sub{
  font-size:11.5px; color:#8a8e98; margin-top:1px;
}
.mobile-app .app-bar .icon-btn{
  width:36px; height:36px; border-radius:10px;
  background:transparent; border:1px solid transparent;
  display:grid; place-items:center;
  color:#e6e6e6; cursor:pointer;
  flex-shrink:0; padding:0;
}
.mobile-app .app-bar .icon-btn:hover{ background:#1f2026; border-color:#2c2d33; }
.mobile-app .app-bar .icon-btn.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.mobile-app .app-bar .icon-btn svg{ width:20px; height:20px; }
.mobile-app .app-bar .grow{ flex:1; min-width:0; }
.mobile-app .app-bar .grow .title{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ============ Body scroll ============ */
.mobile-app .app-body{
  flex:1;
  overflow-y:auto;
  padding:14px 16px 90px;
}

/* ============ Bottom-nav ============ */
.mobile-app .bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:rgba(15,16,19,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid #26272c;
  display:grid;
  grid-template-columns:repeat(var(--cols, 3), 1fr);
  padding:6px 4px calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:12;
}
.mobile-app .bottom-nav .tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:#8a8e98; font-size:10.5px; font-weight:500;
  cursor:pointer; border:0; background:transparent;
  padding:6px 4px;
}
.mobile-app .bottom-nav .tab svg{ width:22px; height:22px; }
.mobile-app .bottom-nav .tab.active{ color:var(--accent); }

/* ============ FAB ============ */
.mobile-app .fab{
  position:fixed;
  right:18px;
  bottom:calc(82px + env(safe-area-inset-bottom, 0px));
  width:56px; height:56px;
  border-radius:18px;
  background:var(--accent);
  color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 24px rgba(239,68,68,.4), 0 4px 8px rgba(0,0,0,.4);
  cursor:pointer; border:0;
  z-index:11;
}
.mobile-app .fab svg{ width:24px; height:24px; }

/* ============ Cards ============ */
.mobile-app .card-m{
  background:#1c1d22;
  border:1px solid #2a2b30;
  border-radius:14px;
  padding:14px;
  margin-bottom:10px;
  display:block;
  text-decoration:none;
  color:#e6e6e6;
}
.mobile-app .card-m h3{
  margin:0 0 4px; font-size:15px; font-weight:600;
  display:flex; align-items:center; gap:8px;
  color:#e6e6e6;
}
.mobile-app .card-m .row{
  display:flex; align-items:center; gap:10px;
}
.mobile-app .card-m .meta{ color:#8a8e98; font-size:12.5px; }
.mobile-app .card-m .desc{ color:#8a8e98; font-size:13px; line-height:1.45; margin:6px 0 0; }

/* ============ Pills sémantiques ============ */
.mobile-app .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase;
}
.mobile-app .pill .led{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.mobile-app .pill.act    { background:rgba(34,197,94,.12);  color:#4ade80; }
.mobile-app .pill.dev    { background:rgba(37,99,235,.12);  color:#60a5fa; }
.mobile-app .pill.maint  { background:rgba(224,130,10,.14); color:#f59e0b; }
.mobile-app .pill.inac   { background:rgba(100,116,139,.16); color:#94a3b8; }
.mobile-app .pill.lo     { background:rgba(56,189,248,.14); color:#38bdf8; }
.mobile-app .pill.mid    { background:rgba(245,158,11,.14); color:#f59e0b; }
.mobile-app .pill.hi     { background:rgba(239,68,68,.14);  color:#f87171; }

/* ============ Section label ============ */
.mobile-app .seclbl-m{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#8a8e98;
  margin:18px 2px 10px;
}
.mobile-app .seclbl-m .count{
  background:#1f2026;
  color:#e6e6e6;
  padding:1px 7px; border-radius:999px;
  font-size:10.5px; letter-spacing:0; text-transform:none;
}

/* ============ Search bar ============ */
.mobile-app .search-m{
  display:flex; align-items:center; gap:10px;
  background:#1c1d22;
  border:1px solid #2a2b30;
  border-radius:12px;
  padding:9px 12px;
  color:#8a8e98;
  margin-bottom:14px;
}
.mobile-app .search-m svg{ width:16px; height:16px; flex-shrink:0; }
.mobile-app .search-m input{
  flex:1; background:transparent; border:0; color:#e6e6e6;
  font:inherit; outline:none;
}

/* ============ Chips filtres ============ */
.mobile-app .chips{
  display:flex; gap:6px; overflow-x:auto;
  margin-bottom:12px; padding-bottom:4px;
  scrollbar-width:none;
}
.mobile-app .chips::-webkit-scrollbar{ height:0; }
.mobile-app .chip{
  white-space:nowrap;
  background:#1c1d22;
  border:1px solid #2a2b30;
  color:#8a8e98;
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer;
  flex-shrink:0;
}
.mobile-app .chip.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.mobile-app .chip .x{ width:14px; height:14px; display:grid; place-items:center; opacity:.85; }

/* ============ Row (liste tâches/versions/...) ============ */
.mobile-app .row-m{
  display:flex; align-items:flex-start; gap:10px;
  background:#1c1d22;
  border:1px solid #2a2b30;
  border-radius:12px;
  padding:11px 13px;
  margin-bottom:8px;
}
.mobile-app .row-m .num{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px; color:var(--accent); font-weight:600;
}
.mobile-app .row-m .main{ flex:1; min-width:0; }
.mobile-app .row-m .main .t{
  font-size:13.5px; font-weight:500; line-height:1.35;
  color:#e6e6e6;
}
.mobile-app .row-m .main .m{
  color:#8a8e98; font-size:11.5px; margin-top:3px;
}

/* ============ Checkbox ============ */
.mobile-app .chk{
  width:22px; height:22px; flex-shrink:0;
  border-radius:7px; border:1.5px solid #3a3b41;
  display:grid; place-items:center;
  cursor:pointer; background:transparent;
}
.mobile-app .chk.on{
  background:var(--accent); border-color:var(--accent);
}
.mobile-app .chk svg{ width:14px; height:14px; color:#fff; display:none; }
.mobile-app .chk.on svg{ display:block; }

/* ============ Stat tiles ============ */
.mobile-app .stat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;
}
.mobile-app .stat-tile{
  background:#1c1d22;
  border:1px solid #2a2b30;
  border-radius:14px;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  display:block;
}
.mobile-app .stat-tile .lbl{
  color:#8a8e98; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
}
.mobile-app .stat-tile .num{
  font-size:22px; font-weight:700; letter-spacing:-.01em; margin-top:2px;
  color:#e6e6e6;
}
.mobile-app .stat-tile.acc .num{ color:var(--accent); }
.mobile-app .stat-tile.acc{
  border-color:var(--accent);
}

/* ============ Empty state ============ */
.mobile-app .empty-m{
  text-align:center; padding:50px 30px;
  color:#8a8e98;
}
.mobile-app .empty-m .ico{
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:20px; background:#1c1d22; border:1px solid #2a2b30;
  display:grid; place-items:center;
  color:#8a8e98;
}
.mobile-app .empty-m h4{ color:#e6e6e6; margin:0 0 6px; font-size:16px; font-weight:600; }
.mobile-app .empty-m p{ margin:0; font-size:13px; line-height:1.5; }

/* ============ Buttons ============ */
.mobile-app .btn-m{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:var(--accent);
  color:#fff; border:0; border-radius:11px;
  padding:12px 16px;
  font-weight:600; font-size:14px;
  cursor:pointer;
}
.mobile-app .btn-m svg{ width:16px; height:16px; flex-shrink:0; }
.mobile-app .btn-m.ghost{
  background:transparent; color:#e6e6e6;
  border:1px solid #2c2d33;
}
.mobile-app .btn-m.danger{ background:#dc2626; }

/* ============ Segmented control ============ */
.mobile-app .seg-m{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:4px;
  background:#1c1d22;
  border:1px solid #2a2b30;
  border-radius:11px;
  padding:4px;
  margin:4px 0 14px;
}
.mobile-app .seg-m button{
  background:transparent; border:0; color:#8a8e98;
  font:inherit; font-weight:600; font-size:12.5px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.mobile-app .seg-m button.active{ background:var(--accent); color:#fff; }

/* ============ Form fields ============ */
.mobile-app .fld{ margin-bottom:12px; }
.mobile-app .fld label{
  display:block; font-size:12px; color:#8a8e98;
  margin-bottom:5px; font-weight:500;
}
.mobile-app .fld input,
.mobile-app .fld textarea,
.mobile-app .fld select{
  width:100%; background:#0f1014;
  border:1px solid #2c2d33;
  border-radius:10px;
  padding:11px 12px; color:#e6e6e6;
  font:inherit; outline:none;
}
.mobile-app .fld input:focus,
.mobile-app .fld textarea:focus,
.mobile-app .fld select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(239,68,68,.18);
}
.mobile-app .fld textarea{ min-height:72px; resize:vertical; }
.mobile-app .fld .hint{ font-size:11.5px; color:#8a8e98; margin-top:5px; }

/* ============ Bottom-sheet ============ */
.mobile-app .sheet{
  display:none;
  position:fixed; inset:0; z-index:40;
}
.mobile-app .sheet.active{ display:block; }
.mobile-app .sheet .scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.6);
  animation:mp-fade .15s ease;
}
.mobile-app .sheet .panel{
  position:absolute; left:0; right:0; bottom:0;
  background:#1a1b1f;
  border-top:1px solid #2a2b30;
  border-radius:22px 22px 0 0;
  padding:8px 18px 24px;
  max-height:86vh;
  overflow-y:auto;
  animation:mp-slideup .22s cubic-bezier(.2,.7,.2,1);
}
.mobile-app .sheet .grab{
  width:38px; height:4px; background:#3a3b41;
  border-radius:2px;
  margin:6px auto 14px;
}
.mobile-app .sheet h2{
  margin:0 0 4px; font-size:18px; font-weight:600; letter-spacing:-.01em;
  color:#e6e6e6;
}
.mobile-app .sheet .sub{ color:#8a8e98; font-size:12.5px; margin:0 0 16px; }

/* ============ Drawer ============ */
.mobile-app .drawer{
  display:none;
  position:fixed; inset:0; z-index:40;
}
.mobile-app .drawer.active{ display:block; }
.mobile-app .drawer .scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  animation:mp-fade .15s ease;
}
.mobile-app .drawer .panel{
  position:absolute; top:0; bottom:0; left:0;
  width:82%; max-width:320px;
  background:#15161a;
  border-right:1px solid #2a2b30;
  padding:20px 16px 16px;
  display:flex; flex-direction:column;
  animation:mp-slideright .25s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
}

/* Footer du drawer : compte + déconnexion compact, bonne échelle */
.mobile-app .drawer .drawer-user{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid #2a2b30;
}
.mobile-app .drawer .drawer-user .ducard{
  display:flex; align-items:center; gap:10px;
  flex:1; min-width:0;
}
.mobile-app .drawer .drawer-user{
  display:flex; align-items:center; gap:10px;
}
.mobile-app .drawer .duinfo{ min-width:0; flex:1; }
.mobile-app .drawer .duname{
  font-size:13.5px; font-weight:600; color:#e6e6e6;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mobile-app .drawer .durole{
  font-size:11px; color:#8a8e98;
}
.mobile-app .drawer .dulogout{
  width:36px; height:36px;
  border-radius:10px;
  background:#1c1d22;
  border:1px solid #2a2b30;
  color:#8a8e98;
  display:grid; place-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.mobile-app .drawer .dulogout:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.mobile-app .drawer .dulogout svg{ width:16px; height:16px; }

/* Uniformise la taille des SVG dans les rangées du drawer (nav, palette, etc.) */
.mobile-app .drawer .row-m{
  padding:10px 12px;
  gap:12px;
  align-items:center;
}
.mobile-app .drawer .row-m > svg{
  width:18px; height:18px;
  color:#8a8e98;
  flex-shrink:0;
}
.mobile-app .drawer .row-m .main .t{ font-size:13.5px; }
.mobile-app .drawer .row-m .main .m{ font-size:11px; }

@keyframes mp-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes mp-slideup{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
@keyframes mp-slideright{ from{ transform:translateX(-100%) } to{ transform:translateX(0) } }

/* ============ Icons services / sites ============ */
.mobile-app .ico-svc{
  width:38px; height:38px;
  border-radius:11px;
  background:var(--accent);
  color:var(--accent-2, #fff);
  display:grid; place-items:center;
  flex-shrink:0;
  font-size:18px;
}
.mobile-app .ico-svc svg{ width:22px; height:22px; }
/* Variante claire pour palettes très sombres : SVG en blanc */
.mobile-app .ico-svc.alt{
  background:var(--accent-bg);
  color:var(--accent);
}

/* ============ Portfolio héro ============ */
.mobile-app .pf-hero{
  text-align:center;
  padding:14px 0 6px;
}
.mobile-app .pf-avatar{
  width:88px; height:88px;
  margin:0 auto;
  border-radius:26px;
  background:var(--accent);
  color:#fff;
  display:grid; place-items:center;
  font-family:'Newsreader', serif;
  font-size:34px; font-weight:500;
  letter-spacing:-.02em;
}
.mobile-app .pf-avatar.small{
  width:44px; height:44px; font-size:18px; border-radius:14px;
}
.mobile-app .pf-hero h1{
  font-family:'Newsreader', serif;
  font-size:28px; font-weight:500; letter-spacing:-.01em;
  margin:14px 0 4px;
  line-height:1.15;
  color:#e6e6e6;
}
.mobile-app .pf-hero .role{
  color:var(--accent); font-weight:600; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase;
  margin:0 0 14px;
}
.mobile-app .pf-hero .intro{
  color:#8a8e98; font-size:14px; line-height:1.55;
  margin:0 0 18px;
}
.mobile-app .pf-hero .tags{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
}
.mobile-app .tag-pf{
  display:inline-block;
  padding:4px 10px; border-radius:999px;
  background:#1c1d22; border:1px solid #2a2b30;
  color:#8a8e98;
  font-size:11.5px; font-weight:500;
}

/* ============ Site card (SiteTracker) ============ */
.mobile-app .card-m.site-card-m{
  cursor:pointer;
}
.mobile-app .card-m.site-card-m .row{
  margin-bottom:0;
}
.mobile-app .card-m.site-card-m .counters{
  display:flex; gap:14px;
  color:#8a8e98; font-size:12px;
  margin-top:8px;
}

/* ============ Detail site (header accent) ============ */
.mobile-app .app-bar.site-detail{
  background:linear-gradient(180deg, rgba(239,68,68,.18) 0%, #15161a 100%);
  border-bottom-color:rgba(239,68,68,.25);
}
.mobile-app .app-bar.site-detail .title{ color:var(--accent); }

/* ============ Avatar GU ============ */
.mobile-app .avatar{
  width:40px; height:40px; border-radius:12px;
  background:#1c1d22; border:1px solid #2a2b30;
  color:#e6e6e6;
  display:grid; place-items:center;
  font-weight:700; font-size:15px;
  flex-shrink:0;
}
.mobile-app .avatar.admin{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.mobile-app .avatar.inactive{ opacity:.5; }
.mobile-app .avatar.small{
  width:30px; height:30px; font-size:12px; border-radius:9px;
}

/* Profil icon */
.mobile-app .ico-prf{
  width:38px; height:38px;
  border-radius:11px;
  display:grid; place-items:center;
  flex-shrink:0;
}

/* Boutons d'action dans cards / rows */
.mobile-app .icon-btn-sm{
  width:28px; height:28px; border-radius:8px;
  background:transparent; border:1px solid #2a2b30;
  color:#8a8e98;
  display:grid; place-items:center;
  cursor:pointer; padding:0;
}
.mobile-app .icon-btn-sm svg{ width:14px; height:14px; }
.mobile-app .icon-btn-sm:hover{ color:#e6e6e6; }
.mobile-app .icon-btn-sm.danger{ color:#f87171; }

}