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

/* 20/08 (CHANGEMENT D'EMPLACEMENT) -- la barre d'onglets (.tk-mobapp-tabbar)
   quitte le bas de l'ecran (position:fixed + bottom, 6 tentatives infructueuses
   sur le double-tap iOS Safari, cf historique git de r29.css) pour rejoindre
   le HAUT : desormais injectee dans #masthead (header sticky Astra, deja
   position:sticky;top:0 en prod, cf tk-mega-menu.r21.css) via le hook
   astra_masthead_bottom -- voir inc/tk_mobile_menu.php. Elle vit donc dans
   son propre bloc CSS ci-dessous (hors de .tk-mobapp, qui ne contient plus
   que les feuilles + le scrim, inchanges). Plus de position:fixed, de
   transform/translate3d, de masquage au scroll, ni de padding-bottom body a
   gerer : elle suit le flux normal du header, structurellement hors de la
   zone que Safari iOS reserve en BAS du viewport pour sa propre barre
   d'outils (cause racine du bug precedent). */

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

.tk-mobapp-tabbar{display:none}
.tk-mobapp-tabbar *{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 — desormais une simple rangee dans le header sticky,
     pas de position propre (elle suit le flux normal a l'interieur de
     #masthead). border-top la separe visuellement de la rangee logo/recherche
     au-dessus. */
  .tk-mobapp-tabbar{
    display:flex;font-family:var(--tk-body);
    background:var(--tk-bg);border-top:1px solid var(--tk-line);
  }
  /* 20/08 -- resserre (padding + icone) pour gagner de la hauteur sticky
     (Joffrey), tap target final ~97x54px, largement au-dessus du minimum
     WCAG 2.5.8 recommande (44x44px). */
  .tk-mobapp-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:6px 4px 5px;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;
    /* 18/08 -- Astra applique text-transform:uppercase a tout <button> par
       defaut (reglage bouton du Customizer). "Menu" et "Tchat" sont des
       <button>, "Accueil/Panier/Compte" des <a> -- d'ou l'incoherence
       MENU/TCHAT en majuscules vs le reste en casse normale, signalee par
       Joffrey. On force la casse normale pour toute la tabbar. */
    text-transform:none;
    /* Meme piege que le text-transform : Astra applique aussi sa police
       native (Lato) + letter-spacing aux <button> (Menu, Tchat), differente
       de notre police de marque (Inter) sur les <a>. Force l'uniformite. */
    font-family:var(--tk-body) !important;letter-spacing:normal !important;
    /* 18/08 -- line-height natif differe entre <a> (herite, ~19.5px) et
       <button> (valeur navigateur ~10.5px) -- decalait le centrage vertical
       du contenu flex de 4-5px entre Menu/Tchat et le reste. Force une
       valeur identique partout, source du desalignement signale par Joffrey. */
    line-height:1 !important;
    /* 18/08 -- Joffrey signale un besoin de double-tap sur la tabbar quand la
       barre Safari iOS est encore visible (avant scroll). Piste connue : Safari
       peut absorber le 1er tap pres du bord bas de l'ecran pour retracter sa
       propre barre, le clic n'atteint alors notre bouton qu'au 2e tap.
       touch-action:manipulation supprime l'ambiguite de delai/double-tap-zoom
       que Safari applique par defaut aux zones tactiles -- fix conservateur,
       NON verifie sur vrai appareil (Playwright = Chromium headless, ne
       reproduit pas ce comportement Safari specifique). A confirmer par
       Joffrey sur iPhone reel avant d'aller plus loin si ca ne suffit pas. */
    touch-action:manipulation;
  }
  /* 18/08 (v2) -- Icones toujours jugees "sans personnalite" malgre le
     premier ajustement (traits arrondis seuls insuffisant). Nouvelle
     direction, calee sur le VRAI langage visuel Takoori identifie dans le
     favicon (inc/img/takoori-favicon.svg) : badge carre arrondi (rx doux),
     fond teal plein + glyphe blanc. Valide par Joffrey sur apercu avant
     implementation. Etat repos = badge teinte clair + icone teal ; etat actif
     (page courante, cf $is_home/$is_cart/$is_account en PHP) = badge teal
     plein + icone blanche. */
  .tk-mobapp-badge-icon{
    width:30px;height:30px;border-radius:9px;background:var(--tk-tint);
    color:var(--tk-accent-d);display:flex;align-items:center;justify-content:center;
    position:relative;transition:background .15s,color .15s;
  }
  .tk-mobapp-tab--active .tk-mobapp-badge-icon{background:var(--tk-accent);color:#fff}
  .tk-mobapp-tab--active span:last-child{color:var(--tk-accent);font-weight:600}
  .tk-mobapp-tab svg{width:16px;height:16px;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .tk-mobapp-tab:active{color:var(--tk-accent-d)}
  /* 18/08 -- Meme piege deja rencontre sur d'autres boutons du site (fiche
     produit 16/08, panier) : le CSS natif Astra applique border-color:#A7244E
     (bordeaux) sur TOUT bouton/lien au focus (main.min.css, "button:focus{...}").
     Notre "border:0" de base ne le neutralise pas specifiquement pour :focus --
     Joffrey voit un residu bordeaux au tap sur les icones tabbar. */
  .tk-mobapp-tab:focus, .tk-mobapp-tab:focus-visible, .tk-mobapp-tab:active{
    border-color:transparent !important; outline:none !important;
  }
  /* Badge quantite repositionne : vit desormais dans .tk-mobapp-badge-icon
     (34x34) au lieu de toute la largeur du tab -- coin haut-droit du badge
     icone, pas du bouton entier. */
  .tk-mobapp-badge{
    position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 3px;
    border-radius:999px;background:var(--tk-cta);color:#fff;font-size:9.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center;line-height:1;
    border:1.5px solid var(--tk-bg);
  }

  /* 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;
  }
  /* 17/08 -- le panneau Recherche ne contient qu'un champ court -> se replie a
     sa hauteur de contenu (~143px observe), pousse le champ pres du bas de
     l'ecran. FiboSearch positionne ses suggestions en `position:fixed` juste
     sous le champ -> avec le champ deja en bas, la liste de resultats se
     retrouve quasi entierement sous le bas de l'ecran (invisible). Force ce
     panneau precis a la meme hauteur que celui des categories, pour laisser
     de la place sous le champ. */
  .tk-mobapp-sheet[data-tk-sheet="search"]{ min-height:88vh; justify-content:flex-start; }
  /* 17/08 -- transform:translateY(0) (meme a zero) cree un containing block
     pour les position:fixed enfants (spec CSS) : le panneau devient la reference
     du dropdown FiboSearch au lieu du vrai viewport -> scroll tactile casse sur
     Safari iOS notamment. transform:none une fois ouvert = plus de containing
     block, le dropdown se recale sur le vrai viewport, scroll natif restaure.
     Visuellement identique (translateY(0) et none = meme position). */
  .tk-mobapp-sheet.tk-open{transform:none}
  .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;position:relative}
  .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 */
  /* 17/08 -- CORRECTIF (v2) : le plugin DETACHE la liste de suggestions du DOM
     du panneau et la reattache directement en enfant de <body> (classe
     .dgwt-wcas-suggestions-wrapp-fixed, position:fixed !important dans son
     propre CSS) -- notre 1ere tentative (position:static scopee au panneau)
     ne pouvait jamais matcher un element qui n'est plus dans le panneau.
     Fix retenu : garder position:fixed (necessaire, l'element est hors panneau)
     mais le borner a une portion de l'ecran + scroll interne force, pour que
     tout depassement reste explorable au doigt quelle que soit la longueur
     de la liste. Cible les 2 classes ensemble (specificite 0,2,0) pour battre
     la regle plugin (0,1,0) meme si le plugin charge apres nous. */
  .dgwt-wcas-suggestions-wrapp.dgwt-wcas-suggestions-wrapp-fixed{
    max-height:55vh !important; overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !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}

  /* Verrouille le scroll de la page pendant qu'une feuille est ouverte. */
  html.tk-mobapp-lock{overflow:hidden}
}

@media (max-width:900px){
  /* 18/08 -- Bulle Tidio flottante masquee en PERMANENCE sur mobile (plus
     seulement repositionnee) : l'onglet Tchat de la tabbar (.tk-btn-chat,
     meme listener de clic delegue que la bulle, cf tidio-ondemand.php) fait
     desormais ce travail. Bulle jugee "polluante visuellement" par Joffrey.
     DEUX elements a couvrir : #tk-chat-launcher (notre placeholder AVANT
     chargement du script Tidio) ET #tidio-chat (bulle NATIVE que Tidio genere
     lui-meme apres chargement -- reapparait a la fermeture du chat si non
     couverte ; le 1er masquage 18/08 ne visait que le placeholder, bug
     signale par Joffrey en rouvrant/refermant le chat). */
  #tk-chat-launcher{ display:none !important }

  /* 18/08 -- Recherche sortie du menu app-like (onglet dedie + feuille FiboSearch
     retires : experience jugee pas assez propre par Joffrey malgre les correctifs
     clavier/visualViewport du 17/08). La recherche desktop (dgwt-wcas, 420px,
     header-style.r*.css) redevient la SEULE recherche mobile -- native, deja
     fonctionnelle partout ailleurs sur le site, plus de composant maison a
     maintenir. Donc: PAS de display:none ici. */

  /* 18/08 -- Icone panier du header masquee sur mobile : doublon avec l'onglet
     Panier de la tabbar app (meme destination /panier/, meme badge quantite).
     L'onglet en bas est le pattern mobile pertinent (portee au pouce), l'icone
     du haut n'apporte rien de plus -- meme logique que le retrait recherche. */
  .ast-site-header-cart{ display:none !important }
}

/* 20/08 -- Masquage du header sticky au scroll (Joffrey : recuperer de
   l'espace pendant la lecture ; le header reapparait des qu'on remonte ou
   s'arrete de scroller -- pattern YouTube/Instagram). Cible #masthead ENTIER
   (logo+recherche+tabbar ensemble, un seul bloc qui glisse). ETENDU A TOUS
   LES BREAKPOINTS le 20/08 (cf bloc banderole plus bas qui fixe la valeur
   EXACTE du transform -- translateY(-100% - hauteur banderole) -- donc la
   transition seule reste ici, la regle transform/tk-header-hidden a ete
   deplacee et fusionnee avec celle de la banderole pour eviter 2 regles
   concurrentes sur le meme selecteur). */
#masthead{
  transition:transform .25s ease;
}

