/* WorkToolset — navigation adaptative V2 (2026-11-06)
   Feuille autonome chargée APRÈS app.css ; aucun ancien CSS à écraser.
   Menu mobile monté hors du header afin d'éviter les contextes backdrop-filter. */
:root { --wts-nav-blue: #106ce7; --wts-nav-ink:#173451; --wts-nav-muted:#657c93; }

/* Touch et clavier : affordances cohérentes sur les trois formats. */
.desktop-nav > a:focus-visible,
.desktop-nav > .nav-dropdown > summary:focus-visible,
.wts-menu-trigger:focus-visible,
.wts-mobile-nav-panel a:focus-visible,
.wts-mobile-nav-panel button:focus-visible {
  outline:3px solid #187cdb!important; outline-offset:3px;
}

/* Déclencheur : stable même quand les anciennes media queries masquent son texte. */
.mobile-nav-dropdown { position:relative; flex:0 0 auto; }
.wts-menu-trigger {
  display:inline-flex!important; align-items:center; justify-content:center; gap:9px;
  min-width:46px!important; min-height:46px!important; padding:8px 13px!important;
  border:1px solid #dbe5ef!important; border-radius:13px!important;
  background:#fff!important; color:#193c61!important;
  box-shadow:0 3px 10px rgba(28,73,125,.055);
  font-size:13px!important; font-weight:800; cursor:pointer;
}
.wts-menu-trigger:hover,
.wts-menu-trigger[aria-expanded="true"] { background:#eef6ff!important; border-color:#bcd8f6!important; }
.wts-menu-glyph {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:19px; height:20px; flex:0 0 19px;}
.wts-menu-glyph i {display:block; width:19px; height:2px; border-radius:3px; background:#1769be; transition:transform .17s ease,opacity .17s ease;}
.wts-menu-trigger[aria-expanded="true"] .wts-menu-glyph i:first-child{transform:translateY(6px) rotate(45deg)}
.wts-menu-trigger[aria-expanded="true"] .wts-menu-glyph i:nth-child(2){opacity:0}
.wts-menu-trigger[aria-expanded="true"] .wts-menu-glyph i:last-child{transform:translateY(-6px) rotate(-45deg)}
.wts-menu-word{display:inline-block!important; white-space:nowrap}

/* Couche flottante indépendante de .topbar, dont le backdrop-filter casse souvent
   le positionnement fixed lorsqu'un tiroir est imbriqué dans le header. */
.wts-mobile-nav-shell[hidden] {display:none!important}
.wts-mobile-nav-shell {position:fixed!important; inset:0!important; z-index:5000!important; isolation:isolate; display:block;}
.wts-mobile-nav-backdrop {position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(13,29,51,.58); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); cursor:pointer;}
.wts-mobile-nav-panel {
  position:absolute!important; inset:0 0 0 auto!important;
  top:0!important; right:0!important; bottom:0!important; left:auto!important;
  transform:none!important; width:min(440px,100vw)!important; max-width:100vw!important;
  height:100vh!important; height:100dvh!important; max-height:none!important;
  padding:0!important; margin:0!important; display:flex!important;
  flex-direction:column!important; gap:0!important; align-items:stretch!important;
  overflow:hidden!important; overscroll-behavior:contain;
  border:0!important; border-radius:20px 0 0 20px!important;
  background:#f9fbff!important; color:#173451!important;
  box-shadow:-22px 0 70px rgba(3,30,65,.25)!important;
  animation:wtsNavEnter .21s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes wtsNavEnter{from{opacity:.9; transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
.wts-mobile-nav-head {
  display:flex; align-items:center; justify-content:space-between; gap:15px;
  flex:0 0 auto; min-height:86px; padding:16px 21px;
  border-bottom:1px solid #e1ebf5; background:#fff;
}
.wts-mobile-nav-heading{display:flex; align-items:center; gap:11px; min-width:0;}
.wts-mobile-nav-logo{display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border-radius:13px; background:linear-gradient(145deg,#157fea,#1c55c5);color:#fff;font-size:25px;font-weight:950;box-shadow:0 8px 19px rgba(22,101,206,.19)}
.wts-mobile-nav-heading strong{display:block;font-size:17px;line-height:1.2;letter-spacing:-.025em;color:#12385e}
.wts-mobile-nav-heading small{display:block;margin-top:4px;font-size:11px;line-height:1.2;color:#7890a4}
.wts-mobile-nav-close{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #d9e6f2;border-radius:12px;background:#f7fbff;color:#49677d;font-size:25px;line-height:1;cursor:pointer}
.wts-mobile-nav-close:hover{background:#ebf4ff;color:#176bc8}
.wts-mobile-nav-links{
  display:flex; flex-direction:column; gap:5px; flex:1 1 auto;
  min-height:0; padding:15px 15px 24px;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.wts-mobile-nav-links>a,
.wts-mobile-nav-links>.mobile-nav-action{
  display:grid!important; grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center; width:100%; flex:0 0 auto; gap:12px;
  min-height:61px; padding:9px 11px!important;
  border:1px solid transparent!important; border-radius:13px!important;
  background:transparent; color:#25415e; text-align:left; text-decoration:none;
  font:inherit; cursor:pointer;
}
.wts-mobile-nav-links>a:hover,
.wts-mobile-nav-links>.mobile-nav-action:hover,
.wts-mobile-nav-links>a:focus-visible{
  background:#edf5ff!important; border-color:#d7eafa!important;
}
.wts-mobile-nav-links>a[aria-current="page"]{background:#e9f3ff!important;border-color:#cfe5ff!important}
.wts-mobile-nav-links>a>span:first-child,
.wts-mobile-nav-links>.mobile-nav-action>span:first-child{
  display:grid; place-items:center; width:43px; height:43px;
  border-radius:12px; background:#eaf2fc; color:#276dbc;
  font-size:17px; font-weight:800;
}
.wts-mobile-nav-links>a:nth-of-type(3n+2)>span:first-child{background:#eaf6f4;color:#0e8778}
.wts-mobile-nav-links>a:nth-of-type(3n+3)>span:first-child{background:#f2edfc;color:#7954bf}
.wts-mobile-nav-links>a>span:last-child,
.wts-mobile-nav-links>.mobile-nav-action>span:last-child{min-width:0}
.wts-mobile-nav-links strong{display:block!important;margin:0;color:#173451;font-size:14px!important;font-weight:800;line-height:1.35}
.wts-mobile-nav-links small{display:block!important;margin-top:2px;color:#627a91;font-size:11px!important;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip}
.wts-mobile-nav-links em{font-size:11px;font-style:normal;white-space:nowrap}
.wts-mobile-nav-links .mobile-nav-kicker{padding:14px 12px 3px;margin-top:2px;color:#728ba4;font-size:10px;font-weight:900;letter-spacing:.095em}
.wts-mobile-nav-links .mobile-nav-separator{height:1px;flex:0 0 1px;margin:9px 6px;background:#dfe8f3}
.wts-mobile-nav-links .mobile-studio-pips{display:flex;gap:3px;margin-top:8px}
.wts-mobile-nav-links .mobile-studio-pips i{height:3px;border-radius:99px}
.wts-mobile-nav-links .mobile-nav-action.create-account-trigger{background:#ecf3ff!important;border-color:#dce9fb!important}
.wts-mobile-nav-links .mobile-nav-action.pro-trigger{background:#152f51!important;color:#fff!important;border-color:#152f51!important}
.wts-mobile-nav-links .mobile-nav-action.pro-trigger strong{color:#fff!important}
.wts-mobile-nav-links .mobile-nav-action.pro-trigger small{color:#c8d8ea!important}
.wts-mobile-nav-links .mobile-nav-action.pro-trigger>span:first-child{background:#254d7a;color:#e8f3ff}
.wts-mobile-nav-foot{display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;padding:13px 12px max(13px,env(safe-area-inset-bottom));font-size:10.5px;font-weight:650;color:#66809b;border-top:1px solid #e3edf6;background:#fff}
.wts-mobile-nav-status{display:inline-block;width:7px;height:7px;border-radius:50%;background:#20a677;box-shadow:0 0 0 3px #e4f6ee}

@media (max-width:1360px) {
  /* Le passage desktop/tablette était incohérent à 1120/1220/1360px. */
  .desktop-nav{display:none!important}
  .mobile-nav-dropdown{display:block!important}
  .topbar-inner{display:flex!important;align-items:center;gap:12px;min-width:0}
  .header-left-cluster{min-width:0;margin-right:auto}
  .topbar-actions{flex:0 0 auto;min-width:0}
}
@media (min-width:1361px) {
  .mobile-nav-dropdown{display:none!important}
  .wts-mobile-nav-shell{display:none!important}
}
@media(max-width:700px){
  .wts-menu-trigger{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;gap:0!important}
  .wts-menu-word{display:none!important}
  .topbar-inner{padding-left:14px!important;padding-right:14px!important;gap:8px!important}
  .topbar-actions{gap:6px!important}
  .header-left-cluster{min-width:0}
  .brand{min-width:0}
  .brand-copy{min-width:0;overflow:hidden}
  .brand-name{white-space:nowrap}
  .wts-mobile-nav-panel{border-radius:0!important;width:min(420px,100vw)!important}
}
@media(max-width:370px){
  .topbar-inner{padding-left:9px!important;padding-right:9px!important;gap:5px!important}
  .header-account-button{width:35px!important;min-width:35px!important}
  .topbar-actions .header-search-button{width:35px!important;min-width:35px!important}
  .wts-menu-trigger{width:42px!important;min-width:42px!important}
  .brand-name{font-size:15px!important}
  .wts-mobile-nav-head{min-height:78px;padding:13px 15px}
  .wts-mobile-nav-links{padding:11px 11px 20px}
}
@media(prefers-reduced-motion:reduce){
  .wts-mobile-nav-panel{animation:none!important}
  .wts-menu-glyph i{transition:none!important}
}

/* Audit 320px : le bloc "Confidentialité" avait une largeur minimum implicite
   qui générait 6px de défilement horizontal (même avec menu fermé). */
@media(max-width:420px){
  .route-home .privacy-band{grid-template-columns:minmax(0,1fr);min-width:0}
  .route-home .privacy-band>.privacy-copy,
  .route-home .privacy-band>.privacy-architecture{min-width:0;max-width:100%}
  .route-home .privacy-architecture{padding:12px!important}
  .route-home .arch-box{min-width:0;overflow-wrap:anywhere}
}

.wts-mobile-nav-logo{display:block;object-fit:cover;padding:0;background:none}

/* Lot 163 — small-screen tap targets, catalog filters and checkout selection.
   The existing flex/wrapping layout is preserved; nothing is added to the homepage. */
@media(max-width:700px){
  .topbar-actions .header-account-button,
  .topbar-actions .header-search-button,
  .topbar-actions .wts-menu-trigger{
    width:44px!important;min-width:44px!important;min-height:44px!important;
  }
  .tool-access-filters button{min-height:44px;padding:9px 12px;font-size:12px;line-height:1.25}
  #pricingCheckoutLocale{font-size:16px}
  .route-home .home-evolution-filters button{min-height:44px;font-size:11px;padding:9px 11px}
  .wts-ads-consent-button{min-height:44px}
}