/* ==========================================================================
   ONSEN V3 - l'accueil en images (cycle 63 bis ; docs/DEBUT-DU-JEU.md, palier C).
   Liee par le serveur dans la page SEULEMENT quand ONSEN_IMAGES_MENUS est allume et l'affiche fabriquee
   (static.ts, `accueilEnImages`) : drapeau eteint, cette feuille n'est ni liee ni demandee.
   La direction B, « l'auberge la nuit » (maquette /root/onsen-ia/maquettes/c63/B.html), quel que soit le theme :
   la nuit et le bois en fond, la laque cerclee d'or pour la marque, les pastilles de papier pour tout ce qu'on lit
   et qu'on remplit, l'or plein pour le bouton qui avance. JAMAIS de texte pose sur une image : chaque mot est sur
   une plaque de laque ou de papier. Les teintes sont celles de la palette (palette.js, onsen.css :root).
   Trois ecrans : la connexion et l'inscription (`.accueil--images`), la creation (`.creation--images`) et les
   cartes de classe aux portraits (`.cartes-classe[data-portraits]`, creation et feuille de classe).
   ========================================================================== */

.accueil--images,
.creation--images,
.cartes-classe[data-portraits] {
  --b-nuit: #16223d;
  --b-laque: #1d1619;
  --b-papier: #f4f1e8;
  --b-papier-clair: #fffdf7;
  --b-doux: #cfc5ad;
  --b-or: #e0b85a;
  --b-or-pale: #f3dc9c;
  --b-or-sombre: #8a6a2a;
}

/* Ce qui se lit sur le papier prend les encres du theme clair, dans les deux themes. */
.accueil--images .accueil-panneau > :not(.accueil-hero):not(.onglets-simples),
.creation--images .carte,
.creation--images .panneau-pied,
.cartes-classe[data-portraits] .carte-classe {
  --surface: var(--b-papier-clair);
  --surface-2: #efe9da;
  --trait: #d9cfb8;
  --trait-fort: #a89870;
  --trait-champ: #6f7f99;
  --texte: #14213a;
  --texte-2: #3a4964;
  --texte-3: #4d5b74;
  --indigo-texte: #244a8a;
  --vermillon-texte: #a6321c;
  --pastille: #e8dfc8;
  --focus: #2f6fcf;
  --action: var(--b-or);
  --action-survol: var(--b-or-pale);
  --action-texte: var(--b-laque);
  color: var(--texte);
}

/* --- la connexion et l'inscription ---------------------------------------------- */
.accueil--images {
  max-width: 480px;
  padding: 12px;
  border: 2px solid var(--b-or);
  border-radius: 20px;
  background: var(--b-nuit) var(--accueil-nuit, none) center top / cover no-repeat;
  box-shadow: 0 0 0 3px var(--b-laque), 0 6px 0 rgb(0 0 0 / 0.35);
}

.accueil-affiche { display: block; }

.accueil-affiche img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 330;
  border: 2px solid var(--b-or);
  border-radius: 14px;
  background: var(--b-nuit);
  object-fit: cover;
}

.accueil-panneau { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.accueil-panneau > * { margin: 0; }
.accueil-panneau > [hidden] { display: none; }

/* La marque : une plaque de laque cerclee d'or, le titre en or pale, l'accroche en papier. */
.accueil--images .accueil-hero {
  margin: 0;
  padding: 14px 16px 16px;
  border: 2px solid var(--b-or);
  border-radius: 16px;
  background: var(--b-laque);
  box-shadow: none;
  text-align: center;
}
.accueil--images .accueil-hero::before { content: none; }
.accueil--images .accueil-hero h1 { color: var(--b-or-pale); font-size: 2rem; letter-spacing: 0.12em; }
.accueil--images .accueil-hero h1::before { content: none; }
.accueil--images .accueil-hero p { margin: 6px auto 0; color: var(--b-papier); max-width: 36ch; }

/* Les deux onglets : choisi = la plaque d'or pleine ; l'autre = la laque creuse cerclee de papier doux. */
.accueil--images .onglets-simples { gap: 8px; }
.accueil--images .onglets-simples .bouton {
  min-height: 48px;
  border: 2px solid var(--b-doux);
  border-radius: 12px;
  background: var(--b-laque);
  color: var(--b-papier);
  box-shadow: none;
}
.accueil--images .onglets-simples .bouton:not([aria-pressed="true"]):hover:not(:disabled) { background: #2b2226; }
.accueil--images .onglets-simples .bouton[aria-pressed="true"] {
  border-color: var(--b-or-pale);
  background: var(--b-or);
  color: var(--b-laque);
  box-shadow: 0 3px 0 var(--b-or-sombre);
}
.accueil--images .onglets-simples .bouton:focus-visible { outline: 3px solid var(--b-or-pale); outline-offset: 2px; }

/* Le formulaire : la pastille de papier cerclee d'or. */
.accueil--images .accueil-panneau > .carte {
  border: 2px solid var(--b-or);
  border-radius: 16px;
  background: var(--b-papier);
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.3);
}
.accueil--images .champ input,
.accueil--images .champ select { background: var(--b-papier-clair); }

/* Le bouton qui avance : l'or plein, texte laque, une marche d'or sombre dessous. */
.accueil--images .bouton-principal,
.creation--images .bouton-principal {
  border: 2px solid var(--b-or-pale);
  background: var(--b-or);
  color: var(--b-laque);
  box-shadow: 0 3px 0 var(--b-or-sombre);
}
.accueil--images .bouton-principal:hover:not(:disabled),
.creation--images .bouton-principal:hover:not(:disabled) { background: var(--b-or-pale); box-shadow: 0 3px 0 var(--b-or-sombre); }
.accueil--images .bouton-principal:focus-visible,
.creation--images .bouton-principal:focus-visible { outline: 3px solid var(--b-nuit); outline-offset: 2px; box-shadow: 0 0 0 5px var(--b-or-pale); }

/* « Mot de passe oublie ? », le mot des anciens comptes, le parrain, le pied : sur papier aussi. */
.accueil--images .accueil-panneau > .bouton-discret {
  align-self: flex-start;
  border: 2px solid var(--b-doux);
  background: var(--b-papier);
  color: var(--texte);
}
.accueil--images .accueil-panneau > .bouton-discret:hover:not(:disabled) { background: var(--b-papier-clair); }
.accueil--images .accueil-panneau > .bandeau {
  margin: 0 !important;
  border: 0;
  border-left: 4px solid var(--b-or);
  background: var(--b-papier);
  color: var(--texte);
}
.accueil--images .accueil-pied {
  align-self: center;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--b-papier);
}
.accueil--images .accueil-pied a { color: var(--texte); }
.accueil--images .accueil-pied a:hover { color: var(--b-laque); }
.accueil-statique.accueil--images > .accueil-panneau > .bandeau { margin-top: 0; }

