/* Composant « L'univers Ultimate » (#/ultimate) — ultimate-accueil.js.
   Le mur d'affiches de la catégorie Ultimate, fidèle à la maquette validée maquettes-ultimate/v2/index.html :
   six affiches, le Lore en vedette au centre, « Le Business » (vert) et « Le Milieu » (rouge) de part et d'autre avec
   l'emplacement de leur logo, Le serveur et Actualités en dessous, le Lexique en bandeau avec son petit tableau où les
   pancartes du lexique se relaient.
   Règle (CONTRAT.md) : tout est sous la classe racine .uacc, chaque classe créée par le composant commence par « uacc- »
   (@keyframes aussi). Classes du site réutilisées telles quelles : .ph, .ph-grid, .ph-photo, .cadre, .ph-img, .ht, .tape,
   .kicker, .old, .ph-title, .ph-desc, .wrap, .bloc, .couronne, .hl, .hl-etq, .dg-vert, .dg-rouge, .dg-papier.
   Le site garde son en-tête, son pied de page et son fond. Aucune règle prefers-reduced-motion (animations voulues partout). */

/* ---------- Racine : palette des maquettes (papier, encre, brun, rouge, vert) ---------- */
.uacc {
  --papier: #efe6d8; --encre: #16130f; --brun: #7a5a33;
  --rouge: #8c241c; --rouge-clair: #e0705f;
  --vert: #1d5e43; --vert-clair: #7fc3a0;
}
/* En-tête de la page : mêmes réglages que la maquette (petit mot « Los Santos » un peu plus grand, ruban au-dessus du cadre) */
.uacc .kicker .old { font-size: 30px; line-height: 1; }
.uacc .tape { z-index: 3; }

/* ======================================================================
   LE MUR D'AFFICHES : six affiches, le Lore en vedette au centre,
   le légal (Le Business) et l'illégal (Le Milieu) de part et d'autre, le Lexique en bandeau
   ====================================================================== */
.uacc .uacc-mur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr) minmax(0, 1fr);
  grid-template-areas: "entreprises lore illegal" "serveur lore actualites" "lexique lexique lexique";
  gap: clamp(44px, 4vw, 64px) clamp(26px, 2.8vw, 44px); padding: 18px 0 0; }
.uacc .uacc-cel { display: flex; min-width: 0; }
.uacc .uacc-cel-lore { grid-area: lore; }
.uacc .uacc-cel-serveur { grid-area: serveur; }
.uacc .uacc-cel-actualites { grid-area: actualites; }
.uacc .uacc-cel-lexique { grid-area: lexique; }
.uacc .uacc-cel-entreprises { grid-area: entreprises; }
.uacc .uacc-cel-illegal { grid-area: illegal; }
/* Décalages verticaux légers : un vrai mur, pas une grille */
.uacc .uacc-cel-lore .uacc-af { translate: 0 -14px; }
.uacc .uacc-cel-illegal .uacc-af { translate: 0 24px; }
.uacc .uacc-cel-actualites .uacc-af { translate: 0 16px; }
.uacc .uacc-cel-serveur .uacc-af { translate: 0 6px; }

.uacc .uacc-af { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 22px; background: var(--papier); color: var(--on-acc);
  rotate: var(--rot, 0deg); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); transition: transform .7s var(--ease), box-shadow .5s; }
