/* Pochettes des mondes (lot M2, D-606 ; maquette pochettes.css du lot E, D-583) : une rangée qui s'arrête
   sur chaque pochette. Page /mondes/ seulement. Le relief (html.relief) n'existe qu'en mode interactif.
   Aucun style en ligne (CSP style-src 'self') : pochettes.js ne pose que des propriétés par le CSSOM. */

.mondes { --l: 320px; --ecart: 28px; position: relative; }
.mondes-tete { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 6px; }
.mondes-tete h2 { font-size: 40px; color: var(--encre); }
.mondes-tete p { margin: 6px 0 0; color: var(--encre2); max-width: 560px; }

/* boutons précédent / suivant et position : jamais de glisser obligatoire */
.poch-nav { display: flex; align-items: center; gap: 12px; }
.compteur-poch { margin: 0; min-width: 12em; text-align: center; font: 800 15px/1.2 var(--corps); }
.fleche-poch {
  width: 48px; height: 48px; flex: none; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: var(--panneau);
  box-shadow: 0 -3px 0 0 var(--contour), 0 3px 0 0 var(--contour), -3px 0 0 0 var(--contour), 3px 0 0 0 var(--contour), inset 0 -4px 0 0 #A8957A;
}
.fleche-poch svg { width: 14px; height: 22px; }
.fleche-poch.d svg { transform: scaleX(-1); }
.fleche-poch:hover { filter: brightness(1.06); }
.fleche-poch[aria-disabled="true"] { filter: saturate(.2); opacity: .5; cursor: default; }
.fleche-poch:focus-visible, .rail:focus-visible, .poch a:focus-visible { outline: 3px solid #1F6FA8; outline-offset: 4px; }
.rail:focus-visible { outline-offset: -4px; }

/* la rangée : défilement natif, arrêt au centre de chaque pochette */
.rail {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--or-sombre) transparent;
}
.rail.tire { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.rang { position: relative; list-style: none; margin: 0; display: flex; gap: var(--ecart); width: max-content; padding: 26px calc(50% - var(--l) / 2) 34px; }
.poch { flex: 0 0 var(--l); scroll-snap-align: center; scroll-snap-stop: always; }
.poch img { -webkit-user-drag: none; }

.poch article {
  height: 100%; display: flex; flex-direction: column; background: var(--panneau); color: var(--encre);
  box-shadow: 0 -4px 0 0 var(--contour), 0 4px 0 0 var(--contour), -4px 0 0 0 var(--contour), 4px 0 0 0 var(--contour), 0 12px 0 0 rgba(8, 7, 24, .3);
}
.poch.ici article {
  box-shadow: 0 -4px 0 0 var(--contour), 0 4px 0 0 var(--contour), -4px 0 0 0 var(--contour), 4px 0 0 0 var(--contour),
    0 0 0 10px var(--accent), 0 0 0 14px var(--contour), 0 20px 0 0 rgba(8, 7, 24, .3);
}
.poch-vue { position: relative; height: 196px; overflow: hidden; background: var(--teinte, #20244A) url("../img/ciel-carte.webp") center / 360px auto; image-rendering: pixelated; box-shadow: inset 0 -4px 0 0 var(--contour); }
.poch-photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.poch-astre { position: absolute; left: 12px; top: 12px; width: 56px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(8, 7, 24, .6)); }
.poch-src { position: absolute; right: 8px; bottom: 12px; font: 800 10px/1 var(--corps); letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; background: rgba(8, 7, 24, .8); padding: 3px 6px 4px; }
.poch-txt { flex: 1; display: flex; flex-direction: column; padding: 14px 18px 18px; }
.poch-num { margin: 0 0 6px; font: 800 12px/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--encre2); }
.poch h3 { font-size: 30px; color: var(--encre); }
.poch-texte { flex: 1; margin: 6px 0 14px; font-size: 15px; line-height: 1.45; color: var(--encre2); }
.poch-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.poch-bas .btn.petit { min-height: 44px; }   /* cible d'un monde ouvert : 44 px au moins */
.poch-etat { margin: 0; display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--corps); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px 6px; background: #2E7A38; color: #FFFFFF; box-shadow: 0 0 0 2px var(--contour); }
.poch-etat i { width: 9px; height: 9px; background: url("../img/picto-cadenas.webp") center / contain no-repeat; image-rendering: pixelated; }

/* teinte de chaque pochette (maquette, fabriquer_pochettes.TEINTES) */
.poch[data-id="depart"] { --teinte: #1E3A2A; }
.poch[data-id="aether"] { --teinte: #2C4A7A; }
.poch[data-id="lune"] { --teinte: #2A2A44; }
.poch[data-id="mars"] { --teinte: #4A2A22; }
.poch[data-id="venus"] { --teinte: #3A3420; }
.poch[data-id="mercure"] { --teinte: #3A3036; }
.poch[data-id="glacio"] { --teinte: #1E3A4A; }
.poch[data-id="starlight"] { --teinte: #2E2450; }
.poch[data-id="otherside"] { --teinte: #182A2A; }
.poch[data-id="poches"] { --teinte: #2A1E3A; }

/* monde voilé : la planète sous un voile, « Ouvre plus tard », aucun lien (D-587) */
.poch.voilee article { background: #E9DFC6; }
.poch.voilee .poch-vue::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(8, 7, 24, .5) 0 8px, rgba(8, 7, 24, .36) 8px 16px); }
.poch.voilee .poch-astre { left: 50%; top: 50%; width: auto; height: 112px; transform: translate(-50%, -50%); filter: grayscale(.8) brightness(.6) drop-shadow(0 6px 0 rgba(8, 7, 24, .6)); }
.poch.voilee .poch-etat { background: #D9CBA6; color: var(--encre); }

.poch-points { display: flex; justify-content: center; gap: 8px; margin: 0 0 6px; }
.poch-points i { width: 10px; height: 10px; background: #B8AB8E; box-shadow: 0 0 0 2px var(--contour); }
.poch-points i.ici { width: 26px; background: var(--or); }
.poch-aide { margin: 14px auto 0; padding: 0 16px; font-size: 14px; color: var(--encre2); text-align: center; }

/* relief léger (mode interactif) : la pochette penche en quittant le centre et au survol */
.relief .poch article {
  transform: perspective(900px) rotateY(calc(var(--r, 0) * -16deg + var(--tx, 0) * 7deg)) rotateX(calc(var(--ty, 0) * -6deg)) scale(calc(1 - var(--ra, 0) * .12));
  transition: transform 90ms ease-out; will-change: transform;
}
.relief .poch-photo { left: -8%; top: -6%; width: 116%; height: 112%; transform: translate(calc(var(--r, 0) * -28px + var(--tx, 0) * -10px), calc(var(--ty, 0) * -7px)); }
.relief .poch-astre { transform: translate(calc(var(--tx, 0) * 9px), calc(var(--ty, 0) * 7px)); }
.relief .poch.voilee .poch-astre { transform: translate(calc(-50% + var(--r, 0) * 18px + var(--tx, 0) * 9px), calc(-50% + var(--ty, 0) * 7px)); }

@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } }

@media (max-width: 600px) {
  .mondes { --l: min(300px, 78vw); --ecart: 16px; }
  .mondes-tete h2 { font-size: 30px; }
  .poch-nav { width: 100%; justify-content: space-between; }
  .compteur-poch { min-width: 0; font-size: 14px; }
  .poch-vue { height: 170px; }
  .poch h3 { font-size: 26px; }
  .poch.voilee .poch-astre { height: 96px; }
  .rang { padding-top: 22px; padding-bottom: 26px; }
}