/* ======================================================================
   GARDE-ROBE — le panneau de la boutique (chapeaux et tenues).

   Bureau : une colonne à gauche, trois étages qui ne se marchent jamais
   dessus — l'en-tête et ses onglets en haut, le rayon qui défile au
   milieu (lui seul défile), la caisse collée en bas.
   Téléphone : le même panneau devient un tiroir bas.

   Une carte dit son état d'un coup d'œil :
     liseré laiton   essayé en ce moment
     liseré vert     porté (pastille « Porté »)
     prix vert       possédé (« À vous »)
     prix atténué    trop cher pour le tapis en cours
     liseré violet   exclusivité du pass, encore verrouillée (cadenas)
   ====================================================================== */

#chapellerie{
  --gr-pass:#B58CFF;
  position:fixed;left:16px;top:16px;bottom:96px;z-index:12;width:min(380px,44vw);
  display:none;flex-direction:column;gap:10px;
  background:rgba(10,18,14,.84);backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,39,.28);border-radius:20px;padding:14px 14px 12px;
  color:var(--creme);
}
body[data-mode="seated"][data-jeu="boutique"] #chapellerie{display:flex}
body[data-jeu="boutique"] .enseigne{visibility:hidden}

/* ---------- en-tête : titre et onglets ---------- */
#chapellerie .gr-tete{flex:none;display:flex;flex-direction:column;gap:10px}
#chapellerie h3{font-family:"Fraunces",serif;font-weight:900;font-size:24px;color:var(--laiton-clair);letter-spacing:-.02em;line-height:1}
.gr-onglets{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(0,0,0,.32);border:1px solid rgba(241,233,214,.1)}
.gr-onglets button{
  display:flex;align-items:baseline;justify-content:center;gap:7px;
  font:inherit;font-size:13px;font-weight:600;color:var(--creme);opacity:.7;
  background:transparent;border:0;border-radius:10px;padding:9px 8px;cursor:pointer;
  transition:background .15s,color .15s,opacity .15s;
}
.gr-onglets button:hover{opacity:1;background:rgba(241,233,214,.08)}
.gr-onglets button[aria-selected="true"]{opacity:1;background:var(--laiton);color:#1A1305}
.gr-onglets button i{font-style:normal;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.6}
.gr-onglets button i:empty{display:none}
.gr-onglets button:focus-visible{outline:2px solid var(--laiton-clair);outline-offset:2px}
#chapellerie .gr-aide{flex:none;font-size:12px;opacity:.6;line-height:1.45;margin:0;max-width:none}

/* ---------- le rayon : seul étage qui défile ---------- */
.gr-rayon{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:8px;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(201,162,39,.35) transparent;
}
.gr-rayon[hidden]{display:none}
.gr-rayon::-webkit-scrollbar{width:6px}
.gr-rayon::-webkit-scrollbar-thumb{background:rgba(201,162,39,.35);border-radius:3px}
.gr-inter{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-family:"Fraunces",serif;font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--laiton-clair);
  padding:6px 10px;margin:0;border-radius:10px;
  background:rgba(14,24,18,.96);border:1px solid rgba(241,233,214,.08);
}
.gr-inter i{font-family:"Instrument Sans",sans-serif;font-style:normal;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--creme);opacity:.5}
.gr-inter-saison{color:#F2C230;border-color:rgba(242,194,48,.28)}
.gr-inter-pass{color:var(--gr-pass);border-color:rgba(181,140,255,.3)}
.gr-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start}
.gr-vide{font-size:13px;opacity:.55;line-height:1.5;text-align:center;padding:28px 12px;margin:0}

