/* Portail de Rokugan — grammaire visuelle (moodboard L5R 4e)
   Papier ivoire qui respire, traits d'encre rares, bandeaux bleu-noir, sceau rouge.
   Trois contrastes : html[data-contraste="lavis" | "encre" | "sumi"] (« encre » par défaut). */

:root {
  /* Palette de travail */
  --ivoire: #f2f0e9;
  --gris-papier: #e0dfda;
  --sumi: #292b2a;
  --jade: #2f4842;
  --bleu: #285467;
  --rouge: #ad3b37;

  /* Correspondance avec les variables du portail */
  --washi: var(--ivoire);
  --washi-clair: #f8f7f2;
  --washi-fonce: var(--gris-papier);
  --encre: var(--sumi);
  --encre-douce: #4a4c4a;
  --encre-pale: #7a7b76;
  --vermillon: var(--rouge);
  --vermillon-fonce: #8c2e2b;
  --filet: rgba(41, 43, 42, 0.16);
  --filet-fort: rgba(41, 43, 42, 0.32);
  --titre: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --texte: 'Lato', 'Segoe UI', Arial, sans-serif;

  /* Contraste « encre » (équilibré) par défaut */
  --page: var(--ivoire);
  --carte-fond: #f8f7f2;
  --cadre: var(--sumi);
  --cadre-opacite: 0.75;
  --bandeau: linear-gradient(90deg, #1d3341 0%, var(--bleu) 62%, #2c5263 100%);
  --bandeau-texte: var(--ivoire);
  --filet-couleur: var(--sumi);
  --vague-opacite: 0.95;
  --ombre: 0 12px 28px -24px rgba(41, 43, 42, 0.55);
}

html[data-contraste='lavis'] {
  --carte-fond: rgba(248, 247, 242, 0.65);
  --cadre: #7a7b76;
  --cadre-opacite: 0.5;
  --bandeau: linear-gradient(90deg, #4d6c79, #6d8c97);
  --filet-couleur: #9a9b96;
  --vague-opacite: 0.4;
  --ombre: none;
}

html[data-contraste='sumi'] {
  --page: var(--sumi);
  --carte-fond: var(--ivoire);
  --cadre: #0f1010;
  --cadre-opacite: 0.9;
  --bandeau: var(--rouge);
  --filet-couleur: var(--ivoire);
  --vague-opacite: 1;
  --ombre: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  /* Texte posé directement sur la page sombre */
  --encre: var(--ivoire);
  --encre-douce: #cfccc3;
  --encre-pale: #a3a199;
  --filet: rgba(242, 240, 233, 0.18);
  --filet-fort: rgba(242, 240, 233, 0.35);
}
/* …mais les cartes et panneaux restent de l'encre sur papier */
html[data-contraste='sumi'] :is(.panneau, .salle, .siege, .ma-zone, .table-jeu, .musique-panneau, .zoom) {
  --encre: var(--sumi);
  --encre-douce: #4a4c4a;
  --encre-pale: #7a7b76;
  --filet: rgba(41, 43, 42, 0.16);
  --filet-fort: rgba(41, 43, 42, 0.32);
  color: var(--encre);
}

/* ——— Papier & respiration ——— */
body {
  background-color: var(--page);
  background-image: var(--fond-perso, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.17 0 0 0 0 0.16 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"));
  background-attachment: fixed;
  font-family: var(--texte);
  font-size: 17px;
  letter-spacing: 0;
  color: var(--encre);
}
h1, h2, h3 { font-weight: 500; }
h2, h3 { font-family: var(--titre); }

/* ——— Cartes et panneaux : contour d'encre imparfait, centre lisible ——— */
:is(.panneau, .salle, .siege, .ma-zone) {
  position: relative;
  background-color: var(--carte-fond);
  border-color: transparent;
  border-radius: 2px;
  box-shadow: var(--ombre);
}
:is(.panneau, .salle, .siege, .ma-zone)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--cadre);
  opacity: var(--cadre-opacite);
  -webkit-mask: url('/img/cadre.svg') 0 0 / 100% 100% no-repeat;
  mask: url('/img/cadre.svg') 0 0 / 100% 100% no-repeat;
}
.siege.actif::after, .ma-zone.a-moi::after { background: var(--rouge); opacity: 1; }
.siege.ciblable { border: 0; }
.siege.ciblable::after { background: var(--rouge); opacity: 0.8; }
.siege.cible { background-color: rgba(173, 59, 55, 0.09); }
.ma-zone.a-moi { box-shadow: var(--ombre); }
.table-jeu { background-color: var(--carte-fond); border-color: var(--filet); border-radius: 2px; }
.table-jeu.mienne { border-left-color: var(--rouge); }
.salle .kanji { color: var(--sumi); opacity: 0.07; }

/* ——— Traits d'encre & hiérarchie ——— */
/* Filet de pinceau comme séparateur */
.titre-section::after {
  height: 9px;
  background: var(--filet-couleur);
  opacity: 0.85;
  -webkit-mask: url('/img/filet.svg') center / 100% 100% no-repeat;
  mask: url('/img/filet.svg') center / 100% 100% no-repeat;
}
.panneau .titre-section::after, .salle .titre-section::after { background: var(--sumi); opacity: 0.6; height: 6px; }

/* Bandeau bleu-noir pour les titres de section posés sur la page */
main > section > .titre-section h2,
.colonne > section > .titre-section h2 {
  display: inline-block;
  padding: 7px 30px 10px 20px;
  margin-left: -6px;
  color: var(--bandeau-texte);
  background: var(--bandeau);
  font-family: var(--titre-perso, var(--titre)), var(--titre);
  font-size: 30px;
  -webkit-mask: url('/img/bandeau.svg') 0 0 / 100% 100% no-repeat;
  mask: url('/img/bandeau.svg') 0 0 / 100% 100% no-repeat;
}

/* Sceau rouge qui accompagne un surtitre */
.surtitre { color: var(--rouge); letter-spacing: 0.2em; font-weight: 700; font-size: 12.5px; }
.surtitre::before {
  content: '';
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.7em;
  vertical-align: -0.22em;
  background: var(--rouge);
  transform: rotate(-4deg);
  -webkit-mask: var(--sceau-perso, url('/img/sceau.svg')) center / contain no-repeat;
  mask: var(--sceau-perso, url('/img/sceau.svg')) center / contain no-repeat;
}
html[data-contraste='sumi'] main > section > .surtitre, html[data-contraste='sumi'] .accroche > .surtitre { color: #e2847f; }

/* Grands titres : calligraphie (police déposée) */
h1 { font-family: var(--titre-perso, var(--titre)), var(--titre); font-weight: 400; }

/* Libellés en petites capitales */
.nav a, .onglets button, .champ label, .champ-mode legend, .musique-panneau > label, .titre-voix, .choix-ligne > span, .stat span {
  font-family: var(--texte);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
}
.bouton { font-family: var(--texte); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; border-radius: 3px; }
.bouton.petit { font-size: 12.5px; }
.etiquette { font-family: var(--texte); font-weight: 700; font-size: 11px; border-radius: 2px; }
.salle .sous-titre, .chapeau, .vide, .pied, .jeu-infos { font-family: var(--titre); }

/* ——— Moments forts : encadré à l'encre sombre ——— */
.bilan {
  background-color: var(--sumi) !important;
  --encre: var(--ivoire);
  --encre-douce: #cfccc3;
  --encre-pale: #a3a199;
  color: var(--ivoire);
}
.bilan::after { background: #000 !important; opacity: 0.9 !important; }
.bilan .surtitre { color: #e2847f; }
.bilan .chapeau, .bilan figcaption { color: #cfccc3; }
.bilan .bouton.secondaire { color: var(--ivoire); border-color: var(--ivoire); }

/* ——— Vague peinte en bas de page ——— */
.pied { position: relative; padding-top: 96px; margin-top: 30px; overflow: hidden; }
.pied::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 76px;
  opacity: var(--vague-opacite);
  background: var(--vague-perso, url('/img/vague.svg')) left bottom / auto 76px repeat-x;
  pointer-events: none;
}
.pied span { position: relative; }
html[data-contraste='sumi'] .pied span { color: #a3a199; }

/* ——— Lavis déposés par l'hôte (identite/decor) ——— */
.lavis {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  opacity: var(--lavis-opacite, 0.9);
}
.lavis-haut { top: 0; right: 0; width: min(62vw, 900px); height: auto; }
.lavis-bas { position: relative; display: block; width: 100%; max-height: 260px; object-fit: cover; object-position: bottom; margin-bottom: -40px; }
html[data-contraste='sumi'] .lavis { --lavis-opacite: 0.35; mix-blend-mode: screen; }
body { position: relative; isolation: isolate; }

/* ——— Choix du contraste (profil) ——— */
.choix-contraste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choix-contraste label { position: relative; display: grid; gap: 6px; padding: 10px; border: 1px solid var(--filet-fort); border-radius: 3px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--encre); }
.choix-contraste input { position: absolute; opacity: 0; pointer-events: none; }
.choix-contraste label:has(input:checked) { border-color: var(--rouge); background: rgba(173, 59, 55, 0.07); }
.choix-contraste label:has(input:focus-visible) { outline: 2px solid var(--rouge); outline-offset: 2px; }
.apercu-contraste { display: flex; height: 28px; border-radius: 2px; overflow: hidden; border: 1px solid var(--filet); }
.apercu-contraste span { flex: 1; }
html[data-contraste='sumi'] .musique-bouton { background: transparent; color: var(--ivoire); border-color: rgba(242, 240, 233, 0.45); }
html[data-contraste='sumi'] .musique-bouton.joue { color: #e2847f; border-color: #e2847f; }
html[data-contraste='lavis'] { --cadre-opacite: 0.35; }
html[data-contraste] .bilan, .bilan { --encre: var(--ivoire); --encre-douce: #cfccc3; --encre-pale: #a3a199; color: var(--ivoire); }
html[data-contraste='sumi'] .bilan { background-color: var(--jade) !important; }
/* Le fond clair déposé ne s'applique pas à la page sombre du contraste Sumi */
html[data-contraste='sumi'] body { background-image: none; }
/* Mons en image : blason entier, sans cadre */
.mon-img { border: 0; background: transparent; }
.mon-img img { object-fit: contain; }

/* ——— Traits de pinceau réels (fournis par l'hôte, convertis en masques d'encre) ——— */
/* Filet fin : séparateur des sections de page */
.titre-section::after {
  height: 14px;
  opacity: 0.9;
  -webkit-mask: url('/img/pinceau/filet-fin.png') center / 100% 100% no-repeat;
  mask: url('/img/pinceau/filet-fin.png') center / 100% 100% no-repeat;
}
/* Trait ondulé : titres des panneaux */
.panneau .titre-section::after, .salle .titre-section::after {
  height: 12px;
  opacity: 0.55;
  -webkit-mask: url('/img/pinceau/trait-ondule.png') left center / 100% 100% no-repeat;
  mask: url('/img/pinceau/trait-ondule.png') left center / 100% 100% no-repeat;
}
/* Lavis large : bandeau des titres de section (la texture de l'encre transparaît) */
main > section > .titre-section h2,
.colonne > section > .titre-section h2 {
  padding: 12px 46px 15px 30px;
  margin-left: -14px;
  -webkit-mask: url('/img/pinceau/lavis-large.png') 0 0 / 100% 100% no-repeat;
  mask: url('/img/pinceau/lavis-large.png') 0 0 / 100% 100% no-repeat;
}
/* Trait épais : onglet actif de la navigation */
.nav a { position: relative; border-bottom: 0 !important; }
.nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -2px;
  height: 7px;
  background: var(--rouge);
  -webkit-mask: url('/img/pinceau/trait-epais.png') center / 100% 100% no-repeat;
  mask: url('/img/pinceau/trait-epais.png') center / 100% 100% no-repeat;
}
/* Table de jeu : filets fins au-dessus et au-dessous de la pioche */
.centre { position: relative; border: 0; }
.centre::before, .centre::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  height: 10px;
  background: var(--filet-couleur);
  opacity: 0.55;
  -webkit-mask: url('/img/pinceau/filet-fin.png') center / 100% 100% no-repeat;
  mask: url('/img/pinceau/filet-fin.png') center / 100% 100% no-repeat;
}
.centre::before { top: -5px; }
.centre::after { bottom: -5px; transform: scaleX(-1); }
/* Fin de manche : un trait rouge sous le titre */
.bilan h2::after {
  content: '';
  display: block;
  width: min(320px, 70%);
  height: 12px;
  margin: 8px auto 0;
  background: var(--rouge);
  -webkit-mask: url('/img/pinceau/trait-ondule.png') center / 100% 100% no-repeat;
  mask: url('/img/pinceau/trait-ondule.png') center / 100% 100% no-repeat;
}
/* L'encadré sombre reste sombre, même avec un parchemin déposé */
.avec-parchemin .bilan, .bilan { background-image: none !important; }
.bilan .mon-img { background: var(--ivoire); padding: 2px; }

/* ——— v0.7 : bandeau recentré et élargi ——— */
main > section > .titre-section h2,
.colonne > section > .titre-section h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  line-height: 1;
  /* l'encre du pinceau occupe ~5–88 % en largeur et ~14–93 % en hauteur : on centre le texte dessus */
  padding: 22px 82px 16px 52px;
  margin-left: -22px;
}

/* ——— Mons des jeux (à la place des kanji) ——— */
.salle .kanji { display: none; }
.mon-jeu {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  pointer-events: none;
}
.salle h3, .salle .sous-titre { padding-right: 84px; }
.porte .apercu .mon-jeu { width: 44px; height: 44px; top: 12px; right: 12px; }
.porte .apercu .salle h3, .porte .apercu .salle .sous-titre { padding-right: 52px; }

/* ——— Pied de page : la vague peinte des Archives impériales ——— */
.pied { padding-top: 150px; }
.pied::before {
  height: 150px;
  opacity: 1;
  background: var(--vague-perso, url('/img/vague.svg')) left bottom / 1000px 150px repeat-x;
}
html[data-contraste='lavis'] .pied::before { opacity: 0.6; }

/* ——— Lavis de bordure haute (centré, s'estompe vers le bas) ——— */
.lavis-haut {
  top: 0;
  left: 50%;
  right: auto;
  width: 1600px;
  max-width: none;
  transform: translateX(-50%);
  --lavis-opacite: 0.75;
}
/* Mons en image : la taille d'origine du fichier (ex. SVG de 1200 px) ne doit jamais agrandir la case */
.mon.mon-img { display: inline-block; position: relative; overflow: hidden; flex: none; }
.mon.mon-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; }
.choix-mons { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.choix-mons label { min-width: 0; }
.choix-clans .mon { width: 44px; height: 44px; }

/* ——— v0.8 : plan large du lavis — titre dans le ciel, devant le soleil ;
   les montagnes descendent entre le titre et le bandeau « Les jeux » ———
   Dans lavis-haut.png, le soleil est à ~43 % de la largeur et ~25 % de la hauteur. */
.lavis-haut {
  width: 2200px;
  transform: none;
  /* place le soleil derrière le titre, aligné sur le début du contenu */
  left: calc(max(50% - 620px, 0px) + 48px + 190px - 953px);
}
main > section:first-child { position: relative; padding-top: 34px; }
.grille-accueil { margin-top: 74px; }
@media (max-width: 800px) {
  .lavis-haut { width: 1300px; left: calc(16px + 120px - 563px); }
  main > section:first-child { padding-top: 10px; }
  .grille-accueil { margin-top: 44px; }
}
html, body { overflow-x: clip; }
/* Recalage mesuré : soleil à ~31 % de la largeur et ~13 % de la hauteur du lavis */
.lavis-haut { top: 92px; left: calc(max(50% - 620px, 0px) + 48px + 190px - 689px); }
.grille-accueil { margin-top: 150px; }
@media (max-width: 800px) {
  .lavis-haut { top: 70px; width: 1300px; left: calc(16px + 130px - 407px); }
  .grille-accueil { margin-top: 90px; }
}

/* ——— Mons des jeux : plus présents ——— */
.mon-jeu { width: 112px; height: 112px; top: 14px; right: 14px; filter: drop-shadow(0 6px 10px rgba(41, 43, 42, 0.18)); }
.salle h3, .salle .sous-titre { padding-right: 126px; }
.salle { min-height: 236px; }
.porte .apercu .mon-jeu { width: 60px; height: 60px; top: 10px; right: 10px; }
.porte .apercu .salle { min-height: 84px; }
.porte .apercu .salle h3, .porte .apercu .salle .sous-titre { padding-right: 66px; }
@media (max-width: 560px) {
  .mon-jeu { width: 84px; height: 84px; }
  .salle h3, .salle .sous-titre { padding-right: 92px; }
}

/* ——— Mons des jeux en filigrane (comme les anciens kanji) ——— */
.mon-jeu {
  top: auto;
  bottom: -6px;
  right: -4px;
  width: 190px;
  height: 190px;
  opacity: 0.2;
  filter: none;
}
.salle h3, .salle .sous-titre { padding-right: 0; }
.porte .apercu .mon-jeu { width: 96px; height: 96px; top: auto; bottom: -10px; right: -6px; opacity: 0.22; }
.porte .apercu .salle h3, .porte .apercu .salle .sous-titre { padding-right: 0; }
@media (max-width: 560px) {
  .mon-jeu { width: 150px; height: 150px; }
  .salle h3, .salle .sous-titre { padding-right: 0; }
}

/* ——— Salles : catégories l'une sous l'autre, mon centré verticalement à droite ——— */
.salle .meta { flex-direction: column; align-items: flex-start; gap: 2px; max-width: calc(100% - 150px); }
.salle .meta .etiquette { margin-top: 4px; }
.mon-jeu { top: 50%; bottom: auto; right: 6px; transform: translateY(-50%); }
.porte .apercu .mon-jeu { top: 50%; bottom: auto; right: 4px; transform: translateY(-50%); width: 84px; height: 84px; }
@media (max-width: 560px) { .salle .meta { max-width: calc(100% - 110px); } .mon-jeu { width: 130px; height: 130px; } }