/* Page d'accueil */

/* Messages */
.error, .success {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 6px solid currentColor;
  border-radius: var(--r-sm);
  font-weight: 700;
}
.error   { color: var(--bad);  background: var(--bad-soft); }
.success { color: var(--good); background: var(--good-soft); }

/* Carte "choisis ton nom" affichée tant qu'aucun agent n'est enregistré */
.name-gate {
  margin-bottom: 8px;
}
.name-gate .field { margin-top: 16px; }

.reset-form { text-align: center; }

@media (max-width: 520px) {
  .buttons { flex-direction: column; align-items: stretch; }
  .buttons .btn { width: 100%; }
}

/* ==========================================================================
   Carte du parcours : les 7 missions posées sur un chemin
   ========================================================================== */
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  margin: 8px 0 12px;
}
.map-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.map-path path {
  fill: none;
  stroke: var(--line);
  stroke-width: .55;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: .2 2.6;
}

.map-node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%, -50%);
}
.map-node a,
.map-node > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}
.map-node-circle-col { display: contents; }
.map-node-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: var(--surface-2);
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
  transition: transform .15s ease;
}
.map-node-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-mute);
  max-width: 112px;
  line-height: 1.25;
}

.map-node.done .map-node-circle { background: var(--ink); color: var(--bg); }
.map-node.done .map-node-label { color: var(--ink-soft); }

.map-node.open .map-node-circle { color: var(--ink-soft); }

.map-node.current { z-index: 2; }
.map-node.current .map-node-circle {
  position: relative;
  width: 66px;
  height: 66px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.3125rem;
  box-shadow: 0 10px 28px -6px rgba(213, 50, 26, .65);
}
.map-node.current .map-node-circle::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  background: var(--accent-soft);
  z-index: -1;
}
.map-node.current .map-node-label { color: var(--ink); font-weight: 800; }

.map-node.locked { opacity: .5; }
.map-node.locked .map-node-circle { color: var(--ink-mute); }

.map-node a:hover .map-node-circle { transform: scale(1.06); }

@media (max-width: 820px) {
  .map {
    position: static;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .map-path { display: none; }
  .map-node { position: static; transform: none; }
  .map-node a,
  .map-node > span {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    padding: 12px 0;
  }
  .map-node-circle-col {
    display: block;
    position: relative;
    flex: none;
    width: 52px;
    height: 52px;
  }
  .map-node-circle-col::before,
  .map-node-circle-col::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 16px;
    background-image: linear-gradient(var(--line) 60%, transparent 40%);
    background-size: 2px 10px;
    background-repeat: repeat-y;
    transform: translateX(-50%);
  }
  .map-node-circle-col::before { top: -16px; }
  .map-node-circle-col::after  { bottom: -16px; }
  .map-node:first-child .map-node-circle-col::before { display: none; }
  .map-node:last-child .map-node-circle-col::after { display: none; }
  .map-node-label { max-width: none; padding-top: 10px; }
  .map-node.current .map-node-circle { width: 56px; height: 56px; font-size: 1.125rem; }
}

/* ==========================================================================
   Sujets abordés (utilisé ailleurs, ex. badges cliquables d'un chapitre)
   ========================================================================== */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.badge {
  padding: 4px 14px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* Comment ça marche : rappel condensé, sous la carte */
.howto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-top: 20px;
  border-top: 1.5px solid var(--line);
}
.howto .step {
  flex: 1 1 220px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.howto .step::before {
  content: counter(step);
  counter-increment: step;
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8125rem;
  color: var(--accent);
}
.howto { counter-reset: step; }
.howto .step b { font-size: .9375rem; }
.howto .step p { display: none; }

/* ==========================================================================
   FAQ (bas de la page d'accueil) : <details> natifs, sans JavaScript
   ========================================================================== */
.reset-form { margin-top: 40px; }
.faq-sep { margin: 96px 0 0; }
.faq { padding: 80px 0 48px; }
.faq h2 { margin-bottom: 16px; }

.faq-item {
  border-top: 1.5px solid var(--line);
}
.faq-item:last-of-type { border-bottom: 1.5px solid var(--line); }

.faq-item summary {
  position: relative;
  display: block;
  min-height: 48px;
  padding: 14px 40px 14px 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--accent-strong); }

.faq-item p {
  margin: 0 0 16px;
  max-width: 68ch;
  color: var(--ink-soft);
}