/* Takoori — menu mobile "app-like" (15/08/2026). Barre d'onglets fixe en bas +
   feuilles plein ecran (sheets) qui montent depuis le bas, comme une app native.
   Uniquement visible < 900px. Utilise les tokens partages tk-tokens.r2.css. */

.tk-mobapp{display:none;color:var(--tk-ink)}
.tk-mobapp *{border-color:transparent}

@media (max-width:900px){
  .tk-mobapp{display:block;font-family:var(--tk-body)}

  /* Masque UNIQUEMENT le bouton hamburger + le tiroir off-canvas natifs Astra
     (pas #ast-mobile-header entier — il contient aussi logo/recherche/panier/compte
     qu'on garde). Verifie DOM reel (15/08) :
     bouton = .menu-toggle.main-header-menu-toggle
     tiroir = .ast-mobile-popup-drawer */
  .menu-toggle.main-header-menu-toggle,
  .ast-mobile-popup-drawer{ display:none !important }

  /* Barre d'onglets fixe en bas, style app */
  .tk-mobapp-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:998;
    display:flex;background:var(--tk-bg);border-top:1px solid var(--tk-line);
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .tk-mobapp-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:8px 4px 7px;color:var(--tk-muted);text-decoration:none;font-size:10.5px;font-weight:500;
    background:none;border:0;position:relative;-webkit-tap-highlight-color:transparent;
  }
  .tk-mobapp-tab svg{width:22px;height:22px}
  .tk-mobapp-tab:active{color:var(--tk-accent-d)}
  .tk-mobapp-badge{
    position:absolute;top:3px;right:calc(50% - 18px);min-width:16px;height:16px;padding:0 4px;
    border-radius:999px;background:var(--tk-cta);color:#fff;font-size:10px;font-weight:700;
    display:flex;align-items:center;justify-content:center;line-height:1;
  }

  /* Feuilles plein ecran (categories / recherche) — montent depuis le bas */
  .tk-mobapp-sheet{
    position:fixed;left:0;right:0;bottom:0;top:auto;max-height:88vh;z-index:1000;
    background:var(--tk-bg);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.18);
    transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);
    display:flex;flex-direction:column;overflow:hidden;
  }
  .tk-mobapp-sheet.tk-open{transform:translateY(0)}
  .tk-mobapp-sheet-head{
    display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;
    border-bottom:1px solid var(--tk-line);font-weight:600;font-size:16px;color:var(--tk-ink);
    flex-shrink:0;position:relative;
  }
  .tk-mobapp-sheet-head::before{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:999px;background:var(--tk-line);
  }
  .tk-mobapp-close{
    width:30px;height:30px;border-radius:999px;border:0;background:var(--tk-tint);
    color:var(--tk-accent-d);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
    cursor:pointer;
  }
  .tk-mobapp-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 18px 24px;flex:1}

  /* Accordeon categories (drill-down tactile) */
  .tk-mobapp-acc{border-bottom:1px solid var(--tk-line)}
  .tk-mobapp-row{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    padding:15px 2px;background:none;border:0;font-size:15.5px;font-weight:600;color:var(--tk-ink);
    text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  /* 17/08 -- Astra fixe globalement button:hover/:focus/:active en bordeaux
     (background+border+color ensemble, meme piege deja rencontre sur le panier
     10/08). .tk-mobapp-row etant un <button>, il heritait de cette regle des
     l'ouverture d'un accordeon (etat :focus au tap). Neutralise explicitement
     les 3 proprietes ensemble, sur tous les etats + l'etat ouvert. */
  .tk-mobapp-row:hover, .tk-mobapp-row:focus, .tk-mobapp-row:active,
  .tk-mobapp-acc.tk-open > .tk-mobapp-row{
    background-color:transparent!important; border-color:transparent!important; color:var(--tk-ink)!important;
  }
  .tk-mobapp-leaf:hover, .tk-mobapp-leaf:focus, .tk-mobapp-leaf:active, .tk-mobapp-leaf:visited{
    background-color:transparent!important; border-color:transparent!important; color:var(--tk-ink)!important;
  }
  .tk-mobapp-row-soon{color:var(--tk-muted);font-weight:500}
  .tk-mobapp-row-soon em{font-style:normal;font-size:11px;background:var(--tk-tint);color:var(--tk-accent-d);
    padding:2px 8px;border-radius:999px;font-weight:600}
  .tk-mobapp-chevron{
    width:8px;height:8px;border-right:2px solid var(--tk-muted);border-bottom:2px solid var(--tk-muted);
    transform:rotate(-45deg);transition:transform .2s;flex-shrink:0;
  }
  .tk-mobapp-acc.tk-open .tk-mobapp-chevron{transform:rotate(45deg)}
  .tk-mobapp-acc-panel{
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;
  }
  .tk-mobapp-acc-inner{overflow:hidden;min-height:0}
  .tk-mobapp-acc.tk-open .tk-mobapp-acc-panel{grid-template-rows:1fr}
  .tk-mobapp-subhead{
    display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tk-muted);
    margin:10px 0 4px;padding-top:6px;
  }
  .tk-mobapp-leaf{
    display:flex;align-items:center;justify-content:space-between;padding:11px 2px;
    color:var(--tk-ink);text-decoration:none;font-size:14.5px;border-top:1px solid var(--tk-line);
  }
  .tk-mobapp-subhead + .tk-mobapp-leaf, .tk-mobapp-leaf:first-child{border-top:0}
  .tk-mobapp-leaf em{font-style:normal;font-size:11.5px;color:var(--tk-muted)}
  .tk-mobapp-leaf-disabled{color:var(--tk-muted);padding:11px 2px;font-size:14.5px}

  /* Recherche plein ecran (fallback brut, si FiboSearch desactive) */
  .tk-mobapp-search-form{display:flex;gap:8px;padding-top:8px}
  .tk-mobapp-search-input{
    flex:1;height:46px;border:1px solid var(--tk-line);border-radius:999px;
    padding:0 16px;font-size:16px;background:var(--tk-surface);color:var(--tk-ink);
  }
  .tk-mobapp-search-input:focus{outline:none;border-color:var(--tk-accent);background:var(--tk-bg)}
  .tk-mobapp-search-submit{
    height:46px;padding:0 18px;border-radius:999px;border:0;background:var(--tk-accent);
    color:#fff;font-weight:600;font-size:14px;cursor:pointer;
  }

  /* Recherche plein ecran — FiboSearch (dgwt-wcas), meme charte que le header desktop */
  .tk-mobapp-fibosearch{padding-top:8px}
  .tk-mobapp-fibosearch .dgwt-wcas-search-wrapp,
  .tk-mobapp-fibosearch .dgwt-wcas-sf-wrapp,
  .tk-mobapp-fibosearch .dgwt-wcas-search-form{width:100% !important;max-width:100% !important}
  .tk-mobapp-fibosearch .dgwt-wcas-search-input{
    width:100% !important;height:46px !important;border:1px solid var(--tk-line) !important;
    border-radius:999px !important;background:var(--tk-surface) !important;
    font-family:var(--tk-body) !important;font-size:16px !important;color:var(--tk-ink) !important;
    transition:border-color .15s !important;
  }
  .tk-mobapp-fibosearch .dgwt-wcas-search-input:focus{
    outline:none !important;border-color:var(--tk-accent) !important;background:var(--tk-bg) !important;
  }
  .tk-mobapp-fibosearch .dgwt-wcas-icon svg, .tk-mobapp-fibosearch .dgwt-wcas-icon{
    color:var(--tk-muted) !important;fill:var(--tk-muted) !important;
  }
  /* Le panneau de suggestions doit rester DANS le sheet plein ecran, pas flotter derriere */
  .tk-mobapp-fibosearch .dgwt-wcas-suggestions-wrapp{ z-index:1000 !important }

  /* Scrim (fond sombre derriere la feuille ouverte) */
  .tk-mobapp-scrim{
    position:fixed;inset:0;z-index:999;background:rgba(21,25,28,.4);
    opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
  }
  .tk-mobapp.tk-scrim-on .tk-mobapp-scrim{opacity:1;visibility:visible}

  /* Laisse de la place en bas de page pour ne pas passer sous la tabbar */
  html.tk-mobapp-lock{overflow:hidden}
  body{padding-bottom:64px}
}

@media (max-width:900px){
  /* Bulle Tidio remontee au-dessus de la tabbar app (sinon chevauchement) —
     scope au meme gate que le reste (ce CSS n'est charge que si actif). */
  #tk-chat-launcher{ bottom:78px !important }

  /* Recherche desktop (dgwt-wcas, 400px) masquee sur mobile : redondante avec
     l'onglet Recherche de la tabbar app, qui ouvre une feuille dediee. */
  .header-widget-area-inner{ display:none !important }
}