/* 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 » (home.js) : une tâche à la fois, l'essentiel
     seulement (qui, depuis quand, une ligne d'infos, deux actions). Un
     sélecteur en tête passe en liste, à la demande : la fenêtre s'ouvre
     toujours sur « Une à la fois ». */
  .todo-modal{width:560px;}
  /* 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-modal .modal-h{align-items:center;gap:12px;padding:20px 20px 14px 26px;border-bottom:0;}
  .todo-modal .modal-h h3{flex:1;min-width:0;}
  .todo-modal .modal-b{padding:0;}
  /* Sélecteur « Une à la fois | Liste ». */
  .tq-seg{display:flex;padding:3px;border-radius:10px;background:var(--fill);flex-shrink:0;}
  .tq-seg button{font:inherit;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:0;border-radius:8px;background:none;color:var(--grey-1);font-size:13px;font-weight:600;cursor:pointer;}
  .tq-seg button .lc{font-size:15px;}
  .tq-seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1);}
  :root[data-theme="dark"] .tq-seg button[aria-pressed="true"]{background:var(--line);}
  /* Sous l'en-tête : la progression (une à la fois) ou le décompte (liste). */
  .tq-sub{display:flex;align-items:center;gap:12px;padding:0 26px 4px;min-height:20px;font-size:14px;color:var(--grey-1);}
  .tq-sub b.late{color:var(--alert);font-weight:600;}
  .tq-prog{flex:1;height:4px;border-radius:2px;background:var(--fill);overflow:hidden;}
  .tq-prog span{display:block;height:100%;border-radius:2px;background:var(--accent);transition:width .35s cubic-bezier(.2,.9,.25,1);}
  .tq-prog span.red{background:var(--alert);} .tq-prog span.amber{background:var(--amber);}
  .tq-pos{font-size:13px;font-weight:600;color:var(--grey-1);font-variant-numeric:tabular-nums;white-space:nowrap;}

  /* ---- Une à la fois : la carte, puis « Plus tard » / « Suivante ». La pile
     garde la hauteur de la plus grande carte (cales invisibles) : les boutons
     du bas ne bougent pas d'une carte à l'autre. */
  .tq-deck{display:grid;grid-template-rows:minmax(0,1fr);padding:22px 26px 8px;touch-action:pan-y;}
  .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;}
  /* overflow-x et touch-action : au doigt, un glissé horizontal déplace la carte
     (home.js) au lieu de faire défiler son contenu sur le côté. */
  .tq-card{grid-area:1/1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:var(--card);display:flex;flex-direction:column;gap:16px;position:relative;transform-origin:50% 100%;user-select:none;-webkit-user-select:none;min-width:0;}
  .tq-card.top{z-index:2;}
  .tq-card.sizer{visibility:hidden;pointer-events:none;}
  .tq-card.drag{cursor:grabbing;}
  .tq-stamp{position:absolute;top:2px;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:0;color:var(--grey-1);transform:rotate(8deg);}
  .tq-stamp.later{left:0;color:var(--amber);transform:rotate(-8deg);}
  .tq-h{display:flex;align-items:center;gap:12px;}
  .tq-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;background:var(--grey-2);}
  .tq-ic .lc{font-size:22px;color:#fff;stroke-width:2;}
  .tq-ic.sm{width:38px;height:38px;border-radius:11px;}
  .tq-ic.sm .lc{font-size:18px;}
  .tq-when{display:block;font-size:13px;font-weight:700;}
  .tq-when.red{color:var(--alert);} .tq-when.amber{color:var(--amber);} .tq-when.green{color:var(--accent-dk);}
  .tq-kind{display:block;font-size:14px;color:var(--grey-1);margin-top:2px;}
  .tq-title{margin:0;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.08;overflow-wrap:anywhere;}
  .tq-line{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--grey-1);}
  .tq-line b{color:var(--ink);font-weight:600;}
  .tq-acts{display:flex;gap:10px;margin-top:auto;padding-top:6px;}
  .tq-acts .btn{flex:1 1 0;min-width:0;height:54px;border-radius:16px;font-size:17px;font-weight:600;justify-content:center;display:inline-flex;align-items:center;gap:9px;text-decoration:none;}
  .tq-acts .btn .lc{font-size:18px;}
  .tq-acts .tq-sms{flex:0 0 54px;padding:0;font-size:20px;}
  .tq-foot{display:flex;gap:10px;padding:16px 26px 22px;margin-top:14px;border-top:1px solid var(--line);flex-shrink:0;}
  .tq-foot button{font:inherit;flex:1;height:46px;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
  .tq-foot .lc{font-size:16px;}
  .tq-later{border:0;background:none;color:var(--grey-1);}
  .tq-next{border:1px solid var(--line-2);background:var(--card);color:var(--ink);}
  .tq-next:disabled{opacity:.4;cursor:default;}

  /* ---- Liste : les tâches par priorité ; toucher une ligne la reprend en
     « Une à la fois ». */
  /* La liste prend la hauteur qui reste et défile elle-même (sinon, coupée par
     la fenêtre, le doigt faisait défiler l'accueil derrière). */
  .tq-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);margin-top:10px;padding-bottom:10px;}
  .tq-grp{padding:16px 26px 6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
  .tq-grp.red{color:var(--alert);} .tq-grp.amber{color:var(--amber);} .tq-grp.green{color:var(--accent-dk);}
  .tq-row{font:inherit;color:inherit;width:100%;display:flex;align-items:center;gap:14px;padding:10px 26px;border:0;background:none;text-align:left;cursor:pointer;}
  .tq-row.cur{background:var(--fill);}
  @media(hover:hover){ .tq-row:hover{background:var(--fill);} }
  .tq-row-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .tq-row-tx b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tq-row-tx span{font-size:13.5px;color:var(--grey-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tq-age{font-size:13px;font-weight:600;color:var(--grey-1);white-space:nowrap;}
  .tq-age.red{color:var(--alert);}
  .tq-row > .lc{font-size:16px;color:var(--grey-2);flex-shrink:0;}
  .tq-tour{display:block;margin:14px auto 4px;font:inherit;font-size:13.5px;font-weight:600;color:var(--grey-1);background:none;border:0;cursor:pointer;}

  @media(max-width:480px){
    /* Téléphone : la fenêtre occupe presque tout l'écran. */
    #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 14px 12px 18px;}
    .tq-seg button span{display:none;}
    .tq-sub{padding:0 18px 4px;}
    .tq-deck{padding:18px 18px 6px;}
    .tq-title{font-size:28px;}
    .tq-foot{padding:12px 18px 16px;}
    .tq-grp,.tq-row{padding-left:18px;padding-right:18px;}
  }
  .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;}
  .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;}