/* Hirely — feuille de style unique. Variables en tête pour ajuster le thème
   d'un coup. Accent orange repris du CV pour la cohérence de marque. */
:root {
  --accent:        #e8590c;
  --accent-clair:  #fff1e8;
  --fond:          #f4f5f7;
  --surface:       #ffffff;
  --texte:         #1d2127;
  --texte-doux:    #6b7280;
  --bordure:       #e3e6ea;
  --danger:        #c92a2a;
  --relance:       #e8590c;
  --rayon:         10px;
  --ombre:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
}

/* ── Barre du haut ──────────────────────────────────────────────── */
.barre {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 10;
}
.barre-gauche, .barre-actions { display: flex; align-items: center; gap: .75rem; }
.logo { font-weight: 800; font-size: 1.25rem; color: var(--accent); letter-spacing: -.5px; }
.badge-relance-global {
  background: var(--accent-clair); color: var(--accent);
  font-weight: 600; font-size: .8rem; padding: .25rem .6rem; border-radius: 999px;
}

/* ── Recherche + toggle de vue ──────────────────────────────────── */
/* On annule la règle globale input{display:block;width:100%} dans la barre. */
.barre .recherche {
  display: inline-block; width: min(260px, 38vw); margin-top: 0; padding: .45rem .7rem;
}
.toggle { display: inline-flex; border: 1px solid var(--bordure); border-radius: 8px; overflow: hidden; }
.toggle input { display: none; }
.toggle label {
  padding: .45rem .85rem; font-size: .85rem; cursor: pointer;
  color: var(--texte-doux); background: #fff; user-select: none;
}
.toggle label:last-of-type { border-left: 1px solid var(--bordure); }
.toggle input:checked + label { background: var(--accent); color: #fff; }

/* ── Boutons ────────────────────────────────────────────────────── */
button { font: inherit; cursor: pointer; }
.btn-principal {
  background: var(--accent); color: #fff; border: none;
  padding: .5rem .9rem; border-radius: var(--rayon); font-weight: 600;
}
.btn-principal:hover { filter: brightness(.95); }
.lien { background: none; border: none; color: var(--texte-doux); text-decoration: underline; padding: .5rem; }
.danger { background: none; border: 1px solid var(--danger); color: var(--danger); padding: .5rem .9rem; border-radius: var(--rayon); }
.danger:hover { background: var(--danger); color: #fff; }

/* ── Board kanban ───────────────────────────────────────────────── */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 1rem;
  padding: 1.25rem;
  overflow-x: auto;
  align-items: stretch; /* les colonnes prennent toute la hauteur du board */
  min-height: calc(100vh - 60px);
}
.colonne { background: transparent; display: flex; flex-direction: column; min-width: 0; }
.colonne-tete {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texte-doux); margin: 0 0 .6rem; display: flex; gap: .4rem; align-items: center;
}
.compteur {
  background: var(--bordure); color: var(--texte-doux);
  border-radius: 999px; padding: 0 .5rem; font-size: .75rem;
}
/* flex:1 → la zone de cartes occupe toute la hauteur restante de la colonne,
   donc la colonne entière (même vide) est une cible de dépôt valide. */
.colonne-cartes { display: flex; flex-direction: column; gap: .6rem; flex: 1 1 auto; min-height: 120px; }

