@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* 10-base.css — Socle : polices, variables de couleur et thèmes (clair, sombre, sépia), reset, page, barre du haut (recherche, boutique).
   Feuille 1/7 : l'ordre de chargement (lib/assets.php) est celui des numéros, il porte la cascade. */
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  :root{
    --ink:#161616;--grey-1:#86868b;--grey-2:#a1a1a6;
    --line:#ededef;--line-2:#e3e3e6;--bg:#fbfbfb;--card:#fff;--fill:#f4f4f2;
    --accent:#62b616;--accent-dk:#4f9211;--accent-soft:#e9f5db;
    --green:#2f7d4f;--amber:#d98b00;
    --grade-a:#62b616;--grade-b:#d98b00;--grade-c:#e0683a;
    --vendor:#62b616;--tech:#7c4dff;--manager:#0a7d8c;--admin:#e0683a;
    --radius:18px;
    --shadow:0 2px 10px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.05);
    --shadow-lg:0 12px 48px rgba(0,0,0,.16);
    --topbar-bg:rgba(251,251,253,.82);
  }
  /* ===== Thèmes d'affichage (préférence par utilisateur, users.theme) =====
     Chaque thème ne fait que redéfinir les variables neutres : tout ce qui
     utilise var(--bg/--card/--ink/…) suit automatiquement. Les couleurs
     sémantiques (accent vert, badges d'agenda, grades) restent volontairement
     stables d'un thème à l'autre. */
  /* Sombre — d'après GitHub Primer (dark default), croisé Material 3 / Tailwind zinc.
     Fond quasi-noir (jamais #000), texte quasi-blanc (jamais #fff). Texte principal
     16:1 sur le fond, secondaires ≥4.6:1 (WCAG AA). Le vert de marque #62b616 passe
     AA sur fond sombre (7.4:1) → conservé ; --accent-dk éclairci pour le texte vert. */
  :root[data-theme="dark"]{
    --ink:#e6edf3;--grey-1:#9198a1;--grey-2:#7d8590;
    --line:#30363d;--line-2:#444c56;--bg:#0d1117;--card:#161b22;--fill:#21262d;
    --accent:#62b616;--accent-dk:#7ee23a;--accent-soft:#1c2b12;
    --shadow:0 2px 10px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
    --shadow-lg:0 16px 50px rgba(0,0,0,.6);
    --topbar-bg:rgba(13,17,23,.82);
    color-scheme:dark;
  }
  /* Sépia — d'après le mode lecture Kindle (crème #fbf0d9) et Apple Books. Texte
     brun foncé (9.5:1 sur le fond, WCAG AA large). Vert de marque assombri à
     #3f720f pour rester lisible en texte sur le crème (5.1:1). */
  :root[data-theme="sepia"]{
    --ink:#4a3b2e;--grey-1:#7a6a55;--grey-2:#96876f;
    --line:#e4d5b7;--line-2:#d3c09b;--bg:#fbf0d9;--card:#fff8ea;--fill:#f1e4c9;
    --accent:#5a9e17;--accent-dk:#3f720f;--accent-soft:#e6edc9;
    --shadow:0 2px 10px rgba(90,70,30,.07),0 1px 3px rgba(90,70,30,.09);
    --shadow-lg:0 14px 48px rgba(90,70,30,.22);
    --topbar-bg:rgba(251,240,217,.85);
  }
  /* Jamais de scroll horizontal de page : le contenu large scrolle dans son propre
     conteneur. Corrige aussi Safari iOS, où les tiroirs garés hors écran à droite
     (translateX(100%)) agrandissent la zone de scroll. « clip » (sans conteneur de
     scroll, position:sticky préservé) avec repli « hidden » pour anciens navigateurs. */
  html,body{overflow-x:hidden;overflow-x:clip;}
  body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.011em;min-height:100vh;}
  /* ---- Barre du haut : logo, recherche, boutique, compte. Tous les contrôles
         partagent la même hauteur (38px) et le même arrondi (12px). ---- */
  .topbar{background:var(--topbar-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);height:60px;position:sticky;top:0;z-index:50;}
  .topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);}
  /* Contenu de la barre aligné sur la même colonne (1120px) que .wrap, tout en gardant le fond pleine largeur. */
  .topbar-in{display:flex;align-items:center;gap:12px;height:100%;max-width:1120px;margin:0 auto;padding:0 24px;}
  .brand{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;}
  .brand-logo{height:32px;width:auto;display:block;}
  /* Logo « Coral » : le lettrage est en #161616 (foncé) dans le SVG → invisible
     sur le fond sombre. On le recolore en thème sombre (le point vert et le blanc
     du SVG gardent leurs propres couleurs). */
  :root[data-theme="dark"] .brand-logo g[fill="#161616"]{fill:var(--ink);}
  .brand-tag{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--grey-2);border-left:1px solid var(--line-2);padding-left:10px;line-height:1;}
  .tb-spacer{flex:1;}
  /* Bloc de droite : actions groupées, séparateurs, boutons d'icône unifiés. */
  .tb-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .tb-ico{position:relative;width:38px;height:38px;border-radius:12px;border:none;background:var(--fill);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--ink);flex-shrink:0;transition:background .15s;}
  .tb-ico .lc{font-size:18px;}
  @media(hover:hover){ .tb-ico:hover{background:var(--line-2);} }
  .tb-ico:active{transform:scale(.96);}
  .tb-ico.logout{font-size:15px;color:var(--grey-1);}
  .tb-ico.logout:hover{background:#fdeee6;color:#e0683a;}
  .tb-user{display:flex;align-items:center;gap:9px;height:38px;padding:0 8px 0 4px;border-radius:12px;cursor:pointer;position:relative;transition:background .15s;}
  @media(hover:hover){ .tb-user:hover{background:var(--fill);} }
  .tb-user.open{background:var(--fill);}
  .tb-av{width:30px;height:30px;border-radius:9px;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;background:var(--accent);flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
  .tb-user-tx{line-height:1.15;min-width:0;}
  .tb-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
  .tb-role{font-size:10.5px;color:var(--grey-2);font-weight:600;margin-top:1px;}
  .tb-caret{font-size:15px;color:var(--grey-2);transition:transform .18s;}
  .tb-user.open .tb-caret{transform:rotate(180deg);}
  /* Voile derrière les menus en feuille (mobile), posé par syncTbScrim(). */
  .tb-scrim{display:none;}
  /* Recherche globale (topbar) */
  .tb-search{position:relative;flex:1;max-width:380px;min-width:0;}
  .gs-kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:inherit;font-size:11px;font-weight:700;color:var(--grey-2);border:1px solid var(--line-2);border-radius:6px;min-width:20px;height:20px;padding:0 5px;display:flex;align-items:center;justify-content:center;background:var(--card);pointer-events:none;transition:opacity .15s;}
  .tb-search:focus-within .gs-kbd{opacity:0;}
  .gs-mbtn{display:none;}
  /* Mobile : le champ intégré est remplacé par un bouton 🔎 qui ouvre une
     recherche PLEIN ÉCRAN (gs-mov) — pas de champ compressé, pas de zoom iOS. */
  @media(max-width:768px){
    .tb-search{display:none;}
    .gs-mbtn{display:flex;}
    /* Aucun champ sous 16px sur petit écran, connexion comprise : en dessous,
       Safari iOS zoome la page au focus et le zoom reste ensuite. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(16px,1em);}
  }
  .gs-mov{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;flex-direction:column;}
  .gs-mov.show{display:flex;}
  .gs-mhead{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--card);border-bottom:1px solid var(--line);}
  .gs-mfield{flex:1;position:relative;min-width:0;}
  .gs-mfield .lc{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--grey-2);pointer-events:none;}
  /* 16px minimum : en dessous, iOS Safari zoome toute la page au focus. */
  .gs-mhead input{width:100%;height:42px;min-width:0;font:inherit;font-size:16px;font-weight:500;padding:0 14px 0 42px;border-radius:12px;border:1px solid transparent;background:var(--fill);color:var(--ink);outline:none;}
  .gs-mhead input:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px var(--accent-soft);}
  .gs-mbox{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--card);}
  .gs-mbox .ac-item{padding:13px 16px;font-size:14px;}
  .gs-mbox .gs-h{padding:12px 16px 5px;}
  .gs-mbox .ac-empty{padding:18px 16px;}
  .tb-search .gs-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:17px;color:var(--grey-2);pointer-events:none;transition:color .15s;}
  .tb-search:focus-within .gs-ic{color:var(--accent-dk);}
  .tb-search input{width:100%;height:38px;font:inherit;font-size:13.5px;font-weight:500;padding:0 40px 0 38px;border-radius:12px;border:1px solid transparent;background:var(--fill);color:var(--ink);outline:none;transition:border-color .15s,background .15s,box-shadow .15s;}
  .tb-search input::placeholder{color:var(--grey-2);}
  .tb-search input:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px var(--accent-soft);}
  .tb-search .ac-box{max-height:min(430px,70vh);}
  .gs-h{display:flex;align-items:center;gap:6px;padding:9px 13px 4px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--grey-2);background:var(--fill);}
  .gs-h .lc{font-size:13px;}
  /* ---- Boutique de travail : bouton en pastille, menu dessiné comme le menu
     du compte ; le <select> natif reste dans la page mais invisible (lu par
     les modules, il porte le changement). */
  .shop-pick{position:relative;}
  .shop-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;}
  .shop-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 9px 0 11px;border-radius:12px;border:none;background:var(--fill);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;max-width:240px;transition:background .15s;}
  .shop-btn.open{background:var(--line-2);}
  .shop-btn .lc{font-size:17px;color:var(--grey-1);}
  .shop-btn .shop-caret{font-size:15px;transition:transform .18s;}
  .shop-btn.open .shop-caret{transform:rotate(180deg);}
  .shop-btn #shop-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  @media(hover:hover){ .shop-btn:not(:disabled):hover{background:var(--line-2);} }
  .shop-btn.fixed{cursor:default;padding-right:13px;}
  .shop-btn.fixed .shop-caret{display:none;}
  .shop-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:236px;max-width:88vw;background:var(--card);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);z-index:200;overflow:hidden;padding:6px;display:flex;flex-direction:column;animation:tbmenu-in .16s ease-out;}
  .shop-menu::after{content:"";display:none;order:-1;width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:2px auto 10px;flex-shrink:0;}
  @keyframes tbmenu-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
  @keyframes tbsheet-in{from{transform:translateY(100%);}to{transform:none;}}
  @keyframes tbscrim-in{from{opacity:0;}to{opacity:1;}}
  .shop-opt{width:100%;display:flex;align-items:center;gap:10px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:none;border:none;border-radius:9px;padding:10px 11px;cursor:pointer;text-align:left;transition:background .14s;}
  @media(hover:hover){ .shop-opt:hover{background:var(--fill);} }
  .shop-opt .so-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex-shrink:0;}
  .shop-opt.on .so-dot{background:var(--accent);}
  .shop-opt .so-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .shop-opt .so-ck{font-size:16px;color:var(--accent-dk);}
  .shop-opt .lc{font-size:16px;color:var(--grey-1);}
  .shop-opt.add{color:var(--grey-1);margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;padding-top:12px;}
  @media(hover:hover){ .shop-opt.add:hover{color:var(--ink);} }
  .role-sw{display:flex;align-items:center;gap:7px;}
  .role-sw .lbl{font-size:11px;color:var(--grey-2);font-weight:600;}
  .role-pills{display:flex;background:var(--fill);border-radius:980px;padding:3px;gap:1px;}
  .role-pills button{font:inherit;font-size:12px;font-weight:600;color:var(--grey-1);padding:6px 11px;border:none;background:none;cursor:pointer;border-radius:980px;transition:all .15s;display:flex;align-items:center;gap:5px;}
  .role-pills button .rd{width:6px;height:6px;border-radius:50%;}
  .role-pills button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
  .wrap{max-width:1120px;margin:0 auto;padding:42px 26px 90px;}
  .view{display:none;}
  .view.active{display:block;animation:rise .4s cubic-bezier(.16,1,.3,1);}
  @keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  /* Tactile : pas d'animation d'entrée de vue. Le transform animé sur une grande vue,
     combiné au retour arrière depuis le bas de page, faisait planter le repaint de
     Safari iOS (moitié d'écran vide jusqu'au scroll). Purement cosmétique sur mobile. */
  @media(hover:none){ .view.active{animation:none;} }