/* 20-accueil.css — Accueil : bandeau, onglets, grille de tuiles, pile et fenêtre « À traiter ».
   Feuille 2/7 : l'ordre de chargement (lib/assets.php) est celui des numéros, il porte la cascade. */
  /* ===================================================================
     ACCUEIL — bandeau à la couleur de la société, onglets, cartes, pile.
     Icônes : sprite SVG Lucide (partials/icons.php), classe .lc.
     =================================================================== */
  .lc{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:inline-block;vertical-align:-.15em;}
  /* Texte posé sur la couleur société : sombre sur le vert Coral ; theme.js le
     passe en blanc si la société choisit une couleur foncée (--accent-ink). */
  :root{--accent-ink:#141a16;--alert:#c0561f;--alert-soft:#fdeee6;--amber:#b87400;--amber-soft:#fff4dc;
        --todo-eyebrow:#c0561f;}
  :root[data-theme="dark"]{--alert:#f08a5d;--alert-soft:#3a2016;--amber:#f0b440;--amber-soft:#33270f;--todo-eyebrow:#f08a5d;}
  :root[data-theme="sepia"]{--alert-soft:#f8e1d2;--amber-soft:#f4e6c2;}
  /* ---- En-tête : le bonjour sur le fond de page, un seul clin d'œil à la
     marque (le point final du bonjour, vert comme celui du logo), puis les
     onglets soulignés d'un trait à la couleur société. */
  .band{margin:0;padding:0;}
  .hello h1{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink);}
  .hello h1 .dot{color:var(--accent);}
  .hello p{font-size:16px;margin-top:9px;font-weight:500;color:var(--grey-1);line-height:1.6;}
  .hello #hello-sub b{color:var(--ink);font-weight:700;}
  .hello #hello-sub b.late{color:var(--alert);}
  /* ---- Onglets : une rangée fine, le trait vert sous l'onglet ouvert. */
  /* Défilement horizontal seulement : overflow-y caché + overscroll contenu, sinon
     Safari iOS laisse la rangée rebondir verticalement sous le doigt. */
  .folders{display:flex;gap:2px;margin-top:26px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:none;position:relative;border-bottom:1px solid var(--line);}
  .folders::-webkit-scrollbar{display:none;}
  .fo{font:inherit;border:0;background:none;border-radius:10px 10px 0 0;padding:10px 14px 13px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;display:inline-flex;gap:8px;align-items:center;color:var(--grey-1);flex:0 0 auto;position:relative;transition:color .15s,background .15s;}
  .fo .fo-ic{font-size:17px;}
  .fo::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:2.5px;border-radius:2px;background:transparent;transition:background .15s;}
  .fo[aria-selected="true"]{color:var(--ink);}
  .fo[aria-selected="true"]::after{background:var(--accent);}
  .fo[aria-selected="true"] .fo-ic{color:var(--accent-dk);}
  @media(hover:hover){ .fo:not([aria-selected="true"]):hover{color:var(--ink);background:var(--fill);} }
  .tdot{min-width:20px;height:20px;border-radius:10px;background:var(--fill);color:var(--grey-1);font-size:11px;font-weight:800;display:inline-grid;place-items:center;padding:0 6px;font-variant-numeric:tabular-nums;}
  .fo[aria-selected="true"] .tdot{background:var(--ink);color:var(--card);}
  .apps-panel{padding:22px 0 0;}
  .apps-panel .grp-title{margin:0 0 14px;display:flex;align-items:center;}
  /* ---- Grille de cartes : 4 par rangée au large, 2 sur téléphone. auto-fill
     (pas auto-fit) : les colonnes vides sont conservées, toutes les cartes ont
     la même largeur quel que soit leur nombre. */
  .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:16px;}
  #apps{row-gap:26px;}   /* place pour les cartes qui dépassent sous la pile */
  :root{--tile-h:176px;}
  /* Toutes les cartes ont la même hauteur, quelle que soit la rangée : la pile
     « À traiter » (plus de contenu) est compactée pour tenir dans la même boîte. */
  .tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;height:var(--tile-h);cursor:pointer;position:relative;display:flex;flex-direction:column;gap:12px;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .22s;}
  @media(hover:hover){ .tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,26,22,.08);border-color:var(--line-2);} }
  .tile.locked{cursor:default;opacity:.6;}
  .tile.locked:hover{transform:none;box-shadow:none;border-color:var(--line);}
  /* Pastille d'icône : icône blanche sur la couleur du module (ci-dessous). */
  .tile-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--grey-2);font-size:22px;flex-shrink:0;}
  .tile-ic .lc{stroke-width:2.1;}
  .tile h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em;line-height:1.2;}
  .tile p{display:none;}   /* la description n'est plus affichée : le chiffre suffit */
  .tile-meta{margin-top:auto;display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--grey-1);font-weight:500;font-variant-numeric:tabular-nums;min-height:26px;}
  .tile-meta>span:first-child{display:flex;align-items:baseline;gap:7px;min-width:0;}
  .tile-meta b{color:var(--accent-dk);}
  .tile-n{font-size:26px;font-weight:800;color:var(--accent-dk);line-height:1;letter-spacing:-.03em;}
  .tile-nl{font-size:12.5px;color:var(--grey-1);font-weight:500;}
  /* Flèche : discrète, elle n'apparaît qu'au survol (pas sur tactile). */
  .tile-meta .arrow{position:absolute;right:14px;bottom:14px;width:28px;height:28px;border-radius:50%;background:var(--fill);color:var(--grey-1);font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .16s,color .16s;}
  @media(hover:hover){ .tile:hover .tile-meta .arrow{opacity:1;} }
  /* Couleur de chaque module, partagée par la tuile de l'accueil et les lignes
     de la fenêtre « À traiter ». Réparation prend la couleur société. */
  :root{--mod-repair:var(--accent);--mod-orders:#f28c28;--mod-sav:#0ea5a0;--mod-clients:#3b82f6;--mod-buyback:#d4a017;--mod-rent:#7c4dff;--mod-messages:#2563eb;--mod-agenda:#ef4444;--mod-hours:#ec4899;--mod-recond:#10b981;--mod-itv:#f97316;--mod-dev:#475569;--mod-loan:#8b5cf6;--mod-desk:#f59e0b;--mod-labels:#14b8a6;--mod-prospect:#e11d48;--mod-dash:#0ea5e9;--mod-payments:#a855f7;--mod-supply:#ea580c;--mod-users:#64748b;--mod-onboarding:#22c55e;--mod-kb:#0891b2;--mod-feedback:#d946ef;--mod-pos:#334155;--mod-assist:#a3e635;}
  #t-repair .tile-ic,.tm-row[data-mod="repair"] .tm-ic{background:var(--mod-repair);}
  #t-orders .tile-ic,.tm-row[data-mod="orders"] .tm-ic{background:var(--mod-orders);}
  #t-sav .tile-ic,.tm-row[data-mod="sav"] .tm-ic{background:var(--mod-sav);}
  #t-clients .tile-ic,.tm-row[data-mod="clients"] .tm-ic{background:var(--mod-clients);}
  #t-buyback .tile-ic,.tm-row[data-mod="buyback"] .tm-ic{background:var(--mod-buyback);}
  #t-rent .tile-ic,.tm-row[data-mod="rent"] .tm-ic{background:var(--mod-rent);}
  #t-messages .tile-ic,.tm-row[data-mod="messages"] .tm-ic{background:var(--mod-messages);}
  #t-agenda .tile-ic,.tm-row[data-mod="agenda"] .tm-ic{background:var(--mod-agenda);}
  #t-hours .tile-ic,.tm-row[data-mod="hours"] .tm-ic{background:var(--mod-hours);}
  #t-recond .tile-ic,.tm-row[data-mod="recond"] .tm-ic{background:var(--mod-recond);}
  #t-itv .tile-ic,.tm-row[data-mod="itv"] .tm-ic{background:var(--mod-itv);}
  #t-dev .tile-ic,.tm-row[data-mod="dev"] .tm-ic{background:var(--mod-dev);}
  #t-loan .tile-ic,.tm-row[data-mod="loan"] .tm-ic{background:var(--mod-loan);}
  #t-desk .tile-ic,.tm-row[data-mod="desk"] .tm-ic{background:var(--mod-desk);}
  #t-labels .tile-ic,.tm-row[data-mod="labels"] .tm-ic{background:var(--mod-labels);}
  #t-prospect .tile-ic,.tm-row[data-mod="prospect"] .tm-ic{background:var(--mod-prospect);}
  #t-dash .tile-ic,.tm-row[data-mod="dash"] .tm-ic{background:var(--mod-dash);}
  #t-payments .tile-ic,.tm-row[data-mod="payments"] .tm-ic{background:var(--mod-payments);}
  #t-supply .tile-ic,.tm-row[data-mod="supply"] .tm-ic{background:var(--mod-supply);}
  #t-users .tile-ic,.tm-row[data-mod="users"] .tm-ic{background:var(--mod-users);}
  #t-onboarding .tile-ic,.tm-row[data-mod="onboarding"] .tm-ic{background:var(--mod-onboarding);}
  #t-kb .tile-ic,.tm-row[data-mod="kb"] .tm-ic{background:var(--mod-kb);}
  #t-feedback .tile-ic,.tm-row[data-mod="feedback"] .tm-ic{background:var(--mod-feedback);}
  #t-pos .tile-ic,.tm-row[data-mod="pos"] .tm-ic{background:var(--mod-pos);}
  #t-assist .tile-ic,.tm-row[data-mod="assist"] .tm-ic{background:var(--mod-assist);}
  /* Étiquettes de coin (réservées aux tuiles verrouillées « Bientôt »). */
  .tag{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:980px;background:var(--fill);color:var(--grey-2);}
  .tag.on{display:none;}
  .tag.ro{background:#f0ecff;color:#5b35d6;}
  .tag.alert{background:var(--alert-soft);color:var(--alert);}
  /* ---- Pile « À traiter » : une carte claire comme les autres, et dessous
     deux fiches de la même taille qui dépassent en diagonale (bas-droite),
     comme un paquet de fiches posé sur le comptoir. Au survol, le paquet
     s'étale un peu. ---- */
  .pw{position:relative;display:flex;min-width:0;}
  .pw>.tile{flex:1;min-width:0;position:relative;}   /* min-width:0 : la carte reste dans sa colonne (sinon un long titre l'élargit sur mobile) */
  .deckg{position:absolute;inset:0;border-radius:16px;pointer-events:none;background:var(--card);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(20,26,22,.05);transition:transform .35s cubic-bezier(.16,1,.3,1);}
  .deckg.g1{transform:translate(5px,5px);}
  .deckg.g2{transform:translate(10px,10px);background:var(--fill);}
  @media(hover:hover){
    .pw:hover .deckg.g1{transform:translate(7px,7px);}
    .pw:hover .deckg.g2{transform:translate(14px,14px);}
  }
  .tile-todo{border-color:var(--line-2);box-shadow:0 6px 18px rgba(20,26,22,.10),0 1px 2px rgba(20,26,22,.05);}
  @media(hover:hover){ .tile-todo:hover{border-color:var(--line-2);box-shadow:0 12px 26px rgba(20,26,22,.14);} }
  .tile-todo{gap:8px;padding:16px 16px 14px;}
  .tile-todo .tile-ic{background:var(--alert);color:#fff;width:32px;height:32px;border-radius:10px;font-size:17px;}
  .tile-todo .todo-n{position:absolute;top:14px;right:14px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--alert);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
  .tile-todo .todo-eyebrow{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--todo-eyebrow);margin:0 0 -4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
  .tile-todo h3{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tile-todo p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12.5px;color:var(--grey-1);line-height:1.35;font-weight:500;margin:0;}
  .tile-todo p .kt{font-weight:800;}
  .tile-todo .tile-meta{min-height:22px;}
  .tile-todo .tile-meta .arrow{opacity:1;width:26px;height:26px;right:12px;bottom:12px;}
  .tile-todo.done .tile-ic{background:var(--accent);}
  .tile-todo.done .todo-eyebrow{color:var(--accent);}
  .d{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}
  .d.red{background:var(--alert);} .d.amber{background:var(--amber);} .d.green{background:var(--accent);}
  .kt.red{color:var(--alert);} .kt.amber{color:var(--amber);} .kt.green{color:var(--accent-dk);}
  /* ---- En-tête de la fenêtre « À traiter » */
  .todo-mh-ic{width:40px;height:40px;border-radius:11px;margin:0;background:var(--alert);font-size:19px;}
  /* ---- Téléphone : bandeau collé aux bords, cartes sur deux colonnes. */
  @media(max-width:768px){
    .folders{margin:20px -18px 0;padding:0 18px;}
    .fo{padding:9px 12px 12px;font-size:13.5px;}
  }
  @media(max-width:640px){
    .tiles{grid-template-columns:1fr 1fr;gap:12px;}
    #apps{row-gap:20px;}
    :root{--tile-h:168px;}
    .tile{padding:14px;gap:10px;border-radius:14px;}
    .tile-ic{width:36px;height:36px;border-radius:11px;font-size:19px;}
    .tile h3{font-size:14px;}
    .tile-n{font-size:22px;}
    .tile-meta .arrow{display:none;}
    .tile-todo{padding:13px 13px 12px;gap:7px;}
    .tile-todo .tile-ic{width:30px;height:30px;}
    .tile-todo h3{font-size:14.5px;}
    .tile-todo p{font-size:12px;}
    .tile-todo .todo-eyebrow{font-size:10px;letter-spacing:.05em;}
    .tile-todo .tile-meta .arrow{display:flex;}
    .deckg{border-radius:14px;}
    .deckg.g1{transform:translate(4px,4px);}
    .deckg.g2{transform:translate(8px,8px);}
  }
  @media(max-width:480px){
    .folders{margin:18px -14px 0;padding:0 14px;}
  }
  .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);}
  .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;}
  /* Aide discrète dans un titre de rubrique (ex. Favoris). */
  .grp-hint{font-weight:600;text-transform:none;letter-spacing:0;color:var(--grey-2);opacity:.75;}
  @media(max-width:560px){ .grp-hint{display:none;} }
  .kt.red{color:var(--alert);} .kt.amber{color:var(--amber);} .kt.green{color:var(--accent-dk);}
  .d{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}
  .d.red{background:var(--alert);} .d.amber{background:var(--amber);} .d.green{background:var(--accent);}
  /* ---- Fenêtre « À traiter » : les priorités d'abord (barre en tête), puis
     les tâches en bandes de couleur ; la première est « à faire maintenant ». */
  .todo-modal{width:640px;}
  /* Hauteur réellement visible (dvh) : sur iPhone, 90vh compte la place des
     barres de Safari et le bas de la fenêtre passait sous l'écran. */
  @supports (height:100dvh){ .modal.todo-modal{max-height:calc(100dvh - 48px);} }
  /* Pas de flou derrière cette fenêtre : avec un flou d'arrière-plan, chaque
     survol d'une ligne force le navigateur à redessiner tout ce qu'il y a
     derrière, et l'accueil scintille. Un voile un peu plus sombre suffit. */
  #todo-ov{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.42);}
  .todo-mh{display:flex;align-items:center;gap:12px;}
  .todo-modal .modal-h{padding-bottom:14px;border-bottom:0;}
  .todo-modal .modal-b{padding:6px 22px 22px;background:var(--bg);}
  .todo-modal .modal-f{justify-content:space-between;}
  .todo-mf-hint{font-size:12.5px;color:var(--grey-1);font-weight:500;}
  .todo-bar{padding:0 26px 16px;border-bottom:1px solid var(--line);}
  .tb-track{display:flex;gap:3px;height:8px;border-radius:4px;overflow:hidden;}
  .tb-seg{display:block;height:100%;border-radius:4px;}
  .tb-seg.red{background:var(--alert);} .tb-seg.amber{background:var(--amber);} .tb-seg.green{background:var(--accent);}
  .tb-keys{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
  .tb-key{font:inherit;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:980px;border:0;cursor:pointer;font-size:12.5px;font-weight:700;background:var(--fill);color:var(--ink);}
  .tb-key b{font-weight:800;font-variant-numeric:tabular-nums;}
  .tb-key.red{background:var(--alert-soft);color:var(--alert);} .tb-key.amber{background:var(--amber-soft);color:var(--amber);} .tb-key.green{background:var(--accent-soft);color:var(--accent-dk);}
  .tb-key.off{opacity:.45;cursor:default;}
  @media(hover:hover){ .tb-key:not(.off):hover{filter:brightness(.95);} }
  .tm-sec{margin-top:16px;scroll-margin-top:8px;}
  .tm-grp{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;border-radius:10px;margin-bottom:8px;}
  .tm-grp.red{color:var(--alert);background:var(--alert-soft);} .tm-grp.amber{color:var(--amber);background:var(--amber-soft);} .tm-grp.green{color:var(--accent-dk);background:var(--accent-soft);}
  .tm-grp .n{margin-left:auto;font-variant-numeric:tabular-nums;}
  .tm-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:11px 12px 11px 12px;background:var(--card);cursor:pointer;margin-top:6px;transition:border-color .15s,box-shadow .15s;}
  @media(hover:hover){ .tm-row:hover{border-color:var(--line-2);box-shadow:var(--shadow);} }
  .tm-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .tm-ic{width:40px;height:40px;border-radius:11px;background:var(--grey-2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
  .tm-ic .lc{font-size:19px;color:#fff;stroke-width:2.1;}
  .tm-tx{flex:1;min-width:0;font-size:14.5px;font-weight:800;line-height:1.25;}
  .tm-tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tm-tx small{display:block;color:var(--grey-1);font-weight:600;font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tm-tx em{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--alert);margin-bottom:3px;}
  .tm-w{font-size:11.5px;font-weight:700;color:var(--grey-1);background:var(--fill);border-radius:980px;padding:4px 9px;white-space:nowrap;text-align:right;line-height:1.3;}
  .tm-w.red{color:var(--alert);background:var(--alert-soft);}
  .tm-go{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:980px;color:var(--grey-2);font-size:12.5px;font-weight:700;flex-shrink:0;transition:background .15s,color .15s;}
  .tm-go .lc{font-size:16px;}
  @media(hover:hover){ .tm-row:hover .tm-go{background:var(--ink);color:var(--card);} }
  /* La tâche à faire maintenant : carte plus haute, ombre, bouton « Traiter » plein. */
  .tm-row.next{padding:14px 12px 14px 14px;border-color:var(--line-2);box-shadow:0 8px 22px rgba(20,26,22,.09);}
  .tm-row.next .tm-ic{width:46px;height:46px;border-radius:13px;}
  .tm-row.next .tm-tx{font-size:16px;}
  .tm-row.next .tm-go{background:var(--accent);color:#fff;padding:0 12px 0 14px;height:36px;}
  @media(hover:hover){ .tm-row.next:hover .tm-go{background:var(--accent-dk);color:#fff;} }
  /* ---- Pile « À traiter » (home.js) : une grande carte à la fois, deux qui
     dépassent dessous ; geste, flèches et points pour passer de l'une à l'autre. */
  .tq-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;}
  .tq-top .tb-keys{margin-top:0;}
  .tq-view{font:inherit;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:980px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;flex-shrink:0;}
  .tq-view .lc{font-size:15px;}
  @media(max-width:480px){
    .tq-top{flex-wrap:nowrap;align-items:flex-start;}
    .tq-top .tb-key.off{display:none;}
    .tq-view{width:32px;padding:0;justify-content:center;}
    .tq-view span{display:none;}
  }
  .tq-deck{display:grid;grid-template-rows:minmax(0,1fr);margin:14px 2px 0;padding-bottom:22px;touch-action:pan-y;}
  /* Mode pile : la fenêtre ne défile pas ; la pile prend la place qui reste et
     la carte défile en elle-même si elle est trop longue pour l'écran. */
  .todo-modal .modal-b.tq-on{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;}
  .modal-b.tq-on .tq-deck{flex:1 1 auto;min-height:0;}
  .modal-b.tq-on .tq-nav,.modal-b.tq-on .tq-dots,.modal-b.tq-on .tq-hint{flex-shrink:0;}
  .tq-card{grid-area:1/1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:11px;position:relative;transform-origin:50% 100%;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;user-select:none;-webkit-user-select:none;min-width:0;}
  .tq-card.top{z-index:3;box-shadow:0 16px 38px rgba(20,26,22,.13),0 3px 8px rgba(20,26,22,.06);}
  .tq-card.under{pointer-events:none;box-shadow:var(--shadow);}
  .tq-card.under > *{visibility:hidden;}
  .tq-card.sizer{visibility:hidden;pointer-events:none;box-shadow:none;}
  .tq-card.drag{transition:none;cursor:grabbing;}
  .tq-stamp{position:absolute;top:18px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:4px 9px;border-radius:8px;border:2px solid;opacity:0;pointer-events:none;}
  .tq-stamp.next{right:16px;color:var(--grey-1);transform:rotate(8deg);}
  .tq-stamp.later{left:16px;color:var(--amber);transform:rotate(-8deg);}
  .tq-h{display:flex;align-items:center;gap:12px;}
  .tq-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;background:var(--grey-2);}
  .tq-ic .lc{font-size:20px;color:#fff;stroke-width:2.1;}
  .tq-ic.sm{width:30px;height:30px;border-radius:9px;}
  .tq-ic.sm .lc{font-size:15px;}
  .tq-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
  .tq-tag.red{color:var(--alert);} .tq-tag.amber{color:var(--amber);} .tq-tag.green{color:var(--accent-dk);}
  .tq-kind{font-size:12.5px;color:var(--grey-1);font-weight:600;margin-top:2px;}
  .tq-title{margin:0;font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.15;overflow-wrap:anywhere;}
  .tq-why{margin:0;font-size:14.5px;line-height:1.45;}
  .tq-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .tq-facts div{background:var(--fill);border-radius:11px;padding:8px 10px;font-size:11px;font-weight:600;color:var(--grey-1);min-width:0;}
  .tq-facts b{display:block;font-size:13.5px;color:var(--ink);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tq-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:2px;}
  /* Carte trop longue pour l'écran : le texte défile, les actions restent en bas. */
  .tq-card .tq-acts{position:sticky;bottom:-16px;margin-bottom:-16px;padding:10px 0 16px;background:var(--card);}
  .tq-acts .btn{flex:1 1 auto;justify-content:center;display:inline-flex;align-items:center;gap:7px;text-decoration:none;}
  .tq-acts .btn .lc{font-size:16px;}
  .tq-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px;}
  .tq-ib{font:inherit;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
  .tq-ib .lc{font-size:17px;}
  .tq-ib:disabled{opacity:.35;cursor:default;}
  .tq-later{font:inherit;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:980px;border:0;background:var(--fill);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;}
  .tq-later .lc{font-size:15px;}
  .tq-pos{font-size:13px;font-weight:700;color:var(--grey-1);min-width:4.5em;text-align:center;font-variant-numeric:tabular-nums;}
  .tq-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:12px;}
  .tq-dots .d{border:0;padding:0;cursor:pointer;opacity:.35;}
  .tq-dots .d.cur{opacity:1;transform:scale(1.4);}
  .tq-dots .d.later{opacity:.18;}
  .tq-hint{font-size:11.5px;color:var(--grey-2);text-align:center;margin-top:10px;}
  .tq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
  .tq-mini{font:inherit;color:inherit;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px;display:flex;flex-direction:column;gap:7px;cursor:pointer;min-width:0;transition:transform .15s,border-color .15s;}
  @media(hover:hover){ .tq-mini:hover{transform:translateY(-2px);border-color:var(--line-2);} }
  .tq-mini.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
  .tq-mini b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tq-mini small{font-size:11.5px;color:var(--grey-1);font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  @media(max-width:480px){
    .tq-title{font-size:21px;} .tq-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .tq-hint{display:none;}
    /* Téléphone : la fenêtre occupe presque tout l'écran, en-tête et pied resserrés. */
    #todo-ov{padding:8px;padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:max(8px,env(safe-area-inset-bottom,0px));}
    .modal.todo-modal{max-height:calc(100vh - 16px);}
    @supports (height:100dvh){ .modal.todo-modal{max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));} }
    .todo-modal .modal-h{padding:16px 18px 10px;}
    .todo-modal .modal-f{padding:10px 18px;}
    .tq-deck{margin-top:10px;padding-bottom:18px;}
    .tq-card{padding:15px 15px 14px;gap:9px;}
    .tq-dots{margin-top:8px;}
    /* Actions sur une seule ligne : l'action principale en entier, l'appel et
       le SMS en boutons ronds (le libellé reste lu par VoiceOver). */
    .tq-acts{flex-wrap:nowrap;}
    .tq-acts .btn-primary{flex:1 1 auto;min-width:0;}
    .tq-acts .tq-sec{flex:0 0 46px;width:46px;padding:0;font-size:18px;}
    .tq-acts .tq-sec .tq-l{display:none;}
  }
  /* Écrans bas (iPhone SE, mini…) : on gagne encore un peu de hauteur. */
  @media(max-width:480px) and (max-height:700px){
    .todo-modal .modal-h p{display:none;}
    .tq-why{font-size:13.5px;}
    .tq-facts div{padding:6px 9px;}
    .tq-ib{width:38px;height:38px;}
  }
  @media(max-width:480px) and (max-height:600px){ .todo-modal .modal-f{display:none;} }
  @media (prefers-reduced-motion:reduce){ .tq-card,.tq-mini{transition:none;} }
  .todo-empty{padding:34px 15px;text-align:center;color:var(--ink);font-size:14px;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:8px;}
  .todo-empty .lc{font-size:28px;color:var(--accent-dk);background:var(--accent-soft);border-radius:50%;padding:10px;width:48px;height:48px;}
  .todo-empty b{font-size:16px;font-weight:800;}
  .todo-empty span{color:var(--grey-1);max-width:34ch;}
  @media(max-width:480px){
    .tm-w{display:none;} .todo-mf-hint{display:none;}
    .todo-bar{padding:0 18px 14px;} .todo-modal .modal-b{padding:4px 14px 18px;}
    .tm-go span,.tm-row.next .tm-go{padding:0 8px;} .tm-row.next .tm-go{font-size:0;gap:0;} .tm-row.next .tm-go .lc{font-size:16px;}
  }
  .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);}
  /* Action de retrait (annuler une commande) : lisible mais sans dramatiser —
     l'annulation se défait, elle ne mérite pas un rouge d'alerte plein écran. */
  .btn-danger{background:#fdeee6;color:#c0561f;}
  .btn-danger:hover{background:#f8ded1;}
  .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);}
  /* Un seul onglet visible (ex. SAV, Rachat, Messages côté employé) : la barre ne sert à
     rien, on la masque. La création passe par le bouton vert, le retour par « Annuler ». */
  .seg:not(:has(> button:not(.hide) ~ button:not(.hide))){display:none;}
  .seg button[disabled]{opacity:.4;cursor:not-allowed;}