/* ── Carte ──────────────────────────────────────────────────────── */
.carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: .7rem .8rem; box-shadow: var(--ombre);
  cursor: pointer; transition: border-color .15s;
}
.carte:hover { border-color: var(--accent); }
.carte-fantome { opacity: .4; }
.carte-tete { display: flex; justify-content: space-between; align-items: start; gap: .4rem; }
.carte-entreprise { font-size: .95rem; }
.carte-poste { color: var(--texte); font-size: .85rem; margin-top: .15rem; }
.carte-meta { color: var(--texte-doux); font-size: .75rem; margin-top: .35rem; }
.badge-relance {
  background: var(--relance); color: #fff; font-size: .68rem; font-weight: 700;
  padding: .12rem .45rem; border-radius: 999px; white-space: nowrap;
}
.carte-badges { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
/* Pastille de score de match : vert > 70, orange entre, rouge < 30. */
.pastille-score {
  font-size: .68rem; font-weight: 700; padding: .12rem .45rem;
  border-radius: 999px; white-space: nowrap;
}
.pastille-score.vert   { background: #e6f4ea; color: #1e7e34; }
.pastille-score.orange { background: #fff4e5; color: #b26a00; }
.pastille-score.rouge  { background: #fdecea; color: #c0392b; }

/* ── Fiche détail (modale centrée) ──────────────────────────────── */
/* #detail est une <dialog> : le style générique dialog{} (plus bas) lui donne
   le centrage, le fond et l'ombre ; on ne fait qu'élargir et plafonner la
   hauteur, car la fiche contient beaucoup de champs + le journal. */
#detail { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; }
.detail-tete { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.detail-tete h2 { margin: 0; font-size: 1.15rem; }
.detail-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.lien-offre {
  font-size: .8rem; text-decoration: none; white-space: nowrap;
  color: var(--accent); border: 1px solid var(--accent);
  padding: .3rem .6rem; border-radius: 8px;
}
.lien-offre:hover { background: var(--accent); color: #fff; }
.detail-poste { color: var(--texte-doux); margin: .15rem 0 1rem; }
.fermer { background: none; border: none; font-size: 1.1rem; color: var(--texte-doux); }

/* ── Formulaires ────────────────────────────────────────────────── */
label { display: block; font-size: .8rem; color: var(--texte-doux); margin-bottom: .6rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .2rem;
  padding: .45rem .55rem; border: 1px solid var(--bordure);
  border-radius: 8px; font: inherit; background: #fff; color: var(--texte);
}
textarea { resize: vertical; min-height: 3.5rem; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-clair); border-color: var(--accent); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
label.checkbox { display: flex; align-items: center; gap: .4rem; color: var(--texte); }
label.checkbox input { width: auto; margin: 0; }
menu { display: flex; gap: .5rem; padding: 0; margin: 1rem 0 0; }

/* ── Journal ────────────────────────────────────────────────────── */
.journal { margin-top: 1.5rem; border-top: 1px solid var(--bordure); padding-top: 1rem; }
.journal h3 { margin: 0 0 .6rem; font-size: 1rem; }
.form-journal { display: grid; grid-template-columns: auto 130px 1fr auto; gap: .4rem; align-items: center; }
.form-journal input, .form-journal select { margin-top: 0; }
.journal-liste { list-style: none; padding: 0; margin: 1rem 0 0; }
.journal-item {
  display: grid; grid-template-columns: 80px 70px 1fr; gap: .5rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--bordure); font-size: .85rem;
}
.journal-date { color: var(--texte-doux); font-size: .78rem; }
.journal-type {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--accent); font-weight: 700;
}

/* ── Modale (dialog natif) ──────────────────────────────────────── */
dialog {
  border: none; border-radius: var(--rayon); padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.2); width: min(420px, 92vw);
}
dialog::backdrop { background: rgba(0,0,0,.35); }
.form-modale h2 { margin: 0 0 1rem; }

/* ── Page de connexion (split-screen : visuel | formulaire) ──────── */
.page-login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }

/* Panneau visuel : mesh gradient de marque, 100 % CSS (aucune image). */
.login-visuel {
  position: relative; overflow: hidden; color: #fff;
  padding: 2.75rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    linear-gradient(155deg, rgba(24,10,34,.30), rgba(24,10,34,.60)),
    radial-gradient(at 18% 20%, #fb923c 0, transparent 45%),
    radial-gradient(at 84% 10%, #fb7185 0, transparent 45%),
    radial-gradient(at 75% 88%, #a21caf 0, transparent 50%),
    radial-gradient(at 6% 94%, #e8590c 0, transparent 45%),
    radial-gradient(at 100% 60%, #7c3aed 0, transparent 45%),
    #2a0e3a;
}
.login-marque-v { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; }
.login-marque-v .logo { color: #fff; font-size: 1.25rem; }

.login-pitch { position: relative; z-index: 2; max-width: 30ch; margin: auto 0; }
.login-pitch h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1.12;
  letter-spacing: -1px; margin: 0 0 .9rem;
}
.login-pitch p { font-size: 1.02rem; line-height: 1.55; opacity: .9; margin: 0; max-width: 30ch; }
.login-credit { position: relative; z-index: 2; font-size: .75rem; opacity: .65; margin: 0; }

/* Fausses cartes kanban flottantes (décor) */
.kanban-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mini-carte {
  position: absolute; width: 168px; height: 96px; border-radius: 14px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(3px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.5);
  border-top: 3px solid rgba(255,255,255,.65);
}
.mini-carte.c1 { right: 8%;  top: 16%;  transform: rotate(7deg); }
.mini-carte.c2 { right: 20%; top: 34%;  transform: rotate(-5deg); opacity: .8; }
.mini-carte.c3 { right: 4%;  bottom: 16%; transform: rotate(-9deg); opacity: .65; }

/* Panneau formulaire */
.login-panneau { display: grid; place-items: center; padding: 2rem; background: var(--surface); }
.login-form-wrap { width: min(360px, 100%); animation: login-apparition .5s ease both; }
@keyframes login-apparition {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-brand-mobile { display: none; align-items: center; gap: .6rem; margin-bottom: 1.6rem; }
.login-brand-mobile .logo { font-size: 1.25rem; }
.login-tete { margin-bottom: 1.6rem; }
.login-tete h1 { margin: 0 0 .35rem; font-size: 1.65rem; letter-spacing: -.5px; }
.sous-titre { color: var(--texte-doux); margin: 0; font-size: .9rem; }

.login-badge {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(135deg, var(--accent), #f97316);
  color: #fff; font-weight: 800; font-size: 1.35rem; line-height: 1;
  box-shadow: 0 6px 16px -4px rgba(232,89,12,.6);
}
.login-form { display: block; }
.login-form label { margin: 0 0 .3rem; font-size: .82rem; color: var(--texte-doux); }
.login-form input { margin: 0 0 .9rem; }
.btn-login {
  width: 100%; margin-top: .15rem; padding: .75rem;
  background: linear-gradient(135deg, var(--accent), #f97316); color: #fff;
  border: none; border-radius: 10px; font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 16px -6px rgba(232,89,12,.6);
  transition: filter .15s, transform .05s;
}
.btn-login:hover { filter: brightness(1.05); }
.btn-login:active { transform: translateY(1px); }
.login-pied { text-align: center; color: var(--texte-doux); font-size: .75rem; margin: 1.6rem 0 0; }
.erreur { background: #fff0f0; color: var(--danger); padding: .5rem .7rem; border-radius: 8px; font-size: .85rem; margin-bottom: 1rem; }

/* Sous 880px : on masque le visuel, le formulaire prend tout l'écran. */
@media (max-width: 880px) {
  .page-login { grid-template-columns: 1fr; }
  .login-visuel { display: none; }
  .login-brand-mobile { display: flex; }
}

/* ── Vue liste ──────────────────────────────────────────────────── */
.liste-wrap { padding: 1.25rem; }
.liste {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden;
}
.liste th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--texte-doux); padding: .65rem .85rem; border-bottom: 1px solid var(--bordure);
  background: #fafbfc;
}
.liste td { padding: .6rem .85rem; border-bottom: 1px solid var(--bordure); font-size: .88rem; }
.liste tr:last-child td { border-bottom: none; }
.liste-ligne { cursor: pointer; }
.liste-ligne:hover { background: var(--accent-clair); }
.liste-entreprise { font-weight: 600; }
.pastille {
  font-size: .72rem; padding: .15rem .55rem; border-radius: 999px;
  background: var(--fond); border: 1px solid var(--bordure); color: var(--texte); white-space: nowrap;
}
.vide { color: var(--texte-doux); padding: 2.5rem; text-align: center; }