/* Composant « Lore du Serveur » (#/lore) — ultimate-lore.js. Rendu de maquettes-ultimate/v2/lore.html, proposition « Film »
   (dix scènes plein écran, bandeau du chapitre en cours, menu « Scènes »), règle pour règle.
   Tout est sous la classe racine .ulore (la page et le calque fixe .ulore.ulore-calque) ; chaque classe créée par le composant
   commence par « ulore- » (@keyframes et identifiants aussi). Le site garde son en-tête, son pied de page et son fond.
   Classes du site reprises telles quelles : .wrap, .ht, .couronne, .old, .btn (.btn-beige, .btn-out), .hl, .hl-etq (dégradé « Voile »).
   Aucune règle prefers-reduced-motion : les animations restent actives (demande du propriétaire). */

/* ---------- Variables de la maquette (sous la classe racine) ---------- */
.ulore {
  --papier: #efe6d8; --encre: #16130f; --encre-2: #3a3129; --brun: #7a5a33; --rouge: #a3291d;
  --font-sym: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Poppins', sans-serif;
  --g: var(--gut, 16px);
  position: relative;
}
.ulore .ulore-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Photo recadrée : fond « cover », zoom autour du point d'intérêt (--pos), marche quel que soit le format du cadre */
.ulore .ulore-zoom { position: absolute; inset: 0; display: block; background: var(--img) var(--pos, 50% 50%) / cover no-repeat; transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 50%); }

