:root{--hm-bg:#fff;--hm-text:#111;--hm-muted:#777;--hm-border:#e7e7e7;--hm-secondary:#f3f3f3;--hm-violet:#5c2684}
.hametoo-primary-sidebar{position:fixed;left:0;top:56px;bottom:0;width:76px;background:var(--hm-bg);border-right:1px solid var(--hm-border);z-index:9990;display:none;flex-direction:column;align-items:center;padding:20px 0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hametoo-top-spacer{height:8px}.hametoo-nav{width:100%;display:flex;flex-direction:column;align-items:center}
.hametoo-nav-item,.hametoo-create-item{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;text-decoration:none;color:var(--hm-muted);box-sizing:border-box}
.hametoo-icon-box,.hametoo-create-box{position:relative;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:.2s;background:transparent;color:#111}
.hametoo-icon-box svg,.hametoo-create-box svg,.hametoo-small-button svg,.hametoo-popup-row svg,.hametoo-close-more svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hametoo-label{font-size:10px;font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--hm-muted)}
.hametoo-nav-item:hover .hametoo-icon-box,.hametoo-small-button:hover{background:var(--hm-secondary)}.hametoo-nav-item:hover .hametoo-label{color:#111}
.hametoo-active-pill{position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;border-radius:0 999px 999px 0;background:#000;opacity:0;transition:.2s}
.hametoo-nav-item.is-active .hametoo-active-pill{height:24px;opacity:1}.hametoo-nav-item.is-active .hametoo-icon-box{background:#000;color:#fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}.hametoo-nav-item.is-active .hametoo-label{color:#111}
.hametoo-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--hm-violet);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--hm-bg);box-sizing:border-box}
.hametoo-divider{width:32px;height:1px;background:var(--hm-border);margin:8px 0}.hametoo-create-box{background:var(--hm-secondary)}.hametoo-create-item:hover .hametoo-create-box{background:#e5e5e5}
.hametoo-bottom-cluster{margin-top:auto;width:100%;padding-top:12px;border-top:1px solid var(--hm-border);display:flex;flex-direction:column;align-items:center;gap:8px}
.hametoo-small-button{position:relative;width:44px;height:44px;border:0;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#111;padding:0}
.hametoo-notification-dot{position:absolute;top:8px;right:10px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid var(--hm-bg)}
.hametoo-avatar{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #000;margin-top:4px;box-sizing:border-box}.hametoo-avatar:hover{border-color:var(--hm-violet)}.hametoo-avatar img{width:100%;height:100%;object-fit:cover}.hametoo-online-dot{position:absolute;right:0;bottom:0;width:10px;height:10px;background:#22c55e;border:2px solid var(--hm-bg);border-radius:50%}
.hametoo-more-overlay{position:fixed;inset:0;background:rgba(0,0,0,.2);z-index:9998}.hametoo-more-panel{position:fixed;left:88px;bottom:16px;width:380px;max-height:85vh;overflow-y:auto;background:#fff;border:1px solid var(--hm-border);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.16);z-index:9999;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hametoo-popup-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 8px}.hametoo-popup-header h2{margin:0;font-size:22px;line-height:1.2}.hametoo-close-more{width:36px;height:36px;border:0;border-radius:50%;background:var(--hm-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer}
.hametoo-popup-section-title{padding:12px 20px 8px;font-size:14px;color:var(--hm-muted)}.hametoo-popup-row{display:flex;align-items:center;gap:16px;padding:12px 20px;text-decoration:none;color:#111}.hametoo-popup-row:hover{background:#f6f6f6}.hametoo-pop-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center}.hametoo-pop-label{flex:1;font-size:15px;font-weight:600}.hametoo-popup-sep{margin:8px 20px;border-top:1px solid var(--hm-border)}.hametoo-brand-icon{width:28px;height:28px;border-radius:7px;background:var(--hm-violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}.hametoo-theme-chips{display:flex;gap:4px;background:var(--hm-secondary);padding:4px;border-radius:999px}.hametoo-theme-chips button{width:28px;height:28px;border:0;border-radius:50%;background:transparent}.hametoo-theme-chips button.is-active{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}.hametoo-popup-row.is-destructive{color:#dc2626}.hametoo-popup-footer{text-align:center;font-size:12px;color:var(--hm-muted);padding:16px}
@media(min-width:768px){.hametoo-primary-sidebar{display:flex}.hametoo-menu-enabled{padding-left:76px}}
@media(max-width:767px){.hametoo-more-panel,.hametoo-more-overlay{display:none!important}}

/* Hametoo_menu v2 — icônes officielles et affichage compact 720p */
.hametoo-custom-icon{
  width:21px;height:21px;display:block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.hametoo-custom-home{-webkit-mask-image:url('icons/home.svg');mask-image:url('icons/home.svg')}
.hametoo-custom-video{-webkit-mask-image:url('icons/video.svg');mask-image:url('icons/video.svg')}
.hametoo-custom-briefcase{-webkit-mask-image:url('icons/briefcase.svg');mask-image:url('icons/briefcase.svg')}

/* Onglet actif gris clair, icône et texte noirs */
.hametoo-nav-item.is-active .hametoo-icon-box{
  background:#f1f3f5;color:#111;box-shadow:none;
}
.hametoo-nav-item.is-active .hametoo-label{color:#111;font-weight:600}
.hametoo-nav-item.is-active:hover .hametoo-icon-box{background:#eceff1}
.hametoo-nav-item:hover .hametoo-icon-box{background:#f6f6f6}
.hametoo-active-pill{height:0;background:#111}
.hametoo-nav-item.is-active .hametoo-active-pill{height:22px}

/* Écrans 1280×720 et ordinateurs compacts */
@media (min-width:768px) and (max-width:1366px),
       (min-width:768px) and (max-height:760px){
  .hametoo-primary-sidebar{
    width:64px;padding:8px 0 7px;top:56px;
  }
  .hametoo-top-spacer{height:0}
  .hametoo-nav-item,.hametoo-create-item{gap:1px;padding:2px 0}
  .hametoo-icon-box,.hametoo-create-box,.hametoo-small-button{
    width:40px;height:40px;border-radius:11px;
  }
  .hametoo-icon-box svg,.hametoo-create-box svg,.hametoo-small-button svg,
  .hametoo-custom-icon{width:20px;height:20px}
  .hametoo-label{font-size:9px;line-height:1;white-space:nowrap}
  .hametoo-divider{margin:3px 0;width:28px}
  .hametoo-bottom-cluster{gap:3px;padding-top:5px;margin-top:auto}
  .hametoo-avatar{width:36px;height:36px;margin-top:1px}
  .hametoo-notification-dot{top:7px;right:8px}
  .hametoo-menu-enabled{padding-left:64px}
  .hametoo-more-panel{left:74px;bottom:10px}
}

/* Très faible hauteur : le menu reste utilisable sans couper les éléments */
@media (min-width:768px) and (max-height:700px){
  .hametoo-primary-sidebar{overflow-y:auto;overflow-x:hidden;justify-content:flex-start}
  .hametoo-bottom-cluster{margin-top:4px}
}

/* ==========================================================
   Hametoo_menu v3 — disposition conforme à la maquette fournie
   ========================================================== */
@media (min-width:768px){
  .hametoo-primary-sidebar{
    top:76px;
    width:108px;
    padding:18px 0 0;
    align-items:center;
    overflow:hidden;
    background:#fff;
    border-right:1px solid #e8e8e8;
  }
  .hametoo-top-spacer{display:none}
  .hametoo-nav{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:26px 0 18px;
    scrollbar-width:thin;
    scrollbar-color:#a9a9a9 transparent;
  }
  .hametoo-nav::-webkit-scrollbar{width:5px}
  .hametoo-nav::-webkit-scrollbar-track{background:transparent}
  .hametoo-nav::-webkit-scrollbar-thumb{background:#aaa;border-radius:999px}
  .hametoo-nav-item{
    flex:0 0 auto;
    width:100%;
    gap:9px;
    padding:12px 0 15px;
  }
  .hametoo-icon-box{
    width:46px;
    height:46px;
    border-radius:13px;
    color:#111;
  }
  .hametoo-icon-box svg,
  .hametoo-custom-icon{width:25px;height:25px}
  .hametoo-label{
    font-size:13px;
    line-height:1;
    font-weight:400;
    color:#666;
    white-space:nowrap;
  }
  .hametoo-nav-item.is-active .hametoo-icon-box{
    background:#f2f2f2;
    color:#111;
    box-shadow:none;
  }
  .hametoo-nav-item.is-active .hametoo-label{
    color:#555;
    font-weight:500;
  }
  .hametoo-active-pill{display:none}
  .hametoo-nav-item:hover .hametoo-icon-box{background:#f5f5f5}
  .hametoo-badge{
    top:-5px;
    right:-5px;
    min-width:24px;
    height:24px;
    padding:0 6px;
    font-size:12px;
    border-width:3px;
  }
  /* La maquette ne montre pas le bouton Créer dans le rail principal. */
  .hametoo-divider,.hametoo-create-item{display:none!important}
  .hametoo-bottom-cluster{
    flex:0 0 auto;
    margin-top:0;
    width:100%;
    min-height:250px;
    padding:18px 0 14px;
    border-top:1px solid #e8e8e8;
    gap:20px;
    background:#fff;
  }
  .hametoo-small-button{
    width:48px;
    height:48px;
    border-radius:13px;
  }
  .hametoo-small-button svg{width:25px;height:25px}
  .hametoo-notification-dot{
    width:11px;
    height:11px;
    top:8px;
    right:7px;
    border-width:2px;
  }
  .hametoo-avatar{
    width:50px;
    height:50px;
    margin-top:3px;
    border:2px solid #111;
  }
  .hametoo-online-dot{width:12px;height:12px}
  .hametoo-menu-enabled{padding-left:108px}
  .hametoo-more-panel{left:120px;bottom:18px}
}

/* Résolution 1280×720 et écrans compacts : même structure, dimensions réduites. */
@media (min-width:768px) and (max-width:1366px),
       (min-width:768px) and (max-height:760px){
  .hametoo-primary-sidebar{
    top:76px;
    width:92px;
    padding-top:0;
  }
  .hametoo-nav{padding:14px 0 12px}
  .hametoo-nav-item{gap:6px;padding:8px 0 10px}
  .hametoo-icon-box{width:42px;height:42px;border-radius:12px}
  .hametoo-icon-box svg,.hametoo-custom-icon{width:23px;height:23px}
  .hametoo-label{font-size:11px}
  .hametoo-badge{min-width:21px;height:21px;font-size:11px;top:-4px;right:-5px}
  .hametoo-bottom-cluster{
    min-height:185px;
    padding:12px 0 10px;
    gap:10px;
  }
  .hametoo-small-button{width:43px;height:43px}
  .hametoo-small-button svg{width:23px;height:23px}
  .hametoo-avatar{width:44px;height:44px;margin-top:0}
  .hametoo-menu-enabled{padding-left:92px}
  .hametoo-more-panel{left:104px;bottom:10px}
}

/* Très petite hauteur : préserver le bloc inférieur et faire défiler uniquement le menu. */
@media (min-width:768px) and (max-height:650px){
  .hametoo-bottom-cluster{min-height:156px;gap:5px;padding:7px 0}
  .hametoo-small-button{width:39px;height:39px}
  .hametoo-avatar{width:40px;height:40px}
  .hametoo-nav-item{padding:5px 0 7px;gap:4px}
}

/* Hametoo_menu v4 — suppression de la double ligne verticale */
@media (min-width:768px){
  .hametoo-primary-sidebar{
    border-right:0!important;
    box-shadow:none!important;
  }
}