/* ═══ styles-app.css : uniquement le CSS dont app.js a besoin (chargé après styles.css) ═══
   Thème sombre ambré. Les valeurs de repli reprennent les hex du contrat de palette. */

/* ─────────── Photos de l'artiste ─────────── */
.fk{display:block;position:relative;overflow:hidden;flex:0 0 auto;
  background:var(--paper3,#31271D);border:1px solid var(--line2,rgba(210,175,101,.28))}
.fk img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* vignette ronde : image déjà recadrée sur le visage (img/fk-*-face.jpg) */
.fk--sq{width:52px;height:52px;border-radius:50%}
.fk--sq img{object-position:50% 38%}
/* tuile portrait 4:5 (en-tête de la modale), même recadrage visage */
.fk--tall{width:100%;height:100%;border:0}
.fk--tall img{object-position:50% 30%}
/* grande photo des cartes de tournée */
.fk--card{border:0;border-radius:0}
.fk--card.fk--pwt img{object-position:47% 40%}
.fk--card.fk--fpr img{object-position:50% 12%}

/* ─────────── Cartes de tournée (en tête de la liste des 公演) ─────────── */
.tpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 22px}
.tcard{display:grid;grid-template-columns:148px minmax(0,1fr);align-items:stretch;min-height:176px;
  padding:0;margin:0;text-align:left;font:inherit;color:var(--ink,#F6F5E9);cursor:pointer;overflow:hidden;
  background:var(--paper2,#261F18);border:1px solid var(--line2,rgba(210,175,101,.28));
  border-radius:var(--rad,4px);transition:border-color .18s,box-shadow .18s,transform .18s;
  -webkit-tap-highlight-color:transparent}
.tcard:hover{border-color:var(--gold,#D2AF65)}
.tcard:focus-visible{outline:2px solid var(--gold,#D2AF65);outline-offset:2px}
.tcard--on{border-color:var(--gold,#D2AF65);box-shadow:inset 0 0 0 1px var(--gold,#D2AF65)}
.tcard .fk--card{width:100%;height:100%;min-height:176px}
.tcard .fk--card img{position:absolute;inset:0}
.tcard__b{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;min-width:0}
.tcard__k{font-family:var(--lat,serif);font-size:10px;letter-spacing:.24em;color:var(--gold,#D2AF65)}
.tcard__n{font-family:var(--serif,serif);font-size:16px;font-weight:500;line-height:1.45;color:var(--ink,#F6F5E9)}
.tcard__d{font-size:11.5px;line-height:1.8;color:var(--mute,#B9B39C);flex:1}
.tcard__f{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:4px}
.tcard__f b{font-family:var(--lat,serif);font-size:22px;font-weight:600;line-height:1;color:var(--ink,#F6F5E9)}
.tcard__f small{font-size:10px;color:var(--mute,#B9B39C)}
.tcard__m{font-size:10.5px;letter-spacing:.04em;color:var(--ink2,#D3D0B5)}

/* ─────────── Vignette dans les lignes de 公演 ─────────── */
.srow__v--fk{display:flex;align-items:center;gap:14px;min-width:0}
.srow__vt{min-width:0;flex:1}
.srow--out .fk img{filter:grayscale(.6)}

/* ─────────── En-tête de la modale : photo de l'artiste à côté de la photo de la salle ─────────── */
.modal__h .in.in--fk{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.in--fk>.mfk{grid-column:1;grid-row:1 / span 3;display:block;width:64px;height:80px;overflow:hidden;
  border-radius:var(--rad,4px);border:1px solid var(--gold,#D2AF65);
  box-shadow:0 6px 18px rgba(0,0,0,.45);background:var(--paper3,#31271D)}
.in--fk>:not(.mfk){grid-column:2;min-width:0}

/* ─────────── Plan de salle sur fond sombre ─────────── */
.plan text{font-family:var(--sans,sans-serif)}
.blk{opacity:1;stroke:rgba(29,25,20,.55);stroke-width:.6}
.blk:hover{filter:brightness(1.14) saturate(1.1)}
.blk:focus{outline:none;stroke:var(--ink,#F6F5E9);stroke-width:2}
/* presque épuisé : couleur de zone estompée, même contour que les autres blocs */
.blk--few{fill-opacity:.45}
/* complet : creux, sans couleur */
.blk--out{cursor:default;fill-opacity:1;stroke:rgba(246,245,233,.16);stroke-width:.8;stroke-dasharray:none}
.blk--out:hover{filter:none}
/* sélectionné : plein clair, contour or épais */
.blk--sel,.blk--sel:hover,.blk--sel:focus{fill:var(--ink,#F6F5E9);fill-opacity:1;opacity:1;filter:none;
  stroke:var(--gold,#D2AF65);stroke-width:3.2;stroke-dasharray:none}
.vmini .blk{cursor:default}
.vmini .blk:hover{filter:none}

.lg{color:var(--ink2,#D3D0B5)}
.lg i{flex:0 0 auto}
.lg--few i{background:rgba(210,175,101,.45)}
.lg--out i{background:rgba(246,245,233,.05);border:1px solid rgba(246,245,233,.3)}
.lg--mik i{background:#1D1914;border:1px solid #F6F5E9;border-radius:99px;width:8px;height:8px;
  box-shadow:0 0 0 2.5px var(--gold,#D2AF65);margin:0 2.5px}

/* ─────────── Panier ─────────── */
.citem__top{display:flex;align-items:flex-start;gap:12px}
.citem__top .fk--sq{width:46px;height:46px}
.citem__tt{flex:1;min-width:0}
.citem__k{display:block;font-family:var(--lat,serif);font-size:9.5px;letter-spacing:.22em;
  color:var(--gold,#D2AF65);margin-bottom:3px}
.citem__tt .citem__b{margin-top:6px}
.cfk{display:flex;justify-content:center;margin:18px 0 14px}
.cfk .fk--sq{width:104px;height:104px;border-color:var(--gold,#D2AF65)}

/* ─────────── Responsive ─────────── */
@media (max-width:900px){
  .tpick{grid-template-columns:minmax(0,1fr)}
  .tcard{grid-template-columns:128px minmax(0,1fr);min-height:150px}
  .tcard .fk--card{min-height:150px}
}
@media (max-width:620px){
  .tpick{gap:10px;margin-bottom:16px}
  .tcard{grid-template-columns:104px minmax(0,1fr)}
  .tcard__b{padding:14px 14px 13px;gap:5px}
  .tcard__n{font-size:14.5px}
  .tcard__d{font-size:11px;line-height:1.7}
  .tcard__f b{font-size:20px}
  .fk--sq{width:42px;height:42px}
  .srow__v--fk{gap:10px}
  .modal__h .in.in--fk{column-gap:12px}
  .in--fk>.mfk{width:50px;height:63px}
}
@media (prefers-reduced-motion:reduce){.tcard{transition:none}}