/* Composant « Lexique RP » (#/lexique, #/lexique/<terme>) — ultimate-lexique.js.
   Rendu fidèle à maquettes-ultimate/v3/lexique.html, proposition B « Mur continu » (choisie par le propriétaire).
   Barre de filtres : la BARRE COMMUNE du site (.fx-barre, style dans commun.css, ton beige), la même que Le Business /
   Le Milieu (« Tous » + les seules lettres qui ont des termes, recherche à droite) ; aucune règle d'apparence ici.
   Puis la ligne de résultat + « Tout réafficher », et un seul mur de pancartes punaisées en quinconce (« Terme N », icône,
   définition, « Copier le lien ») ; plus de titres de lettre : la lettre est un petit onglet de papier sur la première pancarte
   de chaque lettre.
   Règles (CONTRAT.md) : tout est sous la classe racine .ulex ; chaque classe créée ici commence par « ulex- » (états compris :
   ulex-cache, ulex-cible, ulex-copie, ulex-debut…), @keyframes et identifiants aussi. Les classes du site réutilisées (.ph, .ph-grid,
   .ph-title, .ph-desc, .ph-meta, .ph-photo, .cadre, .ph-img, .tape, .ht, .old, .hl, .hl-etq) ne sont ajustées que sous .ulex,
   aux valeurs de la maquette. Le site garde son en-tête, son pied de page et son fond. */
