/* L'achat : plusieurs tailles dans une commande, ligne qui rassure, score et horloge de l'interface du jeu,
   et, sur téléphone, une barre discrète dont les tailles s'ouvrent en feuille. Se charge après sections.css. */

/* Interface du jeu : le score (une participation par t-shirt) à côté des étoiles, et l'horloge une fois le premier écran quitté */
.niveau{display:flex;align-items:center;gap:calc(10 * var(--p))}
.score,.score span{display:flex;align-items:center}
.score img{height:calc(30 * var(--p));width:auto;margin-left:calc(-4 * var(--p))}
.score > img{margin-left:0}
.horloge{display:flex;align-items:center;gap:calc(7 * var(--p));padding:calc(6 * var(--p)) calc(10 * var(--p));background:var(--verre);
  font:700 max(12px,calc(14 * var(--p)))/1 var(--texte);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;
  opacity:0;translate:0 calc(-6 * var(--p));transition:opacity .25s ease,translate .3s var(--entree)}
.horloge svg{width:calc(14 * var(--p));height:calc(14 * var(--p));fill:none;stroke:var(--or);stroke-width:1.8;stroke-linecap:round}
html.loin .horloge{opacity:1;translate:0 0}
.hud{grid-template-columns:auto auto}
.niveau,.regle{grid-column:1 / -1}
.argent{grid-column:2;grid-row:3}
.horloge{grid-column:1;grid-row:3;align-self:center;margin-right:calc(6 * var(--p))}

/* Le formulaire : tailles, nombre, « autre taille », bouton, ligne qui rassure */
.voile,.resume,.choix-tete{display:none}
.choix,.choix-dans{display:contents}
.achat{top:calc(32% + 210 * var(--p));grid-template-columns:auto auto auto;grid-template-areas:"tailles quantite autre" "cta cta cta" "rassure rassure rassure";row-gap:calc(10 * var(--p))}
.tailles span{position:relative}
.tailles i{position:absolute;right:calc(3 * var(--p));top:calc(3 * var(--p));display:none;place-items:center;min-width:calc(17 * var(--p));height:calc(17 * var(--p));padding:0 calc(4 * var(--p));
  border-radius:99px;background:var(--or);color:var(--encre);font:700 max(10px,calc(11 * var(--p)))/1 var(--texte);font-style:normal;letter-spacing:0}
/* plusieurs tailles : chaque taille porte son nombre, ou un « + » tant qu'elle n'est pas dans la commande */
.achat.multi .tailles i{display:grid}
.achat.multi .tailles i:empty{background:none;color:rgba(255,244,234,.8);box-shadow:inset 0 0 0 1.5px rgba(255,244,234,.5)}
.achat.multi .tailles i:empty::before{content:"+"}
.achat.multi .tailles .pris span{box-shadow:inset 0 calc(-3 * var(--p)) 0 var(--or)}
.autre{grid-area:autre;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4 * var(--p));width:calc(60 * var(--p));height:calc(54 * var(--p));padding:0;
  border:1.5px solid rgba(255,244,234,.5);background:var(--verre);color:var(--creme);cursor:pointer;touch-action:manipulation;
  font:700 max(9px,calc(9.5 * var(--p)))/1.05 var(--texte);letter-spacing:.06em;text-transform:uppercase;text-align:center;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.autre svg{width:calc(13 * var(--p));height:calc(13 * var(--p));fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square;transition:rotate .25s var(--entree)}
.autre span{max-width:calc(50 * var(--p))}
.autre:active{scale:.96}
.autre[aria-pressed="true"]{background:var(--or);border-color:var(--or);color:var(--encre)}
.autre[aria-pressed="true"] svg{rotate:45deg}
.autre:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.rassure{grid-area:rassure;justify-self:start;display:flex;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(16 * var(--p));padding:calc(7 * var(--p)) calc(12 * var(--p));background:var(--verre);
  font:600 max(11px,calc(12.5 * var(--p)))/1.25 var(--texte);letter-spacing:.03em;color:rgba(255,244,234,.94)}
