@import url('/css/fonts.css'); /* ============================================================ THÈME PARTAGÉ TactiCam — tokens centralisés (sombre par défaut + clair) Inclure AVANT les autres feuilles de style, sur chaque page. Le basculement se fait via (theme.js). Tous les noms de tokens (app + pages) sont définis ici pour cohérence. ============================================================ */ /* iOS gonfle le texte au changement d'orientation (paysage→portrait) : on fige la taille. */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* App-like : pas de selection de texte accidentelle (glisser = deplacer, pas surligner). Les champs d'edition et .allow-select gardent la selection normale. */ body{ -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } input, textarea, select, [contenteditable="true"], [contenteditable=""], .allow-select, .allow-select *{ -webkit-user-select:text; -moz-user-select:text; user-select:text; } :root{ /* —— SOMBRE (défaut) —— */ --bg:#0e1013; --surface:#16191e; --surf:#16191e; --surface-2:#1c2026; --border:#262b32; --line:#262b32; --text:#f3f5f7; --ink:#f3f5f7; --muted:#9aa0a8; --muted-soft:#7b828b; /* gris clair : reponse tiede (peut-etre) */ --flag:#ff5a1f; --amber:#2c6fff; --blue:#5b8cff; --danger:#ff5a5a; --green:#3ddc84; --soft:rgba(255,90,31,.16); /* Fonds des BANDEAUX d'avertissement / d'erreur (ils etaient ecrits en dur dans app.html, donc identiques en clair et en sombre : illisibles sur fond clair). Un jeton par role, deux themes. */ --warn-bg:#2a1f10; --warn-line:#7a5a1e; --warn-text:#ffd9a0; --err-bg:#2a1010; --err-line:#7a2020; --err-text:#ffb3b3; --ink-on-dark:#f3f5f7; --radius:16px; /* Echelle de RAYONS (homogeneisation UI 2026-07-25) : 4 valeurs, remplacent les 12 valeurs libres. */ --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px; /* Ombres partagees (sombre = plus marquees). Remplacent les rgba() en dur. */ --shadow:0 6px 20px rgba(0,0,0,.35); --shadow-lg:0 16px 48px rgba(0,0,0,.5); /* Polices : Oswald (titres) + Source Sans 3 (corps) */ --font-display:'Oswald',sans-serif; --font-body:'Source Sans 3',system-ui,sans-serif; --font-ui:'Source Sans 3',system-ui,sans-serif; } :root[data-theme="light"]{ /* —— CLAIR —— */ --bg:#f4f5f7; --surface:#ffffff; --surf:#ffffff; --surface-2:#eef0f3; --border:#e3e6ea; --line:#e3e6ea; --text:#1a1d21; --ink:#1a1d21; --muted:#6b7178; --muted-soft:#a3a9b1; /* gris clair : reponse tiede (peut-etre) */ --flag:#ff5a1f; --amber:#2c6fff; --blue:#2c6fff; --danger:#d62828; --green:#1f9d57; --soft:#fff1ea; --warn-bg:#fdf4e3; --warn-line:#e6c489; --warn-text:#8a5a0b; --err-bg:#fdecec; --err-line:#f0b4b4; --err-text:#a11b1b; --ink-on-dark:#f3f5f7; /* texte sur la vidéo live : TOUJOURS clair (la caméra reste sombre) */ /* Ombres clair = plus douces. */ --shadow:0 6px 20px rgba(0,0,0,.08); --shadow-lg:0 16px 48px rgba(0,0,0,.16); } /* Corps de texte = Source Sans 3 sur TOUTE l'app. */ body{font-family:var(--font-body);} /* Titres = Oswald Bold 700, TOUJOURS en MAJUSCULES. */ h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;text-transform:uppercase;} .tclogo-word{font-family:var(--font-display);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:20px;} /* ============================================================ SHELL PARTAGÉ — logo réel, icônes SVG brandées, nav unifiée ============================================================ */ .tclogo{display:inline-flex;align-items:center;gap:0;text-decoration:none;color:var(--text);line-height:1;} .tclogo-mark{display:inline-flex;width:30px;height:22px;color:var(--text);} .tclogo-mark svg{width:100%;height:100%;display:block;} /* Marge sur le MOT (pas gap du conteneur) → l'espace mark/mot marche PARTOUT (header mobile inclus). */ .tclogo-word{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.03em;text-transform:uppercase;margin-left:12px;} .tclogo-word span{color:var(--flag);} /* Icônes SVG génériques */ [data-icon]{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;} [data-icon] svg{width:100%;height:100%;} /* Icône inline dans un bouton/titre (à côté du texte) */ .ic-inline{display:inline-flex;width:1.15em;height:1.15em;vertical-align:-.18em;flex-shrink:0;} .ic-inline svg{width:100%;height:100%;} /* Pastille « beta » — une fonction assumee comme pas encore finie (panorama). ICI et pas dans components.css : le SPA (app.html) ne charge PAS components.css, alors que theme.css est la seule feuille chargee PARTOUT (SPA + pages shell). Meme aspect que .mode-opt-txt em de style.css. */ .tc-beta{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; color:var(--flag);background:var(--soft);border-radius:var(--r-sm);padding:1px 6px;margin-left:6px; vertical-align:middle;} /* Navigation UNIFIEE (source unique) : barre du bas (mobile) / sidebar gauche (PC ≥900px). Un SEUL jeu de regles style les 2 systemes : .tcnav (pages shell) ET .appnav (SPA app.html). Les icones/labels du SPA (.appnav-item .ic/.lab) sont mappes sur ceux du shell (.tcnav-ic/.tcnav-lab). La VISIBILITE du SPA (par body[data-screen], .appnav display:none par defaut) reste dans style.css. */ .tcnav,.appnav{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;background:var(--surface);border-top:1px solid var(--border);padding:6px 6px calc(env(safe-area-inset-bottom,0px) + 6px);} .tcnav-item,.appnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--muted);font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;text-decoration:none;padding:4px 0;} .tcnav-ic,.appnav-item .ic{width:22px;height:22px;display:inline-flex;flex-shrink:0;line-height:1;} .tcnav-ic svg,.appnav-item .ic svg{width:100%;height:100%;} .tcnav-item.active,.appnav-item.active{color:var(--flag);} .tcnav-brand,.appnav-brand{display:none;} /* logo : visible uniquement dans la sidebar desktop */ body.has-tcnav{padding-bottom:74px;} /* ============================================================ CORRECTIF STRUCTUREL — nav du bas iOS Safari (SOURCE UNIQUE). Cause (mesuree sur iPhone) : sur une page NON-scrollable, iOS Safari peint une zone plus haute que le viewport qu'il declare (innerH=svh=dvh=fill-available=660, mais lvh=874 et zone peinte ~710). Une nav `position:fixed;bottom:0` s'ancre a 660 → flotte avec du gris dessous, et AUCUNE unite/API ne voit la zone peinte (d'ou l'echec de visualViewport, fill-available, etc.). SEULE solution fiable : garantir que la page est TOUJOURS scrollable (hauteur > grand viewport) → iOS bascule sur le grand viewport + barre repliable, et la nav fixe se cale au vrai bas visible. `102lvh` = un peu au-dessus du grand viewport, sans `calc` (le `calc(100lvh+1px)` etait mal supporte et cassait le scroll). Applique a TOUTES les pages a nav du bas (pages shell .tcnav ET ecrans app.html). Mobile seul ; en desktop la nav passe en sidebar (pas de barre du bas). ============================================================ */ @media(max-width:899px){ body.has-tcnav, body[data-screen="menu"], body[data-screen="videoroom"], body[data-screen="tutorial"], body[data-screen="profile"], body[data-screen="team"], body[data-screen="remote"]{min-height:100dvh;min-height:102lvh;} /* Mobile : on masque l'indicateur de defilement du DOCUMENT — sinon il court sur toute la hauteur et passe par-dessus le header (sticky) et la nav du bas (fixe). Les zones a scroll interne (modales, tiroirs) gardent leur scrollbar (ce ne sont pas html/body). */ html::-webkit-scrollbar, body::-webkit-scrollbar{width:0;height:0;background:transparent;} html,body{scrollbar-width:none;-ms-overflow-style:none;} } /* ============================================================ FORÇAGE PORTRAIT (overlay partagé, injecté par theme.js). TactiCam s'utilise en portrait ; en paysage sur mobile on couvre l'app et on invite à remettre le téléphone droit. Exception : l'écran CAMÉRA (qui filme en paysage) ajoute `html.tc-allow-landscape`. La vidéo en plein écran natif passe par-dessus cet overlay. iOS ne permet pas de verrouiller l'orientation par API → ce nudge visuel est la solution. ============================================================ */ .tc-portrait-lock{display:none;} /* Plein écran CSS du lecteur d'annotation (iOS) : on bloque le scroll derrière, on désactive le verrou portrait (on regarde en paysage) et on masque la barre de nav. */ body.tc-anno-expanded{overflow:hidden;} body.tc-anno-expanded .tc-portrait-lock{display:none !important;} body.tc-anno-expanded .appnav,body.tc-anno-expanded .tcnav{display:none !important;} /* VERROU PORTRAIT DESACTIVE (demande utilisateur 2026-07-17) : l'app s'utilise librement en paysage (utile pour regarder les panoramas larges). L'overlay .tc-portrait-lock reste injecte par theme.js mais n'est plus jamais affiche. Pour le reactiver, retablir la regle ci-dessous : @media (orientation:landscape) and (max-width:899px){ html:not(.tc-allow-landscape) .tc-portrait-lock{ display:flex;position:fixed;inset:0;z-index:99999;flex-direction:column; align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px; background:var(--bg);color:var(--text); } } */ /* Clavier mobile ouvert : on glisse la barre de nav du bas hors de l'écran (sinon elle remonte au-dessus du clavier). Mobile uniquement (sur desktop la nav est une sidebar). */ @media(max-width:899px){ body.kb-open .tcnav, body.kb-open .appnav{ transform: translateY(130%); transition: transform .15s ease; } } @media(min-width:900px){ .tcnav,.appnav{top:0;right:auto;bottom:0;width:212px;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px;border-top:none;border-right:1px solid var(--border);padding:16px 12px;} .tcnav-brand,.appnav-brand{display:flex;align-items:center;text-decoration:none;color:var(--text);padding:4px 8px 18px;} /* Texte à droite de l'icône */ .tcnav-item,.appnav-item{flex:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;font-size:14px;padding:10px 12px;border-radius:var(--r);} .tcnav-item:hover,.appnav-item:hover{background:var(--surface-2);} .tcnav-item.active,.appnav-item.active{background:var(--soft);} .tcnav-item .tcnav-lab,.appnav-item .lab{white-space:nowrap;} .tcnav-item.tcnav-admin,.appnav-item.appnav-admin{margin-top:auto;} /* Admin ancré en bas (dernier) */ body.has-tcnav{padding-bottom:0;padding-left:212px;} } /* ---- Header haut partagé (logo + cloche notif) ---- Mobile : barre sticky en haut (.tctop). Desktop : logo+cloche dans la sidebar (.tcnav-top). */ .tctop,.apptop{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:75;background:var(--surface);border-bottom:1px solid var(--border);padding:9px 14px;padding-top:calc(env(safe-area-inset-top,0px) + 9px);} .tctop-logo,.apptop-logo{display:flex;align-items:center;text-decoration:none;color:var(--text);} .tctop-bell,.tcnav-bell,.apptop-bell,.appnav-bell{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r);color:var(--text);text-decoration:none;flex-shrink:0;} /* BANDEAU : la cloche prend la hauteur de la pastille d'equipe (30 px). Sinon son badge, place en haut a droite d'une boite de 38 px, sortait au-dessus de la pastille et la cloche paraissait decalee. */ .tctop-bell,.apptop-bell{width:30px;height:30px;} .tctop-bell .tc-badge,.apptop-bell .tc-badge{top:-4px;right:-4px;min-width:15px;height:15px;line-height:15px;font-size:9.5px;border:1.5px solid var(--surface);box-sizing:content-box;} .tctop-bellic,.tcnav-bellic,.apptop-bell .ic,.appnav-bell .ic,.apptop-bell [data-icon],.appnav-bell [data-icon]{width:22px;height:22px;display:inline-flex;} .tctop-bellic svg,.tcnav-bellic svg,.apptop-bell .ic svg,.appnav-bell .ic svg{width:100%;height:100%;} .tc-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;background:var(--flag);color:#fff;border-radius:8px;font-size:10px;font-weight:800;line-height:16px;text-align:center;padding:0 3px;} .tcnav-top,.appnav-top{display:none;} @media(min-width:900px){ .tctop,.apptop{display:none;} .tcnav-top,.appnav-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:4px 4px 16px;} .tcnav-brand,.appnav-brand{display:flex;padding:0;} .tcnav-bell,.appnav-bell{color:var(--muted);} /* Contenu pleine largeur sur les pages in-app (comme la Video Room), au lieu d'un bloc centré étroit. */ body.has-tcnav .wrap{max-width:none;padding-left:28px;padding-right:28px;} } /* ============================================================ BARRE LATÉRALE REPLIABLE (desktop uniquement). Etat = classe html.tc-navcol, posee tot par theme.js (persistee dans tc-navcol) → sidebar en icône seule. Bouton = [data-navcollapse] (delegue par theme.js), present dans .tcnav-top (pages shell) ET .appnav-top (SPA, cf. style.css pour le repli .appnav). ============================================================ */ /* Chevron replier = ITEM de nav (dans le groupe bas .tcnav-bottom/.appnav-bottom, SOUS Admin). Groupe bas : transparent en mobile (barre du bas), ancre en bas de la sidebar en desktop. */ .tcnav-bottom,.appnav-bottom{display:contents;} .tcnav-bottom .nav-collapse,.appnav-bottom .nav-collapse{display:none;} /* cache en mobile (repli = desktop only) */ @media(min-width:900px){ .tcnav-bottom,.appnav-bottom{display:flex;flex-direction:column;gap:2px;margin-top:auto;} .tcnav-item.tcnav-admin,.appnav-item.appnav-admin{margin-top:0;} /* l'ancrage bas est gere par le groupe */ .tcnav-bottom .nav-collapse,.appnav-bottom .nav-collapse{display:flex;} .nav-collapse{color:var(--muted);} .nav-collapse svg{transition:transform .18s ease;} html.tc-navcol .nav-collapse svg{transform:rotate(180deg);} /* MARK a HAUTEUR FIXE : le logo (icone) reste au MEME endroit quand le wordmark disparait au repli (sinon la ligne du brand se raccourcit et le mark, centre, remonte). Alignement NATUREL center -> le wordmark ET la cloche restent alignes avec le mark (demande util.). */ .tcnav-brand .tclogo-mark,.appnav-brand .tclogo-mark{height:26px;display:inline-flex;align-items:center;} .tcnav-brand .tclogo-mark svg,.appnav-brand .tclogo-mark svg{height:26px;width:auto;display:block;} /* wordmark + cloche cales sur la MEME hauteur (26) que le mark -> tout est aligne (centres) et le mark ne bouge pas quand le wordmark disparait (la ligne du brand reste 26). */ .tcnav-brand .tclogo-word,.appnav-brand .tclogo-word{line-height:26px;display:flex;align-items:center;} /* Cloche calee sur la ligne du logo. Le mark ET la cloche font 26 de haut et demarrent tous les deux en haut du conteneur (align-items:flex-start) : ils s'alignent donc NATURELLEMENT, sans decalage. Le margin-top:-6px d'avant (2026-07) la remontait de 6px AU-DESSUS du logo — visible a l'oeil sur toutes les pages (signale 31.07). Ne pas le remettre : si la cloche parait basse, c'est la hauteur du mark qu'il faut regarder, pas une marge negative de compensation. */ .tcnav-bell,.appnav-bell{height:26px;align-self:flex-start;} /* Repli 64px. Padding horizontal garde -> le mark ne bouge pas en x. */ html.tc-navcol .tcnav,html.tc-navcol .appnav{width:64px;} html.tc-navcol body.has-tcnav{padding-left:64px;} html.tc-navcol .tcnav-item,html.tc-navcol .appnav-item{justify-content:center;padding:10px 0;gap:0;} html.tc-navcol .tcnav-item .tcnav-lab,html.tc-navcol .appnav-item .lab{display:none;} .tcnav-top,.appnav-top{box-sizing:border-box;} html.tc-navcol .tclogo-word{display:none;} html.tc-navcol .tcteam,html.tc-navcol .appnav-viewas{display:none !important;} } /* La cloche disparaît de la sidebar repliée du BUREAU seulement : couchée, la bande est le seul endroit qui reste pour elle (la barre du haut y est masquée), et un `!important` dans le bloc ci-dessus la rendrait impossible à rappeler. D'où la condition de hauteur, plutôt qu'une surcharge en face. */ @media(min-width:900px) and (min-height:561px){ html.tc-navcol .tcnav-bell,html.tc-navcol .appnav-bell{display:none !important;} } /* ============================================================ TÉLÉPHONE COUCHÉ — la nav passe à GAUCHE, en icônes seules. Couché, l'écran n'a plus que ~390 px de haut : la barre du bas en mange 74, soit un cinquième de l'app, alors que la largeur est devenue abondante. On reprend donc exactement la sidebar REPLIÉE du bureau (64 px, icônes sans libellé). La barre du HAUT reste en place : c'est de la hauteur qu'on manque, et elle porte la cloche et l'équipe (que la sidebar repliée, elle, masque). Le bloc doit rester APRÈS celui de la sidebar bureau : sur un grand téléphone couché (≥ 900 px de large) c'est lui qui s'appliquait, avec ses 212 px dépliés. Même repère que la fiche clip (style.css) : hauteur ≤ 560 px, donc jamais une tablette ni une fenêtre de bureau réduite. ============================================================ */ @media (orientation:landscape) and (max-height:560px){ /* Bande de largeur FIXE (64 px). L'encoche n'est pas gérée en l'élargissant mais en mettant la bande DU CÔTÉ OÙ IL N'Y EN A PAS : theme.js compare les deux safe-areas et pose html.tc-nav-right quand l'encoche est à gauche (voir la variante plus bas). */ :root{--tcnav-w:64px;} .tcnav,.appnav{top:0;right:auto;bottom:0;width:64px;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px; border-top:none;border-right:1px solid var(--border);overflow-y:auto; padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);} .tcnav-item,.appnav-item{flex:none;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:9px 0;border-radius:var(--r);} .tcnav-item .tcnav-lab,.appnav-item .lab{display:none;} /* La barre du HAUT n'a plus de raison d'être : ses deux occupants rejoignent la bande — le logo en haut, la cloche tout en bas. `display:contents` sur .tcnav-top dissout le conteneur, ce qui rend ses deux enfants directement ordonnables dans la colonne. */ .tctop,.apptop{display:none;} .tcnav-top,.appnav-top{display:contents;} .tcnav-brand,.appnav-brand{display:flex;order:-1;justify-content:center;align-items:center;padding:2px 0 10px;} .tclogo-word{display:none;} .tcnav-brand .tclogo-mark,.appnav-brand .tclogo-mark{height:24px;display:inline-flex;align-items:center;} .tcnav-brand .tclogo-mark svg,.appnav-brand .tclogo-mark svg{height:24px;width:auto;display:block;} .tcnav-bottom,.appnav-bottom{display:flex;flex-direction:column;gap:2px;margin-top:auto;} .tcnav-bottom .nav-collapse,.appnav-bottom .nav-collapse{display:none;} /* déjà replié : rien à replier */ .tcnav-bell,.appnav-bell{display:flex;order:9;align-self:center;margin-top:6px;} /* La chip équipe fait 136 px : dans une bande de 64 elle débordait et faisait scroller la colonne. Comme dans la sidebar repliée du bureau, elle s'efface (le changement d'équipe reste dans Profil). */ .tcnav .tcteam,.appnav .tcteam,.tcnav .appnav-viewas,.appnav .appnav-viewas{display:none;} /* 2 classes : la règle de base de .tcteam vit plus bas dans le fichier */ body.has-tcnav{padding-bottom:0;padding-left:64px;padding-right:0;} /* ENCOCHE À GAUCHE (html.tc-nav-right, posé par theme.js) : la bande file à droite, et c'est le CONTENU qui s'écarte du bord gauche — de la largeur de l'encoche, pas plus. */ html.tc-nav-right .tcnav,html.tc-nav-right .appnav{left:auto;right:0;border-right:none;border-left:1px solid var(--border);} html.tc-nav-right body.has-tcnav{padding-left:env(safe-area-inset-left,0px);padding-right:64px;} } /* ============================================================ RÈGLE GLOBALE — champs date/heure (théme chargé partout). iOS/Safari donne à input[type=date|time] une largeur intrinsèque énorme qui IGNORE width:100% et déborde à droite. appearance:none les force à respecter la largeur du conteneur (et les rend cohérents avec les autres champs déjà stylés). Marche aussi sur Android/Chrome. À garder ici plutôt qu'en correctif par page. ============================================================ */ input[type=date],input[type=time],input[type=datetime-local]{ -webkit-appearance:none;appearance:none;min-width:0;max-width:100%;box-sizing:border-box; min-height:48px;line-height:1.2; /* display:flex + align-items:center = valeur/placeholder centrés verticalement ET hauteur tenue même à VIDE (sinon un input date vide se tasse sur iOS). Règle ici (theme chargé PARTOUT, y c. le SPA app.html qui ne charge pas components.css). */ display:flex;align-items:center; } input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;} input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;} /* PC : on rend l'apparence NATIVE (segments jj/mm/aaaa éditables au clavier + sélecteur) — plus agréable à SAISIR au clavier que la version aplatie. Le fix largeur iOS ne vise que le mobile. */ @media (min-width:641px){ input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:auto;appearance:auto;display:inline-flex;min-height:44px;} } /* En-têtes de tableau triables (générique, cf. tcMakeSortable dans shell.js) : flèche up/down cliquable. Ici (theme chargé partout) pour couvrir le SPA ET les pages shell (admin, équipe…). */ th.tc-th-sort{cursor:pointer;user-select:none;white-space:nowrap;} /* Flèches dessinées en CSS PUR (triangles via bordures) — AUCUN caractère → aucun risque d'emoji. Deux triangles empilés (haut/bas) : les deux atténués = colonne triable ; celui du sens actif = plein. */ th.tc-th-sort .tc-sort-ar{position:relative;display:inline-block;width:8px;height:13px;margin-left:5px;vertical-align:-2px;} th.tc-th-sort .tc-sort-ar::before, th.tc-th-sort .tc-sort-ar::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;opacity:.4;} th.tc-th-sort .tc-sort-ar::before{top:1px;border-bottom:5px solid currentColor;} /* triangle haut */ th.tc-th-sort .tc-sort-ar::after{bottom:1px;border-top:5px solid currentColor;} /* triangle bas */ /* Colonne TRIÉE : on n'affiche QU'UNE flèche (le sens choisi), centrée ; l'autre disparaît. */ th.tc-th-sort .tc-sort-ar.asc::after,th.tc-th-sort .tc-sort-ar.desc::before{display:none;} th.tc-th-sort .tc-sort-ar.asc::before{top:50%;transform:translate(-50%,-50%);opacity:1;} th.tc-th-sort .tc-sort-ar.desc::after{bottom:50%;transform:translate(-50%,50%);opacity:1;} th.tc-th-sort:hover .tc-sort-ar::before,th.tc-th-sort:hover .tc-sort-ar::after{opacity:.7;} th.tc-th-sort.active{color:var(--flag);} /* ============================================================ CHIP « ÉQUIPE ACTIVE » dans le header (à côté du logo, partout). Monté par shell.js. ============================================================ */ .tcteam{position:relative;display:inline-flex;align-items:center;min-width:0;} .tcteam-btn{text-decoration:none;display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--border);border-radius:100px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;max-width:160px;} .tcteam:not(.has-menu) .tcteam-btn{cursor:pointer;} .tcteam-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tcteam-caret{color:var(--muted);font-size:10px;flex-shrink:0;} .tcteam-menu{display:none;position:absolute;top:100%;left:0;margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:6px;min-width:180px;max-width:240px;z-index:120;} .tcteam-menu.open{display:block;} .tcteam-item{display:block;width:100%;text-align:left;background:none;border:none;border-radius:8px;padding:9px 11px;font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;} .tcteam-item:hover{background:var(--surface-2);} .tcteam-item.on{color:var(--flag);} /* Sur la sidebar desktop (logo + cloche), le chip passe sous le logo pour ne pas serrer. */ .tcnav-top,.appnav-top{flex-wrap:wrap;} .tcnav-top .tcteam,.appnav-top .tcteam{order:3;flex-basis:100%;margin-top:8px;} .tcnav-top .tcteam-btn,.appnav-top .tcteam-btn{max-width:100%;}