/*

█▀▀ █▀ █▀
█▄▄ ▄█ ▄█

Ce fichier est majoritairement réalisé par GPT 6.1 SOL.
Il ne contiens aucun code particulierement complexe.

*/

/* Un plateau de village vert, du texte lisible et des repères liés aux vrais états du jeu. */
:root {
  --fond: #f8f9f5;
  --papier: #fff;
  --texte: #21352b;
  --secondaire: #58685c;
  --vert: #285d3b;
  --vert-clair: #eaf1e4;
  --bord: #cbd7c7;
  --ambre: #845017;
  --danger: #8b3730;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font:
    16px/1.5 system-ui,
    sans-serif;
}
main {
  width: min(1800px, calc(100% - 32px));
  margin: auto;
  padding: 36px 0 110px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h2 {
  font-size: 1.45rem;
}
button,
input,
select {
  font: inherit;
  min-height: 44px;
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 9px 12px;
}
input,
select {
  min-width: 0;
  background: var(--papier);
  color: var(--texte);
}
button {
  background: var(--vert);
  color: white;
  border-color: var(--vert);
  cursor: pointer;
  font-weight: 600;
}
button:hover:enabled {
  background: #19472b;
}
button:disabled {
  background: #e7ebe4;
  color: #687364;
  border-color: #d0d8cc;
  cursor: default;
}
:focus-visible {
  outline: 3px solid #b26924;
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Un titre ample et son sous-titre, toujours centrés. */
.entete {
  text-align: center;
  margin-bottom: 30px;
}
.entete h1 {
  font-size: clamp(3.3rem, 7.5vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 850;
  margin: 0;
}
.sous-titre {
  font-size: clamp(1rem, 2vw, 1.3rem);
  margin: 12px 0 16px;
}
#connexion {
  color: var(--secondaire);
  font-size: 0.9rem;
  margin: 0;
}
.jeu-layout {
  display: grid;
  gap: 30px;
}
.plateau {
  min-width: 0;
}

/* Le même formulaire se déplace en bas quand il s'agit d'abandonner la mission en cours. */
.nouvelle-partie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-block: 1px solid var(--bord);
  margin-bottom: 20px;
}
.nouvelle-texte {
  flex: 1 1 240px;
}
.nouvelle-texte strong,
.nouvelle-texte span {
  display: block;
}
.nouvelle-texte span {
  color: var(--secondaire);
  font-size: 0.85rem;
  margin-top: 3px;
}
#nouvelle-bas {
  margin-top: 32px;
}
.nouvelle-partie.abandon strong {
  color: var(--danger);
}
.nouvelle-partie.abandon button:enabled {
  background: transparent;
  color: var(--danger);
  border-color: #bf8980;
}
.nouvelle-partie.abandon button:hover:enabled {
  background: #f8ebe7;
}

/* Une couleur de phase pour le récit, suivie d'une mission immédiatement lisible. */
.recit {
  --phase: var(--vert);
  text-align: center;
  padding: 10px 0 24px;
}
.recit[data-phase="electricite"] {
  --phase: var(--ambre);
}
.etape {
  color: var(--phase);
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 7px;
}
#phase {
  color: var(--phase);
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  line-height: 1.15;
  margin-bottom: 14px;
}
.lore {
  color: var(--phase);
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  max-width: 58ch;
  min-height: 5.5em;
  margin: 0 auto 22px;
}
.mission {
  padding-top: 20px;
  border-top: 1px solid var(--bord);
}
.mission-label {
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--secondaire);
  margin-bottom: 8px;
}
#objectif {
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  line-height: 1.25;
  margin-bottom: 10px;
}
#consigne {
  max-width: 66ch;
  margin: 0 auto;
  color: var(--secondaire);
}
.bilan {
  display: inline-block;
  padding: 12px 18px;
  margin: 20px 0 0;
  border: 1px solid var(--vert);
  border-radius: 6px;
}
.section-entete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}
.section-entete h2 {
  margin: 0;
}
#avancement,
.prive {
  color: var(--secondaire);
  font-size: 0.85rem;
}