.ulex { --papier: #efe6d8; --encre: #1b1712; --brun: #7a5a33; }

/* ---------- En-tête de la page (valeurs de la maquette) ---------- */
.ulex .ph { position: relative; padding: calc(var(--hd) + clamp(16px, 3vh, 34px)) 0 clamp(30px, 3.4vw, 50px); }
.ulex .ph-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 40px; align-items: center; }
.ulex .ulex-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; }
.ulex .ulex-retour i { font-size: 21px; color: var(--acc); transition: transform .5s var(--ease); }
.ulex .ulex-retour:hover { color: #fff; }
.ulex .ulex-retour:hover i { transform: translateX(-5px); }
.ulex .ulex-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--acc); }
.ulex .ulex-tag > i { font-size: 19px; }
.ulex .ulex-tag .hl-etq { font-size: 12.5px; }
.ulex .ph-title { margin: 0 0 16px; font-weight: 900; font-style: italic; font-size: clamp(46px, 5.6vw, 88px); line-height: 1.06; letter-spacing: -.035em; word-spacing: .12em; text-transform: uppercase; }
.ulex .ph-title .hl { --hd-delay: .5s; }
.ulex .ph-desc { max-width: 600px; margin: 0; font-size: 16.5px; line-height: 1.75; color: rgba(246, 241, 234, .78); }
.ulex .ph-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 18px 0 0; padding: 0; list-style: none; }
.ulex .ph-meta li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(246, 241, 234, .7); }
.ulex .ph-meta i { font-size: 18px; color: var(--acc); }
.ulex .ph-meta b { color: var(--acc); font-weight: 900; }
.ulex .ph-photo { position: relative; justify-self: end; width: min(100%, 330px); rotate: 3deg; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.ulex .cadre { background: var(--papier); }
.ulex .ph-photo .cadre { height: auto; aspect-ratio: 1920 / 1300; }
.ulex .ph-img { display: block; width: 100%; height: 100%; background: var(--img) var(--pos, 50% 50%) / var(--size, cover) no-repeat; }
.ulex .ulex-lieu { position: absolute; z-index: 2; right: 18px; bottom: 12px; font-size: 27px; line-height: 1; color: var(--acc); text-shadow: 0 2px 14px rgba(0, 0, 0, .75); rotate: -4deg; }
.ulex .tape { z-index: 3; }

/* ======================================================================
   LE LEXIQUE EN PANCARTES
   ====================================================================== */
.ulex .ulex-lx { padding-bottom: clamp(24px, 4vw, 64px); }

/* Barre de filtres : la barre commune (.fx-barre, commun.css), identique à celle du Business ; seule la place sous elle est
   propre à la page (la ligne de résultat la suit de près, comme avant) */
.ulex .fx-barre { margin-bottom: 10px; }

/* Ligne de résultat : un badge (la lettre, la loupe ou le livre), ce qui est affiché et combien,
   puis « Tout réafficher » dès qu'un filtre ou une recherche est actif */
.ulex .ulex-res-l { position: relative; display: flex; align-items: center; gap: 12px 20px; min-height: 78px; margin: 16px 0 44px; padding: 0 0 16px; border-bottom: 2px solid var(--line); }
.ulex .ulex-res-in { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0; }
.ulex .ulex-res-in.ulex-sortant { pointer-events: none; }
.ulex .ulex-res-bw { flex: none; display: inline-block; }
.ulex .ulex-res-b { display: grid; place-items: center; min-width: 54px; height: 48px; padding: 0 10px; background: var(--beige); color: var(--on-acc); transform: skewX(-8deg);
  box-shadow: 5px 5px 0 rgba(236, 211, 177, .16); font-size: 25px; font-weight: 900; font-style: italic; line-height: 1; text-transform: uppercase; }
.ulex .ulex-res-b > * { transform: skewX(8deg); }
.ulex .ulex-res-b i { font-size: 23px; }
.ulex .ulex-res-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ulex .ulex-res-t { font-size: clamp(19px, 1.7vw, 24px); font-weight: 900; font-style: italic; line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; overflow-wrap: anywhere; }
.ulex .ulex-res-n { display: inline-block; color: var(--acc); font-weight: 900; font-variant-numeric: tabular-nums; }
.ulex .ulex-res-q { color: var(--acc); }
.ulex .ulex-res-q.ulex-saisie { text-transform: none; }
.ulex .ulex-res-m { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.ulex .ulex-res-m b { display: inline-block; font-weight: 800; font-style: italic; color: var(--acc); font-variant-numeric: tabular-nums; }
.ulex .ulex-raz-w { flex: none; display: inline-flex; margin-left: auto; }
.ulex .ulex-raz { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 18px; border: 1.5px solid var(--line-2); background: rgba(13, 12, 11, .45);
  color: var(--text); font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; transform: skewX(-8deg);
  -webkit-tap-highlight-color: transparent; transition: border-color .3s, background .3s, color .3s, box-shadow .4s, transform .5s var(--ease); }
.ulex .ulex-raz > * { transform: skewX(8deg); }
.ulex .ulex-raz i { font-size: 19px; color: var(--acc); transition: rotate .6s var(--ease); }
@media (hover: hover) {
  .ulex .ulex-raz:hover { border-color: var(--acc); background: rgba(236, 211, 177, .08); box-shadow: 4px 4px 0 rgba(236, 211, 177, .14); transform: skewX(-8deg) translate(-1px, -1px); }
  .ulex .ulex-raz:hover i { rotate: -200deg; }
}
.ulex .ulex-raz:active { border-color: var(--acc); background: rgba(236, 211, 177, .12); }
.ulex .ulex-raz:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Le mur continu : une grille unique en rangées de 2 px ; chaque pancarte occupe la hauteur de son contenu et se pose juste sous
   la précédente de sa colonne (placée par le script, chaque colonne part un peu plus bas que sa voisine : le quinconce).
   isolation : pendant une réorganisation, les pancartes qui s'en vont passent derrière celles qui glissent. */
.ulex .ulex-mur { --ulex-cols: 1; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(var(--ulex-cols), minmax(0, 1fr)); grid-auto-rows: 2px;
  column-gap: 20px; row-gap: 0; align-items: start; align-content: start; }
/* Élément écarté par le filtre (une classe et non [hidden] : Flip doit pouvoir l'afficher le temps qu'il s'efface) */
.ulex .ulex-mur > .ulex-cache { display: none; }
@media (min-width: 600px) { .ulex .ulex-mur { --ulex-cols: 2; column-gap: 24px; } }
@media (min-width: 900px) { .ulex .ulex-mur { --ulex-cols: 3; column-gap: 28px; } }
@media (min-width: 1281px) { .ulex .ulex-mur { --ulex-cols: 4; column-gap: 30px; } }

/* La pancarte : punaisée en haut, elle penche un peu et se redresse au survol (balancement depuis la punaise).
   La première pancarte de chaque lettre (.ulex-debut) laisse la place de son onglet au-dessus d'elle. */
.ulex .ulex-pk-case { display: flex; flex-direction: column; align-self: start; min-width: 0; padding-bottom: 46px; scroll-margin-top: 170px; }
.ulex .ulex-pk-case.ulex-debut { padding-top: 32px; }
/* Enveloppe de la pancarte : c'est elle qui tombe à l'arrivée et se balance (onglet compris) */
.ulex .ulex-chute { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* Titre « Lettre X » pour les lecteurs d'écran (montré seulement sur la première pancarte de la lettre) */
.ulex .ulex-sr { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* L'onglet de chemise : même papier que la pancarte, il dépasse au-dessus, à gauche ; il penche avec elle */
.ulex .ulex-onglet { display: none; }
.ulex .ulex-debut .ulex-onglet { position: absolute; z-index: 1; left: 18px; bottom: calc(100% - 1px); display: grid; place-items: center; min-width: 58px; height: 32px; padding: 3px 18px 0;
  background: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.5px) 0 0 / 4px 4px, var(--papier); color: var(--encre);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 100%, 0 100%); }
.ulex .ulex-onglet-l { font-family: var(--font-display); font-size: 21px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.ulex .ulex-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); }
.ulex .ulex-pk:hover, .ulex .ulex-pk-case.ulex-cible .ulex-pk { transform: rotate(0deg) translateY(-6px); }
.ulex .ulex-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); }
.ulex .ulex-pk-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; }
.ulex .ulex-pk:hover .ulex-pk-papier, .ulex .ulex-pk-case.ulex-cible .ulex-pk-papier { box-shadow: 0 40px 60px -26px #000, 0 0 0 3px var(--acc); }
.ulex .ulex-pk-papier.ht::after { opacity: .12; }
/* Filet intérieur, comme sur une enseigne */
.ulex .ulex-pk-papier::before { content: ""; position: absolute; inset: 9px; border: 2px solid rgba(27, 23, 18, .13); pointer-events: none; }
.ulex .ulex-pk-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ulex .ulex-pk-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); }
.ulex .ulex-pk-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); }
.ulex .ulex-pk:hover .ulex-pk-ico { transform: rotate(-12deg) scale(1.06); }
.ulex .ulex-pk-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; }
.ulex .ulex-pk-r { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: rgba(27, 23, 18, .8); }
/* Bouton du bas : copie le lien direct vers le terme (#/lexique/<terme>) */
.ulex .ulex-pk-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; }
.ulex .ulex-pk-lire > * { transform: skewX(8deg); }
.ulex .ulex-pk-lire i { font-size: 18px; }
.ulex .ulex-pk:hover .ulex-pk-lire { gap: 14px; }
.ulex .ulex-pk-lire.ulex-copie { color: #fff; box-shadow: 4px 4px 0 rgba(122, 90, 51, .32); }
.ulex .ulex-pk-lire.ulex-copie i { color: var(--acc); animation: ulex-ok .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ulex-ok { from { transform: skewX(8deg) scale(.2) rotate(-40deg); opacity: 0; } }
.ulex .ulex-pk mark { padding: 0 3px; color: var(--acc); background: var(--on-acc); }

/* Aucun résultat */
.ulex .ulex-vide { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 24px; border: 2px dashed var(--line-2); text-align: center; }
.ulex .ulex-vide > i { font-size: 34px; color: var(--acc); }
.ulex .ulex-vide p { margin: 0; font-size: 16px; font-weight: 700; font-style: italic; color: var(--muted); overflow-wrap: anywhere; }
.ulex .ulex-vide-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .03em;
  text-transform: uppercase; background: var(--beige); color: var(--on-acc); transform: skewX(-8deg); box-shadow: 5px 5px 0 rgba(236, 211, 177, .18); transition: transform .5s var(--ease), box-shadow .4s; }
.ulex .ulex-vide-b > * { transform: skewX(8deg); }
.ulex .ulex-vide-b:hover { transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(236, 211, 177, .28); }

/* ---------- Adaptation écrans (mêmes seuils que la maquette ; la barre commune s'adapte d'elle-même) ---------- */
@media (max-width: 960px) {
  .ulex .ph-grid { grid-template-columns: minmax(0, 1fr); }
  .ulex .ph-photo { display: none; }
}
@media (max-width: 700px) {
  .ulex .ph-title { font-size: clamp(40px, 12.4vw, 64px); }
  .ulex .ph-desc { font-size: 15.5px; }
  .ulex .ulex-retour { margin-bottom: 6px; }
  /* Ligne de résultat : le texte d'abord, « Tout réafficher » dessous quand il ne tient pas à côté */
  .ulex .ulex-res-l { flex-wrap: wrap; gap: 12px 14px; min-height: 0; margin: 12px 0 32px; padding-bottom: 14px; }
  .ulex .ulex-res-in { gap: 14px; }
  .ulex .ulex-res-b { min-width: 46px; height: 42px; font-size: 21px; }
  .ulex .ulex-res-b i { font-size: 20px; }
  .ulex .ulex-res-t { font-size: 18px; }
  .ulex .ulex-res-m { font-size: 13px; }
  .ulex .ulex-raz { height: 42px; padding: 0 16px; }
  .ulex .ulex-pk-case { padding-bottom: 40px; }
  .ulex .ulex-pk { transform: rotate(calc(var(--rot, 0deg) * .55)); }
  .ulex .ulex-pk-papier { min-height: 0; padding: 28px 20px 18px; }
  .ulex .ulex-pk-t { font-size: clamp(22px, 7vw, 26px); }
  .ulex .ulex-pk-r { font-size: 15px; }
  .ulex .ulex-pk-lire { height: 42px; }
}