/* Portail de Rokugan — l'accueil : la vallée en 3D, les jeux et leurs tables, le panneau d'ouverture, le chat.
   Chargé après style.css et grammaire.css ; tout est rangé sous .accueil (ou des éléments propres à l'accueil). */

/* ——— La vallée ——— */
.accueil .vallee {
  position: relative;
  /* Pleine largeur, au-delà des marges de la page. */
  margin: calc(-1 * clamp(20px, 4vw, 48px)) calc(50% - 50vw) 0;
  height: clamp(460px, 76vh, 760px);
  overflow: hidden;
  isolation: isolate;
}
.accueil .vallee canvas.vallee-toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  cursor: default;
}
.accueil .vallee canvas.vallee-toile.sur-lieu { cursor: pointer; }
/* Le papier se fond dans la page en bas de la vallée. */
.accueil .vallee::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--page, var(--washi)));
  pointer-events: none;
  z-index: 2;
}
body.vallee-active .lavis-haut { display: none; }

.vallee-titre {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 5vh, 56px);
  left: max(calc(50vw - 620px + 48px), 20px);
  max-width: 520px;
  pointer-events: none;
}
.vallee-titre::before {
  /* Un lavis de papier derrière le titre : il reste lisible sur les montagnes. */
  content: '';
  position: absolute;
  inset: -60px -90px -50px -120px;
  z-index: -1;
  background: radial-gradient(ellipse at 40% 45%, var(--page, #f2f0e9) 30%, rgba(242, 240, 233, 0.75) 55%, transparent 75%);
}
/* Le corps du titre s'efface quand on s'approche d'un lieu (le titre lui-même suit le défilement, animé par GSAP). */
.vallee-titre-corps { transition: opacity 0.5s, transform 0.5s; }
.vallee.approche .vallee-titre-corps { opacity: 0; transform: translateY(-12px); }
.vallee-titre h1 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.vallee-titre .chapeau { margin-top: 10px; }

/* Étiquettes des lieux, placées par la scène 3D. */
.etiquette-lieu {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px 7px;
  border: 0;
  border-radius: 4px;
  background: rgba(248, 247, 242, 0.82);
  box-shadow: 0 6px 18px -10px rgba(41, 43, 42, 0.5);
  color: var(--sumi, #292b2a);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.3s;
  white-space: nowrap;
}
.etiquette-lieu::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.5;
}
.etiquette-lieu strong { font: 400 22px/1 var(--titre-perso, var(--titre)), var(--titre); letter-spacing: 0.01em; }
.etiquette-lieu small { font: 700 10px/1.2 var(--texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-pale); }
.etiquette-lieu.vivant small { color: var(--rouge, #ad3b37); }
.etiquette-lieu.bientot { opacity: 0.62; background: rgba(248, 247, 242, 0.6); }
.etiquette-lieu.allumee, .etiquette-lieu:hover, .etiquette-lieu:focus-visible { background: #fffdf7; box-shadow: 0 10px 26px -12px rgba(41, 43, 42, 0.65), 0 0 0 2px var(--rouge, #ad3b37); opacity: 1; }
.etiquette-lieu.mienne::before {
  content: '席';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--rouge, #ad3b37);
  color: #fff;
  font: 600 12px var(--kanji);
  transform: rotate(6deg);
}
.etiquette-lieu.cachee { opacity: 0; pointer-events: none; }

/* Le rouleau qui se déroule quand on choisit un lieu. */
.vallee-rouleau {
  position: absolute;
  z-index: 4;
  right: max(calc(50vw - 620px + 32px), 16px);
  top: 50%;
  transform: translateY(-50%);
  width: min(460px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  filter: drop-shadow(0 22px 34px rgba(41, 43, 42, 0.35));
}
.vallee-rouleau .rouleau-baton {
  height: 14px;
  margin: 0 -10px;
  border-radius: 7px;
  background: linear-gradient(to bottom, #6b3d26, #3b2014 60%, #24130b);
  position: relative;
  z-index: 1;
}
.vallee-rouleau .rouleau-baton::before, .vallee-rouleau .rouleau-baton::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 12px;
  height: 20px;
  border-radius: 4px;
  background: #b08a3a;
}
.vallee-rouleau .rouleau-baton::before { left: -6px; }
.vallee-rouleau .rouleau-baton::after { right: -6px; }
.vallee-rouleau .rouleau-papier {
  position: relative;
  background: #f8f5ec;
  max-height: calc(min(76vh, 760px) - 120px);
  overflow: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s cubic-bezier(0.6, 0.05, 0.25, 1);
}
.vallee-rouleau.deroule .rouleau-papier { clip-path: inset(0 0 0 0); }
.vallee-rouleau .salle.vedette { border: 0; box-shadow: none; background: transparent; margin: 0; }
.vallee-rouleau .tiroir-fermer { position: absolute; top: 8px; right: 10px; z-index: 2; }

/* ——— La grille de l'accueil ——— */
.accueil .grille-accueil { margin-top: 10px; }

/* La table où l'on est assis. */
.ma-table-banniere {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 28px;
  padding: 16px 20px;
  border-radius: 4px;
  background: var(--sumi, #292b2a);
  color: var(--ivoire, #f2f0e9);
  box-shadow: 0 16px 30px -22px rgba(41, 43, 42, 0.9);
}
.ma-table-banniere .surtitre { color: #e8a39f; margin-bottom: 4px; }
.ma-table-banniere .surtitre::before { display: none; }
.ma-table-banniere strong { display: block; font: 500 24px/1.1 var(--titre); }
.ma-table-banniere small { display: block; margin-top: 4px; font-size: 14px; opacity: 0.8; }
.ma-table-banniere .bouton.discret { color: var(--ivoire, #f2f0e9); }
.sceau-table {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 4px;
  background: var(--rouge, #ad3b37);
  font: 600 24px var(--kanji);
  transform: rotate(-4deg);
}

/* Les jeux jouables, mis en avant, avec leurs tables. */
.accueil .salles-vedettes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.salle.vedette { display: flex; flex-direction: column; gap: 10px; min-height: 0; transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; }
.salle.vedette > .actions { margin-top: auto; padding-top: 6px; }
.salle.vedette.allumee { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(41, 43, 42, 0.7), 0 0 0 2px var(--rouge, #ad3b37); }
.salle-texte { margin: 4px 0 0; max-width: 32em; font: italic 17px/1.45 var(--titre); color: var(--encre-douce); }
.salle-tables { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; max-width: calc(100% - 20px); }
.salle-tables .vide { margin: 2px 0; font-size: 16px; }

.ligne-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'nom sieges' 'actions actions';
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--filet);
  border-left: 3px solid var(--filet-fort);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.45);
}
.ligne-table.mienne { border-left-color: var(--rouge, #ad3b37); background: rgba(255, 252, 245, 0.85); }
.ligne-table-nom { grid-area: nom; min-width: 0; }
.ligne-table-nom strong { display: block; font: 600 18px/1.15 var(--titre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-table-nom small { display: block; font-size: 13px; color: var(--encre-pale); }
.ligne-table-sieges { grid-area: sieges; display: flex; gap: 4px; align-items: center; }
.ligne-table-sieges .mon { width: 28px; height: 28px; font-size: 14px; }
.ligne-table-sieges .siege-vide { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--filet-fort); }
.ligne-table .actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0; }

/* Les jeux à venir : une rangée discrète. */
.bientot { margin-top: 34px; }
.bientot-titre { font: 500 20px var(--titre); margin: 0 0 12px; color: var(--encre-douce); }
.salles-bientot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.salle-bientot {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px dashed var(--filet-fort);
  border-radius: 3px;
  background: rgba(248, 247, 242, 0.45);
  transition: background 0.2s, border-color 0.2s;
}
.salle-bientot.allumee { background: rgba(255, 252, 245, 0.9); border-color: var(--rouge, #ad3b37); }
.salle-bientot .mon-jeu { position: static; transform: none; width: 52px; height: 52px; opacity: 0.75; filter: grayscale(0.4); grid-row: span 2; }
.salle-bientot h4 { margin: 0; font: 600 18px/1.1 var(--titre); }
.salle-bientot p { margin: 2px 0 0; font: italic 15px var(--titre); color: var(--encre-pale); }
.salle-bientot .etiquette { grid-column: 2; justify-self: start; }

/* ——— Panneau « Ouvrir une table » ——— */
.tiroir-fond {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(31, 27, 22, 0);
  transition: background 0.25s;
}
.tiroir-fond.ouvert { background: rgba(31, 27, 22, 0.32); }
.tiroir {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  padding: 34px 30px 28px;
  overflow-y: auto;
  background: var(--carte-fond, #f8f7f2);
  background-color: #f8f6ef;
  box-shadow: -24px 0 50px -30px rgba(31, 27, 22, 0.6);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tiroir-fond.ouvert .tiroir { transform: none; }
.tiroir h2 { font-size: 38px; }
.tiroir .sous-titre { margin: 4px 0 22px; font: italic 18px var(--titre); color: var(--encre-pale); }
.tiroir .champ { margin-bottom: 18px; }
.tiroir .bouton[type='submit'] { width: 100%; margin-top: 8px; }
.tiroir-fermer {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--encre-pale);
  cursor: pointer;
}
.tiroir-fermer:hover { background: rgba(41, 43, 42, 0.07); color: var(--encre); }
.places-choix { display: flex; gap: 8px; }
.places-choix label { cursor: pointer; }
.places-choix input { position: absolute; opacity: 0; pointer-events: none; }
.places-choix span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--filet-fort);
  border-radius: 50%;
  font: 600 20px var(--titre);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.places-choix input:checked + span { background: var(--sumi, #292b2a); color: var(--ivoire, #f2f0e9); border-color: var(--sumi, #292b2a); }
.places-choix input:focus-visible + span { outline: 2px solid var(--rouge, #ad3b37); outline-offset: 2px; }

/* ——— Présents, dans l'en-tête ——— */
.presents-entete { display: flex; align-items: center; margin-right: 14px; padding-left: 8px; }
.presents-entete .mon { width: 30px; height: 30px; font-size: 14px; margin-left: -8px; box-shadow: 0 0 0 2px var(--page, var(--washi)); }
.presents-plus { margin-left: 6px; font: 700 12px var(--texte); color: var(--encre-pale); }

/* ——— Chat repliable ——— */
.chat-entete { display: flex; align-items: center; gap: 8px; }
.chat-entete .chat-onglets { flex: 1; }
.chat-replier {
  position: relative;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--encre-pale);
  font-size: 15px;
  cursor: pointer;
}
.chat-replier:hover { background: rgba(41, 43, 42, 0.07); color: var(--encre); }
.chat-replier .non-lus {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--rouge, #ad3b37);
  color: #fff;
  font: 700 11px/18px var(--texte);
}
.chat.replie .chat-corps { display: none; }
.chat .chat-messages.vide-chat { min-height: 0; height: auto; max-height: none; }
.chat .chat-messages.vide-chat .vide { margin: 10px 0 14px; }

@media (max-width: 760px) {
  .accueil .vallee { height: clamp(380px, 62vh, 560px); }
  .vallee-titre { left: 16px; right: 16px; top: 18px; }
  .vallee-titre .chapeau { display: none; }
  .etiquette-lieu { padding: 4px 8px 5px; }
  .etiquette-lieu strong { font-size: 15px; }
  .etiquette-lieu small { display: none; }
  .vallee-rouleau { right: 16px; left: 16px; width: auto; top: auto; bottom: 16px; transform: none; }
  .vallee-rouleau .rouleau-papier { max-height: 52vh; }
  .ma-table-banniere { grid-template-columns: auto 1fr; }
  .ma-table-banniere .actions { grid-column: 1 / -1; justify-content: flex-start; }
  .presents-entete { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vallee-rouleau .rouleau-papier, .tiroir, .tiroir-fond, .salle.vedette { transition: none; }
}