/* Le tableau représente la carte : chaque bâtiment possède exactement deux places visibles. */
.legende {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--secondaire);
  font-size: 0.78rem;
  margin-bottom: 12px;
}
.legende .point:nth-of-type(2) {
  margin-left: 12px;
}
.point {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #afb7ac;
  display: inline-block;
}
.point.pris {
  background: #25713c;
}
#village {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 5px;
  padding: 4px;
  background: #dce8d3;
  border: 1px solid #b9cdae;
  border-radius: 12px;
}
#village td {
  position: relative;
  padding: 13px 5px;
  text-align: center;
  vertical-align: top;
  background: #edf4e7;
  border: 2px solid transparent;
  border-radius: 7px;
}
.emoji-batiment {
  display: block;
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  line-height: 1.2;
  margin-bottom: 8px;
}
.nom-batiment {
  font-size: clamp(0.8rem, 1.2vw, 1.15rem);
  line-height: 1.25;
  min-height: 2.5em;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.etat-refuge {
  color: var(--vert);
  font-size: 0.7rem;
  font-weight: 650;
  margin-bottom: 8px;
}
.exigences {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
  min-height: 58px;
  align-content: flex-start;
}
.exigences li {
  font-size: 0.67rem;
  border-bottom: 1px solid #a2b39b;
  padding-bottom: 1px;
  overflow-wrap: anywhere;
}
.occupants {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 12px 0 0;
  min-height: 66px;
}
.occupants li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 1px;
  font-size: 0.7rem;
  border-top: 1px solid #cddac5;
  overflow-wrap: anywhere;
}
.occupants .place-libre {
  color: #6c7766;
}
.occupants .joueur-place {
  color: #5d715c;
  font-size: 0.65rem;
  white-space: nowrap;
}
#village td.ferme {
  background: #e9ede5;
  color: #687364;
}
.ferme .emoji-batiment {
  opacity: 0.5;
}
.ferme .etat-refuge {
  color: #687364;
}
#village td.alimente {
  background: #fff2c8;
}
#village td.cible-atteinte {
  border-color: #6c925f;
}
.reseau {
  margin-top: 12px;
  padding: 10px 0 62px;
  border-top: 1px solid #c4cfb9;
}
.courant {
  font-size: 0.8rem;
  font-weight: 750;
  margin: 0;
}
.cible {
  font-size: 0.72rem;
  margin: 3px 0 8px;
}
.commande {
  font-size: 0.7rem;
  margin-bottom: 8px;
}
/* Réserver leur place et ancrer toutes les commandes au même bas de cellule. */
.interrupteur {
  position: absolute;
  bottom: 14px;
  left: 8px;
  width: calc(100% - 16px);
  padding-inline: 3px;
  font-size: 0.72rem;
}
.interrupteur.partage:enabled {
  background: #315f85;
  border-color: #315f85;
}
.interrupteur.partage:hover:enabled {
  background: #224966;
}
.interrupteur.partage:disabled {
  background: #e3ebf1;
  color: #66798a;
  border-color: #c9d7e1;
}

/* Chaque fiche réunit l'identité, les compétences et un aparté clairement séparé des règles. */
.aide-habitants {
  color: var(--secondaire);
  max-width: 70ch;
  margin-bottom: 20px;
}
.habitants {
  display: grid;
  gap: 12px;
}
.habitant {
  background: var(--papier);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
}
.habitant.affecte {
  border-color: #709a73;
}
.habitant-fiche {
  padding: 18px;
}
.identite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.identite h3 {
  margin: 0;
  font-size: 1.3rem;
}
.portrait {
  font-size: 3rem;
  line-height: 1;
}
.habitant-statut {
  color: #64705e;
  font-size: 0.8rem;
  margin: 5px 0 0;
}
.affecte .habitant-statut {
  color: var(--vert);
  font-weight: 600;
}
.competences {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
}
.competences li {
  padding: 3px 10px;
  border: 1px solid #bfd2b8;
  border-radius: 20px;
  font-size: 0.8rem;
  background: #f4f8f0;
}
.habitant-note {
  background: #f3f5ef;
  border-top: 1px solid var(--bord);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.phrase {
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.phrase.restriction {
  color: #874530;
}
.habitant-note label {
  display: block;
  font-size: 0.72rem;
  color: var(--secondaire);
  margin-bottom: 4px;
}
.habitant-note select {
  width: 100%;
}
.verification {
  text-align: center;
  margin: 26px 0;
}
.verification p {
  color: var(--secondaire);
  font-size: 0.85rem;
  max-width: 65ch;
  margin: 0 auto 14px;
}
#information {
  color: #713e1b;
  background: #fff0df;
  border: 1px solid #d5ab7b;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 16px auto 0;
  font-size: 0.95rem;
  scroll-margin-bottom: 110px;
}
.regles {
  border-top: 1px solid var(--bord);
  padding-top: 18px;
  color: var(--secondaire);
  font-size: 0.85rem;
  margin-top: 26px;
}
.regles summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--texte);
}
.regles p {
  margin-top: 14px;
}

