/* Comment ça marche, questions fréquentes, signature du design, visuel en grand, partage, écran « Mission acceptée ». */

/* Comment ça marche : trois objectifs de mission, dans l'ordre */
.etapes-titre{margin-top:calc(26 * var(--p));font:700 max(11px,calc(13 * var(--p)))/1 var(--texte);letter-spacing:.16em;text-transform:uppercase;color:var(--or);text-shadow:0 2px 6px rgba(5,2,15,.85)}
.etapes{display:grid;gap:calc(6 * var(--p));width:100%;max-width:calc(580 * var(--p));margin-top:calc(12 * var(--p));list-style:none}
.etapes li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(16 * var(--p));padding:calc(11 * var(--p)) calc(18 * var(--p)) calc(11 * var(--p)) calc(11 * var(--p));background:var(--verre)}
.etapes li > b{display:grid;place-items:center;width:calc(42 * var(--p));height:calc(42 * var(--p));background:var(--or);color:var(--encre);font:700 max(17px,calc(23 * var(--p)))/1 var(--texte)}
.etapes h3{font:700 max(14px,calc(16.5 * var(--p)))/1.2 var(--texte);letter-spacing:.04em;text-transform:uppercase}
.etapes p{margin-top:calc(4 * var(--p));font:500 max(13px,calc(15 * var(--p)))/1.35 var(--texte);color:rgba(255,244,234,.9)}

/* La signature du design, sous le titre du t-shirt */
.signature{display:flex;align-items:center;gap:calc(12 * var(--p));margin-top:calc(-8 * var(--p));font:700 max(11px,calc(13 * var(--p)))/1.2 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.signature::before{content:"";flex:none;width:calc(28 * var(--p));height:2px;background:var(--or)}

/* Questions fréquentes et règlement : deux groupes de lignes à ouvrir */
.groupe{margin-top:calc(22 * var(--p));padding-bottom:calc(4 * var(--p));font:700 max(11px,calc(13 * var(--p)))/1 var(--texte);letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.groupe:first-child{margin-top:0}

/* Boutons « Voir le visuel en grand » et « Partager le concours » */
.voir-visuel,.partager{display:inline-flex;align-items:center;gap:calc(10 * var(--p));height:calc(48 * var(--p));min-height:44px;padding:0 calc(18 * var(--p));border:1.5px solid rgba(255,244,234,.45);
  background:var(--verre);color:var(--creme);cursor:pointer;touch-action:manipulation;font:700 max(12px,calc(14 * var(--p)))/1 var(--texte);letter-spacing:.06em;text-transform:uppercase;
  transition:background-color .15s ease,color .15s ease}
.voir-visuel svg,.partager svg{width:calc(16 * var(--p));height:calc(16 * var(--p));min-width:14px;min-height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voir-visuel:active,.partager:active{scale:.97}
.voir-visuel{margin-top:calc(10 * var(--p))}
.partager{justify-self:start}

/* Le dos du t-shirt en grand : plein écran, zoom et déplacement. La photo est dessinée dans une toile. */
.visuel{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,4,22,.97);color:var(--creme);overflow:hidden}
.visuel[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:ouvre .22s var(--entree)}
@keyframes ouvre{from{opacity:0;scale:.97}to{opacity:1;scale:1}}
.visuel-barre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14 * var(--p)) calc(20 * var(--p))}
.visuel-titre{font:700 max(12px,calc(14 * var(--p)))/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.visuel-fermer{display:grid;place-items:center;width:calc(44 * var(--p));height:calc(44 * var(--p));min-width:42px;min-height:42px;padding:0;border:1.5px solid rgba(255,244,234,.45);background:var(--verre);color:var(--creme);cursor:pointer}
.visuel-fermer svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.visuel-zone{position:relative;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;min-height:0;overflow:hidden;touch-action:none;cursor:zoom-in}
.visuel-zone.zoome{cursor:grab}
.visuel-zone.saisi{cursor:grabbing}
.visuel-zone canvas{max-width:92%;max-height:96%;width:auto;height:auto;pointer-events:none;will-change:transform;filter:drop-shadow(0 20px 40px rgba(3,1,10,.55))}
.visuel-aide{padding:calc(12 * var(--p)) 16px calc(16 * var(--p));text-align:center;font:600 max(11px,calc(12 * var(--p)))/1.4 var(--texte);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,244,234,.72)}

/* Les images ne se laissent pas enregistrer par les gestes habituels (appui long, glisser, sélection) */
img,canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}

/* « Mission acceptée » : une seconde d'écran entre le bouton et le paiement */
.acceptee{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(8,4,22,.9);animation:voile-entre .18s ease both}
.acceptee[hidden]{display:none}
@keyframes voile-entre{from{opacity:0}to{opacity:1}}
.acceptee-dans{display:grid;justify-items:center;gap:calc(18 * var(--p));width:100%;padding:calc(36 * var(--p)) 16px;border-block:2px solid rgba(255,198,41,.7);
  background:linear-gradient(90deg,rgba(8,4,22,0),rgba(8,4,22,.92) 22%,rgba(8,4,22,.92) 78%,rgba(8,4,22,0))}
.acceptee .vecto{height:calc(110 * var(--p));max-width:92vw}
.acceptee .l{transform-box:fill-box;transform-origin:50% 55%}
.acceptee.joue .l{animation:impact .5s var(--expo) calc(.08s + var(--i) * .03s) both}
.acceptee.joue .p{animation:eclair .6s ease-out calc(.08s + var(--i) * .03s) both}
.acceptee-txt{font:700 max(14px,calc(22 * var(--p)))/1.2 var(--texte);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.acceptee.joue .acceptee-txt{animation:arrive .4s var(--entree) .55s both}
.acceptee-note{font:600 max(12px,calc(14 * var(--p)))/1.3 var(--texte);color:rgba(255,244,234,.8);text-align:center}
.acceptee-note:empty{display:none}

/* L'arrivée sur le site : le ciel se lève, le t-shirt monte de son anneau en apparaissant, l'interface se pose en douceur */
.ciel,.sol,.monts{animation:leve 1s ease-out both}
@keyframes leve{from{opacity:0}to{opacity:1}}
.tshirt canvas{transition:opacity .7s ease}
.tshirt.attend .fixe,.tshirt-v.attend .fixe{opacity:0}
.lot,.tete,.hud,.radar,.barres,.achat{animation-duration:.7s;animation-timing-function:var(--expo)}

@media (hover:hover) and (pointer:fine){
  .voir-visuel:hover,.partager:hover,.visuel-fermer:hover{background:rgba(255,244,234,.14)}
}

@media (max-width:700px){
  .etapes-titre{order:4;margin-top:calc(6 * var(--p))}
  .etapes{order:5;text-align:left}
  .signature{margin-top:calc(-12 * var(--p))}
  .voir-visuel{width:100%;justify-content:center}
  .acceptee .vecto{width:92vw;height:auto}
}

/* Le lot dans la phrase du titre : la console et le jeu en or, comme « 1 t-shirt » dans la règle. */
.lot b{font-weight:inherit;color:var(--or)}