/* 20/08 -- Banderole de reassurance (.tk-trustbar, rendue par tk_mega_menu.php
   sur le hook astra_header_before, AVANT #masthead) rendue sticky ELLE AUSSI,
   ETENDU A TOUS LES BREAKPOINTS (Joffrey : "rends la sticky aussi sur les 7
   autres breakpoints" -- 1800/1500/1150/960/750/500/390, convention d'audit
   deja utilisee sur les autres chantiers). Retire le scope mobile-only
   (max-width:900px) qui existait ce midi : la decision du 15/08 (banderole
   desktop non-sticky) est explicitement remplacee par cette demande.
   Empilage : banderole en top:0, #masthead pousse a top:{hauteur banderole}
   (calc dynamique via --tk-trustbar-h, mesuree en JS -- jamais de px en dur).
   Les deux se masquent ENSEMBLE au scroll (meme classe tk-header-hidden,
   ajoutee aux deux par le JS -- guard JS window.innerWidth>900 retire aussi,
   cf tk_mobile_menu.php). */
.tk-trustbar{
  position:sticky; top:0; z-index:1000;
  transition:transform .25s ease;
}
.tk-trustbar.tk-header-hidden{ transform:translateY(-100%); }

/* Specificite renforcee (html body #masthead) pour battre de facon fiable
   #masthead{top:0!important} de tk-mega-menu.r21.css, quel que soit
   l'ordre de chargement reel des 2 fichiers CSS. */
html body #masthead{
  top:var(--tk-trustbar-h, 0px) !important;
}
#masthead.tk-header-hidden{
  transform:translateY(calc(-100% - var(--tk-trustbar-h, 0px)));
}