/* A partir de 900 px : l'affiche entiere a gauche, le panneau a droite. */
@media (min-width: 900px) {
  .accueil--images {
    max-width: 900px;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 16px;
  }
  .accueil-affiche img { aspect-ratio: 400 / 600; }
  .accueil-affiche { position: sticky; top: calc(var(--entete-total, 64px) + 12px); }
  .accueil-panneau { margin-top: 0; }
}

/* --- la creation : le bois en fond, la nuit dans la scene, le portrait de la classe -------- */
.creation--images .panneau-borne {
  border-radius: 14px;
  background: #3a2a20 var(--creation-bois, none) center top / cover;
}
.creation--images .creation-colonne { padding: 8px; }
.creation--images .carte {
  border: 2px solid var(--b-or);
  border-radius: 16px;
  background: var(--b-papier);
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.3);
}
.creation--images .creation-scene {
  border: 2px solid var(--b-or);
  background-color: var(--b-nuit);
  background-size: cover;
  background-position: center top;
  image-rendering: auto;
}
.creation--images .creation-scene::after { content: none; }
.creation--images .creation-vapeur,
.creation--images .creation-corps,
.creation--images .creation-corps-rig { display: none; }
.creation-portrait {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(62%, 220px);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--b-or), 0 6px 0 rgb(0 0 0 / 0.4);
  z-index: 1;
}
.creation--images .creation-plaque {
  bottom: 10px;
  padding: 4px 14px;
  border: 2px solid var(--b-or);
  background: var(--b-laque);
  color: var(--b-or-pale);
}
.creation--images .panneau-pied { padding-top: 8px; }
.creation--images .panneau-pied input { background: var(--b-papier-clair); }

/* --- les cartes de classe aux portraits (creation et feuille de classe) -------------------- */
.cartes-classe[data-portraits] .carte-classe {
  border: 2px solid var(--b-doux);
  border-bottom-width: 4px;
  border-bottom-color: var(--accent-classe, var(--b-or-sombre));
  background: var(--b-papier);
}
.cartes-classe[data-portraits] .carte-classe:hover { background: var(--b-papier-clair); }
.cartes-classe[data-portraits] .carte-classe[aria-checked="true"] {
  border-color: var(--b-or);
  border-bottom-color: var(--b-or);
  background: var(--b-papier-clair);
  box-shadow: 0 0 0 2px var(--b-or-sombre) inset, 0 3px 0 var(--b-or-sombre);
}
.cartes-classe[data-portraits] .carte-classe[aria-checked="true"]::after { background: var(--b-or-sombre); }
.carte-classe-portrait { display: block; flex: none; border-radius: 10px; }
.cartes-classe[data-portraits] .carte-classe > .sceau-classe,
.cartes-classe[data-portraits] .carte-classe > .silhouette-classe { display: none; }
.cartes-classe--compactes[data-portraits] .carte-classe { gap: 8px; padding: 4px 8px 4px 4px; }
.cartes-classe--compactes[data-portraits] .carte-classe-portrait { width: 40px; height: 40px; border-radius: 8px; }
/* Au telephone, trois cartes par rangee : le portrait au-dessus du nom, pour que « Samouraï » tienne en entier. */
@media (max-width: 599px) {
  .cartes-classe--compactes[data-portraits] .carte-classe { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px 6px; text-align: center; }
  .cartes-classe--compactes[data-portraits] .carte-classe-nom { align-self: stretch; }
}
.cartes-classe[data-portraits]:not(.cartes-classe--compactes) .carte-classe-portrait { width: 56px; height: 56px; margin-bottom: 4px; }
.cartes-classe[data-portraits] .carte-classe:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* La feuille de classe aux portraits : son bouton « Devenir » prend l'or, comme ceux de la creation. */
.feuille-classe:has(.cartes-classe[data-portraits]) .classe-devenir.bouton-principal:not(:disabled) {
  border: 2px solid #f3dc9c;
  background: #e0b85a;
  color: #1d1619;
  box-shadow: 0 3px 0 #8a6a2a;
}
.feuille-classe:has(.cartes-classe[data-portraits]) .classe-devenir.bouton-principal:not(:disabled):hover { background: #f3dc9c; }