/* ---------- une carte ---------- */
.gr-carte{
  position:relative;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  font:inherit;color:var(--creme);cursor:pointer;
  background:rgba(241,233,214,.05);border:1px solid rgba(241,233,214,.12);border-radius:14px;padding:6px 6px 8px;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
.gr-carte:hover{background:rgba(241,233,214,.1);transform:translateY(-1px)}
.gr-carte:focus-visible{outline:2px solid var(--laiton-clair);outline-offset:2px}
.gr-carte canvas{width:100%;aspect-ratio:1/1;display:block;border-radius:10px;background:radial-gradient(circle at 50% 60%,rgba(201,162,39,.16),transparent 70%)}
.gr-carte b{
  font-size:11px;font-weight:600;line-height:1.2;min-height:2.4em;width:100%;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
.gr-carte .gr-prix{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--laiton-clair);white-space:nowrap}
.gr-pastille{
  position:absolute;top:9px;right:9px;z-index:1;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:999px;background:var(--vert-gain);color:#07150d;pointer-events:none;
}
.gr-pastille:empty{display:none}

.gr-carte.possede .gr-prix{color:var(--vert-gain)}
.gr-carte.cher .gr-prix{opacity:.4}
.gr-carte.cher canvas{opacity:.75}
.gr-carte.verrou{border-color:rgba(181,140,255,.4);background:linear-gradient(180deg,rgba(181,140,255,.1),rgba(201,162,39,.05))}
.gr-carte.verrou canvas{filter:saturate(.55) brightness(.8)}
.gr-carte.verrou .gr-prix{color:var(--gr-pass)}
.gr-carte.verrou .gr-pastille{background:rgba(14,24,18,.9);border:1px solid rgba(181,140,255,.55);font-size:11px;padding:2px 5px}
.gr-carte.porte{border-color:var(--vert-gain);background:rgba(95,191,138,.1)}
/* « essayé » passe après tout le reste : c'est la carte que la caisse décrit */
.gr-carte.essaye{border-color:var(--laiton);box-shadow:0 0 0 1px var(--laiton) inset;background:rgba(201,162,39,.14)}
.gr-carte.essaye.porte{border-color:var(--vert-gain);box-shadow:0 0 0 1px var(--vert-gain) inset}

/* ---------- la caisse, collée en bas ---------- */
.gr-caisse{
  flex:none;display:flex;flex-direction:column;gap:8px;
  padding-top:10px;border-top:1px solid rgba(241,233,214,.12);
}
.gr-quoi{display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:1px;align-items:baseline;font-size:12px;line-height:1.35;min-width:0}
.gr-quoi b{grid-column:1;font-family:"Fraunces",serif;font-weight:700;font-size:16px;color:var(--laiton-clair);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-quoi span{grid-column:1 / -1;opacity:.75;font-variant-numeric:tabular-nums}
.gr-quoi em{
  grid-column:2;grid-row:1;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:#1A1305;background:var(--laiton-clair);border-radius:999px;padding:2px 8px;
}
.gr-caisse.verrou .gr-quoi span{color:var(--gr-pass);opacity:1}
.gr-boutons{display:flex;gap:6px;flex-wrap:wrap}
.gr-boutons button{
  font:inherit;font-size:13px;font-weight:600;line-height:1.2;background:var(--laiton);color:#1A1305;
  border:1px solid transparent;border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .15s,transform .1s;
}
.gr-boutons .gr-principal{flex:1 1 150px;min-width:0}
.gr-boutons button:hover:not(:disabled){background:var(--laiton-clair);transform:translateY(-1px)}
.gr-boutons button.sec{flex:none;background:transparent;color:var(--creme);border-color:rgba(241,233,214,.28)}
.gr-boutons button.sec:hover:not(:disabled){background:rgba(241,233,214,.1)}
.gr-boutons button.gr-pass{border-color:rgba(181,140,255,.6);color:var(--gr-pass)}
.gr-boutons button:disabled{opacity:.38;cursor:default;transform:none}
.gr-caisse.verrou .gr-principal:disabled{opacity:.75;background:rgba(181,140,255,.14);color:var(--gr-pass);border-color:rgba(181,140,255,.35);font-size:12px}
.gr-boutons button:focus-visible{outline:2px solid var(--laiton-clair);outline-offset:2px}

/* ---------- écrans bas (portable 13", fenêtre réduite) : on serre ---------- */
@media (min-width:901px) and (max-height:700px){
  #chapellerie{gap:8px;padding:12px 12px 10px}
  #chapellerie h3{font-size:20px}
  #chapellerie .gr-aide{display:none}
}

/* ---------- téléphone : tiroir bas ---------- */
@media (max-width:900px){
  #chapellerie{left:8px;right:8px;top:auto;bottom:70px;width:auto;height:44vh;padding:8px 10px;gap:6px;border-radius:16px}
  #chapellerie .gr-tete{flex-direction:row;align-items:center;gap:8px}
  #chapellerie h3{font-size:15px;white-space:nowrap}
  .gr-onglets{flex:1;padding:3px;border-radius:12px}
  .gr-onglets button{padding:7px 6px;font-size:12px}
  #chapellerie .gr-aide{display:none}
  .gr-rayon{gap:6px;padding-right:2px}
  .gr-inter{font-size:12px;padding:4px 8px;border-radius:8px}
  .gr-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .gr-carte{padding:4px 4px 6px;border-radius:12px}
  .gr-carte b{font-size:10px}
  .gr-carte .gr-prix{font-size:10px}
  .gr-pastille{top:6px;right:6px;font-size:8px;padding:1px 5px}
  .gr-caisse{gap:6px;padding-top:6px}
  .gr-quoi{font-size:11px}
  .gr-quoi b{font-size:14px}
  .gr-boutons button{font-size:12px;padding:8px 12px}
}
/* téléphone couché : le tiroir prendrait toute la hauteur — on en fait une colonne à gauche */
@media (max-width:900px) and (max-height:520px){
  #chapellerie{left:8px;right:auto;top:8px;bottom:56px;width:min(340px,44vw);height:auto}
  .gr-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
}