/* Page #/rejoindre — ultimate-rejoindre.js. Direction artistique de la catégorie Ultimate (maquettes v2 : en-tête de
   lexique-pancartes.html, pancartes punaisées .pk-* du lexique), sans maquette propre : textes de l'ancien site.
   Règle (CONTRAT.md) : tout est sous la classe racine .urej, chaque classe créée commence par « urej- » (états : .is-* accolés
   à une classe préfixée). Classes du site réutilisées et seulement ajustées ici : .ph, .ph-grid, .ph-tag, .ph-title, .ph-desc,
   .ph-meta, .cadre, .ph-img, .ht, .old, .hl, .hl-etq. Le site garde son en-tête, son pied de page et son fond. */
.urej {
  --papier: #efe6d8; --encre: #1b1712; --brun: #7a5a33;
  --discord: #5865f2; --discord-2: #4752c4;
  display: block;
}
/* Données pas encore arrivées (premier chargement) : la page garde sa place */
.urej.is-attente { min-height: 100svh; }

/* ---------- En-tête de la page (comme les pages intérieures des maquettes Ultimate v2) ---------- */
.urej .ph { padding: calc(var(--hd) + clamp(16px, 3vh, 34px)) 0 clamp(30px, 3.4vw, 50px); }
.urej .urej-grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.urej .urej-txt { min-width: 0; }
.urej .urej-retour { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 10px -8px; padding: 0 14px 0 8px; font-size: 12.5px; font-weight: 800;
  font-style: italic; letter-spacing: .04em; text-transform: uppercase; color: rgba(246, 241, 234, .72); transition: color .3s; }
.urej .urej-retour i { font-size: 21px; color: var(--acc); transition: transform .5s var(--ease); }
.urej .urej-retour:hover { color: #fff; }
.urej .urej-retour:hover i { transform: translateX(-5px); }
/* Étiquette : icône + étiquette « Voile » (et non le bloc beige des autres pages du site) */
.urej .ph-tag { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 0 16px; padding: 0; background: none; color: var(--acc); transform: none; }
.urej .ph-tag > * { transform: none; }
.urej .ph-tag > i { font-size: 19px; }
.urej .ph-tag .hl-etq { font-size: 12.5px; }
.urej .ph-title { margin: 0 0 16px; font-size: clamp(46px, 5.6vw, 88px); }
/* Le voile est prévu pour une ligne : le mot en valeur ne se coupe jamais */
.urej .ph-title .hl { white-space: nowrap; }
.urej .ph-meta { margin-top: 18px; }
.urej .ph-meta b { color: var(--acc); font-weight: 900; }

/* ---------- Pancartes punaisées (comme le lexique) : elles penchent un peu et se redressent au survol ---------- */
.urej .urej-case { display: flex; flex-direction: column; min-width: 0; padding-bottom: 54px; }
.urej .urej-pk { position: relative; flex: 1; display: block; color: var(--encre); transform: rotate(var(--rot, 0deg)); transform-origin: 50% -10px;
  transition: transform .9s cubic-bezier(.3, 1.6, .45, 1); }
.urej .urej-pk:hover { transform: rotate(0deg) translateY(-6px); }
.urej .urej-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); }
.urej .urej-papier { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 236px; padding: 30px 24px 20px; background: var(--papier);
  box-shadow: 0 28px 46px -24px rgba(0, 0, 0, .95), 0 3px 0 rgba(0, 0, 0, .18); transition: box-shadow .5s; }
.urej .urej-pk:hover .urej-papier { box-shadow: 0 40px 60px -26px #000, 0 0 0 3px var(--acc); }
.urej .urej-papier.ht::after { opacity: .12; }
/* Filet intérieur, comme sur une enseigne */
.urej .urej-papier::before { content: ""; position: absolute; inset: 9px; border: 2px solid rgba(27, 23, 18, .13); pointer-events: none; }
/* Le contenu passe devant le grand numéro */
.urej .urej-papier > :not(.urej-gros) { position: relative; z-index: 1; }
.urej .urej-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.urej .urej-num { display: inline-block; padding: 4px 10px; font-size: 11.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); }
.urej .urej-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; color: var(--acc); background: var(--on-acc);
  transition: transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.urej .urej-pk:hover .urej-ico { transform: rotate(-12deg) scale(1.06); }
/* Lignes équilibrées : jamais un « ? » seul sur la dernière ligne */
.urej .urej-t { margin: 0 0 10px; font-size: clamp(22px, 1.8vw, 27px); font-weight: 900; font-style: italic; line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase;
  overflow-wrap: break-word; text-wrap: balance; }
.urej .urej-r { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: rgba(27, 23, 18, .8); }
/* Grand numéro de l'étape, peint en bas à droite (police des numéros du site) */
.urej .urej-gros { position: absolute; z-index: 0; right: 20px; bottom: 2px; font-family: var(--font-old); font-size: 96px; line-height: 1; color: rgba(122, 90, 51, .17);
  pointer-events: none; user-select: none; }
