/* ============================================
   ALFRED FACILITY — Feuille de styles globale
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #0D1B2A;
  --navy-mid:   #1A2E45;
  --navy-light: #243550;
  --gold:       #C9A84C;
  --gold-light: #E8C97A;
  --cream:      #F5F1EA;
  --white:      #FFFFFF;
  --gray:       #6B7280;
  --light:      #F0EDE8;
  --green:      #1D9E75;
  --green-bg:   #E1F5EE;
  --amber:      #BA7517;
  --amber-bg:   #FAEEDA;
  --red:        #A32D2D;
  --red-bg:     #FCEBEB;
  --blue:       #185FA5;
  --blue-bg:    #E6F1FB;
  --purple:     #534AB7;
  --purple-bg:  #EEEDFE;
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--navy); }

/* ── Typographie ── */
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

/* ── Boutons ── */
.btn-primary {
  background: var(--navy); color: var(--white);
  border: none; padding: 10px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; display: inline-flex;
  align-items: center; gap: 6px; transition: background 0.2s;
}
.btn-primary:hover { background: var(--gold); color: var(--navy); }

.btn-gold {
  background: var(--gold); color: var(--navy);
  border: none; padding: 12px 24px; font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: background 0.2s;
}
.btn-gold:hover { background: var(--gold-light); }

.btn-outline {
  background: transparent; color: var(--white);
  padding: 12px 24px; font-size: 14px; border: 1px solid rgba(255,255,255,0.3);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-sec {
  background: var(--white); color: var(--navy);
  border: 1px solid #ddd; padding: 9px 16px; font-size: 13px;
  cursor: pointer; font-family: inherit;
}

/* ── Badges ── */
.badge { font-size: 10px; padding: 3px 8px; border-radius: 20px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
.b-open     { background: var(--blue-bg);   color: var(--blue); }
.b-progress { background: var(--amber-bg);  color: var(--amber); }
.b-resolved { background: var(--green-bg);  color: var(--green); }
.b-closed   { background: #f0ede8;          color: var(--gray); }
.b-urgent   { background: var(--red-bg);    color: var(--red); }
.b-high     { background: var(--amber-bg);  color: var(--amber); }
.b-normal   { background: var(--blue-bg);   color: var(--blue); }
.b-low      { background: var(--green-bg);  color: var(--green); }
.b-ai       { background: var(--purple-bg); color: var(--purple); }

/* ── Formulaires ── */
.ff { margin-bottom: 1.1rem; }
.ff label { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.ff input, .ff select, .ff textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #ddd;
  font-size: 13.5px; font-family: inherit; outline: none;
  color: var(--navy); background: var(--white);
}
.ff input:focus, .ff select:focus, .ff textarea:focus { border-color: var(--gold); }
.ff textarea { resize: vertical; min-height: 110px; }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Cartes stats ── */
.sg { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.sg-3 { grid-template-columns: repeat(3, 1fr); }
.sg-4 { grid-template-columns: repeat(4, 1fr); }
.sc { background: var(--white); border: 0.5px solid #ddd; padding: 1.1rem 1.25rem; }
.sc.gold { border-top: 3px solid var(--gold); }
.sc-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.sc-val { font-size: 1.6rem; font-weight: 700; }

/* ── Flash message ── */
.success-flash {
  background: var(--green-bg); border: 1px solid var(--green);
  color: var(--green); padding: 10px 14px; font-size: 13px;
  margin-bottom: 1rem; display: none; align-items: center; gap: 8px;
}
.success-flash.show { display: flex; }

/* ── Tickets ── */
.tlist { display: flex; flex-direction: column; gap: 0.6rem; }
.tcard {
  background: var(--white); border: 0.5px solid #ddd;
  padding: 0.9rem 1.1rem; cursor: pointer;
  border-left: 3px solid transparent; transition: border-color 0.15s;
}
.tcard:hover { border-left-color: var(--gold); }
.tcard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.tid { font-size: 11px; font-weight: 700; color: var(--gray); }
.ttitle { font-size: 13.5px; font-weight: 600; flex: 1; }
.tcard-meta { display: flex; gap: 1rem; font-size: 11px; color: var(--gray); flex-wrap: wrap; }
.tcard-meta span { display: flex; align-items: center; gap: 3px; }
.assign-chip { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: rgba(29,158,117,0.1); color: var(--green); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.assign-chip.none { background: rgba(163,45,45,0.1); color: var(--red); }

/* ── Filter bar ── */
.filter-bar { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.fb { padding: 5px 12px; font-size: 12px; border: 1px solid #ddd; background: var(--white); cursor: pointer; font-family: inherit; color: var(--gray); border-radius: 20px; }
.fb.active, .fb:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.search-box { margin-left: auto; display: flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid #ddd; padding: 5px 10px; border-radius: 20px; }
.search-box input { border: none; outline: none; font-size: 13px; width: 140px; font-family: inherit; background: transparent; color: var(--navy); }

/* ── Détail grille ── */
.dg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.di label { font-size: 11px; color: var(--gray); display: block; margin-bottom: 2px; }
.di span { font-size: 13.5px; font-weight: 500; }

/* ── Tech ── */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.tech-card { background: var(--white); border: 0.5px solid #ddd; padding: 1.25rem; border-top: 3px solid var(--green); }
.tech-av-big { width: 52px; height: 52px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--green); margin-bottom: 0.75rem; }
.tech-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.tech-role { font-size: 11px; color: var(--gray); margin-bottom: 0.75rem; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.75rem; }
.skill-tag { font-size: 10px; padding: 2px 7px; background: var(--cream); border: 0.5px solid #ddd; color: var(--navy); border-radius: 20px; }
.tech-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.ts-item { text-align: center; background: var(--cream); padding: 5px 2px; }
.ts-v { font-size: 14px; font-weight: 700; color: var(--navy); }
.ts-l { font-size: 9px; color: var(--gray); }
.avail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 4px; }
.avail-dot.busy { background: var(--amber); }
.avail-dot.off  { background: var(--red); }

/* ── IA box ── */
.ai-box { background: var(--purple-bg); border: 1px solid rgba(83,74,183,0.25); padding: 1rem 1.1rem; margin-bottom: 1.25rem; display: flex; gap: 12px; }
.ai-icon { font-size: 22px; color: var(--purple); flex-shrink: 0; margin-top: 2px; }
.ai-title { font-size: 12px; font-weight: 700; color: var(--purple); margin-bottom: 4px; }
.ai-body { font-size: 12.5px; line-height: 1.6; color: var(--navy); }
.ai-tech-card { border: 1px solid rgba(83,74,183,0.2); background: var(--white); padding: 0.75rem 1rem; margin-top: 0.75rem; display: flex; align-items: center; gap: 10px; }
.ai-tc-av { width: 36px; height: 36px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--green); flex-shrink: 0; }
.ai-tc-info { flex: 1; }
.ai-tc-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.ai-tc-sub { font-size: 11px; color: var(--gray); }
.ai-assign-btn { background: var(--purple); color: var(--white); border: none; padding: 7px 14px; font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 600; }
.ai-assign-btn:hover { background: #3C3489; }
.ai-loading { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--purple); }
.dot-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: dp 1.2s ease-in-out infinite; }
@keyframes dp { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1)} }