/* Sur mobile le tchat se replie en bas ; ses messages défilent sans déplacer le champ. */
.discussion {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 5;
  min-width: 0;
}
.discussion details {
  background: #fff;
  border: 1px solid #a7bba0;
  border-radius: 10px;
  overflow: hidden;
}
.discussion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 16px 18px;
  background: #e5eedf;
  color: #254b33;
  font-weight: 700;
  list-style: none;
}
.discussion summary::-webkit-details-marker {
  display: none;
}
.signe-tchat {
  font-size: 1.1rem;
  font-weight: normal;
}
.conversation-corps {
  display: flex;
  flex-direction: column;
  height: min(65dvh, 550px);
}
.tchat-intro {
  font-size: 0.85rem;
  color: var(--secondaire);
  padding: 16px 18px 8px;
  margin: 0;
}
#messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 12px 16px;
}
#messages:empty::before {
  content: "La ligne est ouverte. Partagez vos premières informations.";
  display: block;
  color: #788473;
  font-size: 0.85rem;
  padding-top: 24px;
}
#messages li {
  padding: 10px 12px;
  background: #f2f4ee;
  border-radius: 8px;
  margin-bottom: 9px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 0.9rem;
}
#messages li.moi {
  background: #e5efdf;
}
#messages strong {
  display: block;
  font-size: 0.7rem;
  margin-bottom: 4px;
  color: #47613e;
}
#tchat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--bord);
}
#tchat label {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--secondaire);
}
#message {
  flex: 1;
  width: 0;
}
#tchat button {
  font-size: 0.85rem;
  padding-inline: 12px;
}

/* Ajouter de l'espace et un aparté latéral seulement quand les cartes le permettent. */
@media (min-width: 620px) {
  main {
    width: min(1800px, calc(100% - 64px));
    padding-top: 48px;
  }
  .habitant {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .habitant-note {
    border-top: 0;
    border-left: 1px solid var(--bord);
  }
  #village {
    border-spacing: 8px;
    padding: 5px;
  }
  #village td {
    padding: 18px 12px;
  }
  .nom-batiment {
    min-height: auto;
  }
  .exigences {
    min-height: 44px;
  }
  .exigences li {
    font-size: 0.78rem;
  }
  .occupants li {
    font-size: 0.82rem;
    gap: 8px;
  }
  .interrupteur {
    font-size: 0.85rem;
  }
}

/* Le tchat devient un vrai aside sticky ; le plateau prend le reste de la largeur. */
@media (min-width: 1080px) {
  main {
    width: min(1800px, calc(100% - 96px));
    padding-bottom: 50px;
  }
  .jeu-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 36px;
  }
  .discussion {
    position: sticky;
    top: 24px;
    left: auto;
    right: auto;
    bottom: auto;
    align-self: start;
  }
  .conversation-corps {
    height: min(640px, calc(100dvh - 110px));
  }
  .lore {
    min-height: 3em;
  }
}
@media (min-width: 1600px) {
  .jeu-layout {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 48px;
  }
  .habitant-fiche,
  .habitant-note {
    padding: 22px;
  }
}