.uacc .uacc-af:hover { transform: translateY(-12px) rotate(calc(-1 * var(--rot, 0deg))); box-shadow: 0 46px 74px -26px #000; z-index: 2; }
.uacc .uacc-af .tape { top: -14px; left: calc(50% - 55px); rotate: -4deg; }
.uacc .uacc-img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3.2; background: #2a2622; }
.uacc .uacc-img.ht::after { z-index: 1; }
.uacc .uacc-photo { position: absolute; inset: 0; background: var(--img) var(--pos) / var(--size) no-repeat; filter: grayscale(.35) contrast(1.08); transition: filter .6s, transform 1.2s var(--ease); }
.uacc .uacc-af:hover .uacc-photo { filter: none; transform: scale(1.05); }
.uacc .uacc-ico { position: absolute; right: 12px; top: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; font-size: 21px; color: var(--acc); background: var(--on-acc); border-radius: 50%; }
/* Étiquette de l'affiche : traitement « Voile » des étiquettes (.hl-etq du site), posée en bas à gauche de la photo.
   .uacc-lbl.hl-etq l'emporte sur la position du porteur ; lettrage de l'étiquette de la maquette (sans interlettrage). */
.uacc .uacc-lbl.hl-etq { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 900; font-style: italic; letter-spacing: normal; line-height: inherit; text-transform: uppercase; white-space: normal; }
.uacc .uacc-corps { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0 8px; }
.uacc .uacc-t { margin: 18px 0 8px; font-size: clamp(26px, 2.3vw, 34px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.uacc .uacc-m { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 11.5px; font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(13, 12, 11, .55); }
.uacc .uacc-m i { flex: none; font-size: 16px; font-style: normal; color: #5865f2; }
.uacc .uacc-d { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: rgba(13, 12, 11, .72); }
.uacc .uacc-b { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; font-size: 13px; font-weight: 800; font-style: italic; text-transform: uppercase;
  background: var(--on-acc); color: var(--acc); transform: skewX(-8deg); transition: gap .4s var(--ease); }
.uacc .uacc-b > * { transform: skewX(8deg); }
.uacc .uacc-af:hover .uacc-b { gap: 14px; }

/* Vedette : le Lore, grande affiche au centre sur toute la hauteur */
.uacc .uacc-vedette { padding: 12px 12px 26px; }
.uacc .uacc-vedette .uacc-img { aspect-ratio: auto; flex: 1; min-height: 340px; }
.uacc .uacc-vedette .uacc-photo { background-size: cover; background-position: 57% 46%; }
.uacc .uacc-vedette .uacc-corps { flex: none; }
.uacc .uacc-vedette .uacc-t { margin-top: 22px; font-size: clamp(40px, 3.9vw, 62px); line-height: .96; }
.uacc .uacc-vedette .uacc-d { max-width: 470px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; font-style: italic; line-height: 1.5; color: rgba(13, 12, 11, .84); }
.uacc .uacc-vedette .uacc-m { margin-top: 2px; }
.uacc .uacc-vedette .tape { top: 16px; left: -22px; rotate: -38deg; width: 120px; }
.uacc .uacc-vedette .tape + .tape { left: auto; right: -22px; top: 16px; rotate: 38deg; }
.uacc .uacc-vedette .uacc-lbl { font-size: 13px; }
.uacc .uacc-vedette .uacc-ico { top: auto; bottom: 12px; }
.uacc .uacc-sticker { position: absolute; z-index: 3; right: -16px; bottom: -18px; width: 104px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc) url(assets/logo-fond.webp) center / cover; border: 3px solid var(--papier); rotate: -12deg;
  box-shadow: 5px 5px 0 rgba(13, 12, 11, .45), 0 18px 34px -14px rgba(0, 0, 0, .8); transition: rotate .8s cubic-bezier(.34, 1.56, .64, 1); }
.uacc .uacc-af:hover .uacc-sticker { rotate: 6deg; }

/* Rubans propres à chaque affiche */
.uacc .uacc-cel-entreprises .tape { left: 18%; rotate: -7deg; }
.uacc .uacc-cel-illegal .tape { left: auto; right: 16%; rotate: 6deg; }
.uacc .uacc-cel-serveur .tape { left: calc(50% - 40px); rotate: 3deg; }
.uacc .uacc-cel-actualites .tape { left: 26%; rotate: -3deg; }

/* Le Milieu (illégal) : un léger accent rouge sombre (photo teintée, icône) */
.uacc .uacc-illegal .uacc-img::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(205deg, rgba(140, 36, 28, .08) 25%, rgba(120, 22, 16, .62)); transition: opacity .6s; }
.uacc .uacc-illegal:hover .uacc-img::before { opacity: .3; }
.uacc .uacc-illegal .uacc-ico { color: var(--rouge-clair); }
/* Le Business (légal) : même principe en vert profond (légal = vert, illégal = rouge, le reste = beige) */
.uacc .uacc-legal .uacc-img::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(205deg, rgba(34, 107, 76, .06) 25%, rgba(20, 78, 54, .5)); transition: opacity .6s; }
.uacc .uacc-legal:hover .uacc-img::before { opacity: .3; }

/* Affiches Le Business / Le Milieu : leur nom (ctx.noms), mot en valeur en dégradé « Voile » posé sur le papier */
.uacc .uacc-t.dg-papier { position: relative; }
.uacc .uacc-t .hl { --hd-delay: .25s; }
/* Le Milieu sur papier : voile et barre rouges ; lettres claires sur le rouge, sombres là où il s'efface (lisibles tout du long) */
.uacc .uacc-illegal .uacc-t { --dg-voile-rgb: 140 36 28; --dg-barre: linear-gradient(180deg, #c8442f, #8c241c); --dg-encre: #fbf3e8; --dg-douceur: 2%; }
/* Le Business sur papier : voile et barre verts ; lettres claires sur le vert, sombres là où il s'efface (lisibles tout du long) */
.uacc .uacc-legal .uacc-t { --dg-voile-rgb: 24 82 58; --dg-barre: linear-gradient(180deg, #3f9a6f, #1d5e43); --dg-encre: #f3faf5; --dg-douceur: 2%; }
/* Emplacement du logo : médaillon en haut à droite de la photo.
   LOGOS (dans le script) vide = l'icône dans un rond pointillé ; chemin d'image = le logo, recadré dans le rond. */
.uacc .uacc-logo { position: absolute; right: 12px; top: 12px; z-index: 2; width: 76px; height: 76px; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #2c251e, #100e0c 74%); color: var(--acc); font-size: 30px;
  box-shadow: 0 0 0 3px var(--papier), 0 0 0 4px rgba(13, 12, 11, .22), 0 18px 30px -12px rgba(0, 0, 0, .85);
  transition: transform .9s cubic-bezier(.34, 1.56, .64, 1); }
.uacc .uacc-logo::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(236, 211, 177, .34); pointer-events: none; }
.uacc .uacc-logo i { position: relative; z-index: 1; }
.uacc .uacc-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uacc .uacc-logo.is-img { background: var(--papier); }
.uacc .uacc-logo.is-img::after { display: none; }
.uacc .uacc-af:hover .uacc-logo { transform: rotate(-10deg) scale(1.05); }
.uacc .uacc-illegal .uacc-logo { color: var(--rouge-clair); }
.uacc .uacc-illegal .uacc-logo::after { border-color: rgba(224, 112, 95, .4); }
.uacc .uacc-legal .uacc-logo { color: var(--vert-clair); background: radial-gradient(circle at 50% 32%, #1f3a2d, #0d1611 74%); }
.uacc .uacc-legal .uacc-logo::after { border-color: rgba(127, 195, 160, .4); }

/* Lexique : bandeau en largeur — photo, texte, et un petit tableau où les pancartes du lexique se relaient
   (mêmes pancartes punaisées que la page du lexique : « Terme N », icône ronde, terme, définition mot pour mot) */
.uacc .uacc-large { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) minmax(0, .98fr); grid-template-areas: "img corps tab"; align-items: stretch; padding: 10px; }
.uacc .uacc-large .uacc-img { grid-area: img; aspect-ratio: auto; min-height: 270px; }
.uacc .uacc-large .uacc-corps { grid-area: corps; padding: 8px 18px 10px 30px; }
.uacc .uacc-large .uacc-t { margin-top: 16px; }
.uacc .uacc-large .tape { left: 20%; rotate: -5deg; }
.uacc .uacc-large .tape + .tape { left: auto; right: 14%; rotate: 4deg; }

/* Le tableau : un panneau sombre encastré dans l'affiche, filet pointillé, trame */
.uacc .uacc-tab { grid-area: tab; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; margin-left: 6px; overflow: hidden;
  padding: 30px clamp(18px, 1.8vw, 30px) 16px; color: var(--text);
  background: radial-gradient(120% 85% at 22% 0%, #2b241d, #17130f 62%, #110e0c); box-shadow: inset 0 0 0 1px rgba(13, 12, 11, .4), inset 0 22px 44px -26px #000; }
.uacc .uacc-tab::before { content: ""; position: absolute; inset: 8px; z-index: -1; border: 1.5px dashed rgba(236, 211, 177, .16); pointer-events: none; }
.uacc .uacc-tab::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(0, 0, 0, .6) 1px, transparent 1.5px); background-size: 4px 4px; }
/* La pile : toutes les pancartes dans la même case (la plus haute donne la hauteur : rien ne saute quand elles changent),
   deux feuilles derrière pour l'épaisseur */
.uacc .uacc-pile { position: relative; display: grid; width: min(100%, 330px); margin-inline: auto; }
.uacc .uacc-pile::before, .uacc .uacc-pile::after { content: ""; position: absolute; inset: 6px 0 -4px 8px; background: #d9ccb6; rotate: 3.6deg; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .9); }
.uacc .uacc-pile::after { inset: 4px 8px -2px 0; background: #e5dac7; rotate: -2.8deg; }
.uacc .uacc-pk { grid-area: 1 / 1; position: relative; z-index: 1; display: block; min-width: 0; color: var(--encre); rotate: var(--rot, 0deg); transform-origin: 50% -8px;
  visibility: hidden; opacity: 0; transition: rotate .9s cubic-bezier(.3, 1.6, .45, 1); }
.uacc .uacc-pk.is-on { visibility: visible; opacity: 1; z-index: 2; }
/* Au survol de l'affiche (le temps de lire, la minuterie s'arrête) : la pancarte se redresse, comme sur la page du lexique */
.uacc .uacc-large:hover .uacc-pk { rotate: 0deg; }
/* Elle se balance doucement sur sa punaise */
.uacc .uacc-pk-in { display: block; height: 100%; transform-origin: 50% -8px; animation: uacc-balance 4.6s ease-in-out infinite alternate; }
@keyframes uacc-balance { from { rotate: -.9deg; } to { rotate: .9deg; } }
.uacc .uacc-pk-punaise { position: absolute; z-index: 3; left: 50%; top: -9px; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1dc 0, #ecd3b1 30%, #9a7650 75%, #5e452a 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, .55), 0 0 0 2px rgba(13, 12, 11, .25); }
.uacc .uacc-pk-papier { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; padding: 24px 20px 20px; background: var(--papier);
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .95), 0 3px 0 rgba(0, 0, 0, .18); }
.uacc .uacc-pk-papier.ht::after { opacity: .12; }
.uacc .uacc-pk-papier::before { content: ""; position: absolute; inset: 8px; border: 2px solid rgba(27, 23, 18, .13); pointer-events: none; }
.uacc .uacc-pk-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.uacc .uacc-pk-num { display: inline-block; padding: 3px 9px; font-size: 10.5px; font-weight: 900; font-style: italic; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--acc); background: var(--on-acc); transform: skewX(-8deg); }
.uacc .uacc-pk-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; color: var(--acc); background: var(--on-acc); }
.uacc .uacc-pk-t { display: block; margin: 0 0 8px; font-size: clamp(19px, 1.55vw, 23px); font-weight: 900; font-style: italic; line-height: 1.04; letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: break-word; }
.uacc .uacc-pk-d { display: block; font-size: 13.5px; line-height: 1.55; color: rgba(27, 23, 18, .8); }
/* Sceau : la couronne du serveur en filigrane, en bas à droite de chaque pancarte */
.uacc .uacc-pk-sceau { position: absolute; z-index: -1; right: 16px; bottom: 14px; width: 40px; color: var(--brun); opacity: .16; rotate: -10deg; pointer-events: none; }

/* Minuterie : la barre se remplit jusqu'à la pancarte suivante (en pause au survol de l'affiche) */
.uacc .uacc-tab-barre { position: relative; display: block; width: min(100%, 330px); height: 3px; margin: 2px auto 0; overflow: hidden; border-radius: 2px; background: rgba(236, 211, 177, .14); }
.uacc .uacc-tab-barre > i { position: absolute; inset: 0; background: var(--beige); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Adaptation écrans (mêmes paliers et même ordre que la maquette) ---------- */
@media (max-width: 1100px) {
  /* Deux colonnes : la vedette en largeur, puis les paires */
  .uacc .uacc-mur { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lore lore" "entreprises illegal" "serveur actualites" "lexique lexique"; }
  .uacc .uacc-cel .uacc-af { translate: none; }
  .uacc .uacc-cel-illegal, .uacc .uacc-cel-actualites { padding-top: 26px; }
  .uacc .uacc-vedette { flex-direction: row; }
  .uacc .uacc-vedette .uacc-img { flex: none; width: 52%; min-height: 380px; }
  .uacc .uacc-vedette .uacc-corps { padding: 10px 14px 6px 28px; }
  .uacc .uacc-large { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1.08fr); }
  .uacc .uacc-large .uacc-corps { padding: 6px 12px 8px 22px; }
}
@media (max-width: 900px) {
  /* Tablette : la photo en bandeau, puis le texte et le tableau côte à côte */
  .uacc .uacc-large { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "img img" "corps tab"; row-gap: 14px; }
  .uacc .uacc-large .uacc-img { min-height: 0; aspect-ratio: 16 / 6.4; }
  .uacc .uacc-large .uacc-photo { background-size: 170%; background-position: 29% 7%; }
  .uacc .uacc-large .uacc-corps { padding: 4px 10px 6px 8px; }
  .uacc .uacc-large .uacc-t { margin-top: 10px; }
  .uacc .uacc-tab { margin-left: 0; }
}
@media (max-width: 700px) {
  .uacc .kicker .old { font-size: 26px; }
  .uacc .ph-desc { font-size: 15.5px; }
  /* Affiches : une colonne, inclinaisons adoucies */
  .uacc .uacc-mur { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lore" "entreprises" "illegal" "serveur" "actualites" "lexique"; gap: 38px; padding-inline: 6px; }
  .uacc .uacc-cel-illegal, .uacc .uacc-cel-actualites { padding-top: 0; }
  .uacc .uacc-af { rotate: calc(var(--rot, 0deg) * .55); }
  .uacc .uacc-vedette, .uacc .uacc-large { display: flex; flex-direction: column; }
  .uacc .uacc-vedette .uacc-img, .uacc .uacc-large .uacc-img { width: auto; min-height: 0; flex: none; aspect-ratio: 4 / 3.4; }
  .uacc .uacc-vedette .uacc-photo { background-size: 178%; background-position: 58% 42%; }
  .uacc .uacc-vedette .uacc-corps, .uacc .uacc-large .uacc-corps { padding: 0 8px; }
  .uacc .uacc-large .uacc-t { margin-top: 18px; }
  .uacc .uacc-vedette .uacc-t { font-size: clamp(36px, 11vw, 46px); }
  .uacc .uacc-vedette .uacc-d { font-size: 16px; }
  .uacc .uacc-sticker { width: 78px; right: -8px; bottom: -14px; }
  .uacc .uacc-vedette .tape { left: -8px; top: 10px; width: 84px; height: 26px; }
  .uacc .uacc-vedette .tape + .tape { right: -8px; top: 10px; }
  .uacc .uacc-large .tape { left: calc(50% - 55px); }
  .uacc .uacc-large .tape + .tape { display: none; }
  /* Lexique : photo (cadrage des textes), titre, texte, puis le tableau, et le bouton en dernier */
  .uacc .uacc-large .uacc-photo { background-size: var(--size); background-position: var(--pos); }
  .uacc .uacc-large .uacc-corps { display: contents; }
  .uacc .uacc-large .uacc-corps > * { margin-left: 8px; margin-right: 8px; }
  .uacc .uacc-large .uacc-tab { order: 1; margin: 0 0 24px; padding: 30px 16px 16px; }
  .uacc .uacc-large .uacc-b { order: 2; }
  .uacc .uacc-b { height: 44px; }
  .uacc .uacc-logo { width: 66px; height: 66px; font-size: 26px; }
}