/* fxtious tracker — le dessin a la charte (« Studio »). Feuille AJOUTEE apres style.css (et client.css) :
   elle ne porte que l'apparence. La retirer du gabarit rend l'interface d'avant, aux couleurs pres.
   Source : Z:\01_WORK\06_COMMUNICATION\IDENTITE_FXTIOUS\_outils\tracker_site.py */
@font-face{font-family:'Sora';src:url('fonts/Sora.woff2') format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono.woff2') format('woff2');font-weight:100 800;font-display:swap}

/* ---------- les jetons de la charte (piste 5 « Canal »). Pas de vert : « tout va bien » est le bleu profond. */
:root{
  --fond:#0B0D10; --panneau:#12151A; --panneau2:#1A1E24; --bord:#262B33; --bord2:#3A414C;
  --texte:#F2F0EB; --pale:#AAB3BF; --muted:#7D8896; --gris:#7D8896;
  --accent:#1FA2FF; --bleu:#1FA2FF; --cyan:#1FA2FF; --vert:#006DBB; --vert-texte:#1FA2FF;
  --violet:#FFB3FF; --rouge:#FF4D4D; --ambre:#FFB347;
  --head:'Sora','Inter',system-ui,sans-serif; --titre:'Sora','Inter',system-ui,sans-serif;
  --corps:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --code:'JetBrains Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
body.theme-clair{--vert-texte:#006DBB; --bord2:#BFBAAE; color-scheme:light}

body{font-family:var(--corps); -webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
::selection{background:rgba(31,162,255,.32)}

/* ---------- l'en-tete : le logo de la charte, un menu en pastilles */
header{min-height:60px; padding:10px 24px; gap:20px; background:rgba(11,13,16,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
header .logo.fxv2{display:flex; align-items:center; flex:none; font-size:0; line-height:0}
header .logo.fxv2 svg{height:26px; width:auto; display:block}
header .logo.fxv2 .lc{display:none}
body.theme-clair header .logo.fxv2 .ls{display:none}
body.theme-clair header .logo.fxv2 .lc{display:block}
header .fil{font-size:13px; color:var(--muted)}
header .fil a{color:var(--pale)}
header .fil a:hover{color:var(--texte); text-decoration:none}
header .droite{gap:8px}
header .droite a{height:34px; display:inline-flex; align-items:center; padding:0 14px; border-radius:99px;
  border:1px solid var(--bord2); color:var(--texte); font-size:12.5px; font-weight:600; letter-spacing:.01em}
header .droite a:hover{border-color:var(--muted); color:var(--texte)}
body.theme-clair > header{background:rgba(255,255,255,.9)}
@media (max-width:700px){header{flex-wrap:wrap; gap:10px} header .logo.fxv2 svg{height:20px} header .droite a{height:30px; padding:0 11px}}

/* ---------- les titres */
main{padding:26px 24px}
h1{font:600 23px/1.25 var(--titre); letter-spacing:-.018em; margin:0 0 6px}
h2{font:600 15.5px/1.3 var(--titre); letter-spacing:-.005em; text-transform:none; color:var(--texte); margin:30px 0 12px}
h3{font-family:var(--titre); letter-spacing:-.008em}
.sous{color:var(--pale)}

/* ---------- les cartes, les tableaux */
.carte{border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.carte:hover{border-color:var(--bord2)}
.carte h3{font-size:16px; font-weight:600}
table{border-radius:16px; border-collapse:separate; border-spacing:0}
th{padding:12px 14px; font:600 12px var(--corps); letter-spacing:.02em; text-transform:none; color:var(--muted);
  background:transparent; border-bottom:1px solid var(--bord)}
td{padding:10px 14px; border-bottom:1px solid var(--bord)}
tr:hover td{background:var(--panneau2)}
td.num,.chemin,.fxp-temps,.fxp-img,.ver-num{font-family:var(--code)}
.chemin{font-size:12px}
.vide{border-radius:16px}

/* ---------- les pastilles de statut : aucune n'est verte. « Approuve » est une pastille pleine, bleu profond. */
.pastille{border-radius:99px; padding:3px 10px; font:600 12px/1.35 var(--corps); letter-spacing:.01em}
.s-a_faire{background:rgba(125,136,150,.16); color:var(--pale)}
.s-en_attente{background:rgba(125,136,150,.11); color:var(--muted)}
.s-en_cours{background:rgba(31,162,255,.15); color:#1FA2FF}
.s-en_review{background:rgba(255,179,255,.13); color:#FFB3FF}
.s-retake{background:rgba(255,77,77,.15); color:#FF6B6B}
.pastille.s-approuve,.s-approuve{background:#006DBB; color:#F2F0EB}
.s-omis{background:rgba(125,136,150,.09); color:var(--muted)}
.badge{border-radius:99px; background:rgba(255,77,77,.15); color:#FF6B6B; font-size:12px}
.pastille-nouv{border-radius:99px}
.barre{height:6px; border-radius:99px; background:var(--bord)}
.barre span{background:#006DBB; border-radius:99px}

/* ---------- les vignettes */
.vign,.vign-vide{border-radius:8px}
.ver-vign,.vide-vign{border-radius:10px}

/* ---------- les filtres, les onglets */
.filtres a{border-radius:99px; padding:5px 13px; font-size:12.5px; font-weight:600}
.filtres a.on{background:rgba(31,162,255,.14); border-color:#1FA2FF; color:var(--texte)}
.filtres a:hover{border-color:var(--bord2)}
.onglets{gap:4px; margin:-4px 0 22px}
.onglets a{padding:10px 16px; font-size:13px; font-weight:600; border-radius:10px 10px 0 0; color:var(--muted)}
.onglets a:hover{background:transparent; color:var(--texte)}
.onglets a.on{background:transparent; color:var(--texte); border-bottom-color:#1FA2FF}
.chip{border-radius:99px}
.outils{border-radius:16px}

/* ---------- les champs, les boutons */
select,input[type=text],input[type=password],input[type=number],input[type=search],input[type=date],input[type=email],textarea{
  background:var(--fond); border:1px solid var(--bord2); border-radius:10px; padding:7px 11px}
select:focus,input:focus,textarea:focus{border-color:#1FA2FF}
button{border-radius:99px; padding:7px 15px; font-weight:600; font-size:13px; background:var(--panneau2); border:1px solid var(--bord2)}
button:hover{background:#262B33; border-color:var(--muted)}
button.primaire{background:#1FA2FF; border-color:#1FA2FF; color:#06080A}
button.primaire:hover{background:#4DB5FF; border-color:#4DB5FF}
button.discret{background:transparent}
button.btn-dossier{border-radius:10px}
button.btn-review{border-radius:99px; background:#FFB347; border-color:#FFB347; color:#1A1005}
button.btn-review:hover{background:#FFC46B}
.fxp-b,.rv-transport button,.rv-outils button,.rv-couleurs button,.fxp-gros{border-radius:revert}
.fxp-b{border-radius:6px; padding:3px 6px; font-weight:400; background:none; border:none}
.fxp-gros{border-radius:50%}

/* ---------- le plan : lecteur, versions, notes */
.lecteur{border-radius:16px}
.lecteur-num{font-family:var(--titre)}
.ver{border-radius:16px}
.ver:hover{border-color:var(--bord2)}
.ver.actif{border-color:#1FA2FF}
.ver-notes{background:rgba(0,0,0,.18)}
.note{border-radius:0 12px 12px 0}
.note-marque{border-radius:6px}
.note-marque.rep{background:#1FA2FF; color:#06080A}
.infos-plan,.reglage-vignette,.tiroir-envoi{border-radius:16px}
.tiroir-envoi{border-color:#1FA2FF}
.tiroir-cpt{font-family:var(--titre)}
#review{border-radius:20px; border-color:var(--bord2)}
.rv-titre{font-family:var(--titre)}
#toast{border-radius:99px}

/* ---------- la connexion */
.cli-porte{border-radius:20px}
.cli-porte-tete.fxv2{display:flex; justify-content:center; font-size:0; line-height:0}
.cli-porte-tete.fxv2 svg{height:22px; width:auto; display:block}
.cli-porte-tete.fxv2 .lc{display:none}
body.theme-clair .cli-porte-tete.fxv2 .ls{display:none}
body.theme-clair .cli-porte-tete.fxv2 .lc{display:block}
.cli-envoi,.cli-plan,.dep-carte,.dep-zone,.cli-note,.dep-item{border-radius:16px}
.cli-plan-vign{border-radius:10px}
.cli-onglets a{border-radius:99px}
.connexion{border-radius:20px}
.connexion h1{font-family:var(--titre)}

/* ---------- les barres de defilement : une pastille discrete, bleue sous la souris */
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:#3A414C; border-radius:99px; border:3px solid transparent; background-clip:content-box; min-height:48px}
::-webkit-scrollbar-thumb:hover{background:#1FA2FF; border:3px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:#1FA2FF; border:2px solid transparent; background-clip:content-box}
body.theme-clair ::-webkit-scrollbar-thumb{background:#BFBAAE; border:3px solid transparent; background-clip:content-box}
body.theme-clair ::-webkit-scrollbar-thumb:hover{background:#006DBB; border:3px solid transparent; background-clip:content-box}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin; scrollbar-color:#3A414C transparent}}