.rassure span{display:inline-flex;align-items:center;gap:calc(6 * var(--p))}
.rassure svg{flex:none;width:calc(12 * var(--p));height:calc(12 * var(--p));fill:none;stroke:var(--or);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cta-txt .fin{display:none;align-items:center;gap:calc(4 * var(--p))}
.cta-txt .fin svg{width:calc(11 * var(--p));height:calc(11 * var(--p));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.achat.clos .autre,.achat.clos .resume{opacity:.45;pointer-events:none}

/* Dans la fiche du t-shirt : les tailles sur toute la largeur, puis le nombre et « autre taille » */
.achat-fiche{top:auto;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tailles tailles" "quantite autre" "cta cta" "rassure rassure"}
.achat-fiche .tailles label{flex:1}
.achat-fiche .tailles span{min-width:0}
.achat-fiche .autre{flex-direction:row;width:auto;gap:calc(10 * var(--p));font-size:max(12px,calc(13 * var(--p)))}
.achat-fiche .autre span{max-width:none}

@media (hover:hover) and (pointer:fine){
  .autre[aria-pressed="false"]:hover{background:rgba(255,244,234,.14)}
}

@media (max-width:700px){
  /* la barre du bas ne prend plus qu'une ligne : le premier écran gagne de la place pour le t-shirt */
  .mission{padding-bottom:calc(84 * var(--p))}
  /* la scène garde assez de hauteur, même sur un écran court, et le t-shirt se cale sous le menu */
  .scene{--sc:clamp(calc(400 * var(--p)),calc(100svh - 372 * var(--p)),calc(500 * var(--p)))}
  .tshirt{width:min(calc(350 * var(--p)),calc(var(--sc) * 1.065 - 108 * var(--p)))}
  .niveau{gap:calc(6 * var(--p))}
  .score img{height:calc(19 * var(--p));margin-left:calc(-2 * var(--p))}
  .horloge{display:none}
  .pied{padding-bottom:calc(120 * var(--p))}

  .voile{display:block;position:fixed;inset:0;z-index:19;background:rgba(5,2,15,.62);opacity:0;pointer-events:none;transition:opacity .25s ease}
  html.feuille .voile{opacity:1;pointer-events:auto}
  .achat{top:auto;animation:none;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"choix choix" "resume cta" "rassure rassure";gap:0 calc(8 * var(--p));
    padding:calc(10 * var(--p)) calc(16 * var(--p)) max(calc(12 * var(--p)),env(safe-area-inset-bottom))}
  .achat.ouverte{grid-template-areas:"choix choix" "cta cta" "rassure rassure"}
  /* la feuille : fermée, elle ne prend aucune hauteur ; ouverte, elle montre les tailles, le nombre et « autre taille » */
  .choix{grid-area:choix;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--entree)}
  .achat.ouverte .choix{grid-template-rows:1fr}
  .choix-dans{display:grid;min-height:0;overflow:hidden;visibility:hidden;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tete tete" "tailles tailles" "quantite autre";
    gap:calc(10 * var(--p));transition:visibility 0s .3s}
  .achat.ouverte .choix-dans{visibility:visible;transition-delay:0s}
  .choix-tete{grid-area:tete;display:flex;align-items:center;justify-content:space-between;font:700 max(12px,calc(13 * var(--p)))/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
  .choix-tete button{display:grid;place-items:center;width:calc(44 * var(--p));height:calc(40 * var(--p));margin-right:calc(-12 * var(--p));border:0;background:none;color:var(--creme);cursor:pointer}
  .choix-tete svg{width:calc(14 * var(--p));height:calc(14 * var(--p));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .tailles span{min-width:0;height:calc(46 * var(--p));padding:0;font-size:max(15px,calc(16 * var(--p)))}
  .quantite{height:calc(46 * var(--p));margin-bottom:calc(12 * var(--p))}
  .quantite button{width:calc(48 * var(--p))}
  .nombre{min-width:calc(40 * var(--p));font-size:max(16px,calc(17 * var(--p)))}
  .autre{flex-direction:row;width:auto;height:calc(46 * var(--p));margin-bottom:calc(12 * var(--p));gap:calc(10 * var(--p));font-size:max(12px,calc(13 * var(--p)))}
  .autre span{max-width:none}
  .resume{grid-area:resume;display:flex;align-items:center;gap:calc(8 * var(--p));height:calc(52 * var(--p));padding:0 calc(10 * var(--p));border:1.5px solid rgba(255,244,234,.5);
    background:var(--verre);color:var(--creme);text-align:left;cursor:pointer;touch-action:manipulation}
  .achat.ouverte .resume{display:none}
  .resume small{display:block;font:600 max(9px,calc(9.5 * var(--p)))/1 var(--texte);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,244,234,.72)}
  .resume b{display:block;margin-top:calc(5 * var(--p));font:700 calc(15 * var(--p))/1 var(--texte);white-space:nowrap}
  .resume svg{width:calc(10 * var(--p));height:calc(10 * var(--p));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .cta{width:auto;min-width:0;height:calc(52 * var(--p));padding:0 calc(12 * var(--p)) 0 calc(14 * var(--p));gap:calc(8 * var(--p));font-size:calc(16 * var(--p))}
  .cta em{padding-left:calc(10 * var(--p));gap:calc(5 * var(--p))}
  .cta small{font-size:calc(13 * var(--p))}
  .cta-txt{white-space:nowrap}
  /* barre fermée : sous « Je participe », le temps qui reste ; feuille ouverte : le nombre de participations */
  .achat:not(.ouverte):not(.clos) .cta-txt i[data-regle]{display:none}
  .achat:not(.ouverte):not(.clos) .cta-txt .fin{display:flex;font-size:calc(11 * var(--p));letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .achat.long:not(.ouverte) .cta-txt .fin{font-size:calc(10 * var(--p))}
  .rassure{display:none}
  .achat.ouverte .rassure{display:flex;justify-self:stretch;margin-top:calc(8 * var(--p));padding:0;background:none;font-size:max(11px,calc(11.5 * var(--p)))}
}

/* Taille retirée de la vente : visible mais grisée et barrée, impossible à choisir (1.6.5) */
[data-achat] .tailles label.indisponible{opacity:.32;pointer-events:none}
[data-achat] .tailles label.indisponible span{text-decoration:line-through}