@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
  *{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;}
  .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:58px;position:sticky;top:0;z-index:50;}
  /* 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:14px;height:100%;max-width:1120px;margin:0 auto;padding:0 26px;}
  .brand{display:flex;align-items:center;gap:9px;cursor:pointer;}
  .brand-logo{height:35px;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:11px;font-weight:600;color:var(--grey-2);border-left:1px solid var(--line-2);padding-left:9px;}
  /* Logo « texte » du mode démo (remplace le SVG quand une enseigne est configurée). */
  .brand-wordmark{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;white-space:nowrap;}
  .login-wordmark{display:block;text-align:center;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;margin:0 auto 14px;}
  .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:9px;}
  .tb-sep{width:1px;height:24px;background:var(--line);flex-shrink:0;}
  .tb-ico{position:relative;width:36px;height:36px;border-radius:50%;border:none;background:var(--fill);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--ink);transition:background .15s,transform .12s;}
  .tb-ico:hover{background:var(--line-2);transform:translateY(-1px);}
  .tb-ico:active{transform:translateY(0);}
  .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:8px;padding:3px 4px 3px 3px;border-radius:980px;}
  .tb-user-tx{line-height:1.2;}
  /* Recherche globale (topbar) */
  .tb-search{position:relative;flex:1;max-width:340px;min-width: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;}
  }
  .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:9px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);}
  /* 16px minimum : en dessous, iOS Safari zoome toute la page au focus. */
  .gs-mhead input{flex:1;min-width:0;font:inherit;font-size:16px;font-weight:500;padding:10px 14px;border-radius:980px;border:1px solid var(--line-2);background:var(--fill);outline:none;}
  .gs-mhead input:focus{border-color:var(--accent);background:var(--card);}
  .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 input{width:100%;font:inherit;font-size:13px;font-weight:500;padding:8px 13px;border-radius:980px;border:1px solid var(--line-2);background:var(--fill);outline:none;transition:border-color .15s,background .15s;}
  .tb-search input:focus{border-color:var(--accent);background:var(--card);}
  .tb-search .ac-box{max-height:min(430px,70vh);}
  .gs-h{padding:9px 13px 4px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--grey-2);background:var(--fill);}
  .shop-pick{display:flex;align-items:center;gap:8px;background:var(--fill);border-radius:980px;padding:7px 13px;cursor:pointer;font-size:13px;font-weight:600;}
  .shop-pick .dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
  /* appearance:none => on remplace la flèche native (qui se dessinait par-dessus le texte) par notre chevron. */
  .shop-pick select{appearance:none;-webkit-appearance:none;border:none;font:inherit;cursor:pointer;outline:none;color:var(--ink);max-width:172px;padding-right:16px;text-overflow:ellipsis;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/9px 6px;}
  .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;} }
  .hello{margin-bottom:30px;}
  .proto-pill{display:inline-flex;align-items:center;gap:6px;background:var(--fill);color:var(--grey-1);font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:980px;margin-bottom:18px;}
  .proto-pill .pd{width:6px;height:6px;border-radius:50%;background:var(--amber);}
  .hello h1{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.1;}
  .hello p{color:var(--grey-1);font-size:15.5px;margin-top:8px;font-weight:500;}
  .role-banner{display:flex;align-items:center;gap:11px;border-radius:14px;padding:13px 16px;margin-top:18px;font-size:13px;font-weight:600;}
  .role-banner .rb-ic{width:30px;height:30px;border-radius:9px;color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;}
  .role-banner .rb-txt span{font-weight:700;}
  .grp-title{font-size:13px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin:30px 0 13px;}
  /* auto-fill (et non auto-fit) : les colonnes vides sont CONSERVÉES, donc toutes les
     rangées gardent la même trame et toutes les cartes la même largeur, quel que soit
     leur nombre. Avec auto-fit, une rangée de 3 cartes s'étirait sur 3 colonnes larges
     alors qu'une rangée de 4 en faisait 4 étroites. */
  .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;}
  .tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;cursor:pointer;position:relative;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .22s;box-shadow:0 1px 2px rgba(16,16,16,.03);}
  @media(hover:hover){ .tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2);} }
  .tile.locked{cursor:default;}
  .tile.locked:hover{transform:none;box-shadow:none;border-color:var(--line);}
  .tile-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:15px;}
  .tile h3{font-size:17px;font-weight:700;letter-spacing:-.02em;}
  .tile p{font-size:13.5px;color:var(--grey-1);line-height:1.5;margin-top:5px;margin-bottom:14px;font-weight:500;}
  .tile-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--grey-2);font-weight:600;}
  .tile-meta b{color:var(--accent);}
  /* Compteur mis en avant (tuiles à chiffres réels) */
  .tile-n{font-size:19px;font-weight:800;color:var(--accent-dk);line-height:1;letter-spacing:-.02em;margin-right:5px;}
  .tile-nl{font-size:12.5px;color:var(--grey-1);font-weight:600;}
  .arrow{color:var(--grey-2);font-size:15px;}
  /* Flèche « ouvrir » : bouton rond discret qui s'illumine au survol de la tuile */
  .tile-meta .arrow{width:30px;height:30px;border-radius:50%;background:var(--fill);color:var(--grey-1);font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .16s,color .16s,transform .16s;}
  @media(hover:hover){ .tile:hover .tile-meta .arrow{background:var(--accent);color:#fff;transform:translateX(2px);} }
  .tag{position:absolute;top:18px;right:18px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:980px;}
  .tag.on{background:var(--accent-soft);color:var(--accent-dk);}
  .tag.ro{background:#f0ecff;color:#5b35d6;}
  .tag.off{background:var(--fill);color:var(--grey-2);}
  .tag.alert{background:#fdeee6;color:#c0561f;}
  .crumb{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--grey-2);margin-bottom:18px;font-weight:600;}
  .crumb a{color:var(--accent);cursor:pointer;}
  .crumb a:hover{text-decoration:underline;}
  .phead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px;}
  .phead h2{font-size:29px;font-weight:800;letter-spacing:-.03em;}
  .phead .sub{color:var(--grey-1);font-size:14px;margin-top:4px;font-weight:500;}
  .ro-banner{display:flex;align-items:center;gap:9px;background:#f0ecff;border:1px solid #ddd2ff;border-radius:12px;padding:11px 15px;font-size:12.5px;color:#5b35d6;font-weight:600;margin-bottom:22px;}
  .btn{font:inherit;font-size:14px;font-weight:600;padding:11px 20px;border-radius:980px;border:none;cursor:pointer;transition:transform .12s,background .15s,opacity .15s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
  .btn:active{transform:scale(.96);}
  .btn-primary{background:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent-dk);}
  .btn-soft{background:var(--fill);color:var(--ink);}
  .btn-soft:hover{background:var(--line-2);}
  .btn[disabled]{opacity:.4;cursor:not-allowed;}
  .btn[disabled]:active{transform:none;}
  .seg{display:inline-flex;background:var(--fill);border-radius:11px;padding:3px;margin-bottom:26px;gap:2px;flex-wrap:wrap;}
  .seg button{font:inherit;font-size:13.5px;font-weight:600;color:var(--grey-1);padding:8px 16px;border:none;background:none;cursor:pointer;border-radius:9px;transition:all .15s;}
  .seg button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
  .seg button[disabled]{opacity:.4;cursor:not-allowed;}
  .panel{display:none;}
  .panel.active{display:block;animation:rise .3s cubic-bezier(.16,1,.3,1);}
  .board{display:grid;gap:11px;}
  .board.c5{grid-template-columns:repeat(5,1fr);}
  .board.c4{grid-template-columns:repeat(4,1fr);}
  .lane{background:var(--fill);border-radius:14px;padding:10px;min-height:170px;}
  .lane-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:4px 5px 10px;}
  .lane-h .ld{width:8px;height:8px;border-radius:50%;}
  .lane-h .lc{margin-left:auto;background:var(--card);font-size:11px;padding:1px 7px;border-radius:980px;color:var(--grey-1);}
  .card-item{background:var(--card);border-radius:11px;padding:13px;margin-bottom:8px;cursor:pointer;border:1px solid transparent;transition:transform .14s,box-shadow .14s,border-color .14s;}
  /* Glisser-déposer des cartes entre colonnes (voir enableBoardDnD dans app.js).
     Affordance : poignée à points (grip) en haut à droite, comme les listes
     réordonnables d'iOS/macOS — signale d'emblée que la carte se déplace. */
  .card-item[data-id]{cursor:grab;position:relative;padding-right:24px;}
  .card-item[data-id]::after{content:'';position:absolute;top:12px;right:11px;width:8px;height:13px;
    background-image:radial-gradient(currentColor 1.1px,transparent 1.2px);background-size:4px 4px;
    color:var(--grey-2);opacity:.35;transition:opacity .15s;pointer-events:none;}
  .card-item[data-id]:hover::after{opacity:.7;}
  .card-item.dnd-src{opacity:.4;}
  .card-item.dnd-ghost{cursor:grabbing;box-shadow:var(--shadow-lg);border-color:var(--line-2);transform:rotate(1.5deg);opacity:.97;}
  .lane.dnd-over{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-soft);}
  /* Messagerie : message non lu mis en avant. */
  .msg-item.msg-unread{border-color:var(--accent);background:var(--accent-soft);}
  .msg-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle;}
  /* Agenda : semaine 7 jours, look calendrier. */
  .ag-legend{display:flex;flex-wrap:wrap;gap:7px 14px;margin-bottom:14px;}
  .ag-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--grey-1);}
  .ag-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
  .ag-week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
  .ag-day{background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden;min-height:150px;display:flex;flex-direction:column;transition:border-color .15s;}
  .ag-day.weekend{background:var(--fill);}
  .ag-day[onclick]{cursor:pointer;}
  .ag-day[onclick]:hover{border-color:var(--line-2);}
  .ag-day.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
  .ag-day-h{padding:10px 12px 8px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;}
  .ag-day-h .dn{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--grey-2);}
  .ag-day-h .dd{font-size:17px;font-weight:800;letter-spacing:-.02em;}
  .ag-day.today .ag-day-h{background:var(--accent-soft);}
  .ag-day.today .ag-day-h .dn,.ag-day.today .ag-day-h .dd{color:var(--accent-dk);}
  .ag-day-b{padding:8px;flex:1;}
  .ag-empty{color:var(--grey-2);font-size:20px;text-align:center;padding:16px 0;opacity:.4;}
  .ag-ev{border-radius:10px;padding:8px 10px 8px 11px;margin-bottom:7px;border-left:3px solid var(--grey-2);background:var(--fill);}
  .ag-ev[onclick]{cursor:pointer;transition:transform .12s,box-shadow .12s;}
  .ag-ev[onclick]:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
  .ag-ev-t{font-size:10.5px;font-weight:800;letter-spacing:.02em;opacity:.85;}
  .ag-ev-n{font-size:13px;font-weight:700;margin:2px 0 1px;line-height:1.25;}
  .ag-ev-a{font-size:11px;color:var(--grey-2);}
  .ag-ev.t-shift{border-left-color:#62b616;background:#eef6e3;} .ag-ev.t-shift .ag-ev-t{color:#4e8f12;}
  .ag-ev.t-rdv{border-left-color:#2d8fed;background:#e7f2fd;} .ag-ev.t-rdv .ag-ev-t{color:#1d6fc0;}
  .ag-ev.t-reunion{border-left-color:#8b5cf6;background:#f0ecff;} .ag-ev.t-reunion .ag-ev-t{color:#6b3fd4;}
  .ag-ev.t-conge{border-left-color:#d98b00;background:#fff4d6;} .ag-ev.t-conge .ag-ev-t{color:#a86b00;}
  .ag-ev.t-absence{border-left-color:#e0683a;background:#fdeee6;} .ag-ev.t-absence .ag-ev-t{color:#c0561f;}
  .ag-ev.t-fermeture,.ag-ev.t-autre{border-left-color:#a1a1a6;background:var(--fill);} .ag-ev.t-fermeture .ag-ev-t,.ag-ev.t-autre .ag-ev-t{color:var(--grey-1);}
  /* Événement sur plusieurs jours : jours de continuation atténués, bord gauche pointillé. */
  .ag-ev.cont{opacity:.8;}
  .ag-ev.multi.cont{border-left-style:dashed;}
  .ag-mchip.cont{opacity:.7;}
  .ag-bar{height:6px;border-radius:980px;background:var(--line);overflow:hidden;margin-top:5px;max-width:150px;}
  .ag-bar i{display:block;height:100%;border-radius:980px;}
  @media(max-width:900px){ .ag-week{grid-template-columns:1fr;} .ag-day{min-height:0;} .ag-day.today{box-shadow:none;} }
  /* Vue mois : grille calendaire (semaines × 7 jours). */
  .ag-mhead{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
  .ag-mhead span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--grey-2);text-align:center;}
  .ag-mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
  .ag-mcell{background:var(--card);border:1px solid var(--line);border-radius:11px;min-height:96px;padding:6px 6px 5px;display:flex;flex-direction:column;gap:3px;}
  .ag-mcell[onclick]{cursor:pointer;}
  .ag-mcell.out{background:var(--fill);opacity:.55;}
  .ag-mcell.weekend{background:var(--fill);}
  .ag-mcell.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
  .ag-mday{font-size:12.5px;font-weight:800;color:var(--grey-1);text-align:right;padding:0 2px;}
  .ag-mcell.today .ag-mday{color:var(--accent-dk);}
  .ag-mchip{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink);background:var(--fill);border-radius:6px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ag-mchip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--grey-2);}
  .ag-mchip[onclick]{cursor:pointer;}
  .ag-mchip.t-shift{background:#eef6e3;} .ag-mchip.t-shift .dot{background:#62b616;}
  .ag-mchip.t-rdv{background:#e7f2fd;} .ag-mchip.t-rdv .dot{background:#2d8fed;}
  .ag-mchip.t-reunion{background:#f0ecff;} .ag-mchip.t-reunion .dot{background:#8b5cf6;}
  .ag-mchip.t-conge{background:#fff4d6;} .ag-mchip.t-conge .dot{background:#d98b00;}
  .ag-mchip.t-absence{background:#fdeee6;} .ag-mchip.t-absence .dot{background:#e0683a;}
  .ag-mchip.t-fermeture .dot,.ag-mchip.t-autre .dot{background:#a1a1a6;}
  .ag-mmore{font-size:10.5px;font-weight:700;color:var(--grey-2);padding-left:3px;}
  @media(max-width:640px){ .ag-mcell{min-height:64px;} .ag-mchip{font-size:0;gap:0;padding:2px;} .ag-mchip .dot{width:8px;height:8px;} }
  .card-item:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2);}
  .ci-id{font-size:10.5px;color:var(--grey-2);font-weight:700;letter-spacing:.03em;display:flex;align-items:center;gap:6px;}
  .ci-alert{font-size:10px;font-weight:800;color:#b23b00;background:#ffe9dd;padding:1px 6px;border-radius:980px;letter-spacing:0;}
  .card-item.has-alert{border-color:#ffcbb0;box-shadow:0 0 0 1px #ffddc9 inset;}
  .ci-title{font-size:14px;font-weight:700;margin:4px 0 2px;}
  .ci-sub{font-size:12.5px;color:var(--grey-1);font-weight:500;}
  .ci-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--grey-2);font-weight:600;}
  .grade{width:22px;height:22px;border-radius:7px;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .ci-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:980px;}
  .ci-chip.rep{background:var(--accent-soft);color:var(--accent-dk);}
  .ci-chip.dev{background:#eaf6ec;color:var(--green);}
  .ci-chip.acc{background:#fdeee6;color:#c0561f;}
  .ci-chip.warn{background:#fff0d6;color:#9a6c10;}
  .ci-chip.ok{background:#eaf6ec;color:var(--green);}
  .fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .fsec{padding:24px 28px;border-bottom:1px solid var(--line);}
  .fsec:last-of-type{border-bottom:none;}
  .fsec-h{display:flex;align-items:center;gap:10px;margin-bottom:17px;}
  .fsec-h .n{width:26px;height:26px;border-radius:8px;background:var(--fill);font-size:12.5px;font-weight:800;color:var(--grey-1);display:flex;align-items:center;justify-content:center;}
  .fsec-h h4{font-size:15.5px;font-weight:700;letter-spacing:-.02em;}
  .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
  .fld{margin-bottom:14px;}
  .fld:last-child{margin-bottom:0;}
  .fld label{display:block;font-size:12.5px;font-weight:600;color:var(--grey-1);margin-bottom:7px;}
  .fld label .r{color:var(--accent);}
  .fld label .hint{color:var(--grey-2);font-weight:500;font-size:11.5px;}
  /* Bandeau « nouvelle version disponible » (déploiement détecté pendant l'usage). */
  /* Pilule flottante façon Apple : matière translucide floutée, sobre, détachée du bord. */
  .ver-banner{position:fixed;top:14px;left:50%;transform:translate(-50%,-180%);z-index:200;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;background:rgba(28,28,30,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#fff;padding:7px 9px 7px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 28px rgba(0,0,0,.34);font-size:13px;font-weight:600;letter-spacing:-.01em;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .42s;max-width:calc(100% - 24px);}
  .ver-banner.show{transform:translate(-50%,0);}
  .ver-banner>span{padding-right:2px;}
  .ver-reload{font:inherit;font-weight:700;background:#fff;color:#161616;border:none;border-radius:999px;padding:6px 15px;cursor:pointer;transition:background .15s,transform .12s;white-space:nowrap;}
  .ver-reload:hover{background:#efefef;}
  .ver-reload:active{transform:scale(.97);}
  .ver-news{font:inherit;font-weight:600;background:transparent;color:rgba(255,255,255,.88);border:none;border-radius:999px;padding:6px 9px;cursor:pointer;white-space:nowrap;transition:color .15s;}
  .ver-news:hover{color:#fff;}
  /* Mobile : la pilule ne tient pas sur une ligne → carte arrondie en bas d'écran,
     sans recouvrir la barre du haut ; texte sur sa ligne, boutons alignés dessous. */
  @media(max-width:560px){
    .ver-banner{top:auto;bottom:16px;left:12px;right:12px;max-width:none;transform:translateY(calc(100% + 24px));border-radius:20px;justify-content:flex-start;gap:10px;padding:14px 16px;}
    .ver-banner.show{transform:translateY(0);}
    .ver-banner>span{flex:1 1 100%;padding-right:0;}
    .ver-reload{padding:8px 18px;}
    .ver-close{margin-left:auto;}
  }
  .fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;background:var(--card);outline:none;transition:border-color .14s,box-shadow .14s;}
  .fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-soft);}
  /* Select autonome (hors .fld) : même habillage soigné que les champs de formulaire. */
  .sel{font:inherit;font-size:13px;font-weight:500;color:var(--ink);padding:8px 34px 8px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);cursor:pointer;outline:none;transition:border-color .14s,box-shadow .14s;}
  .sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  /* Chevron maison sur tous les selects (formulaire + autonomes) — apparence cohérente. */
  .fld select,.sel{-webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:11px;}
  .fld select{padding-right:34px;}
  /* iOS/iPadOS : les champs date/heure natifs prennent une largeur intrinsèque et un
     habillage propre → dans une grille .g2 ils débordent et « se touchent ». On neutralise
     l'apparence native (ils respectent alors width:100%), on les laisse rétrécir, et on
     aligne la valeur à gauche comme les autres champs (iOS la centre par défaut). */
  .fld input[type="date"],.fld input[type="time"]{-webkit-appearance:none;appearance:none;min-width:0;}
  .fld input[type="date"]::-webkit-date-and-time-value,
  .fld input[type="time"]::-webkit-date-and-time-value{text-align:left;margin:0;}
  .fld input[type="date"]::-webkit-datetime-edit,
  .fld input[type="time"]::-webkit-datetime-edit{padding:0;}
  /* Enfants d'une grille : autoriser le rétrécissement sous leur largeur intrinsèque
     (sinon un champ date/heure iOS trop large déborde et chevauche le voisin). */
  .g2>*,.g3>*{min-width:0;}
  .fld textarea{resize:vertical;min-height:66px;}
  .fhint{font-size:11.5px;color:var(--grey-2);margin-top:6px;font-weight:500;line-height:1.45;}
  .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .chips.c3{grid-template-columns:1fr 1fr 1fr;}
  .chip{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;background:var(--card);cursor:pointer;font-size:13px;font-weight:500;transition:all .13s;}
  .chip:hover{border-color:var(--grey-2);}
  .chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dk);font-weight:600;}
  .chip .bx{width:18px;height:18px;border-radius:6px;border:1.6px solid var(--grey-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;transition:all .13s;}
  .chip.on .bx{background:var(--accent);border-color:var(--accent);}
  .chip.on .bx::after{content:"✓";}   /* coche via CSS : jamais dans le textContent collecté */
  .grades{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .gopt{border:1.6px solid var(--line-2);border-radius:13px;padding:14px;cursor:pointer;text-align:center;transition:all .14s;}
  .gopt:hover{border-color:var(--grey-2);}
  .gopt.on{border-color:var(--accent);background:var(--accent-soft);}
  .gopt .gl{width:34px;height:34px;border-radius:10px;margin:0 auto 8px;color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .gopt .gt{font-size:13px;font-weight:700;}
  .gopt .gd{font-size:11px;color:var(--grey-1);margin-top:2px;font-weight:500;}
  .drop{border:1.6px dashed var(--line-2);border-radius:13px;padding:22px;text-align:center;cursor:pointer;transition:all .14s;}
  .drop:hover{border-color:var(--accent);background:var(--accent-soft);}
  .drop .di{font-size:23px;}
  .drop .dt{font-size:13.5px;font-weight:600;color:var(--grey-1);margin-top:6px;}
  .drop .ds{font-size:11.5px;color:var(--grey-2);margin-top:2px;font-weight:500;}
  .legal{display:flex;gap:10px;background:#fff8ec;border:1px solid #f3e2bf;border-radius:12px;padding:12px 14px;font-size:12px;color:#8a6510;line-height:1.5;font-weight:500;margin-top:4px;}
  .legal .li{flex-shrink:0;}
  .lock-note{display:flex;gap:9px;align-items:center;background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:12px;color:var(--accent-dk);font-weight:600;}
  .ffoot{padding:18px 28px;background:var(--fill);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
  .ffoot .fn{font-size:12px;color:var(--grey-1);font-weight:500;}
  .ro-form.locked input,.ro-form.locked select,.ro-form.locked textarea{pointer-events:none;background:var(--fill);color:var(--grey-1);}
  .ro-form.locked .chip,.ro-form.locked .gopt,.ro-form.locked .drop,.ro-form.locked .sigpad,.ro-form.locked .lock-tab,.ro-form.locked .pattern{pointer-events:none;opacity:.65;}
  .lock-tabs{display:flex;gap:8px;margin-bottom:14px;}
  .lock-tab{flex:1;border:1.6px solid var(--line-2);border-radius:11px;padding:10px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;color:var(--grey-1);transition:all .13s;}
  .lock-tab:hover{border-color:var(--grey-2);}
  .lock-tab.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dk);}
  .lock-body{display:none;}
  .lock-body.on{display:block;animation:rise .25s ease;}
  .pattern-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
  .pattern{position:relative;width:188px;height:188px;background:var(--fill);border-radius:16px;padding:24px;cursor:pointer;user-select:none;}
  .pattern svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .pgrid{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);}
  .pnode{display:flex;align-items:center;justify-content:center;}
  .pdot{width:18px;height:18px;border-radius:50%;background:var(--line-2);transition:all .14s;}
  .pnode.act .pdot{background:var(--accent);transform:scale(1.35);box-shadow:0 0 0 6px var(--accent-soft);}
  .pattern-info{font-size:12px;color:var(--grey-1);font-weight:600;}
  .pattern-info b{color:var(--accent);}
  .sigpad{border:1.6px solid var(--line-2);border-radius:13px;background:#fff;cursor:crosshair;display:block;width:100%;touch-action:none;}
  .sigpad-wrap{position:relative;}
  .sigpad-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--grey-2);font-size:13px;font-style:italic;pointer-events:none;}
  .sigpad-bar{display:flex;justify-content:space-between;align-items:center;margin-top:7px;}
  .sigclear{font:inherit;font-size:12px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;}
  .sigclear:hover{text-decoration:underline;}
  .toggle-row{display:flex;align-items:center;gap:12px;background:var(--fill);border-radius:12px;padding:12px 15px;}
  .toggle{width:44px;height:26px;border-radius:980px;background:var(--line-2);position:relative;cursor:pointer;flex-shrink:0;transition:background .18s;}
  .toggle .kn{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow);transition:left .18s;}
  .toggle.on{background:var(--green);}
  .toggle.on .kn{left:21px;}
  .toggle-tx{font-size:13px;font-weight:600;}
  .toggle-tx .ts{font-size:11.5px;color:var(--grey-1);font-weight:500;}
  /* ---- À COMMANDER ---- */
  .deadline-banner{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px 18px;margin-bottom:22px;}
  .deadline-banner.urgent{background:#fdeee6;border:1px solid #f3cdb8;}
  .deadline-banner.clear{background:#eaf6ec;border:1px solid #c4e6cc;}
  .db-ic{width:44px;height:44px;border-radius:12px;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;}
  .deadline-banner.urgent .db-ic{background:#e0683a;}
  .deadline-banner.clear .db-ic{background:var(--green);}
  .db-tx{flex:1;}
  .db-tx .db-t{font-size:14.5px;font-weight:800;}
  .db-tx .db-s{font-size:12.5px;color:var(--grey-1);font-weight:500;margin-top:2px;}
  .db-count{text-align:center;background:var(--card);border-radius:12px;padding:9px 16px;flex-shrink:0;}
  .db-count .dc-n{font-size:21px;font-weight:800;line-height:1;}
  .deadline-banner.urgent .dc-n{color:#e0683a;}
  .deadline-banner.clear .dc-n{color:var(--green);}
  .db-count .dc-l{font-size:10px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin-top:3px;}
  .shop-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;}
  .shop-block-h{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--fill);}
  .shop-block-h .sb-dot{width:9px;height:9px;border-radius:50%;background:var(--green);}
  .shop-block-h .sb-name{font-size:14.5px;font-weight:800;}
  .shop-block-h .sb-meta{margin-left:auto;font-size:12px;font-weight:700;color:var(--grey-1);}
  .shop-block-h .sb-meta b{color:#e0683a;}
  .supply-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);transition:background .15s;}
  .supply-row:last-child{border-bottom:none;}
  .supply-row.done{background:#fafdfb;}
  .supply-check{width:24px;height:24px;border-radius:8px;border:2px solid var(--line-2);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;transition:all .14s;}
  .supply-check:hover{border-color:var(--green);}
  .supply-check.on{background:var(--green);border-color:var(--green);}
  .supply-main{flex:1;min-width:0;}
  .supply-name{font-size:14px;font-weight:700;}
  .supply-row.done .supply-name{text-decoration:line-through;color:var(--grey-2);}
  .supply-from{font-size:11.5px;color:var(--grey-1);font-weight:600;margin-top:2px;}
  .supply-qty{font-size:13px;font-weight:800;background:var(--fill);padding:5px 11px;border-radius:980px;flex-shrink:0;}
  .supply-origin{font-size:10px;font-weight:700;padding:3px 9px;border-radius:980px;flex-shrink:0;}
  .supply-origin.rep{background:var(--accent-soft);color:var(--accent-dk);}
  .supply-origin.cmd{background:#f3edff;color:#5b35d6;}
  .supply-origin.stk{background:#fff0d6;color:#9a6c10;}
  .supply-urgent{font-size:10px;font-weight:700;color:#e0683a;flex-shrink:0;}
  .ov{position:fixed;inset:0;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .28s;z-index:90;backdrop-filter:blur(2px);}
  .ov.show{opacity:1;pointer-events:auto;}
  /* Pas d'ombre tiroir fermé : garé hors écran (translateX(100%)), son flou de 48px
     resterait visible en bande sombre sur le bord droit de la page. */
  .drw{position:fixed;top:0;right:0;height:100%;width:438px;max-width:93vw;background:var(--card);box-shadow:none;z-index:100;transform:translateX(100%);transition:transform .36s cubic-bezier(.32,.72,.3,1),box-shadow .36s;display:flex;flex-direction:column;}
  .drw.show{transform:translateX(0);box-shadow:var(--shadow-lg);}
  .drw-h{padding:22px 24px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;}
  .drw-h h3{font-size:21px;font-weight:800;letter-spacing:-.02em;}
  .drw-h .hid{font-size:12.5px;color:var(--grey-2);margin-top:3px;font-weight:600;}
  .xb{width:32px;height:32px;border-radius:50%;border:none;background:var(--fill);cursor:pointer;font-size:15px;color:var(--grey-1);display:flex;align-items:center;justify-content:center;}
  .xb:hover{background:var(--line-2);}
  .drw-b{padding:22px 24px;overflow-y:auto;flex:1;}
  .row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
  .row .k{color:var(--grey-1);font-weight:500;}
  .row .v{font-weight:600;text-align:right;}
  .mini-h{font-size:11.5px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 8px;}
  .step{display:flex;align-items:center;gap:11px;margin:5px 0;}
  .step .sd{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .step .stx{font-size:13px;}
  .step.done .stx{font-weight:600;}
  .step.todo .stx{color:var(--grey-2);}
  /* Notes atelier : fil d'événements + zone de saisie. */
  .ev{padding:9px 11px;border-radius:9px;background:var(--fill);margin-bottom:6px;border:1px solid var(--line);}
  .ev-step{background:transparent;border-color:transparent;padding:5px 0;margin-bottom:2px;}
  .ev-alert{background:#fff4ec;border-color:#ffd6bf;}
  .ev-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
  .ev-tx{font-size:13px;line-height:1.45;white-space:pre-wrap;}
  .ev-step .ev-tx{font-size:12.5px;color:var(--grey-1);font-weight:600;}
  .ev-meta{font-size:11px;color:var(--grey-2);font-weight:600;margin-top:4px;}
  .ev-flag{font-size:11px;font-weight:800;color:#b23b00;white-space:nowrap;}
  .ev-ack{font-size:11px;font-weight:700;color:var(--green);white-space:nowrap;}
  .ev-ackbtn{font-size:11px;font-weight:700;color:#fff;background:var(--green);border:0;border-radius:980px;padding:4px 10px;cursor:pointer;white-space:nowrap;}
  .ev-ackbtn:hover{filter:brightness(.95);}
  .note-compose{margin-top:9px;}
  .note-compose textarea{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;font:inherit;font-size:13px;resize:vertical;background:var(--card);color:inherit;box-sizing:border-box;}
  .note-compose-b{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap;}
  .step .sx{margin-left:auto;font-size:11px;color:var(--grey-2);font-weight:600;}
  .drw-f{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:9px;}
  .drw-f .btn{flex:1;justify-content:center;}
  /* « Étape précédente » et « Étape suivante » : même dessin, couleur différente
     (grise pour reculer, verte pour avancer). L'action contextuelle, à gauche,
     se réduit à son icône. */
  .drw-f .btn.drw-ico{flex:0 0 auto;min-width:46px;padding-left:14px;padding-right:14px;font-size:17px;}
  .drw-f .btn.drw-prev:disabled{opacity:.45;cursor:default;}
  .drw-ro{padding:12px 24px;background:#f0ecff;font-size:12px;color:#5b35d6;font-weight:600;text-align:center;}
  .modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.34);opacity:0;pointer-events:none;transition:opacity .25s;z-index:110;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;}
  .modal-ov.show{opacity:1;pointer-events:auto;}
  .modal{background:var(--card);border-radius:22px;width:540px;max-width:100%;box-shadow:var(--shadow-lg);overflow:hidden;transform:scale(.94);transition:transform .28s cubic-bezier(.16,1,.3,1);max-height:90vh;display:flex;flex-direction:column;}
  .modal-ov.show .modal{transform:scale(1);}
  .modal-h{padding:24px 26px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;}
  .modal-h h3{font-size:20px;font-weight:800;letter-spacing:-.02em;}
  .modal-h p{font-size:13px;color:var(--grey-1);margin-top:3px;font-weight:500;}
  .modal-b{padding:22px 26px;overflow-y:auto;}
  .modal-f{padding:18px 26px;background:var(--fill);display:flex;justify-content:space-between;align-items:center;gap:12px;}
  .opt-label{font-size:12.5px;font-weight:700;color:var(--grey-1);margin-bottom:9px;}
  /* Case à cocher de formulaire (première du projet : « Urgent » sur À commander). */
  .chk{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;}
  .chk input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
  /* Ligne de saisie d'une pièce à commander (modale « Attente pièce »). */
  .part-row{display:grid;grid-template-columns:1fr 84px auto;gap:9px;align-items:center;margin-bottom:9px;}
  .part-row input[type=text],.part-row .pr-label,.part-row .pr-qty{font:inherit;font-size:14px;color:var(--ink);padding:10px 12px;border:1px solid var(--line-2);border-radius:11px;background:var(--card);outline:none;width:100%;transition:border-color .14s,box-shadow .14s;}
  .part-row .pr-label:focus,.part-row .pr-qty:focus{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-soft);}
  @media(max-width:480px){ .part-row{grid-template-columns:1fr 70px auto;gap:6px;} }
  .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;}
  .month-opt{border:1.6px solid var(--line-2);border-radius:11px;padding:11px 8px;text-align:center;cursor:pointer;font-size:13px;font-weight:600;transition:all .13s;}
  .month-opt:hover{border-color:var(--grey-2);}
  .month-opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dk);}
  .fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
  .fmt-opt{border:1.6px solid var(--line-2);border-radius:13px;padding:15px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .13s;}
  .fmt-opt:hover{border-color:var(--grey-2);}
  .fmt-opt.on{border-color:var(--accent);background:var(--accent-soft);}
  .fmt-ic{width:38px;height:38px;border-radius:10px;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;}
  .fmt-tx .ft{font-size:13.5px;font-weight:700;}
  .fmt-tx .fd{font-size:11.5px;color:var(--grey-1);font-weight:500;margin-top:1px;}
  .preview{background:var(--fill);border-radius:12px;padding:14px 16px;}
  .preview-h{font-size:11.5px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
  .preview-row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;font-weight:500;}
  .preview-row.tot{border-top:1px solid var(--line-2);margin-top:6px;padding-top:9px;font-weight:700;}
  .preview-row .pv{color:var(--grey-1);}
  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:980px;font-size:13.5px;font-weight:600;z-index:120;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;transition:transform .34s cubic-bezier(.32,.72,.3,1);}
  .toast.show{transform:translateX(-50%) translateY(0);}
  .toast .tk{color:#5edb84;}
  /* ---- TABLEAU DE BORD PILOTAGE ---- */
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:14px;}
  .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
  .kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
  .kpi-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;}
  .kpi-label{font-size:12px;font-weight:700;color:var(--grey-1);}
  .kpi-val{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;}
  .kpi-sub{font-size:12px;font-weight:600;margin-top:7px;}
  .kpi-sub.up{color:var(--green);}
  .kpi-sub.down{color:#e0683a;}
  .kpi-sub.flat{color:var(--grey-2);}
  .dash-sectitle{font-size:13px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin:26px 0 13px;}
  .compare{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .compare-h{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:12px;padding:13px 22px;font-size:11px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line);}
  .compare-r{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:12px;padding:15px 22px;font-size:13.5px;align-items:center;border-bottom:1px solid var(--line);}
  .compare-r:last-child{border-bottom:none;}
  .compare-r .shop{font-weight:700;display:flex;align-items:center;gap:8px;}
  .compare-r .shop .cd{width:8px;height:8px;border-radius:50%;background:var(--green);}
  .compare-r .num{font-weight:700;}
  .compare-r.tot{background:var(--fill);font-weight:800;}
  .bar-track{height:7px;background:var(--fill);border-radius:980px;overflow:hidden;margin-top:5px;}
  .bar-fill{height:100%;border-radius:980px;}
  /* ---- bloc suivi client (drawer) ---- */
  .client-link{background:#eef6e3;border:1px solid #d4e7b8;border-radius:12px;padding:13px 15px;}
  .client-link .cl-h{font-size:12px;font-weight:700;color:var(--accent-dk);display:flex;align-items:center;gap:7px;}
  .client-link .cl-url{font-size:12px;font-weight:600;color:var(--accent-dk);background:var(--card);border-radius:8px;padding:8px 11px;margin-top:8px;word-break:break-all;font-family:monospace;}
  .client-link .cl-actions{display:flex;gap:8px;margin-top:9px;}
  .cl-btn{flex:1;font:inherit;font-size:12px;font-weight:600;padding:8px;border-radius:8px;border:none;cursor:pointer;background:var(--card);color:var(--accent-dk);}
  .cl-btn:hover{background:#d4e6f8;}
  .cl-note{font-size:11px;color:var(--grey-1);font-weight:500;margin-top:8px;line-height:1.45;}
  /* ---- PLANNING ---- */
  .planning{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .pl-grid{display:grid;grid-template-columns:160px repeat(7,1fr);}
  .pl-cell{padding:12px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-height:64px;}
  .pl-cell:nth-child(8n){border-right:none;}
  .pl-head{background:var(--fill);font-size:12px;font-weight:700;text-align:center;color:var(--grey-1);min-height:auto;padding:11px 8px;}
  .pl-head.today{color:var(--accent);}
  .pl-emp{display:flex;align-items:center;gap:9px;background:var(--fill);}
  .pl-emp .pe-av{width:30px;height:30px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pl-emp .pe-tx{line-height:1.25;}
  .pl-emp .pe-n{font-size:13px;font-weight:700;}
  .pl-emp .pe-r{font-size:10.5px;color:var(--grey-2);font-weight:600;}
  .shift{border-radius:8px;padding:6px 8px;font-size:11.5px;font-weight:700;text-align:center;line-height:1.3;}
  .shift.work{background:var(--accent-soft);color:var(--accent-dk);}
  .shift.off{background:var(--fill);color:var(--grey-2);font-weight:600;}
  .shift.leave{background:#fff0d6;color:#9a6c10;}
  .shift.repl{background:#eaf6ec;color:var(--green);}
  .shift .sh-tag{font-size:9.5px;font-weight:700;display:block;margin-top:2px;opacity:.8;}
  .pl-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding:0 4px;}
  .pl-leg{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--grey-1);}
  .pl-leg .lg-sw{width:14px;height:14px;border-radius:5px;}
  .week-nav{display:flex;align-items:center;gap:10px;}
  .week-nav button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line-2);background:var(--card);cursor:pointer;font-size:14px;color:var(--grey-1);}
  .week-nav button:hover{border-color:var(--accent);color:var(--accent);}
  .week-nav .wk-label{font-size:13.5px;font-weight:700;}
  /* ---- DIAGNOSTIC GUIDÉ ---- */
  .diag-step{margin-bottom:18px;}
  .diag-step:last-child{margin-bottom:0;}
  .diag-label{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:9px;display:flex;align-items:center;gap:8px;}
  .diag-label .dn{width:20px;height:20px;border-radius:6px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .diag-label.muted .dn{background:var(--line-2);color:var(--grey-2);}
  .diag-label.muted{color:var(--grey-2);}
  .brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
  .brand-opt{border:1.6px solid var(--line-2);border-radius:12px;padding:14px 8px;text-align:center;cursor:pointer;transition:all .13s;}
  .brand-opt:hover{border-color:var(--grey-2);}
  .brand-opt.on{border-color:var(--accent);background:var(--accent-soft);}
  .brand-opt .bo-logo{font-size:22px;}
  .brand-opt .bo-name{font-size:12.5px;font-weight:700;margin-top:5px;}
  .symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .symptom-opt{display:flex;align-items:center;gap:11px;border:1.6px solid var(--line-2);border-radius:12px;padding:12px 14px;cursor:pointer;transition:all .13s;}
  .symptom-opt:hover{border-color:var(--grey-2);}
  .symptom-opt.on{border-color:var(--accent);background:var(--accent-soft);}
  .symptom-opt .sy-ic{width:34px;height:34px;border-radius:9px;background:var(--fill);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
  .symptom-opt.on .sy-ic{background:var(--card);}
  .symptom-opt .sy-tx{font-size:13px;font-weight:700;line-height:1.3;}
  .symptom-opt .sy-tx span{display:block;font-size:11px;color:var(--grey-1);font-weight:500;}
  .diag-checklist{border:1px solid var(--line);border-radius:14px;overflow:hidden;}
  .diag-cl-head{display:flex;align-items:center;gap:8px;padding:11px 15px;font-size:12px;font-weight:700;}
  .diag-cl-head.constat{background:var(--accent-soft);color:var(--accent-dk);}
  .diag-cl-head.test{background:#eaf6ec;color:var(--green);}
  .diag-q{display:flex;align-items:center;gap:12px;padding:13px 15px;border-top:1px solid var(--line);}
  .diag-q .dq-tx{flex:1;font-size:13px;font-weight:600;}
  .diag-q .dq-tx span{display:block;font-size:11px;color:var(--grey-1);font-weight:500;margin-top:1px;}
  .triple{display:flex;gap:5px;flex-shrink:0;}
  .tri-btn{font:inherit;font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--card);cursor:pointer;color:var(--grey-1);transition:all .12s;}
  .tri-btn:hover{border-color:var(--grey-2);}
  .tri-btn.on-ok{background:#eaf6ec;border-color:var(--green);color:var(--green);}
  .tri-btn.on-ko{background:#fdeee6;border-color:#e0683a;color:#e0683a;}
  .tri-btn.on-na{background:var(--fill);border-color:var(--grey-2);color:var(--grey-1);}
  .diag-empty{padding:22px 15px;text-align:center;color:var(--grey-2);font-size:12.5px;font-weight:500;}
  .diag-summary{background:#f3edff;border:1px solid #ddd2ff;border-radius:12px;padding:13px 15px;margin-top:14px;}
  .diag-summary .ds-h{font-size:12px;font-weight:700;color:#5b35d6;display:flex;align-items:center;gap:7px;}
  .diag-summary .ds-c{font-size:12px;color:#5b35d6;font-weight:600;margin-top:6px;line-height:1.5;}
  /* ---- BADGE ORIGINE ---- */
  .origin-box{border-radius:13px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;}
  .origin-box.match{background:#eaf6ec;border:1px solid #c4e6cc;}
  .origin-box.none{background:var(--fill);border:1px solid var(--line-2);}
  .origin-ic{width:38px;height:38px;border-radius:10px;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;}
  .origin-box.match .origin-ic{background:var(--green);}
  .origin-box.none .origin-ic{background:var(--grey-2);}
  .origin-tx{flex:1;}
  .origin-tx .ot-t{font-size:13.5px;font-weight:800;}
  .origin-box.match .ot-t{color:var(--green);}
  .origin-tx .ot-s{font-size:12px;color:var(--grey-1);font-weight:500;margin-top:3px;line-height:1.5;}
  .origin-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;}
  .origin-tag{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:980px;background:var(--card);color:var(--green);}
  /* ---- VENDEUR ASSISTÉ ---- */
  .ai-intro{background:linear-gradient(135deg,#1d1d1f,#3a3a40);color:#fff;border-radius:var(--radius);padding:22px 24px;margin-bottom:22px;display:flex;gap:15px;align-items:center;}
  .ai-intro .ai-orb{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#62b616,#2f7d4f);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
  .ai-intro .ai-tx h3{font-size:16px;font-weight:800;}
  .ai-intro .ai-tx p{font-size:12.5px;color:#b8b8bd;font-weight:500;margin-top:3px;line-height:1.5;}
  .demo-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.12);color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:980px;margin-top:7px;}
  .cmp-pick{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:18px;}
  .cmp-slot{border:1.6px solid var(--line-2);border-radius:13px;padding:14px;background:var(--card);}
  .cmp-slot label{font-size:11.5px;font-weight:700;color:var(--grey-1);display:block;margin-bottom:7px;}
  .cmp-slot select{width:100%;font:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--fill);outline:none;}
  .cmp-vs{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .cmp-result{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .cmp-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;}
  .cmp-card-h{padding:14px 16px;background:var(--fill);border-bottom:1px solid var(--line);}
  .cmp-card-h .cc-n{font-size:15px;font-weight:800;}
  .cmp-card-h .cc-p{font-size:12.5px;color:var(--accent);font-weight:700;margin-top:2px;}
  .cmp-spec{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;font-size:12.5px;border-bottom:1px solid var(--line);}
  .cmp-spec:last-of-type{border-bottom:none;}
  .cmp-spec .cs-k{color:var(--grey-1);font-weight:500;}
  .cmp-spec .cs-v{font-weight:700;text-align:right;}
  .cmp-spec .cs-v.win{color:var(--green);}
  .cmp-args{padding:13px 16px;background:#f3edff;}
  .cmp-args .ca-h{font-size:11px;font-weight:800;color:#5b35d6;text-transform:uppercase;letter-spacing:.03em;margin-bottom:7px;}
  .cmp-args ul{margin:0;padding-left:16px;}
  .cmp-args li{font-size:12px;color:#4a2bb8;font-weight:600;margin:4px 0;line-height:1.4;}
  .verdict{background:#eef6e3;border:1px solid #d4e7b8;border-radius:13px;padding:14px 16px;margin-top:14px;}
  .verdict .vd-h{font-size:12px;font-weight:800;color:var(--accent-dk);display:flex;align-items:center;gap:7px;}
  .verdict .vd-c{font-size:13px;color:var(--accent-dk);font-weight:600;margin-top:6px;line-height:1.55;}
  .ask-box{border:1px solid var(--line);border-radius:14px;overflow:hidden;}
  .ask-feed{padding:18px;min-height:120px;}
  .ask-msg{margin-bottom:14px;}
  .ask-msg:last-child{margin-bottom:0;}
  .ask-q{display:flex;gap:9px;justify-content:flex-end;}
  .ask-q .aq-b{background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:10px 14px;border-radius:14px 14px 4px 14px;max-width:80%;}
  .ask-a{display:flex;gap:10px;}
  .ask-a .aa-orb{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#62b616,#2f7d4f);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;}
  .ask-a .aa-b{background:var(--fill);font-size:13px;font-weight:500;padding:11px 14px;border-radius:14px 14px 14px 4px;line-height:1.55;color:var(--ink);}
  .ask-a .aa-b b{font-weight:800;}
  .ask-suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px;}
  .ask-chip{font:inherit;font-size:12px;font-weight:600;padding:8px 13px;border-radius:980px;border:1px solid var(--line-2);background:var(--card);cursor:pointer;color:var(--accent-dk);transition:all .13s;}
  .ask-chip:hover{border-color:var(--accent);background:var(--accent-soft);}
  .ask-bar{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--line);background:var(--fill);}
  .ask-bar input{flex:1;font:inherit;font-size:13.5px;padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;background:var(--card);outline:none;}
  .ask-bar input:focus{border-color:var(--accent);}
  /* ---- ÉCRAN DE CONNEXION ---- */
  .login-screen{position:fixed;inset:0;background:var(--bg);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;}
  .login-screen.hide{display:none;}
  /* Tant qu'on n'est pas connecté : RIEN de l'app n'existe derrière le login (ni contenu
     de maquette, ni données résiduelles d'une session précédente). Seul l'écran de login
     est rendu → impossible d'apercevoir ou de scroller vers l'interface. */
  body.pre-auth > *:not(#login-screen){display:none !important;}
  .login-card{width:400px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden;}
  .login-top{padding:32px 32px 24px;text-align:center;border-bottom:1px solid var(--line);}
  .login-logo{height:38px;width:auto;display:block;margin:0 auto 14px;}
  .login-top p{font-size:13px;color:var(--grey-1);font-weight:500;margin-top:5px;}
  .login-body{padding:26px 32px;}
  .login-fld{margin-bottom:15px;}
  .login-fld label{display:block;font-size:12.5px;font-weight:700;color:var(--grey-1);margin-bottom:7px;}
  .login-fld input{width:100%;font:inherit;font-size:14px;padding:12px 14px;border:1px solid var(--line-2);border-radius:11px;background:var(--fill);outline:none;transition:border-color .14s,box-shadow .14s,background .14s;}
  .login-fld input:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3.5px var(--accent-soft);}
  .login-err{background:#fdecec;color:#c0341d;border:1px solid #f4c9c2;border-radius:11px;padding:11px 14px;font-size:12.5px;font-weight:600;margin-bottom:14px;line-height:1.4;}
  .login-err[hidden]{display:none;}
  /* Encart d'aide « Problème de connexion ? ». Le toast est inutilisable ici (il passe derrière l'overlay du login). */
  .login-info{background:var(--accent-soft);color:var(--accent-dk);border:1px solid #d3e8b6;border-radius:11px;padding:11px 14px;font-size:12.5px;font-weight:600;margin-bottom:14px;line-height:1.45;}
  .login-info::before{content:'ⓘ ';font-weight:700;}
  .login-info[hidden]{display:none;}
  .login-btn{width:100%;font:inherit;font-size:14.5px;font-weight:700;padding:13px;border-radius:12px;border:none;background:var(--accent);color:#fff;cursor:pointer;transition:background .15s,transform .12s;margin-top:4px;}
  .login-btn:hover{background:var(--accent-dk);}
  .login-btn:active{transform:scale(.98);}
  .login-btn:disabled{opacity:.6;cursor:progress;transform:none;}

  /* Module Employés */
  .emp-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:9px;flex-wrap:wrap;}
  .emp-main{flex:1;min-width:160px;}
  .emp-name{font-size:14px;font-weight:700;}
  .emp-sub{font-size:12px;color:var(--grey-2);font-weight:600;margin-top:2px;}
  .emp-me{font-size:10.5px;font-weight:700;color:var(--accent-dk);background:var(--accent-soft);padding:1px 6px;border-radius:6px;margin-left:4px;}
  .emp-badge{font-size:11px;font-weight:700;color:var(--amber);white-space:nowrap;}
  .emp-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .emp-off{opacity:.55;}

  /* Photos : aperçu au formulaire + pièces jointes dans le détail */
  .photo-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .pp-thumb{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
  .pp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .pp-rm{position:absolute;top:2px;right:2px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:10px;line-height:1;cursor:pointer;padding:0;}
  #d-files{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 2px;}
  .d-file{display:block;width:84px;text-align:center;font-size:10.5px;color:var(--grey-2);font-weight:600;text-decoration:none;}
  .d-file img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block;margin-bottom:3px;}
  .imei-hist{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
  .imei-hist-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;color:var(--grey-1);}
  .login-forgot{text-align:center;margin-top:13px;}
  .login-forgot a{font-size:12.5px;color:var(--accent-dk);font-weight:600;cursor:pointer;}
  .login-forgot a:hover{text-decoration:underline;}
  .login-demo{background:var(--fill);padding:18px 32px 24px;}
  .login-demo-h{font-size:11px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:11px;text-align:center;}
  .demo-accounts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .demo-acc{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line-2);border-radius:11px;padding:9px 11px;cursor:pointer;transition:border-color .13s,transform .12s;}
  .demo-acc:hover{border-color:var(--accent);transform:translateY(-1px);}
  .demo-acc .da-av{width:30px;height:30px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .demo-acc .da-tx{line-height:1.25;min-width:0;}
  .demo-acc .da-n{font-size:12.5px;font-weight:700;}
  .demo-acc .da-r{font-size:10.5px;color:var(--grey-2);font-weight:600;}
  .login-note{font-size:11px;color:var(--grey-2);font-weight:500;text-align:center;margin-top:13px;line-height:1.5;}
  /* bouton déconnexion topbar */
  .logout-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--card);cursor:pointer;font-size:15px;color:var(--grey-1);display:flex;align-items:center;justify-content:center;transition:all .14s;}
  .logout-btn:hover{border-color:#e0683a;color:#e0683a;}
  /* ---- FICHE CLIENT ---- */
  .client-search{display:flex;gap:10px;margin-bottom:20px;}
  .client-search input{flex:1;font:inherit;font-size:14px;padding:12px 15px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);outline:none;transition:border-color .14s,box-shadow .14s;}
  .client-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-soft);}
  .client-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
  .client-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;display:flex;align-items:center;gap:13px;transition:transform .14s,box-shadow .14s,border-color .14s;}
  .client-row:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2);}
  .client-av{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dk);font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .client-row .cr-tx{min-width:0;flex:1;}
  .client-row .cr-n{font-size:14.5px;font-weight:700;}
  .client-row .cr-s{font-size:12px;color:var(--grey-1);font-weight:500;margin-top:2px;}
  .client-row .cr-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:980px;background:var(--accent-soft);color:var(--accent-dk);}
  /* fiche détail */
  .cf-header{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;gap:18px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
  .cf-av{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;font-size:23px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .cf-id h2{font-size:23px;font-weight:800;letter-spacing:-.02em;}
  .cf-id .cf-contact{font-size:13px;color:var(--grey-1);font-weight:600;margin-top:3px;}
  .cf-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;}
  .cf-badge{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:980px;}
  .cf-badge.coral{background:var(--accent-soft);color:var(--accent-dk);}
  .cf-badge.vip{background:#fff0d6;color:#9a6c10;}
  .cf-stats{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap;}
  .cf-stat{text-align:center;background:var(--fill);border-radius:12px;padding:10px 16px;}
  .cf-stat .cs-n{font-size:20px;font-weight:800;line-height:1;}
  .cf-stat .cs-l{font-size:10.5px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.03em;margin-top:4px;}
  /* Note d'équipe partagée (fiche client). */
  .cf-note{margin-top:16px;margin-bottom:16px;}
  .cf-note-box{background:#fff8ec;border:1px solid #f3e2bf;border-radius:14px;padding:14px 16px;}
  .cf-note-h{display:flex;align-items:center;justify-content:space-between;color:#8a6510;font-size:13px;margin-bottom:6px;}
  .cf-note-btn{background:none;border:none;color:#8a6510;font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:0;}
  .cf-note-txt{font-size:13px;color:#6b4f0a;line-height:1.55;white-space:pre-wrap;}
  .cf-note-input{width:100%;font:inherit;font-size:13.5px;color:var(--ink);padding:11px 13px;border:1px solid #e6cf95;border-radius:11px;background:var(--card);outline:none;min-height:90px;resize:vertical;}
  .cf-note-input:focus{border-color:#d9a63a;}
  .cf-note-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:10px;}
  .cf-note-add{background:var(--card);border:1px dashed var(--line-2);border-radius:12px;padding:12px 16px;width:100%;font:inherit;font-size:13px;font-weight:600;color:var(--grey-1);cursor:pointer;transition:border-color .14s,color .14s;}
  .cf-note-add:hover{border-color:var(--accent);color:var(--accent-dk);}
  /* Actions rapides « créer pour ce client » (fiche) */
  .cf-actions{margin-bottom:16px;}
  .cf-actions-h{font-size:11.5px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
  .cf-actions-row{display:flex;flex-wrap:wrap;gap:9px;}
  .cf-action{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line-2);border-radius:11px;padding:10px 15px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:border-color .14s,color .14s,transform .14s,box-shadow .14s;}
  .cf-action:hover{border-color:var(--accent);color:var(--accent-dk);transform:translateY(-1px);box-shadow:var(--shadow);}
  .cf-action .cfa-ic{font-size:15px;}
  .timeline{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .tl-filters{display:flex;gap:6px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .tl-filter{font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:980px;border:1px solid var(--line-2);background:var(--card);cursor:pointer;color:var(--grey-1);transition:all .13s;}
  .tl-filter:hover{border-color:var(--grey-2);}
  .tl-filter.on{background:var(--ink);color:#fff;border-color:var(--ink);}
  .tl-event{display:flex;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);}
  .tl-event:last-child{border-bottom:none;}
  .tl-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
  .tl-ic.rep{background:var(--accent-soft);}
  .tl-ic.buy{background:#eef6e3;}
  .tl-ic.sav{background:#fdeee6;}
  .tl-ic.rachat{background:#f0ecff;}
  .tl-ic.cmd{background:#fff0d6;}
  .tl-body{flex:1;min-width:0;}
  .tl-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
  .tl-title{font-size:13.5px;font-weight:700;}
  .tl-date{font-size:11.5px;color:var(--grey-2);font-weight:600;flex-shrink:0;}
  .tl-desc{font-size:12.5px;color:var(--grey-1);font-weight:500;margin-top:3px;line-height:1.5;}
  .tl-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:980px;margin-top:7px;}
  .tl-tag.done{background:#eaf6ec;color:var(--green);}
  .tl-tag.ongoing{background:var(--accent-soft);color:var(--accent-dk);}
  /* ---- PAIEMENTS EN ATTENTE ---- */
  .pay-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
  .pay-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
  .pay-kpi .pk-l{font-size:12px;font-weight:700;color:var(--grey-1);}
  .pay-kpi .pk-n{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:6px;}
  .pay-kpi.due .pk-n{color:#e0683a;}
  .pay-table{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .pay-head{display:grid;grid-template-columns:1.5fr 1.6fr 90px 110px 110px;gap:14px;padding:13px 22px;font-size:11px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line);}
  .pay-row{display:grid;grid-template-columns:1.5fr 1.6fr 90px 110px 110px;gap:14px;padding:15px 22px;font-size:13px;align-items:center;border-bottom:1px solid var(--line);}
  .pay-row:last-child{border-bottom:none;}
  .pay-row .pr-debtor{font-weight:700;}
  .pay-row .pr-sub{font-size:11px;color:var(--grey-1);font-weight:500;margin-top:2px;}
  .pay-row .pr-amount{font-weight:800;}
  .pay-row .pr-date{font-weight:600;color:var(--grey-1);}
  .pay-row .pr-date.late{color:#e0683a;font-weight:700;}
  .pay-status{font-size:11px;font-weight:700;padding:4px 10px;border-radius:980px;text-align:center;}
  .pay-status.wait{background:var(--accent-soft);color:var(--accent-dk);}
  .pay-status.late{background:#fdeee6;color:#c0561f;}
  .pay-status.paid{background:#eaf6ec;color:var(--green);}
  .pay-row.done .pr-debtor,.pay-row.done .pr-amount{color:var(--grey-2);}
  /* ---- LOCATION SMARTPHONE ---- */
  .rent-formula{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
  .rent-f{border:1.6px solid var(--line-2);border-radius:13px;padding:14px;cursor:pointer;transition:all .14s;}
  .rent-f:hover{border-color:var(--grey-2);}
  .rent-f.on{border-color:var(--accent);background:var(--accent-soft);}
  .rent-f .rf-n{font-size:13.5px;font-weight:800;}
  .rent-f .rf-d{font-size:11.5px;color:var(--grey-1);font-weight:500;margin-top:3px;line-height:1.4;}
  .rent-sim{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .rent-sim-grid{display:grid;grid-template-columns:1fr 1fr;}
  .rent-inputs{padding:24px;border-right:1px solid var(--line);}
  .rent-result{padding:24px;background:var(--fill);}
  .rent-result-h{font-size:11px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:13px;}
  .rent-big{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1;}
  .rent-big.pos{color:var(--green);}
  .rent-big.neg{color:#e0683a;}
  .rent-big-l{font-size:12px;font-weight:600;color:var(--grey-1);margin-top:5px;}
  .rent-detail{margin-top:18px;border-top:1px solid var(--line-2);padding-top:14px;}
  .rent-detail-row{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;font-weight:500;}
  .rent-detail-row .rdv{font-weight:700;}
  .rent-detail-row.tot{border-top:1px solid var(--line-2);margin-top:7px;padding-top:9px;font-weight:700;}
  .rent-ratio{margin-top:14px;}
  .rent-ratio-bar{height:8px;background:var(--line-2);border-radius:980px;overflow:hidden;margin-top:6px;}
  .rent-ratio-fill{height:100%;background:var(--accent);border-radius:980px;transition:width .35s ease;}
  .rent-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:22px;}
  .rent-head{display:grid;grid-template-columns:1.3fr 1.4fr 90px 110px 100px;gap:14px;padding:13px 22px;font-size:11px;font-weight:700;color:var(--grey-2);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line);}
  .rent-row{display:grid;grid-template-columns:1.3fr 1.4fr 90px 110px 100px;gap:14px;padding:15px 22px;font-size:13px;align-items:center;border-bottom:1px solid var(--line);}
  .rent-row:last-child{border-bottom:none;}
  .rent-row .rr-n{font-weight:700;}
  .rent-row .rr-s{font-size:11px;color:var(--grey-1);font-weight:500;margin-top:2px;}
  .rent-row .rr-amount{font-weight:800;}
  .legal-strong{display:flex;gap:10px;background:#fff8ec;border:1px solid #f3e2bf;border-radius:12px;padding:13px 15px;font-size:12px;color:#8a6510;line-height:1.5;font-weight:500;margin-bottom:18px;}
  .hide{display:none !important;}
  @media(max-width:880px){
    .cmp-pick{grid-template-columns:1fr;}
    .cmp-vs{margin:0 auto;}
    .cmp-result{grid-template-columns:1fr;}
    .brand-grid{grid-template-columns:1fr 1fr;}
    .symptom-grid{grid-template-columns:1fr;}
    .pl-grid{grid-template-columns:120px repeat(7,minmax(74px,1fr));}
    .planning{overflow-x:auto;}
    .board.c5,.board.c4{grid-template-columns:1fr 1fr;}
    .g2,.g3,.chips,.chips.c3{grid-template-columns:1fr;}
    .hello h1{font-size:29px;}
    .phead{flex-direction:column;}
    .role-sw .lbl{display:none;}
    .deadline-banner{flex-wrap:wrap;}
    /* Tableaux : scroll horizontal encapsulé au lieu de déborder la page */
    .pay-table,.rent-list,.compare{overflow-x:auto;}
    .pay-head,.pay-row{min-width:640px;}
    .rent-head,.rent-row{min-width:560px;}
    .compare-h,.compare-r{min-width:560px;}
    #buyback-reg .fcard{overflow-x:auto;}
    #buyback-reg .fcard>div{min-width:600px;}
    /* Intégration employés + Base de connaissances : même traitement */
    #onboarding-list .fcard,#kb-list .fcard{overflow-x:auto;}
    #onb-rows{min-width:620px;}
    #kb-rows{min-width:560px;}
    /* Simulateur de location : colonnes empilées */
    .rent-sim-grid{grid-template-columns:1fr;}
    .rent-inputs{border-right:none;border-bottom:1px solid var(--line);}
  }
  @media(max-width:768px){
    .topbar-in{padding:0 18px;gap:10px;}
    .shop-pick{padding:6px 10px;}
    .shop-pick select{max-width:120px;}   /* 104px de texte + 16px pour le chevron */
    .wrap{padding:30px 18px 80px;}
    .fmt-grid,.rent-formula{grid-template-columns:1fr;}
  }
  @media(max-width:480px){
    .topbar-in{padding:0 14px;gap:7px;}
    .brand-tag{display:none;}
    .tb-user-tx{display:none;}
    .shop-pick select{max-width:90px;}    /* 74px de texte + 16px pour le chevron */
    .wrap{padding:22px 14px 72px;}
    .hello h1{font-size:24px;}
    .phead h2{font-size:24px;}
    .pay-summary{grid-template-columns:1fr;}
    .demo-accounts{grid-template-columns:1fr;}
    .modal-ov{padding:14px;}
  }

  /* Cloche « À traiter » (topbar) + panneau déroulant */
  /* Messagerie : bouton rond flottant (FAB) en bas à droite. */
  .msg-fab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:23px;cursor:pointer;box-shadow:var(--shadow-lg);z-index:90;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;}
  .msg-fab:hover{transform:translateY(-2px) scale(1.04);}
  .msg-fab:active{transform:scale(.96);}
  .msg-fab .tb-badge{top:0;right:0;}
  /* Messages non lus : halo pulsant + légère bascule, pour attirer l'œil. */
  .msg-fab.has-unread{animation:fabBob 2.4s ease-in-out infinite;}
  .msg-fab.has-unread::after{content:'';position:absolute;inset:0;border-radius:50%;z-index:-1;animation:fabPulse 1.9s ease-out infinite;}
  @keyframes fabPulse{0%{box-shadow:0 0 0 0 rgba(98,182,22,.55);}70%{box-shadow:0 0 0 18px rgba(98,182,22,0);}100%{box-shadow:0 0 0 0 rgba(98,182,22,0);}}
  @keyframes fabBob{0%,88%,100%{transform:translateY(0);}92%{transform:translateY(-4px);}96%{transform:translateY(-1px);}}
  @media(prefers-reduced-motion:reduce){ .msg-fab.has-unread,.msg-fab.has-unread::after{animation:none;} .msg-fab.has-unread{box-shadow:0 0 0 4px rgba(98,182,22,.35),var(--shadow-lg);} }
  @media(max-width:768px){ .msg-fab{right:16px;bottom:16px;width:54px;height:54px;} }
  /* Modules épinglés dans la barre du haut. */
  .pinned-apps{display:flex;align-items:center;gap:6px;}
  .pinned-app{width:36px;height:36px;border-radius:50%;border:none;background:var(--fill);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:background .15s,transform .12s;}
  .pinned-app:hover{background:var(--line-2);transform:translateY(-1px);}
  @media(max-width:560px){ .pinned-apps{display:none;} }   /* trop à l'étroit sur petit écran */
  /* Bouton « épingler » sur les tuiles de l'accueil. */
  .tile-pin{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;border:none;background:transparent;font-size:14px;line-height:1;cursor:pointer;opacity:0;filter:grayscale(1) opacity(.6);transition:opacity .15s,background .15s,filter .15s;}
  @media(hover:hover){ .tile:hover .tile-pin{opacity:1;} }
  /* Tactile (pas de vrai survol) : épingle toujours visible → un seul tap ouvre la tuile
     (sinon le 1er tap ne sert qu'à « survoler » et révéler l'épingle). */
  @media(hover:none){ .tile-pin{opacity:.85;} }
  .tile-pin:hover{background:var(--fill);filter:grayscale(1) opacity(1);}
  .tile-pin.on{opacity:1;filter:none;background:var(--accent-soft);}
  .tb-bell{position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;background:var(--fill);transition:background .15s;}
  .tb-bell:hover{background:var(--line-2);}
  .tb-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:980px;background:#e0683a;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .todo-panel{position:absolute;top:calc(100% + 8px);right:0;width:300px;max-width:86vw;background:var(--card);border:1px solid var(--line-2);border-radius:13px;box-shadow:var(--shadow-lg);z-index:200;overflow:hidden;}
  /* ---- Menu compte (avatar topbar) : préférences perso dont le thème ---- */
  .tb-user{cursor:pointer;position:relative;}
  .tb-user:hover{background:var(--fill);}
  .tb-caret{font-size:10px;color:var(--grey-2);margin-left:1px;transition:transform .15s;}
  .tb-user.open .tb-caret{transform:rotate(180deg);}
  .account-menu{position:absolute;top:calc(100% + 8px);right:0;width:250px;max-width:88vw;background:var(--card);border:1px solid var(--line-2);border-radius:13px;box-shadow:var(--shadow-lg);z-index:200;overflow:hidden;}
  /* Mobile : ancré au viewport (comme le panneau de notifications) pour ne jamais
     être rogné par le bord droit de l'écran ; lignes larges, faciles à toucher. */
  @media(max-width:560px){
    .account-menu{position:fixed;top:64px;right:12px;left:auto;width:auto;min-width:232px;max-width:calc(100vw - 24px);}
  }
  .account-menu-h{padding:13px 15px;}
  .account-menu-h .am-name{font-size:14px;font-weight:800;color:var(--ink);}
  .account-menu-h .am-role{font-size:11.5px;font-weight:600;color:var(--grey-2);margin-top:1px;}
  .theme-opts{display:flex;gap:8px;}
  .theme-opt{flex:1;border:1.6px solid var(--line-2);background:var(--card);border-radius:11px;padding:9px 4px 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;font-size:11px;font-weight:700;color:var(--grey-1);transition:border-color .14s,color .14s,transform .12s;}
  .theme-opt:hover{transform:translateY(-1px);}
  .theme-opt.active{border-color:var(--accent);color:var(--ink);}
  .theme-opt .tsw{width:100%;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.08);position:relative;overflow:hidden;}
  .theme-opt .tsw::after{content:"";position:absolute;right:5px;bottom:5px;width:11px;height:11px;border-radius:50%;background:#62b616;box-shadow:0 0 0 2px rgba(255,255,255,.55);}
  .tsw-light{background:#fbfbfb;}
  .tsw-dark{background:#0d1117;}
  .tsw-sepia{background:#fbf0d9;}
  .account-menu-foot{border-top:1px solid var(--line);}
  .account-menu-foot button{width:100%;text-align:left;font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:none;border:none;padding:13px 15px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .14s;}
  .account-menu-foot button:hover{background:var(--fill);}
  .account-menu-foot .amf-ic{color:#e0683a;font-size:15px;}
  .account-menu-foot .amf-ic-set{color:var(--grey-1);}
  /* ---- Page Réglages (liste verticale de cartes pleine largeur, uniformes :
         à gauche le titre + description, à droite le réglage) ---- */
  .set-list{display:flex;flex-direction:column;gap:16px;}
  .set-card{display:flex;gap:40px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;box-shadow:0 1px 2px rgba(16,16,16,.03);}
  .set-side{flex:0 0 300px;max-width:300px;}
  .set-side h3{font-size:16px;font-weight:800;color:var(--ink);}
  .set-side p{font-size:13.5px;color:var(--grey-1);margin-top:5px;font-weight:500;line-height:1.5;}
  .set-main{flex:1;min-width:0;}
  .set-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:14px;}
  .set-row:first-child{border-top:none;padding-top:2px;}
  .set-row .set-k{color:var(--grey-1);font-weight:600;}
  .set-row .set-v{color:var(--ink);font-weight:700;text-align:right;}
  .set-actions{margin-top:18px;}
  @media(max-width:760px){
    /* En colonne, align-items gère l'axe horizontal : il faut « stretch » pour que
       les enfants (dont set-main) occupent toute la largeur, sinon ils se réduisent
       à la largeur de leur contenu (ex. le bouton) et laissent un vide à droite. */
    .set-card{flex-direction:column;gap:16px;align-items:stretch;}
    .set-side{flex-basis:auto;max-width:none;}
  }
  /* Vignettes de thème : grille de 3 colonnes égales (remplit toujours la largeur,
     contrairement à flex qui pouvait laisser des vignettes étroites). Aperçu à ratio
     paysage constant via le hack padding-bottom (compatible partout). */
  .theme-opts-lg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:420px;}
  .theme-opts-lg .theme-opt{padding:12px 8px 10px;font-size:12.5px;gap:9px;}
  .theme-opts-lg .tsw{width:100%;height:0;padding-bottom:60%;}
  /* Mobile (cartes empilées) : les groupes de réglage occupent toute la largeur. */
  @media(max-width:760px){
    .theme-opts-lg{max-width:none;}
    .accent-opts{max-width:none;}
  }
  /* Couleur d'accentuation (pastilles) */
  .accent-opts{display:flex;flex-wrap:wrap;gap:12px;max-width:340px;}
  .accent-opt{width:40px;height:40px;border-radius:50%;border:none;background:var(--sw);cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .12s;outline:2px solid transparent;outline-offset:2px;}
  .accent-opt:hover{transform:scale(1.08);}
  .accent-opt.active{outline-color:var(--sw);}
  .accent-opt.active::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.4);}
  .accent-lock{display:flex;gap:8px;background:var(--fill);border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;font-size:12.5px;color:var(--grey-1);font-weight:600;margin-bottom:14px;max-width:360px;}
  .set-card.is-locked .accent-opts{opacity:.5;filter:grayscale(.3);}
  .set-card.is-locked .accent-opt{cursor:not-allowed;}
  .set-card.is-locked .accent-opt:hover{transform:none;}
  .demo-links{display:flex;flex-wrap:wrap;gap:10px;}
  /* Nouveautés — page dédiée (historique des évolutions) */
  .chlog-page{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;max-width:720px;display:flex;flex-direction:column;gap:24px;box-shadow:0 1px 2px rgba(16,16,16,.03);}
  .chlog-entry{position:relative;padding-left:18px;}
  .chlog-entry::before{content:"";position:absolute;left:0;top:5px;bottom:2px;width:3px;border-radius:3px;background:var(--accent);opacity:.55;}
  .chlog-date{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--grey-2);margin-bottom:11px;}
  .chlog-items{list-style:none;display:flex;flex-direction:column;gap:9px;}
  .chlog-items li{font-size:14.5px;line-height:1.55;color:var(--ink);font-weight:500;}
  .ver-close{background:none;border:none;color:rgba(255,255,255,.55);font-size:12px;cursor:pointer;padding:4px 8px;line-height:1;border-radius:999px;transition:color .15s,background .15s;}
  .ver-close:hover{color:#fff;background:rgba(255,255,255,.12);}
  .todo-panel-h{padding:12px 15px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--grey-2);border-bottom:1px solid var(--line);}
  .todo-item{display:flex;align-items:center;gap:11px;padding:12px 15px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;}
  .todo-item:last-child{border-bottom:none;}
  .todo-item:hover{background:var(--fill);}
  .todo-item .ti-c{margin-left:auto;background:var(--accent-soft);color:var(--accent-dk);font-weight:800;font-size:11.5px;padding:2px 8px;border-radius:980px;}
  /* Mobile : ancré right:0 sur la cloche (près du bord gauche), le panneau débordait à
     gauche hors écran. On le cale sur toute la largeur du viewport avec des marges.
     Placé APRÈS la règle de base pour la surcharger (même spécificité → l'ordre source
     tranche). La topbar (backdrop-filter) est le bloc conteneur des positions fixes et
     couvre toute la largeur → left/right = marges écran. */
  @media(max-width:768px){
    .todo-panel{position:fixed;top:64px;left:12px;right:12px;width:auto;max-width:none;}
  }
  .todo-empty{padding:22px 15px;text-align:center;color:var(--grey-2);font-size:13px;}

  /* Autocomplétion « client déjà connu » (pré-remplissage depuis PrestaShop) */
  /* overflow-x caché : overflow-y:auto rendrait l'axe X scrollable aussi, et un
     texte insécable (long e-mail…) créerait un petit scroll horizontal interne. */
  .ac-box{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--card);border:1px solid var(--line-2);border-radius:11px;box-shadow:var(--shadow-lg);margin-top:5px;max-height:250px;overflow-y:auto;overflow-x:hidden;}
  .ac-item{padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:13px;overflow-wrap:anywhere;}
  .ac-item:last-child{border-bottom:none;}
  .ac-item:hover{background:var(--fill);}
  .ac-item span{color:var(--grey-1);font-size:11.5px;}
  .ac-empty{padding:11px 13px;color:var(--grey-2);font-size:12.5px;}