/* hisso — styles (indigo + citron vert pour l'équipe, framboise + citron vert pour les chercheurs) */
:root {
  --ink: #14112E; --ink2: #3D3960; --muted: #5B5775; --line: #E4E1F2; --bg: #F3F1FF;
  --adm: #4B32E6; --adm-d: #3620C2; --adm-soft: #E4DFFF; --lime: #C6F432; --lime-soft: #EEFBC4;
  --chr: #D1105A; --chr-d: #A00C45; --chr-soft: #FFD9E6; --sun: #C6F432; --cbg: #FFF3F7; --cink: #14112E; --cmuted: #5B5775;
  --red: #C62A2F; --red-soft: #FFE0E1; --peach: #FFE1C7; --peach-ink: #8A3B00;
  --shadow: 0 1px 2px rgba(20,17,46,.04), 0 6px 20px rgba(20,17,46,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--ink); background: var(--bg); font-size: 15px; }
h1, h2, h3 { font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif; font-weight: 600; margin: 0; letter-spacing: -0.015em; }
a { color: var(--adm); cursor: pointer; }
button { font-family: inherit; cursor: pointer; }
.logo { font-family: 'Pacifico', cursive; font-weight: 400; letter-spacing: 0; }
.chargement { padding: 60px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.vide { padding: 24px; text-align: center; color: var(--muted); }

/* ---------- Formulaires ---------- */
label.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
input, select, textarea { font: inherit; color: inherit; border: 1px solid #D6D2E6; border-radius: 10px; padding: 10px 12px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--adm); outline-offset: 1px; border-color: transparent; }
textarea { resize: vertical; line-height: 1.5; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--adm); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.btn:hover { background: var(--adm-d); }
.btn.sec { background: #fff; color: var(--ink); border: 1px solid #D6D2E6; }
.btn.sec:hover { border-color: var(--adm); color: var(--adm); }
.btn.vert { background: var(--lime-soft); color: var(--ink); border: 1px solid #D7EF8A; }
.btn.vert:hover { background: var(--lime); }
.btn.petit { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pile { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Connexion ---------- */
.connexion { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.connexion .gauche { background: var(--adm); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.connexion .gauche .rond { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: var(--lime); right: -120px; bottom: -120px; }
.connexion .gauche h1 { font-size: 46px; line-height: 1.08; position: relative; }
.connexion .gauche h1 span { color: var(--lime); }
.connexion .droite { display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--bg); }
.connexion form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.erreur { background: var(--red-soft); color: #8E1B1F; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.info { background: var(--lime-soft); padding: 10px 14px; border-radius: 10px; font-size: 14px; }
@media (max-width: 820px) { .connexion { grid-template-columns: 1fr; } .connexion .gauche { padding: 32px 24px; min-height: 220px; } .connexion .gauche h1 { font-size: 32px; } }

/* ---------- Espace équipe ---------- */
.equipe { display: flex; min-height: 100vh; }
.side { width: 230px; flex-shrink: 0; background: var(--ink); padding: 24px 14px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; }
.side .logo { color: #fff; font-size: 30px; padding: 0 10px; }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: #CFCBE8; text-decoration: none; font-weight: 500; }
.side nav a:hover { background: #262150; color: #fff; }
.side nav a.on { background: var(--lime); color: var(--ink); font-weight: 600; }
.side .moi { margin-top: auto; color: #fff; padding: 0 10px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.side .moi a { color: #B9B4DA; font-size: 13px; }
.contenu { flex: 1; min-width: 0; padding: 32px 40px 60px; display: flex; flex-direction: column; gap: 22px; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.entete h1 { font-size: 30px; }
.carte { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px; }
.carte h2 { font-size: 18px; margin-bottom: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 600; line-height: 1; }
.stat span { font-weight: 600; font-size: 14px; }
.stat.indigo { background: var(--adm); color: #fff; border-color: var(--adm); }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rangee { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #EEEBFA; color: inherit; text-decoration: none; }
.rangee:first-of-type { border-top: 0; }
a.rangee:hover { color: var(--adm); }
.av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; background: var(--adm-soft); color: var(--adm-d); }
.av.g { width: 68px; height: 68px; font-size: 22px; font-family: 'Bricolage Grotesque', sans-serif; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #EEEBFA; color: var(--ink2); }
.pill.rouge { background: var(--red-soft); color: #A11E23; }
.pill.indigo { background: var(--adm); color: #fff; }
.pill.lime { background: var(--lime); color: var(--ink); }
.pill.violet { background: var(--adm-soft); color: var(--adm-d); }
.pill.peche { background: #F1EFFA; color: var(--muted); }
/* Étapes : une seule gamme indigo qui fonce, le citron vert réservé à « En emploi » */
.pill.e-diagnostic { background: #F1EFFA; color: var(--muted); }
.pill.e-cv { background: var(--adm-soft); color: var(--adm-d); }
.pill.e-candidatures { background: #C9BFFF; color: #2A1A9E; }
.pill.e-entretiens { background: var(--adm); color: #fff; }
.pill.e-emploi { background: var(--lime); color: var(--ink); }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres button { border: 1px solid #D6D2E6; background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 500; }
.filtres button.on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.pcarte { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; color: inherit; padding: 20px 14px; }
.pcarte:hover { border-color: var(--adm); }
.hero { background: var(--adm); color: #fff; border: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero h1 { font-size: 28px; }
.hero .av { background: var(--lime); color: var(--ink); }
.onglets { display: flex; gap: 8px; }
.onglets a { padding: 8px 16px; border-radius: 999px; border: 1px solid #D6D2E6; background: #fff; text-decoration: none; color: var(--ink); font-weight: 500; }
.onglets a.on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.evt { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid #EEEBFA; }
.evt:first-of-type { border-top: 0; }
.evt .date { width: 64px; flex-shrink: 0; font-size: 13px; color: var(--muted); font-weight: 600; padding-top: 2px; }
.evt .corps { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.evt p { margin: 0; white-space: pre-wrap; color: var(--ink2); }
.tache { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.tache input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--adm); flex-shrink: 0; }
.tache.faite span { text-decoration: line-through; color: var(--muted); }
.barre-masse { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.barre-masse select { width: auto; }
#tableur { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.tabulator { font-size: 14px; }
@media (max-width: 1000px) { .fiche, .deux { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .equipe { flex-direction: column; }
  .side { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 12px; gap: 12px; overflow-x: auto; }
  .side nav { flex-direction: row; }
  .side .moi { margin: 0 0 0 auto; }
  .contenu { padding: 20px 16px 40px; }
  .stats, .grille2 { grid-template-columns: 1fr; }
}

/* ---------- Fenêtre modale ---------- */
.modale-fond { position: fixed; inset: 0; background: rgba(20,17,46,.45); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 50; overflow-y: auto; }
.modale { background: #fff; border-radius: 18px; padding: 26px; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modale h2 { font-size: 22px; }

/* ---------- Espace chercheur (mobile d'abord) ---------- */
.chr { min-height: 100vh; background: var(--cbg); color: var(--cink); max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
.chr a { color: var(--chr-d); }
.chr .haut { background: var(--chr); color: #fff; padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 10px; }
.chr .haut .logo { font-size: 22px; }
.chr .haut h1 { font-size: 26px; }
.chr .corps { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; padding-bottom: 100px; }
.ccarte { background: #fff; border: 1px solid #F1D8E2; border-radius: 18px; box-shadow: var(--shadow); padding: 16px; }
.ccarte h2 { font-size: 16px; margin-bottom: 8px; }
.ccarte.jaune { background: var(--sun); border-color: var(--sun); }
.etapes { display: flex; gap: 5px; }
.etapes i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.4); }
.etapes i.on { background: var(--sun); }
.citem { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #FBE3EC; text-decoration: none; color: inherit; }
.citem:first-of-type { border-top: 0; }
.ctache { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: #fff; border: 1px solid #F1D8E2; border-radius: 16px; padding: 14px; color: inherit; }
.ctache .rond { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--chr); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ctache.faite { background: #EEFBC4; }
.ctache.faite .rond { background: var(--sun); border-color: #A8D41F; }
.ctache.faite .t { text-decoration: line-through; color: var(--cmuted); }
.retard { padding: 2px 8px; border-radius: 999px; background: var(--chr); color: #fff; font-size: 12px; font-weight: 700; margin-left: auto; }
.cbtn { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 14px; border: 0; background: var(--chr); color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none; padding: 0 14px; }
.cbtn.ok { background: var(--sun); color: var(--cink) !important; }
.cbtn.blanc { background: #fff; color: var(--cink) !important; border: 1px solid #F1D8E2; }
.bnav { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 536px; background: #fff; border: 1px solid #F1D8E2; border-radius: 20px; display: flex; gap: 4px; padding: 5px; box-shadow: var(--shadow); }
.bnav a { flex: 1; text-align: center; padding: 12px 4px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--cmuted); text-decoration: none; }
.bnav a.on { background: var(--cink); color: var(--sun); }

/* Chercheur sur ordinateur : barre latérale framboise, contenu en deux colonnes */
.cside { display: none; }
.cgrille { display: flex; flex-direction: column; gap: 14px; }
.chr .cmain { flex: 1; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 900px) {
  .chr { max-width: none; flex-direction: row; }
  .cside { display: flex; flex-direction: column; gap: 28px; width: 230px; flex-shrink: 0; background: var(--cink); padding: 24px 14px; position: sticky; top: 0; height: 100vh; }
  .cside .logo { color: #fff; font-size: 30px; padding: 0 10px; }
  .cside nav { display: flex; flex-direction: column; gap: 4px; }
  .cside nav a { padding: 11px 12px; border-radius: 10px; color: #CFCBE8; text-decoration: none; font-weight: 500; }
  .cside nav a:hover { background: #262150; color: #fff; }
  .cside nav a.on { background: var(--sun); color: var(--cink); font-weight: 600; }
  .cside .moi { margin-top: auto; color: #fff; padding: 0 10px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
  .cside .moi a { color: #CFCBE8; font-size: 13px; }
  .chr .haut { padding: 32px 40px; border-radius: 0; }
  .chr .haut .logo, .chr .haut .deco-mobile { display: none; }
  .chr .haut h1 { font-size: 32px; }
  .chr .corps { padding: 28px 40px 48px; max-width: 1100px; width: 100%; }
  .cgrille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 20px; }
  .cgrille > .pile { gap: 14px; }
  .bnav { display: none; }
}

/* ---------- Notification ---------- */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 500; opacity: 0; transition: .25s; pointer-events: none; z-index: 60; max-width: 90vw; }
#toast.on { opacity: 1; transform: translateX(-50%); }
#toast.err { background: var(--red); }
.chr .btn { background: var(--chr); }
.chr .btn.sec { background: #fff; color: var(--cink); border-color: #F1D8E2; }
.chr .rangee { border-top-color: #FBE3EC; }
.hero select { color: var(--ink); width: auto; }

/* Mode démo */
.choix-demo { display: flex; align-items: center; gap: 14px; width: 100%; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.choix-demo:hover { border-color: var(--adm); }
#bandeau-demo { position: fixed; bottom: 14px; right: 14px; z-index: 70; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); }
#bandeau-demo a { color: var(--ink); text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) { #bandeau-demo { bottom: auto; top: 6px; right: 50%; transform: translateX(50%); white-space: nowrap; font-size: 11px; padding: 4px 10px; } }
@media (max-width: 760px) { body.demo .chr .haut { padding-top: 40px; } body.demo .side { padding-top: 40px; } }