/* Lien d'une étape (comme « Copier le lien » du lexique) : page externe = nouvel onglet */
.urej .urej-lire { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 0 16px; height: 40px; translate: 0 6px;
  font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; white-space: nowrap; color: var(--acc); background: var(--on-acc); transform: skewX(-8deg);
  -webkit-tap-highlight-color: transparent; transition: gap .4s var(--ease), background .3s, color .3s; }
.urej .urej-lire > * { transform: skewX(8deg); }
.urej .urej-lire i { font-size: 18px; }
.urej .urej-pk:hover .urej-lire { gap: 14px; }

/* ---------- Affiche Discord (à droite de l'en-tête) : photo collée, appel, bouton Discord ---------- */
.urej .urej-affiche-case { justify-self: end; display: flex; flex-direction: column; width: min(100%, 410px); }
.urej .urej-affiche .urej-papier { min-height: 0; padding: 26px 22px 24px; }
.urej .urej-photo { margin: 0 0 18px; rotate: -1.2deg; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .7); }
.urej .urej-photo .cadre { height: auto; aspect-ratio: 1920 / 1300; background: #f7f1e6; }
.urej .urej-photo .ph-img { display: block; width: 100%; height: 100%; background: var(--img) var(--pos, 50% 50%) / var(--size, cover) no-repeat; }
.urej .urej-lieu { position: absolute; z-index: 2; right: 16px; bottom: 10px; font-size: 25px; line-height: 1; color: var(--acc); text-shadow: 0 2px 14px rgba(0, 0, 0, .75); rotate: -4deg; }
.urej .urej-affiche .urej-t { font-size: clamp(22px, 1.75vw, 27px); }
.urej .urej-affiche .urej-r { margin-bottom: 22px; }
/* Bouton Discord : plein, bleu Discord, bien visible ; ouvre un nouvel onglet */
.urej .urej-discord { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: auto; padding: 0 18px;
  font-size: 13.5px; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: var(--discord); transform: skewX(-8deg); box-shadow: 5px 5px 0 rgba(88, 101, 242, .32);
  -webkit-tap-highlight-color: transparent; transition: transform .5s var(--ease), box-shadow .4s, background .3s; }
.urej .urej-discord > * { transform: skewX(8deg); }
.urej .urej-discord i { font-size: 21px; }
.urej .urej-discord .urej-ext { font-size: 17px; opacity: .78; }
.urej .urej-discord:hover { background: var(--discord-2); transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(88, 101, 242, .4); }
.urej .urej-discord:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* ---------- Les étapes ---------- */
.urej .urej-guide { padding: clamp(46px, 5vw, 70px) 0 clamp(40px, 6vw, 90px); border-top: 2px solid var(--line); }
.urej .urej-mur { --cols: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 28px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .urej .urej-mur { --cols: 2; column-gap: 24px; } }
@media (min-width: 900px) { .urej .urej-mur { --cols: 3; column-gap: 28px; } }
/* Pas encore d'étapes : une seule pancarte, au centre */
.urej .urej-mur.is-seul { --cols: 1; max-width: 620px; margin-inline: auto; }
.urej .urej-case-seule .urej-papier { min-height: 0; padding: 30px 28px 34px; }
.urej .urej-avenir { margin: 0; font-size: clamp(26px, 2.4vw, 34px); }

/* ---------- Adaptation écrans ---------- */
@media (max-width: 960px) {
  /* Une colonne : l'affiche Discord passe sous le titre, sans photo (comme la photo des autres pages du site) */
  .urej .urej-grille { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .urej .urej-affiche-case { justify-self: start; width: min(100%, 470px); }
  .urej .urej-photo { display: none; }
}
@media (max-width: 700px) {
  .urej .ph-title { font-size: clamp(40px, 12.4vw, 64px); }
  .urej .ph-desc { font-size: 15.5px; }
  .urej .urej-retour { margin-bottom: 6px; }
  .urej .urej-grille { gap: 30px; }
  .urej .urej-affiche-case { width: 100%; }
  .urej .urej-case { padding-bottom: 42px; }
  .urej .urej-pk { transform: rotate(calc(var(--rot, 0deg) * .55)); }
  .urej .urej-papier { min-height: 0; padding: 28px 20px 18px; }
  .urej .urej-affiche .urej-papier { padding: 26px 20px 22px; }
  .urej .urej-t { font-size: clamp(22px, 7vw, 26px); }
  .urej .urej-affiche .urej-t { font-size: clamp(22px, 6.6vw, 25px); }
  .urej .urej-r { font-size: 15px; }
  .urej .urej-lire { height: 42px; }
  .urej .urej-gros { font-size: 70px; }
  .urej .urej-avenir { font-size: clamp(24px, 7.4vw, 30px); }
  .urej .urej-guide { padding-top: 44px; }
}