/* Styles de public/worlds.php — sortis de la page (i102b). */

.mg{max-width:1100px;margin:0 auto;padding:0 clamp(22px,5vw,44px)}
/* Deux comparateurs côte à côte (1 colonne sur mobile) */
.ba-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:820px;margin:0 auto;align-items:start}
@media(max-width:720px){.ba-duo{grid-template-columns:1fr;max-width:460px;gap:26px}}
/* Comparateur avant/après (identique à how-it-works) */
.ba{position:relative;max-width:460px;margin:0 auto;aspect-ratio:2/3;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--hair);box-shadow:0 24px 60px rgba(0,0,0,.5);
  user-select:none;-webkit-user-select:none;width:100%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba .ba-top{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--or);
  transform:translateX(-1px);pointer-events:none}
.ba .ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;
  border-radius:50%;background:var(--or);color:#17110a;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.05rem;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.ba .ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:none}
.ba .ba-tag{position:absolute;bottom:10px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);background:rgba(10,9,7,.62);color:var(--ivoire);pointer-events:none}
.ba .ba-tag-l{left:10px}.ba .ba-tag-r{right:10px;background:rgba(217,184,119,.9);color:#17110a}
/* Les 3 étapes */
.mg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media(max-width:820px){.mg-steps{grid-template-columns:1fr}}
.mg-step{background:linear-gradient(160deg,var(--surface),var(--noir2));border:1px solid var(--hair-soft);
  border-radius:var(--r-md);padding:22px}
.mg-step b{font-family:var(--serif);font-style:italic;font-size:2rem;line-height:1;
  background:linear-gradient(105deg,var(--or-sombre),var(--or) 45%,var(--or-clair));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:8px}
.mg-step h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin-bottom:6px}
.mg-step p{color:var(--ivoire-2);font-size:.9rem;line-height:1.7;margin:0}
/* Galerie des exemples */
/* ── LES UNIVERS ────────────────────────────────────────────────────────
   Une RANGÉE CENTRÉE à largeur de carte fixe, et non une grille qui étire.
   Avec une grille, un univers d'une seule référence laissait une vignette
   perdue à gauche et un grand vide à droite : la page avait l'air cassée.
   Ici, une carte seule se pose au milieu et a l'air voulue ; quatre cartes
   remplissent la ligne. Dans les deux cas, c'est propre. */
.mg-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:18px}
.mg-grid > *{flex:0 0 168px;max-width:168px}
@media(max-width:560px){.mg-grid{gap:11px}.mg-grid > *{flex:0 0 calc(50% - 6px);max-width:calc(50% - 6px)}}

/* Les univers s'enchaînent serré : c'est une vitrine, pas un sommaire. */
.mg-cat{margin-top:38px}
.mg-cat:first-of-type{margin-top:22px}
.mg-cat-h{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,2.2vw,1.38rem);
  text-align:center;margin:0;color:var(--or-clair);letter-spacing:.01em}
.mg-card{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--hair-soft);
  aspect-ratio:2/3;background:var(--surface);transition:transform .3s,border-color .3s}
.mg-card:hover{transform:translateY(-5px);border-color:var(--or)}
/* Un éclat traverse la vignette au survol : la transformation, suggérée en un
   geste. Discret, une fois, et coupé si la personne préfère moins d'animation. */
.mg-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.42) 48%,
             rgba(242,201,76,.5) 53%,transparent 62%);
  transform:translateX(-130%);transition:transform .75s cubic-bezier(.3,.8,.3,1)}
.mg-card:hover::after,.mg-card:focus-within::after{transform:translateX(130%)}
@media(prefers-reduced-motion:reduce){
  .mg-card,.mg-card::after{transition:none}
  .mg-card:hover{transform:none}
  .mg-card:hover::after{transform:translateX(-130%)}
}
.mg-card img{width:100%;height:100%;object-fit:cover;display:block}
.mg-card .nm{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 9px;font-size:.8rem;z-index:3;
  background:linear-gradient(transparent,rgba(8,7,5,.85));color:var(--ivoire)}
.mg-note{color:var(--ivoire-2);font-size:.85rem;margin-top:14px;text-align:center}
/* Notice « la magie est créative » — même composant que l'accueil et la page
   parent. Un encart doux, jamais un triangle d'avertissement. */
.ainote{display:flex;gap:13px;align-items:flex-start;max-width:64ch;margin:26px auto 0;text-align:left;
  padding:16px 20px;border:1px solid var(--hair-soft);border-radius:14px;
  background:rgba(255,255,255,.025);color:var(--ivoire-2);font-size:.9rem;line-height:1.6}
.ainote .sp{color:var(--or);flex:none;font-size:1.05rem;line-height:1.4}
.mg-cat{scroll-margin-top:96px}