/* creation.css — le parcours de création, et le fil en deux sections.
   Séparé de app.css parce que c'est un chantier à part : on y touche à chaque
   fois qu'on revoit le parcours, et on ne veut pas relire le reste. */

/* --------------------------------------------- le fil en deux sections */

.section {
  font-size: 15px;
  font-weight: 800;
  margin: 20px 0 10px;
  letter-spacing: -0.01em;
}
.section:first-child { margin-top: 4px; }
.section-vide {
  color: var(--doux);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 8px;
  border-left: 2px solid #3A352B;
  padding-left: 12px;
}
.vivant.recrute { color: var(--doux); }

/* ------------------------------------------- l'écran de création */

.erreur {
  background: #231A18;
  border: 1px solid #5A2E26;
  color: #F0C4BA;
  font-size: 13px;
  line-height: 1.5;
  padding: 11px 13px;
  border-radius: 12px;
  margin: 12px 0;
}

.entete-chantier {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}
.titre.petit { font-size: 22px; margin: 0; }
.chapo.mince { font-size: 12px; margin: 3px 0 0; }
.etiquette-etat {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--doux);
  background: #22201A;
  border: 1px solid #332F26;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.etiquette-etat.or { background: var(--or); border-color: var(--or); color: #14130F; }

/* La bande d'aperçu : instantanée, parce qu'elle doit répondre à chaque
   réponse. Le vrai moteur 3D est à un geste de là, et c'est son tour après. */
.bande-apercu {
  position: relative;
  height: 116px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #191712;
}
.bande-apercu svg { width: 100%; height: 100%; display: block; }
.bande-vivant {
  position: absolute;
  left: 10px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(20, 19, 15, .86);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
}
.bande-vivant .point {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #7FC27A;
}
.bande-ajout {
  position: absolute;
  right: 10px;
  bottom: 9px;
  font-size: 10px;
  font-weight: 800;
  background: #1B2A1C;
  color: #7FC27A;
  padding: 5px 10px;
  border-radius: 999px;
}

/* La jauge mesure ce qui est FAIT, pas ce qui manque : « l'essentiel : 3 sur
   4 » encourage là où « 3 / 17 » décourage. */
.jauge { margin-bottom: 12px; }
.jauge-barre { display: flex; gap: 4px; margin-bottom: 7px; }
.jauge-barre span { flex: 1; height: 5px; border-radius: 999px; background: #2A2720; }
.jauge-barre span.plein { background: var(--or); }
.jauge-mots {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
}
.jauge-mots .pret { color: var(--or); font-weight: 800; }
.doux { color: var(--doux); }

details.manifeste {
  background: #1A1813;
  border: 1px solid #2E2B24;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 12px 0;
}
details.manifeste summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}
details.manifeste summary::-webkit-details-marker { display: none; }
details.manifeste summary::after { content: " \25B8"; color: var(--or); }
details.manifeste[open] summary::after { content: " \25BE"; }
.manifeste-liste {
  list-style: none;
  margin: 10px 0 2px;
  padding: 0;
  display: grid;
  gap: 7px;
}
.manifeste-liste li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.manifeste-liste .champ { color: var(--doux); flex: none; }
.manifeste-liste .valeur { font-weight: 600; flex: 1; }
.manifeste-liste .vu {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #7FC27A;
  background: #1B2A1C;
  padding: 3px 8px;
  border-radius: 999px;
}

.bouton.eteint { background: #2A2720; color: #8C867A; cursor: not-allowed; }
.bouton.gris { background: #22201A; border: 1px solid #3A352B; color: var(--texte); }
.deux-boutons { display: flex; gap: 9px; margin-top: 12px; }
.deux-boutons .bouton { flex: 1; }

/* Les anneaux : on voit la différence de taille, on ne la lit pas. */
.anneaux {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #191712;
  margin-bottom: 12px;
}
.anneaux svg { width: 100%; height: auto; display: block; }
.anneaux-mesure {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  color: #14130F;
  background: var(--or);
  padding: 4px 10px;
  border-radius: 999px;
}
.anneaux-note {
  position: absolute;
  right: 11px;
  top: 11px;
  font-size: 10px;
  font-weight: 700;
  color: var(--doux);
  background: rgba(20, 19, 15, .78);
  padding: 4px 9px;
  border-radius: 999px;
}

.etats { list-style: none; display: flex; margin: 4px 0 16px; padding: 0; }
.etats li { flex: 1; text-align: center; }
.etats li span {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  margin: 0 auto 7px;
  background: #14130F;
  border: 2px solid #3A352B;
  box-sizing: border-box;
}
.etats li.ici span { background: var(--or); border-color: var(--or); }
.etats li b { display: block; font-size: 11px; font-weight: 800; color: var(--doux); }
.etats li.ici b { color: var(--or); }
.etats li i {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--doux);
  margin-top: 2px;
  line-height: 1.4;
}

.carte-bloc {
  background: #1A1813;
  border: 1px solid #2E2B24;
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 12px;
}
.sous-titre { font-size: 13px; font-weight: 800; margin: 0 0 8px; color: var(--or); }
.sous-titre.bleu { color: #8FB4E0; }
.pastilles { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pastilles li {
  font-size: 13px;
  line-height: 1.45;
  color: #E7E1D5;
  padding-left: 15px;
  position: relative;
}
.pastilles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #7FC27A;
}

/* La carte à envoyer : c'est elle le produit viral, pas un bouton Partager. */
.carte-invit {
  border-radius: 14px;
  overflow: hidden;
  background: #1E1C17;
  border: 1px solid #2B2721;
  margin-bottom: 12px;
}
.carte-invit svg { width: 100%; height: 104px; display: block; }
.carte-invit-corps { padding: 11px 13px 12px; }
.carte-invit-nom { font-size: 15px; font-weight: 800; }
.carte-invit-meta { font-size: 11px; font-weight: 600; color: var(--doux); margin-top: 2px; }
.carte-invit-lien { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.carte-invit-lien span {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--or);
  background: #22201A;
  border: 1px solid #332F26;
  padding: 9px 10px;
  border-radius: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carte-invit-lien button {
  flex: none;
  font-family: inherit;
  cursor: pointer;
  border: 0;
  font-size: 11px;
  font-weight: 800;
  padding: 10px 13px;
  border-radius: 10px;
  background: #2E2B23;
  color: var(--texte);
}

.bloc-visite {
  border-radius: 13px;
  background: #191C22;
  border: 1px solid #2A3240;
  padding: 12px 13px;
  margin-bottom: 12px;
}
.bloc-visite p { font-size: 12px; line-height: 1.5; color: #B9C4D2; margin: 0 0 9px; }
.ligne-invite { display: flex; gap: 8px; }
.ligne-invite input {
  flex: 1;
  min-width: 0;
  background: #14171C;
  border: 1px solid #2A3240;
  border-radius: 10px;
  color: var(--texte);
  font: inherit;
  font-size: 13px;
  padding: 9px 11px;
}
.ligne-invite button {
  flex: none;
  font-family: inherit;
  cursor: pointer;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 10px;
  background: #2A3240;
  color: #D6E2F0;
}

.promesse.vert { border-left-color: #7FC27A; }
.promesse.vert b { color: #E7E1D5; display: block; margin-bottom: 3px; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}