/* ============================================================================
   Cockpit X — refonte « noir dominant + accents dans le contenu » (31/07/2026)
   Source de vérité visuelle : templates/Cockpit X Refonte.dc.html
   Le détail spécifique vit en inline dans les vues ; ici : polices, variables,
   base, keyframes, composants récurrents et tous les états :hover.
   ========================================================================== */

/* ---------- Polices Geist auto-hébergées (variables wght 100-900) ---------- */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Variables du système de design ---------- */
:root{
  --t1:#f5f5f5; --t2:#c9c9c9; --t3:#a1a1a1; --t4:#6f6f6f; --t5:#4d4d4d;
  --p1:#a78bfa; --p2:#f472b6; --p3:#fbbf24; --p4:#fb7185; --p5:#4ade80;
  --vert:#4ade80; --ambre:#fbbf24; --rouge:#fb7185; --violet:#a78bfa;
  --fond-carte:linear-gradient(180deg,#0e0e0e,#0a0a0a);
  --fond-tuile:linear-gradient(180deg,#1a1a1a,#101010);
  --bord:rgba(255,255,255,0.08); --bord-sep:rgba(255,255,255,0.07);
  --bord-fort:rgba(255,255,255,0.22); --bord-champ:rgba(255,255,255,0.14);
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Base (maquette) ---------- */
html,body{margin:0;padding:0;background:#000;color:#f5f5f5;font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#f5f5f5;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,0.3)}
a:hover{color:#fff;text-decoration-color:#fff}
a.nolink{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(255,255,255,0.55) !important}
textarea{resize:vertical}
select option{background:#0a0a0a;color:#f5f5f5}
::selection{background:#fff;color:#000}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#262626;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3a3a3a}
::-webkit-scrollbar-track{background:#000}

/* ---------- Keyframes (maquette) + alias historiques ---------- */
@keyframes ckxPulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes ckxSpin{to{transform:rotate(360deg)}}
@keyframes ckxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ckxGrow{from{transform:scaleX(0)}}
@keyframes ckxGrowY{from{transform:scaleY(0)}}
@keyframes ckxDash{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}
@keyframes ckxRing{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}
@keyframes ckxGlow{0%,100%{opacity:.45}50%{opacity:1}}
/* alias conservés (anciens noms encore possibles dans des fragments) */
@keyframes ckx-pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes ckx-spin{to{transform:rotate(360deg)}}
@keyframes ckx-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Composants récurrents ---------- */
.carte{background:var(--fond-carte);border:1px solid var(--bord);border-radius:16px}
.sscarte{background:rgba(255,255,255,0.015);border:1px solid var(--bord-sep);border-radius:12px}
.mono{font-family:var(--mono)}
.lab{font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--t4)}
.microlab{font-family:var(--mono);font-size:9.5px;letter-spacing:0.6px;color:var(--t5)}
.kpi{font-size:34px;font-weight:700;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.titrec{font-size:16px;font-weight:700;letter-spacing:-0.2px}
.badgeb{font-family:var(--mono);background:#fff;color:#000;font-size:10.5px;font-weight:700;border-radius:9999px;padding:2px 9px}
.champ{background:#060606;border:1px solid var(--bord-champ);border-radius:12px;color:#f5f5f5;padding:10px 13px;font-size:13.5px;box-sizing:border-box;transition:border-color .2s}
.pchamp{background:#060606;border:1px solid var(--bord-champ);border-radius:9999px;color:#f5f5f5;padding:9px 15px;font-size:13px;box-sizing:border-box;transition:border-color .2s}
.btnp{background:#fff;color:#000;border:none;border-radius:9999px;font-weight:700;cursor:pointer;box-shadow:0 2px 18px rgba(255,255,255,0.12);transition:background .15s}
.btng{background:transparent;color:#f5f5f5;border:1px solid var(--bord-fort);border-radius:9999px;font-weight:600;cursor:pointer;transition:background .15s}
.btnd{background:transparent;border:none;color:var(--t4);cursor:pointer;transition:color .15s}
.pastille{width:6px;height:6px;border-radius:50%;background:var(--vert);box-shadow:0 0 8px rgba(74,222,128,0.8);animation:ckxPulse 2.4s infinite}
.ppilier{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,0.18);border-top-color:#f5f5f5;border-radius:50%;animation:ckxSpin .8s linear infinite;display:inline-block}
.spin-ia{border-top-color:var(--violet)}
.cache{display:none !important}

/* ---------- États hover (style-hover de la maquette → classes) ---------- */
.hkpi{transition:all .2s}
.hkpi:hover{border-color:rgba(255,255,255,0.2) !important;transform:translateY(-2px)}
.hbord16:hover{border-color:rgba(255,255,255,0.16) !important}
.hbordc:hover{border-color:var(--bord-fort) !important}
.hnav:hover{background:rgba(255,255,255,0.07) !important}
.hbtn:hover{background:#d9d9d9 !important}
.hghost:hover{background:rgba(255,255,255,0.08) !important}
.hghost6:hover{background:rgba(255,255,255,0.06) !important}
.hfg:hover{color:#f5f5f5 !important}
.hop:hover{opacity:.75}
.hinvert:hover{background:#f5f5f5 !important;color:#000 !important}
.hlock:hover{color:#fff !important;background:rgba(255,255,255,0.1) !important}
.hrouge:hover{color:var(--rouge) !important;border-color:rgba(251,113,133,0.5) !important}
.hxrouge:hover{color:var(--rouge) !important}
.htroll:hover{background:rgba(251,113,133,0.12) !important}
.hscale:hover{transform:scale(1.06)}
.hblanc:hover{color:#fff !important}

/* ---------- Coquille de l'application ---------- */
.shell{display:flex;min-height:100vh;background:#000;max-width:1560px;margin:0 auto}
.rail{width:252px;flex-shrink:0;border-right:1px solid var(--bord);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:16px 13px;box-sizing:border-box}
.contenu{flex:1;min-width:0;background:radial-gradient(1100px 380px at 50% -120px,rgba(255,255,255,0.05),transparent 70%)}
.entete{position:sticky;top:0;z-index:6;background:rgba(0,0,0,0.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--bord);padding:14px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.chip-etat{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;border:1px solid rgba(255,255,255,0.12);border-radius:9999px;padding:6px 13px;background:rgba(255,255,255,0.03);display:flex;align-items:center;gap:7px}
.nav-lien{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:12px;font-size:14px;cursor:pointer;transition:background .15s;position:relative}

/* ---------- Toast (pilule blanche bas-centre, 2,6 s côté JS) ---------- */
#ckx-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:120;background:#fff;color:#000;font-weight:700;font-size:13.5px;border-radius:9999px;padding:11px 22px;animation:ckxUp .2s ease;box-shadow:0 8px 30px rgba(0,0,0,0.6)}

/* ---------- Écrans étroits : dégradation propre ---------- */
@media (max-width:1080px){
  .rail{width:66px;padding:16px 8px}
  .rail .rail-txt,.rail .rail-marque,.rail .rail-cron,.rail .rail-user{display:none}
  .nav-lien{justify-content:center;padding:11px 8px}
  .nav-lien .badgeb{position:absolute;top:2px;right:2px;margin-left:0 !important}
}
@media (max-width:940px){
  .g2,.g2a,.g3,.g4{grid-template-columns:1fr !important}
  .entete{padding:12px 16px}
  .ecran{padding:18px 14px !important}
}

/* ---------- Recherche approfondie (fix18) : radar de balayage ---------- */
.sonde-radar{position:relative;width:190px;height:190px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);background:radial-gradient(circle at center,rgba(74,222,128,0.06),transparent 72%);overflow:hidden;flex-shrink:0}
.sonde-cercle{position:absolute;border:1px solid rgba(255,255,255,0.1);border-radius:50%}
.sonde-axe-h{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,0.07)}
.sonde-axe-v{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,0.07)}
.sonde-balayage{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(74,222,128,0.45),rgba(74,222,128,0.1) 55deg,transparent 95deg);animation:sondeTourne 2.6s linear infinite}
.sonde-blip{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--vert);box-shadow:0 0 9px rgba(74,222,128,0.85);animation:sondeBlipNait .5s ease backwards,ckxPulse 2.6s .5s infinite}
.sonde-fini .sonde-balayage{animation-play-state:paused;opacity:.22}
@keyframes sondeTourne{to{transform:rotate(360deg)}}
@keyframes sondeBlipNait{from{transform:scale(.2);opacity:0}60%{transform:scale(1.35)}to{transform:scale(1);opacity:1}}

/* ---------- Aperçu « rendu X » d'un post (fix20) ----------
   Fidélité au vrai rendu : police système (celle que X affiche quand Chirp n'est pas
   chargée), 15px/20px de la timeline, retours à la ligne EXACTS via pre-wrap, grille
   média aux règles réelles de X (1 / 2 / 3 / 4 images). */
.xap-ov{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:2100;display:flex;align-items:flex-start;justify-content:center;padding:28px 20px;overflow:auto}
.xap-boite{max-width:620px;width:100%;animation:ckxUp .25s ease}
.xap-barre{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px}
.xap-titre{font-size:15px;font-weight:800;color:#f5f5f5}
.xap-etiq{font-family:var(--mono),ui-monospace,monospace;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:#a8a8a8;border:1px solid rgba(255,255,255,0.18);border-radius:4px;padding:2px 7px}
.xap-fermer{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,0.2);border-radius:9999px;color:#f5f5f5;width:30px;height:30px;font-size:14px;cursor:pointer;line-height:1;flex-shrink:0}
.xap-fermer:hover{border-color:rgba(255,255,255,0.5)}
.xap-post{background:#000;border:1px solid #2f3336;border-radius:16px;padding:14px 16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#e7e9ea}
.xap-tete{display:flex;gap:12px;align-items:flex-start}
.xap-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;color:#000;background:#d9d9d9}
.xap-ident{min-width:0;flex:1}
.xap-ligne1{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:15px;line-height:20px}
.xap-nom{font-weight:700;color:#e7e9ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.xap-handle,.xap-sep,.xap-date{color:#71767b;font-weight:400}
.xap-texte{font-size:15px;line-height:20px;color:#e7e9ea;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.xap-lien{color:#1d9bf0;text-decoration:none}
.xap-medias{margin-top:12px;border-radius:16px;overflow:hidden;border:1px solid #2f3336;display:grid;gap:2px}
.xap-medias.n1{grid-template-columns:1fr}
.xap-medias.n2{grid-template-columns:1fr 1fr}
.xap-medias.n3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.xap-medias.n3 .xap-media:first-child{grid-row:span 2}
.xap-medias.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.xap-media{width:100%;height:100%;object-fit:cover;display:block;background:#16181c}
.xap-medias.n1 .xap-media{max-height:510px;aspect-ratio:16/9}
.xap-medias.n2 .xap-media,.xap-medias.n4 .xap-media{aspect-ratio:1/1}
.xap-medias.n3 .xap-media{aspect-ratio:2/1}
.xap-medias.n3 .xap-media:first-child{aspect-ratio:auto;height:100%}
.xap-sondage{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.xap-opt{border:1px solid #536471;border-radius:9999px;padding:7px 16px;font-size:14px;line-height:20px;
  color:#1d9bf0;font-weight:700;text-align:center}
.xap-sondage-pied{font-size:13px;color:#71767b;margin-top:2px}
.xap-actions{display:flex;align-items:center;justify-content:space-between;margin-top:12px;max-width:425px;color:#71767b}
.xap-act{display:flex;align-items:center;gap:6px;font-size:13px}
.xap-act svg{width:18.75px;height:18.75px;fill:currentColor}
.xap-diag{margin-top:14px;border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:12px 14px;background:#0a0a0a;
  display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.xap-puce{font-family:var(--mono),ui-monospace,monospace;font-size:10px;letter-spacing:0.6px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.16);border-radius:9999px;padding:4px 10px;color:#a8a8a8;white-space:nowrap}
.xap-puce.ok{color:var(--vert);border-color:rgba(74,222,128,0.4)}
.xap-puce.ko{color:var(--rouge);border-color:rgba(251,113,133,0.45)}
.xap-puce.att{color:var(--ambre);border-color:rgba(251,191,36,0.42)}
.xap-note{font-size:11.5px;color:#7a7a7a;line-height:1.6;margin-top:10px}
@media (max-width:620px){ .xap-actions{max-width:none} }

/* ---------- Revue rapide des réponses (fix41) ----------
   Le chrome reste noir & blanc : la carte courante est cerclée de blanc, les autres
   s'effacent. Aucune couleur ajoutée — la couleur appartient au contenu. */
.revue-on [data-mention]{opacity:.34;transition:opacity .18s ease}
.revue-on [data-mention].revue-active{opacity:1}
.revue-active{border-color:rgba(255,255,255,0.55) !important;box-shadow:0 0 0 1px rgba(255,255,255,0.18)}
.revue-fait{opacity:.4 !important}
.revue-barre{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;padding:12px 22px;background:rgba(0,0,0,0.94);border-top:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(8px)}
.revue-barre .revue-compte{font-family:var(--mono),ui-monospace,monospace;font-size:12px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.revue-score{border:1px solid rgba(255,255,255,0.22);border-radius:9999px;padding:2px 10px;
  font-size:10.5px;letter-spacing:0.8px}
.revue-touches{display:flex;gap:9px;flex-wrap:wrap;flex:1;min-width:0}
.revue-touche{font-family:var(--mono),ui-monospace,monospace;font-size:10.5px;letter-spacing:0.5px;
  color:#8a8a8a;white-space:nowrap}
.revue-touche b{color:#e8e8e8;border:1px solid rgba(255,255,255,0.22);border-radius:5px;padding:1px 6px;
  margin-right:5px;font-weight:700}
@media (max-width:760px){ .revue-touches{display:none} }

/* ---------- Accessibilité : réduction des animations ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}