/* Retour vers l'univers Ultimate */
.ulore .ulore-retour { position: absolute; z-index: 6; top: calc(var(--hd) + 16px); left: calc((100% - min(100% - 2 * var(--g), var(--max))) / 2);
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1px solid var(--verre-bord); background: var(--verre); color: rgba(246, 241, 234, .86);
  font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transform: skewX(-8deg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, color .3s, background .3s; }
.ulore .ulore-retour > * { transform: skewX(8deg); }
.ulore .ulore-retour i { font-size: 19px; color: var(--acc); transition: transform .5s var(--ease); }
.ulore .ulore-retour:hover { border-color: rgba(236, 211, 177, .42); color: #fff; background: rgba(14, 13, 12, .8); }
.ulore .ulore-retour:hover i { transform: skewX(8deg) translateX(-4px); }

/* ======================================================================
   « FILM » : dix scènes plein écran
   ====================================================================== */
.ulore .ulore-cam { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.ulore .ulore-cam .ulore-zoom { filter: saturate(.86) contrast(1.06); }
.ulore .ulore-trame { position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: multiply; background-image: radial-gradient(rgba(0, 0, 0, .75) 1px, transparent 1.5px); background-size: 4px 4px; }
/* Ouverture : l'affiche du film */
.ulore .ulore-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate;
  padding: calc(var(--hd) + 90px) 0 clamp(64px, 11vh, 120px); }
.ulore .ulore-hero > .ulore-cam { z-index: -3; }
.ulore .ulore-hero-voile { position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(9, 8, 7, .92) 0%, rgba(9, 8, 7, .66) 34%, rgba(9, 8, 7, .08) 72%), linear-gradient(0deg, rgba(9, 8, 7, .96) 0%, rgba(9, 8, 7, 0) 46%), linear-gradient(180deg, rgba(9, 8, 7, .75), rgba(9, 8, 7, 0) 26%); }
.ulore .ulore-hero > .ulore-trame { z-index: -1; }
.ulore .ulore-bandes { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#050504, #050504) top / 100% 0 no-repeat, linear-gradient(#050504, #050504) bottom / 100% clamp(18px, 4.6vh, 44px) no-repeat; }
.ulore .ulore-hero-in { position: relative; }
.ulore .ulore-titre { margin: 0 0 22px; font-size: clamp(54px, 8.8vw, 150px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.045em; word-spacing: .1em; text-transform: uppercase; text-shadow: 0 10px 50px rgba(0, 0, 0, .45); }
.ulore .ulore-acc { max-width: 720px; margin: 0 0 22px; font-size: clamp(19px, 1.8vw, 26px); font-weight: 600; font-style: italic; line-height: 1.45; }
.ulore .ulore-gen { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.ulore .ulore-gen::before { content: ""; flex: none; width: 40px; height: 2px; background: var(--acc); }
.ulore .ulore-hero-pied { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 26px; }
.ulore .ulore-nb { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 241, 234, .7); }
.ulore .ulore-nb b { font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: var(--acc); }
.ulore .ulore-defil { display: inline-flex; align-items: center; gap: 12px; height: 44px; font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ulore .ulore-defil-l { position: relative; width: 2px; height: 44px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.ulore .ulore-defil-l::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: var(--acc); animation: ulore-goutte 1.8s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes ulore-goutte { from { transform: translateY(-110%); } to { transform: translateY(260%); } }

/* Une scène : fond photo collé pendant tout le chapitre, carton-titre plein écran, puis le contenu par-dessus */
.ulore .ulore-sc { position: relative; }
.ulore .ulore-sc-bg { position: sticky; top: 0; z-index: 0; height: 100vh; margin-bottom: -100vh; overflow: hidden; }
.ulore .ulore-sc-voile { position: absolute; inset: 0; background: #090807; opacity: .4; }
/* La chronologie se joue en « flash-back » : image sépia */
.ulore .ulore-sc.is-flash .ulore-cam .ulore-zoom { filter: grayscale(1) sepia(.45) contrast(1.1) brightness(.92); }
.ulore .ulore-sc-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0a0908 0%, rgba(10, 9, 8, .55) 12%, rgba(10, 9, 8, 0) 32%, rgba(10, 9, 8, 0) 66%, rgba(10, 9, 8, .8) 100%), radial-gradient(120% 90% at 50% 50%, transparent 46%, rgba(0, 0, 0, .6)); }
/* Fondu au noir en fin de chapitre : la photo collée s'assombrit avant la coupe, plus de ligne de raccord entre deux scènes
   (sous le texte et les cartes, qui restent au-dessus) */
.ulore .ulore-sc::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 46vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0), rgba(10, 9, 8, .62) 52%, #0a0908); }
.ulore .ulore-sc-t::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1200px, 120vw); height: 80vh; transform: translate(-50%, -46%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(9, 8, 7, .8), rgba(9, 8, 7, .5) 55%, transparent); }
.ulore .ulore-sc-t { position: relative; z-index: 1; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--hd) + 60px) var(--g) 70px; }
.ulore .ulore-sc-k { display: inline-flex; align-items: center; gap: 14px; margin: 0; font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.ulore .ulore-sc-k::before, .ulore .ulore-sc-k::after { content: ""; width: 38px; height: 1.5px; background: currentColor; opacity: .7; }
/* Grand chiffre romain : Poppins (lisible), contour puis remplissage beige au défilement */
.ulore .ulore-num { position: relative; display: block; margin: 0 0 -.16em; padding: 0 .1em; font-size: clamp(150px, 27vw, 400px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.045em; user-select: none; }
.ulore .ulore-num-o { display: block; color: transparent; -webkit-text-stroke: 2px rgba(236, 211, 177, .6); }
.ulore .ulore-num-f { position: absolute; inset: 0; padding: inherit; display: block; background: linear-gradient(180deg, #f6e6cc 15%, #c49c6b 90%); -webkit-background-clip: text; background-clip: text; color: transparent; clip-path: inset(0 100% 0 0); }
.ulore .ulore-sc-titre { position: relative; margin: 0; max-width: 15ch; font-size: clamp(34px, 5vw, 80px); font-weight: 900; font-style: italic; line-height: 1.02; letter-spacing: -.035em; word-spacing: .08em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 6px 40px rgba(0, 0, 0, .7); }
.ulore .ulore-sc-c { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(80px, 10vw, 140px); padding-bottom: clamp(140px, 22vh, 230px); }

/* Texte : sous-titres de film qui s'allument mot à mot */
.ulore .ulore-p { align-self: flex-start; max-width: 980px; margin: 0; font-size: clamp(22px, 2.3vw, 36px); font-weight: 600; line-height: 1.42; letter-spacing: -.012em; color: #fff; text-wrap: pretty; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.ulore .ulore-p strong { font-weight: 800; color: var(--acc); }
.ulore .ulore-p.is-court { align-self: center; max-width: 1180px; text-align: center; font-size: clamp(36px, 5.4vw, 88px); font-weight: 900; font-style: italic; line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }

/* Factions : quatre affiches de film */
.ulore .ulore-fac { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); width: 100%; padding-top: 16px; }
.ulore .ulore-af { --rot: 0deg; position: relative; padding: 9px; background: var(--papier); rotate: var(--rot); box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .95);
  transition: rotate .8s var(--ease), transform .8s var(--ease), box-shadow .6s; }
.ulore .ulore-af:hover { rotate: 0deg; transform: translateY(-12px); box-shadow: 0 54px 90px -30px #000; z-index: 2; }
.ulore .ulore-af-in { position: relative; display: block; aspect-ratio: 3 / 4.3; overflow: hidden; isolation: isolate; background: #0d0c0b; container-type: inline-size; }
.ulore .ulore-af-in .ulore-zoom { z-index: -2; filter: grayscale(.4) contrast(1.06); transition: filter .7s, scale 1.4s var(--ease); }
.ulore .ulore-af:hover .ulore-af-in .ulore-zoom { filter: none; scale: 1.06; }
.ulore .ulore-af-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 9, 8, .6) 0%, rgba(10, 9, 8, 0) 20%, rgba(10, 9, 8, .18) 38%, rgba(10, 9, 8, .86) 62%, rgba(10, 9, 8, .97) 100%); }
.ulore .ulore-af-haut { position: absolute; left: 14px; right: 12px; top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ulore .ulore-af-studio { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 900; font-style: italic; letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.ulore .ulore-af-studio .couronne { width: 20px; color: var(--couronne); }
.ulore .ulore-af-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--on-acc); color: var(--acc); font-size: 20px; box-shadow: 0 0 0 2px rgba(236, 211, 177, .3); }
.ulore .ulore-af-bas { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(14px, 7cqi, 22px) clamp(16px, 7cqi, 24px); }
.ulore .ulore-af-n { display: block; margin-bottom: 10px; font-size: clamp(19px, 9.4cqi, 31px); font-weight: 900; font-style: italic; line-height: .98; letter-spacing: -.03em; text-transform: uppercase; color: #fff; }
.ulore .ulore-af-d { display: block; font-size: 13.5px; line-height: 1.55; color: rgba(246, 241, 234, .8); }
.ulore .ulore-tape { position: absolute; z-index: 3; width: 110px; height: 30px; background: rgba(236, 211, 177, .75); }
.ulore .ulore-af .ulore-tape { top: -13px; left: 34%; width: 92px; height: 26px; rotate: -4deg; }

/* Grille : une pellicule de film */
.ulore .ulore-film { --n: 4; position: relative; align-self: center; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 1180px; margin: 0; padding: 36px 16px; list-style: none;
  background: #080706; rotate: -1.4deg; box-shadow: 0 30px 60px -30px #000, inset 0 0 0 1px rgba(255, 255, 255, .04); }
.ulore .ulore-film.is-n6 { --n: 6; }
.ulore .ulore-film::before, .ulore .ulore-film::after { content: ""; position: absolute; left: 12px; right: 12px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, #2c2722 0 14px, transparent 14px 26px); }
.ulore .ulore-film::before { top: 13px; }
.ulore .ulore-film::after { bottom: 13px; }
.ulore .ulore-film li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 160px; padding: 20px 12px; border-radius: 3px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(236, 211, 177, .11), transparent 62%), #15120f; font-size: 14.5px; font-weight: 800; font-style: italic; line-height: 1.3; text-transform: uppercase;
  transition: background .4s, transform .6s var(--ease); }
.ulore .ulore-film li:hover { transform: translateY(-5px); background: radial-gradient(120% 90% at 50% 0%, rgba(236, 211, 177, .2), transparent 62%), #1a1612; }
.ulore .ulore-film li i { font-size: 34px; color: var(--acc); }

/* Liste : le générique */
.ulore .ulore-gen-l { align-self: center; width: 100%; max-width: 820px; margin: 0; padding: 0; list-style: none; text-align: center; }
.ulore .ulore-gen-l li { position: relative; padding: 24px 0; font-size: clamp(19px, 1.9vw, 27px); font-weight: 700; font-style: italic; line-height: 1.35; color: #fff; text-wrap: balance; }
.ulore .ulore-gen-l li + li::before { content: ""; position: absolute; top: 0; left: 50%; width: 7px; height: 7px; background: var(--acc); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 6px rgba(9, 8, 7, .6); }
.ulore .ulore-gen-l li + li::after { content: ""; position: absolute; top: 0; left: 50%; width: 180px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(236, 211, 177, .35), transparent); z-index: -1; }
.ulore .ulore-gen-l i { display: block; margin: 0 auto 10px; font-size: 26px; color: var(--acc); }

/* Encadré : carton de film muet */
.ulore .ulore-carton { position: relative; align-self: center; width: 100%; max-width: 980px; padding: 12px; background: #060505; box-shadow: 0 50px 100px -40px #000; }
.ulore .ulore-carton-in { position: relative; padding: clamp(42px, 6vw, 84px) clamp(22px, 6vw, 90px); border: 1.5px solid rgba(236, 211, 177, .62); text-align: center; }
.ulore .ulore-carton-in::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(236, 211, 177, .22); pointer-events: none; }
.ulore .ulore-coin { position: absolute; width: 11px; height: 11px; background: var(--acc); transform: rotate(45deg); }
.ulore .ulore-coin:nth-of-type(1) { left: -6.5px; top: -6.5px; } .ulore .ulore-coin:nth-of-type(2) { right: -6.5px; top: -6.5px; }
.ulore .ulore-coin:nth-of-type(3) { left: -6.5px; bottom: -6.5px; } .ulore .ulore-coin:nth-of-type(4) { right: -6.5px; bottom: -6.5px; }
.ulore .ulore-carton p { margin: 0; font-size: clamp(26px, 3.4vw, 50px); font-weight: 800; font-style: italic; line-height: 1.18; letter-spacing: -.02em; color: #f6f1ea; text-wrap: balance; }
.ulore .ulore-carton p.ulore-carton-s { margin-top: 22px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; font-style: normal; line-height: 1.6; letter-spacing: 0; color: var(--acc); }
.ulore .ulore-carton.is-in .ulore-carton-in { animation: ulore-scintille 1.1s steps(1) both; }
@keyframes ulore-scintille { 0% { opacity: 0; } 12% { opacity: .7; } 20% { opacity: .15; } 30% { opacity: .9; } 38% { opacity: .5; } 46%, 100% { opacity: 1; } }

/* Carte : plan large du lieu, bandeau en bas d'image, sous-titre */
.ulore .ulore-lieu { align-self: center; width: 100%; max-width: 1280px; margin: 0; }
.ulore .ulore-lieu-cadre { position: relative; padding: 10px; background: var(--papier); rotate: -.8deg; box-shadow: 0 50px 90px -40px #000; }
.ulore .ulore-lieu-cadre > .ulore-tape { top: -14px; left: 18%; rotate: -4deg; }
.ulore .ulore-lieu-img .ulore-zoom { filter: saturate(.92) contrast(1.05); }
.ulore .ulore-lieu-img { position: relative; aspect-ratio: 21 / 9; overflow: hidden; isolation: isolate; background: #12100e; }
.ulore .ulore-lieu-img .ulore-zoom { z-index: -2; }
.ulore .ulore-lieu-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(9, 8, 7, .95) 0%, rgba(9, 8, 7, .8) 38%, rgba(9, 8, 7, .06) 72%), linear-gradient(0deg, rgba(9, 8, 7, .6), transparent 40%); }
.ulore .ulore-tiers { position: absolute; z-index: 2; right: clamp(30px, 4vw, 70px); bottom: clamp(32px, 4vw, 66px); width: min(560px, 46%); }
/* Nom du lieu : icône beige, puis le nom en valeur (dégradé) */
.ulore .ulore-tiers-b { display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: clamp(18px, 1.8vw, 26px); font-weight: 900; font-style: italic; line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; }
.ulore .ulore-tiers-b i { flex: none; font-size: 26px; color: var(--acc); }
.ulore .ulore-tiers-b .hl { --hd-delay: .45s; }
/* Traitement « Voile » sur la photo presque noire du lieu : un voile plus clair, sinon seule la barre se voyait */
.ulore .ulore-tiers-b .hl { --dg-voile-rgb: 92 82 70; }
.ulore .ulore-tiers-t { margin: 18px 0 0; font-size: 16.5px; line-height: 1.75; color: rgba(246, 241, 234, .9); }
.ulore .ulore-tiers-t strong { font-weight: 700; color: var(--acc); }
.ulore .ulore-sst { max-width: 900px; margin: 30px auto 0; text-align: center; font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; font-style: italic; line-height: 1.45; color: #fff; text-shadow: 0 2px 14px #000; text-wrap: balance; }
.ulore .ulore-sst-l { display: block; width: 46px; height: 2px; margin: 0 auto 14px; background: var(--acc); }

/* Chiffres : le box-office */
.ulore .ulore-bo { align-self: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 1180px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.ulore .ulore-bo-c { min-width: 0; padding: 36px 20px 32px; text-align: center; }
.ulore .ulore-bo-c + .ulore-bo-c { border-left: 1px solid var(--line); }
.ulore .ulore-bo b { display: inline-block; padding: 0 .08em; font-size: clamp(62px, 8vw, 128px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #f8ead2 10%, #c49c6b 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ulore .ulore-bo span { display: block; margin-top: 12px; font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; color: rgba(246, 241, 234, .76); }

/* Citation : réplique plein cadre */
.ulore .ulore-cit { align-self: center; width: 100%; max-width: 1120px; margin: 0; text-align: center; }
.ulore .ulore-cit-l { display: block; width: 130px; height: 2px; margin: 0 auto; background: var(--acc); transform: scaleX(0); transition: transform 1.3s var(--ease) .2s; }
.ulore .ulore-cit.is-in .ulore-cit-l { transform: none; }
.ulore .ulore-cit p { margin: 36px 0; font-size: clamp(28px, 3.7vw, 58px); font-weight: 800; font-style: italic; line-height: 1.16; letter-spacing: -.025em; color: #fff; text-wrap: balance; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.ulore .ulore-cit.is-fin p { margin: 0; }
.ulore .ulore-cit.is-fin p + p { margin-top: 16px; }
.ulore .ulore-cit.is-fin p:last-of-type { color: var(--acc); }
.ulore .ulore-cit.is-fin .ulore-cit-l:last-child { margin-top: 40px; }
.ulore .ulore-cit .couronne { display: block; width: 66px; margin: 0 auto 34px; color: var(--acc); }

/* Repères : écran partagé Origine → Évolution */
.ulore .ulore-rep { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); width: 100%; max-width: 1180px; border: 1px solid var(--verre-bord);
  background: rgba(12, 11, 10, .58); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 40px 80px -40px #000; }
.ulore .ulore-rep-c { min-width: 0; padding: clamp(28px, 4vw, 58px); }
.ulore .ulore-rep-c > i { font-size: 30px; color: var(--acc); }
.ulore .ulore-rep-c h3 { margin: 16px 0 16px; font-size: clamp(40px, 4.6vw, 72px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--acc); }
.ulore .ulore-rep-c p { margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: rgba(246, 241, 234, .9); }
.ulore .ulore-rep-sep { position: relative; background: var(--line-2); }
.ulore .ulore-rep-sep i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--beige); color: var(--on-acc); font-size: 26px; transform: translate(-50%, -50%); box-shadow: 0 0 0 8px rgba(12, 11, 10, .9); }

/* Issues : cartes de scènes */
.ulore .ulore-iss { align-self: center; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 1320px; }
.ulore .ulore-iss.is-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; }
.ulore .ulore-iss-c { position: relative; min-width: 0; padding: 26px 24px 28px; border: 1px solid var(--verre-bord); border-top: 3px solid var(--acc); background: rgba(14, 13, 12, .7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .6s var(--ease), background .4s; }
.ulore .ulore-iss-c:hover { transform: translateY(-8px); background: rgba(20, 19, 17, .86); }
.ulore .ulore-iss-n { position: absolute; right: 18px; top: 12px; font-size: 52px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(236, 211, 177, .35); }
.ulore .ulore-iss-ico { width: 50px; height: 50px; display: grid; place-items: center; background: var(--beige); color: var(--on-acc); font-size: 24px; transform: skewX(-8deg); }
.ulore .ulore-iss-ico i { transform: skewX(8deg); }
.ulore .ulore-iss-c h3 { margin: 26px 0 10px; font-size: 21px; font-weight: 900; font-style: italic; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; }
.ulore .ulore-iss-c p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(246, 241, 234, .8); }

/* Personnages : deux affiches de casting */
.ulore .ulore-perso { align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3vw, 50px); width: 100%; max-width: 1180px; padding-top: 14px; }
.ulore .ulore-pp { --rot: 0deg; position: relative; padding: 10px; background: var(--papier); rotate: var(--rot); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .95); transition: rotate .8s var(--ease), transform .8s var(--ease); }
.ulore .ulore-pp:hover { rotate: 0deg; transform: translateY(-10px); }
.ulore .ulore-pp-in { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(580px, 46vw, 700px); padding: clamp(22px, 3vw, 40px); overflow: hidden; isolation: isolate; background: #0d0c0b; }
.ulore .ulore-pp-in .ulore-zoom { z-index: -2; filter: grayscale(.5) contrast(1.05) brightness(.9); }
.ulore .ulore-pp-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 9, 8, .55) 0%, rgba(10, 9, 8, .25) 30%, rgba(10, 9, 8, .9) 58%, rgba(10, 9, 8, .98) 100%); }
.ulore .ulore-pp-sym { position: absolute; top: clamp(26px, 4vw, 54px); left: 50%; width: 124px; height: 124px; display: grid; place-items: center; border-radius: 50%; transform: translateX(-50%);
  font-family: var(--font-sym); font-size: 66px; line-height: 1; color: var(--acc); background: rgba(13, 12, 11, .72); border: 1.5px solid rgba(236, 211, 177, .55);
  box-shadow: 0 0 0 10px rgba(236, 211, 177, .07), 0 20px 50px -10px #000; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ulore .ulore-pp-n { margin: 0; font-size: clamp(30px, 3.2vw, 48px); font-weight: 900; font-style: italic; line-height: .98; letter-spacing: -.035em; text-transform: uppercase; }
/* Rôle du personnage : étiquette en dégradé (passe à la ligne si la place manque) */
.ulore .ulore-pp-r { align-self: flex-start; max-width: 100%; margin: 14px 0 18px; }
.ulore .ulore-pp-r .hl-etq { white-space: normal; font-size: 12px; letter-spacing: .05em; --hd-delay: .35s; }
.ulore .ulore-pp-t { margin: 0; font-size: 15.5px; line-height: 1.72; color: rgba(246, 241, 234, .86); }
.ulore .ulore-pp-t strong { font-weight: 700; color: var(--acc); }
.ulore .ulore-pp .ulore-tape { top: -13px; left: calc(50% - 48px); width: 96px; height: 26px; rotate: 3deg; }

/* Chronologie : frise horizontale épinglée qui défile au scroll */
.ulore .ulore-chr { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.ulore .ulore-chr-pin { position: relative; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.ulore .ulore-chr-piste { --an: clamp(84px, 8.4vw, 132px); position: relative; display: flex; padding: 0 var(--g); will-change: transform; }
.ulore .ulore-chr-ligne { position: absolute; left: var(--g); right: 0; top: calc(var(--an) + 22px); height: 2px; background: rgba(236, 211, 177, .16); }
.ulore .ulore-chr-fil { position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(0); }
.ulore .ulore-chr-i { position: relative; flex: none; width: clamp(310px, 29vw, 440px); padding-right: 56px; }
.ulore .ulore-chr-an { display: block; height: var(--an); font-size: var(--an); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px rgba(236, 211, 177, .7); transition: color .6s, -webkit-text-stroke-color .6s; }
.ulore .ulore-chr-pt { position: relative; z-index: 1; display: block; width: 18px; height: 18px; margin: 13px 0 26px; border-radius: 50%; background: var(--bg); border: 2px solid var(--acc); transition: background .4s, box-shadow .4s; }
.ulore .ulore-chr-i h3 { margin: 0 0 10px; font-size: 22px; font-weight: 900; font-style: italic; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; }
.ulore .ulore-chr-i p { max-width: 330px; margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(246, 241, 234, .82); }
.ulore .ulore-chr-i.is-on .ulore-chr-an { color: var(--acc); -webkit-text-stroke-color: transparent; }
.ulore .ulore-chr-i.is-on .ulore-chr-pt { background: var(--acc); box-shadow: 0 0 0 6px rgba(236, 211, 177, .16); }
.ulore .ulore-chr-i.is-inconnu .ulore-chr-pt { --st: 236, 211, 177; background: var(--acc); animation: pulse 2s infinite; }
.ulore .ulore-chr-i.is-inconnu h3 { color: var(--acc); }
.ulore .ulore-chr-i.is-inconnu::after { content: ""; position: absolute; left: 22px; top: calc(var(--an) + 22px); width: 300px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--acc) 0 8px, transparent 8px 16px); -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }

/* Fin du film */
.ulore .ulore-fin { position: relative; z-index: 1; padding: clamp(110px, 15vw, 190px) 0 clamp(120px, 15vw, 180px); text-align: center; background: linear-gradient(180deg, rgba(9, 8, 7, 0), rgba(9, 8, 7, .92) 40%); }
.ulore .ulore-fin .couronne { width: 86px; color: var(--acc); }
.ulore .ulore-fin-k { margin: 18px 0 0; font-size: 34px; line-height: 1.3; color: var(--acc); }
.ulore .ulore-fin-t { margin: 8px 0 34px; font-size: clamp(40px, 6vw, 96px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.ulore .ulore-fin-b { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }

/* Étiquette du titre (au-dessus du grand titre) : icône beige et étiquette en dégradé */
.ulore .ulore-etq { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.ulore .ulore-etq > i { flex: none; font-size: 20px; color: var(--acc); }
.ulore .ulore-etq .hl-etq { font-size: 12.5px; --hd-delay: .2s; }

/* ======================================================================
   Calque fixe (hors de .flux, [data-u-calque]) : bandeau du chapitre en cours (sous l'en-tête du site, z 40)
   et menu « Scènes » (fenêtre <dialog> modale : au-dessus de tout, comme le z 58 de la maquette)
   ====================================================================== */
.ulore.ulore-calque { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
/* Bandeau de lecture (chapitre en cours) */
.ulore .ulore-hud { position: fixed; z-index: 40; top: calc(var(--hd) + 12px); left: 50%; display: flex; align-items: center; gap: 14px; width: min(100% - 2 * var(--g), 780px); padding: 7px;
  border: 1px solid var(--verre-bord); border-radius: 3px; background: rgba(13, 12, 11, .76); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .95);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0; pointer-events: none; transform: translate(-50%, -14px); transition: opacity .45s, transform .6s var(--ease), top .7s var(--ease); }
.ulore .ulore-hud.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body.hd-cache .ulore .ulore-hud { top: 12px; }
/* Voile sombre du haut de l'écran : le texte qui défile ne passe jamais lisible derrière le bandeau */
.ulore .ulore-hud::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -220px; width: 100vw; height: calc(100% + 290px); transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 8, 7, .985) 0, rgba(9, 8, 7, .97) calc(100% - 74px), rgba(9, 8, 7, 0) 100%); }
/* Numéro du chapitre : fine barre beige et voile qui s'efface (même traitement que le bandeau du Serveur) */
.ulore .ulore-hud-n { flex: none; display: grid; place-items: center; min-width: 56px; height: 42px; padding: 0 10px; overflow: hidden; border-left: 3px solid var(--acc);
  background: linear-gradient(90deg, rgba(236, 211, 177, .3), rgba(236, 211, 177, .04)); color: #fff; font-size: 17px; font-weight: 900; font-style: italic; }
.ulore .ulore-hud-n > span { display: block; }
.ulore .ulore-hud-t { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; line-height: 1.2; }
.ulore .ulore-hud-t small { font-size: 10.5px; font-weight: 800; font-style: italic; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); white-space: nowrap; }
.ulore .ulore-hud-t b { display: block; font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; }
.ulore .ulore-hud-seg { flex: none; display: flex; gap: 3px; }
.ulore .ulore-hud-seg span { position: relative; width: 20px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.ulore .ulore-hud-seg span::after { content: ""; position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(var(--f, 0)); }
.ulore .ulore-hud-b { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border: 1.5px solid var(--line-2); border-radius: 3px; background: rgba(13, 12, 11, .45);
  font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .03em; text-transform: uppercase; transition: border-color .3s, background .3s; }
.ulore .ulore-hud-b i { font-size: 19px; color: var(--acc); }
.ulore .ulore-hud-b:hover { border-color: rgba(236, 211, 177, .45); background: rgba(13, 12, 11, .8); }
.ulore .ulore-hud-p { position: absolute; left: 7px; right: 7px; bottom: 2px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .08); display: none; }
.ulore .ulore-hud-p::after { content: ""; position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(var(--gp, 0)); }
/* Menu des scènes (façon menu de DVD) : <dialog> plein écran, styles du navigateur remplacés */
.ulore .ulore-menu { position: fixed; inset: 0; z-index: 58; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; pointer-events: auto;
  display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; padding: 30px var(--g);
  background: rgba(6, 6, 5, .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ulore .ulore-menu:not([open]) { display: none; }
.ulore .ulore-menu::backdrop { background: transparent; }
.ulore .ulore-menu-in { width: min(100%, 1240px); }
.ulore .ulore-menu-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ulore .ulore-menu-h p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.ulore .ulore-menu-h p i { font-size: 20px; }
.ulore .ulore-menu-x { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--line-2); border-radius: 3px; font-size: 24px; transition: border-color .3s, background .3s; }
.ulore .ulore-menu-x:hover { border-color: var(--acc); background: rgba(255, 255, 255, .05); }
.ulore .ulore-menu-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ulore .ulore-vign { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 11; padding: 12px 14px; overflow: hidden; isolation: isolate; text-align: left;
  border: 1px solid var(--verre-bord); border-radius: 3px; transition: transform .5s var(--ease), border-color .3s; }
.ulore .ulore-vign .ulore-zoom { z-index: -2; filter: grayscale(.45); transition: filter .5s, scale 1s var(--ease); }
.ulore .ulore-vign-v { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 8, 7, .2), rgba(9, 8, 7, .92) 78%); }
.ulore .ulore-vign-n { font-size: 34px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px var(--acc); }
.ulore .ulore-vign-t { margin-top: 6px; font-size: 13px; font-weight: 800; font-style: italic; line-height: 1.2; text-transform: uppercase; }
.ulore .ulore-vign:hover { transform: translateY(-4px); border-color: rgba(236, 211, 177, .5); }
.ulore .ulore-vign:hover .ulore-zoom { filter: none; scale: 1.06; }
.ulore .ulore-vign.is-cur { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.ulore .ulore-vign.is-cur .ulore-vign-n { color: var(--acc); -webkit-text-stroke-color: transparent; }

/* ---------- Adaptation écrans (mêmes paliers que la maquette) ---------- */
@media (max-width: 1220px) {
  .ulore .ulore-iss { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
  .ulore .ulore-iss.is-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ulore .ulore-fac { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; align-self: center; }
  .ulore .ulore-film.is-n6 { --n: 3; }
  .ulore .ulore-menu-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ulore .ulore-hud-seg { display: none; }
  .ulore .ulore-hud-p { display: block; }
  .ulore .ulore-perso { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .ulore .ulore-menu-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Frise : verticale sur les petits écrans (pas d'épinglage) */
@media (max-width: 899px) {
  .ulore .ulore-chr { width: auto; margin-left: 0; }
  .ulore .ulore-chr-pin { height: auto; display: block; overflow: visible; }
  .ulore .ulore-chr-piste { --an: 58px; flex-direction: column; padding: 0 0 0 34px; }
  .ulore .ulore-chr-ligne { left: 8px; right: auto; top: 10px; bottom: 30px; width: 2px; height: auto; }
  .ulore .ulore-chr-fil { transform-origin: top; transform: scaleY(var(--fv, 0)); }
  .ulore .ulore-chr-i { width: auto; padding: 0 0 34px; }
  .ulore .ulore-chr-an { height: auto; font-size: var(--an); }
  .ulore .ulore-chr-pt { position: absolute; left: -34px; top: 18px; margin: 0; width: 16px; height: 16px; }
  .ulore .ulore-chr-i h3 { margin-top: 10px; }
  .ulore .ulore-chr-i.is-inconnu::after { left: -27px; top: 40px; width: 2px; height: 56px; background: repeating-linear-gradient(180deg, var(--acc) 0 5px, transparent 5px 11px); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
}
@media (max-width: 700px) {
  .ulore .ulore-retour { font-size: 11px; }
  .ulore .ulore-hero { padding-bottom: 96px; }
  /* Téléphone : le titre passe sur la robe claire de la photo ; le voile du bas monte jusqu'au titre (les visages restent nets) */
  .ulore .ulore-hero-voile { background: linear-gradient(90deg, rgba(9, 8, 7, .8) 0%, rgba(9, 8, 7, .42) 60%, rgba(9, 8, 7, .2) 100%), linear-gradient(0deg, rgba(9, 8, 7, .96) 0%, rgba(9, 8, 7, .74) 38%, rgba(9, 8, 7, .3) 56%, rgba(9, 8, 7, 0) 70%), linear-gradient(180deg, rgba(9, 8, 7, .75), rgba(9, 8, 7, 0) 26%); }
  .ulore .ulore-titre { font-size: clamp(46px, 13.4vw, 72px); }
  .ulore .ulore-acc { font-size: 18px; }
  .ulore .ulore-gen { font-size: 11px; letter-spacing: .1em; gap: 10px; }
  .ulore .ulore-gen::before { width: 24px; }
  .ulore .ulore-hero-pied { position: static; justify-content: space-between; margin-top: 30px; }
  .ulore .ulore-sc-t { padding-top: calc(var(--hd) + 80px); }
  .ulore .ulore-sc-bg .ulore-zoom { background-position: var(--pm, var(--pos)); transform-origin: var(--pm, var(--pos)); transform: scale(var(--zm, var(--z))); }
  .ulore .ulore-sc-k { font-size: 11.5px; gap: 10px; }
  .ulore .ulore-sc-k::before, .ulore .ulore-sc-k::after { width: 22px; }
  .ulore .ulore-num { font-size: clamp(120px, 40vw, 190px); -webkit-text-stroke-width: 1.5px; }
  .ulore .ulore-sc-titre { font-size: clamp(32px, 9.6vw, 44px); }
  .ulore .ulore-sc-c { gap: 76px; }
  .ulore .ulore-p { font-size: 21px; }
  .ulore .ulore-p.is-court { font-size: clamp(32px, 9.4vw, 44px); }
  .ulore .ulore-fac { grid-template-columns: minmax(0, 1fr); padding-inline: 4px; gap: 30px; }
  .ulore .ulore-af { rotate: calc(var(--rot) * .5); }
  .ulore .ulore-af-in { aspect-ratio: 4 / 3.7; }
  .ulore .ulore-af-n { font-size: 26px; }
  .ulore .ulore-film, .ulore .ulore-film.is-n6 { --n: 2; padding: 34px 12px; rotate: -1deg; }
  .ulore .ulore-film li { min-height: 120px; font-size: 13px; padding: 16px 8px; }
  .ulore .ulore-film li i { font-size: 28px; }
  .ulore .ulore-gen-l li { font-size: 19px; padding: 20px 0; }
  .ulore .ulore-carton { padding: 8px; }
  .ulore .ulore-carton p { font-size: 25px; }
  .ulore .ulore-lieu-img { aspect-ratio: 4 / 3; }
  .ulore .ulore-lieu-voile { background: linear-gradient(0deg, rgba(9, 8, 7, .9), rgba(9, 8, 7, 0) 60%); }
  .ulore .ulore-lieu-cadre { padding: 8px 8px 22px; rotate: -.6deg; }
  .ulore .ulore-tiers { position: relative; right: auto; bottom: auto; width: auto; margin-top: -40px; padding: 0 10px; }
  .ulore .ulore-tiers-t { color: rgba(22, 19, 15, .84); }
  .ulore .ulore-tiers-t strong { color: var(--encre); }
  .ulore .ulore-tiers-b { font-size: 18px; }
  .ulore .ulore-tiers-t { font-size: 15.5px; }
  .ulore .ulore-bo { grid-template-columns: minmax(0, 1fr); }
  .ulore .ulore-bo-c { display: flex; align-items: baseline; gap: 16px; padding: 18px 4px; text-align: left; }
  .ulore .ulore-bo-c + .ulore-bo-c { border-left: 0; border-top: 1px solid var(--line); }
  .ulore .ulore-bo b { flex: none; min-width: 128px; font-size: 54px; }
  .ulore .ulore-bo span { margin: 0; font-size: 12px; }
  .ulore .ulore-cit p { font-size: 27px; margin: 28px 0; }
  .ulore .ulore-rep { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1px auto; }
  .ulore .ulore-rep-sep { height: 1px; }
  .ulore .ulore-rep-sep i { width: 46px; height: 46px; font-size: 22px; transform: translate(-50%, -50%) rotate(90deg); }
  .ulore .ulore-rep-c { padding: 28px 22px; }
  .ulore .ulore-rep-c h3 { font-size: 46px; }
  .ulore .ulore-iss, .ulore .ulore-iss.is-n3 { grid-template-columns: minmax(0, 1fr); }
  .ulore .ulore-perso { padding-inline: 4px; gap: 34px; }
  .ulore .ulore-pp { rotate: calc(var(--rot) * .5); }
  .ulore .ulore-pp-in { min-height: 0; padding: 170px 22px 26px; }
  .ulore .ulore-pp-sym { top: 28px; width: 104px; height: 104px; font-size: 54px; }
  .ulore .ulore-pp-n { font-size: 30px; }
  .ulore .ulore-pp-t { font-size: 15px; }
  .ulore .ulore-fin-t { font-size: 40px; }
  .ulore .ulore-fin-b .btn { width: 100%; }
  .ulore .ulore-hud { gap: 10px; padding: 6px; }
  .ulore .ulore-hud-n { min-width: 46px; height: 40px; font-size: 15px; }
  .ulore .ulore-hud-t small { font-size: 9.5px; }
  .ulore .ulore-hud-t b { font-size: 12.5px; }
  .ulore .ulore-hud-b { width: 42px; padding: 0; justify-content: center; }
  .ulore .ulore-hud-b span { display: none; }
  .ulore .ulore-menu { place-items: start center; padding: 20px var(--g) 30px; }
  .ulore .ulore-menu-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ulore .ulore-vign { aspect-ratio: 16 / 12; padding: 10px; }
  .ulore .ulore-vign-n { font-size: 28px; }
  .ulore .ulore-vign-t { font-size: 11.5px; }
}