/* Composant « Le Business » (#/entreprises, vert) et « Le Milieu » (#/illegal, rouge) — ultimate-discords.js.
   DA des maquettes validées maquettes-ultimate/v2/entreprises.html + illegal.html, en version simplifiée :
   - haut de page aéré : titre, sous-titre, une phrase ; photo scotchée + grande carte du Discord principal ;
   - liste : titre de section, barre de filtres collée sous l'en-tête (catégories avec compteurs + recherche, version compacte
     avec loupe : c'est la barre commune .fx-barre de commun.css), cartes épurées (logo rond, catégorie, nom, une ligne,
     bouton « Discord » en bas à droite) ;
   - passerelle vers l'autre page.
   Les deux pages ont la même structure ; seule l'ambiance change (papier crème et vert / papier vieilli et rouge).
   Règles du site (CONTRAT.md) : tout est sous la classe racine .udisc (ou le calque .udisc-calque), chaque classe créée
   commence par « udisc- ». Le site garde son en-tête, son pied de page et son fond (teinté par le site : .fond[data-ambiance]).
   Recherche : AUCUN effet visuel au focus, au clic ni au toucher. Aucune règle prefers-reduced-motion (choix du propriétaire). */

/* ---------- Variables ---------- */
:is(.udisc, .udisc-calque) {
  --discord: #5865f2; --discord-rgb: 88, 101, 242;
  --papier: #efe6d8;
  --amb: #ecd3b1; --amb-rgb: 236, 211, 177; --amb-fond: var(--beige); --amb-txt: #0d0c0b; --amb-plein: #ecd3b1;
  /* Cartes : papier, encre, couleur de l'ambiance */
  --pc-papier: linear-gradient(135deg, #f8f1e6 0%, #efe3cf 52%, #e5d4b8 100%);
  --pc-encre: #16130f; --pc-brun: #7a5a33; --pc-brun-rgb: 122, 90, 51; --pc-texte: rgba(22, 19, 15, .72);
  --pc-accent: linear-gradient(90deg, #b48a52, #e7c48f 50%, #b48a52);
  --pc-logo: radial-gradient(circle at 34% 28%, #2b251f, #16130f 70%); --pc-logo-txt: #ecd3b1;
  --pc-anneau: conic-gradient(from 200deg, #a98455, #f2d6a5, #9c7442, #ead0a0, #b48a52, #f2d6a5, #a98455);
  --pc-btn: linear-gradient(180deg, #2a241e, #16130f); --pc-btn-txt: #f0d6b2; --pc-btn-ombre: rgba(22, 19, 15, .2);
}
/* Le Business (le légal) : vert anglais + jade clair, sur papier crème */
:is(.udisc, .udisc-calque).udisc-ent {
  --amb: #7fc3a0; --amb-rgb: 62, 150, 108; --amb-fond: linear-gradient(180deg, #2c7d59, #1b5a40); --amb-txt: #eef7f1; --amb-plein: #7fc3a0;
  --pc-brun: #1f5e43; --pc-brun-rgb: 31, 94, 67;
  --pc-accent: linear-gradient(90deg, #1f5e43, #4fa97e 50%, #1f5e43);
  --pc-logo: radial-gradient(circle at 34% 28%, #2f7d5a, #1a5038 62%, #0f3324); --pc-logo-txt: #eef7f1;
  --pc-anneau: conic-gradient(from 200deg, #1f5e43, #8fceac, #174a34, #6cb891, #1f5e43, #8fceac, #1f5e43);
  --pc-btn: linear-gradient(180deg, #2a7a56, #1a5038); --pc-btn-txt: #eef7f1; --pc-btn-ombre: rgba(26, 80, 56, .24);
}
/* Le Milieu (l'illégal) : rouge sombre, sur papier vieilli */
:is(.udisc, .udisc-calque).udisc-ill {
  --amb: #e46a55; --amb-rgb: 196, 52, 36; --amb-fond: linear-gradient(180deg, #ad3020, #7e1c12); --amb-txt: #fff1ec; --amb-plein: #e46a55;
  --pc-papier: radial-gradient(60% 50% at 88% 16%, rgba(120, 80, 40, .14), transparent 70%), radial-gradient(48% 46% at 6% 94%, rgba(110, 70, 30, .18), transparent 70%),
    linear-gradient(135deg, #ece2d0 0%, #ddcfb5 58%, #d1c0a2 100%);
  --pc-encre: #1a1311; --pc-brun: #8f2216; --pc-brun-rgb: 143, 34, 22; --pc-texte: rgba(26, 19, 17, .74);
  --pc-accent: linear-gradient(90deg, #7e1c12, #d0472f 50%, #7e1c12);
  --pc-logo: radial-gradient(circle at 34% 28%, #b8321f, #7a170d 62%, #4a0e08); --pc-logo-txt: #fff1ec;
  --pc-anneau: repeating-conic-gradient(#8f2216 0 9deg, transparent 9deg 15deg);
  --pc-btn: linear-gradient(180deg, #ad3020, #7e1c12); --pc-btn-txt: #fff1ec; --pc-btn-ombre: rgba(126, 28, 18, .26);
}
.udisc { position: relative; -webkit-tap-highlight-color: transparent; }

/* Bouton contour (sur la base .btn du site) : « Tout afficher » quand rien ne correspond */
.udisc .udisc-btn-contour { border: 1.5px solid rgba(var(--amb-rgb), .55); color: var(--amb); background: rgba(13, 12, 11, .35); }
.udisc .udisc-btn-contour:hover { border-color: var(--amb); color: #fff; background: rgba(var(--amb-rgb), .12); transform: skewX(-8deg) translate(-2px, -2px); }

/* Ruban adhésif de la photo */
.udisc .udisc-tape { position: absolute; z-index: 3; width: 110px; height: 30px; background: rgba(236, 211, 177, .78); pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.udisc.udisc-ill .udisc-tape { background: rgba(214, 200, 176, .72); }

/* En direct (API publique Discord) : connectés et membres */
.udisc .udisc-live { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; font-size: 11.5px; font-weight: 800; font-style: italic; letter-spacing: .02em; text-transform: uppercase; color: var(--pc-texte); }
.udisc .udisc-live[hidden] { display: none; }
.udisc .udisc-live b { font-weight: 900; color: var(--pc-encre); font-variant-numeric: tabular-nums; }
.udisc .udisc-live-pt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3fbf63; --st: 63, 191, 99; animation: pulse 2s infinite; }
.udisc .udisc-live-sep { opacity: .45; }

/* ---------- Message « Lien bientôt disponible » : dans le calque fixe du composant (au-dessus de l'en-tête) ---------- */
.udisc-calque { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.udisc-calque .udisc-bulle { position: fixed; z-index: 90; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--line-2); background: #0d0c0b; color: var(--text);
  font-size: 12.5px; font-weight: 800; font-style: italic; line-height: 1.2; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .9); opacity: 0; transform: translate(-50%, calc(-100% - 6px)) skewX(-8deg); transition: opacity .25s, transform .45s var(--ease); }
.udisc-calque .udisc-bulle > * { transform: skewX(8deg); }
.udisc-calque .udisc-bulle i { font-size: 16px; color: var(--amb); }
.udisc-calque .udisc-bulle.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 12px)) skewX(-8deg); }
.udisc-calque .udisc-bulle::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: -7px; width: 12px; height: 12px; background: #0d0c0b; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(45deg) skew(8deg, 8deg); }

/* ======================================================================
   HAUT DE PAGE : retour, titre, sous-titre, une phrase ; photo scotchée et grande carte du Discord principal
   ====================================================================== */
.udisc .udisc-hero { position: relative; padding: calc(var(--hd) + clamp(20px, 4.4vh, 60px)) 0 clamp(64px, 7vw, 120px); }
.udisc .udisc-hero-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 100px); align-items: center; }
.udisc .udisc-texte { min-width: 0; }
.udisc .udisc-retour { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 clamp(10px, 2vh, 22px); font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .02em;
  text-transform: uppercase; color: var(--amb); transition: gap .45s var(--ease), color .3s; }
.udisc .udisc-retour i { font-size: 18px; }
.udisc .udisc-retour:hover { gap: 13px; color: #fff; }
.udisc .ph-title { margin: 0 0 22px; font-weight: 900; font-style: italic; font-size: clamp(46px, 5.7vw, 100px); line-height: 1.04; letter-spacing: -.035em; word-spacing: .12em; text-transform: uppercase; }
.udisc .ph-title .hl { --hd-delay: .5s; }
/* Sous-titre : ce qu'il y a derrière le nom */
.udisc .udisc-sous { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 13.5px; font-weight: 800; font-style: italic; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.udisc .udisc-sous::before { content: ""; flex: none; width: 34px; height: 3px; border-radius: 2px; background: var(--amb); }
.udisc .ph-desc { max-width: 470px; margin: 0; font-size: 16px; line-height: 1.75; color: rgba(246, 241, 234, .74); text-wrap: pretty; }
/* Petit bandeau discret : données d'exemple */
.udisc .udisc-exemple { display: inline-flex; align-items: center; gap: 8px; margin: 30px 0 0; padding: 7px 13px 7px 10px; border: 1px dashed rgba(var(--amb-rgb), .32); border-radius: 3px; background: rgba(13, 12, 11, .36);
  font-size: 12px; font-weight: 600; line-height: 1.35; color: rgba(246, 241, 234, .68); }
.udisc .udisc-exemple i { flex: none; font-size: 16px; color: var(--amb); }

/* La scène : photo scotchée et, devant, la grande carte */
.udisc .udisc-scene { position: relative; min-width: 0; padding: 16px 0 8px; }
/* Écran large mais peu haut (1366 × 768…) : la scène rétrécit pour tenir entière dans le premier écran */
@media (min-width: 961px) { .udisc .udisc-scene { width: min(100%, 660px, calc((100vh - var(--hd) - 40px) * 1.08)); margin-left: auto; } }
.udisc .udisc-photo-cel { position: relative; width: 84%; margin-left: auto; rotate: 2deg; }
.udisc .udisc-photo-cel .udisc-tape { top: -13px; left: 16%; rotate: -6deg; }
.udisc .udisc-photo-cel .udisc-tape + .udisc-tape { left: auto; right: 9%; top: -11px; width: 92px; rotate: 5deg; }
.udisc .udisc-photo { position: relative; display: block; margin: 0; padding: 9px; background: var(--papier); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .95), 0 12px 24px -12px rgba(0, 0, 0, .6); }
.udisc .udisc-photo-in { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; background: #0d0c0b; }
.udisc .udisc-photo-img { position: absolute; inset: 0; z-index: -3; background: var(--img) var(--pos) / var(--size) no-repeat; filter: saturate(.92) contrast(1.05); transform: scale(1.04); }
.udisc .udisc-photo-grade { position: absolute; inset: 0; z-index: -2; background: rgb(168, 46, 36); opacity: 0; mix-blend-mode: color; }
.udisc.udisc-ill .udisc-photo-grade { opacity: .34; }
.udisc.udisc-ent .udisc-photo-grade { background: rgb(30, 104, 72); opacity: .14; }
.udisc .udisc-photo-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 9, 8, .3) 0%, rgba(10, 9, 8, 0) 30%, rgba(10, 9, 8, 0) 58%, rgba(10, 9, 8, .5) 100%); }

.udisc .udisc-carte-cel { position: relative; z-index: 2; width: 72%; margin-top: -27%; }
.udisc .udisc-carte-anim { position: relative; }
/* La grande carte : papier de l'ambiance, filet de couleur en haut, relief et reflet qui suivent la souris */
.udisc .udisc-carte { --rx: 0deg; --ry: 0deg; --mx: 50%; position: relative; container-type: inline-size; overflow: hidden; border-radius: 6px; color: var(--pc-encre); background: var(--pc-papier);
  transform: perspective(1500px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(-1.5deg); transition: transform .6s var(--ease); isolation: isolate;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .5) inset, 0 50px 80px -34px rgba(0, 0, 0, .98), 0 18px 30px -16px rgba(0, 0, 0, .72); }
.udisc .udisc-carte::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 4px; background: var(--pc-accent); pointer-events: none; }
.udisc .udisc-carte::after { content: ""; position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light; opacity: .85;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .85) 46%, transparent 60%) calc(var(--mx) * 1.6 - 30%) 0 / 260% 100% no-repeat; transition: background-position .3s; }
.udisc.udisc-ill .udisc-carte::after { mix-blend-mode: overlay; opacity: .4; }
.udisc .udisc-c-in { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 8.4cqi 7.6cqi 6.6cqi; }
.udisc .udisc-c-id { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 5.6cqi; }
.udisc .udisc-c-id .udisc-logo { --lg: clamp(68px, 19cqi, 100px); }
.udisc .udisc-c-titres { min-width: 0; }
.udisc .udisc-c-cat { display: block; font-size: clamp(18px, 5cqi, 25px); line-height: 1.1; color: var(--pc-brun); }
.udisc .udisc-c-nom { display: block; margin: 1.2cqi 0 0; font-size: clamp(22px, min(9cqi, calc(56cqi / (var(--L, 8) * .74))), 50px); font-weight: 900; font-style: italic; line-height: .98; letter-spacing: -.035em;
  text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.udisc .udisc-c-desc { margin: 6cqi 0 0; font-size: clamp(13.5px, 3.3cqi, 16px); line-height: 1.6; color: var(--pc-texte); text-wrap: pretty; }
.udisc .udisc-carte .udisc-live { margin-top: 3.4cqi; }
/* Le gros bouton « Rejoindre » : plein, couleur de l'ambiance */
.udisc .udisc-c-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: clamp(50px, 12cqi, 60px); margin-top: 6.4cqi; padding: 0 22px;
  background: var(--pc-btn); color: var(--pc-btn-txt); font-size: clamp(13px, 2.9cqi, 15px); font-weight: 800; font-style: italic; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  transform: skewX(-8deg); box-shadow: 6px 6px 0 var(--pc-btn-ombre); transition: transform .5s var(--ease), box-shadow .4s, gap .45s var(--ease); -webkit-tap-highlight-color: transparent; }
.udisc .udisc-c-btn > * { transform: skewX(8deg); }
.udisc .udisc-c-btn i { font-size: 22px; }
.udisc .udisc-c-btn .bx-right-arrow-alt { transition: transform .5s var(--ease); }
.udisc .udisc-c-btn:hover { gap: 16px; transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 9px 9px 0 var(--pc-btn-ombre); }
.udisc .udisc-c-btn:hover .bx-right-arrow-alt { transform: skewX(8deg) translateX(4px); }
.udisc .udisc-c-lien { display: block; margin-top: 3.6cqi; font-size: clamp(9.5px, 2.1cqi, 11px); font-weight: 800; letter-spacing: .14em; text-align: center; text-transform: uppercase; color: var(--pc-brun); opacity: .8; }

/* ======================================================================
   LOGO ROND (cartes et grande carte) : image du fichier, image Discord, ou initiales ; anneau de l'ambiance
   ====================================================================== */
.udisc .udisc-logo { --lg: 64px; position: relative; flex: none; display: grid; place-items: center; width: var(--lg); height: var(--lg); border-radius: 50%; }
.udisc .udisc-logo::before { content: ""; position: absolute; inset: calc(var(--lg) * -.075); border-radius: 50%; background: var(--pc-anneau); pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  transition: rotate 1.4s var(--ease); }
.udisc .udisc-logo-in { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: var(--pc-logo); color: var(--pc-logo-txt);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08); }
.udisc .udisc-logo-in img { width: 100%; height: 100%; object-fit: cover; }
.udisc .udisc-logo .couronne { width: 56%; color: var(--pc-logo-txt); }
.udisc .udisc-mono { display: block; font-size: calc(var(--lg) * .34); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; padding-right: .06em; }
.udisc .udisc-mono.is-4 { font-size: calc(var(--lg) * .27); }

/* ======================================================================
   LA LISTE : titre, barre de filtres collée sous l'en-tête, grille de cartes
   ====================================================================== */
.udisc .udisc-zone { position: relative; padding: 0 0 clamp(100px, 11vw, 160px); scroll-margin-top: calc(var(--hd) + 10px); }
.udisc .udisc-h2 { margin: 0 0 clamp(18px, 2vw, 26px); font-size: clamp(32px, 3.4vw, 52px); font-weight: 900; font-style: italic; line-height: 1.06; letter-spacing: -.03em; word-spacing: .1em; text-transform: uppercase; }
.udisc .udisc-h2 .hl { --hd-delay: .35s; }

/* Barre de filtres (catégories à gauche, recherche à droite, collée sous l'en-tête, compacte au téléphone) : c'est la
   BARRE COMMUNE du site, .fx-barre de commun.css (couleur data-fx-ton="vert" / "rouge" posée par ultimate-discords.js,
   mécanique Ultimate.filtres de commun.js). Rien à styler ici : même apparence et même comportement sur toutes les pages. */
/* Mots trouvés par la recherche */
.udisc mark { padding: 0 2px; border-radius: 1px; background: var(--amb-fond); color: var(--amb-txt); }
.udisc .udisc-pc mark { background: rgba(var(--pc-brun-rgb), .18); color: inherit; box-shadow: inset 0 -2px 0 rgba(var(--pc-brun-rgb), .55); }

/* Grille : rangées régulières et centrées (une rangée incomplète reste au milieu, jamais un trou à droite) */
.udisc .udisc-grille { --gx: clamp(20px, 2.4vw, 40px); --nb: 3; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; align-content: flex-start; gap: clamp(22px, 2.4vw, 40px) var(--gx); }
/* ---------- Une carte : logo rond, catégorie, nom, une ligne, bouton « Discord » en bas à droite ---------- */
.udisc .udisc-cel { position: relative; flex: 0 0 calc((100% - (var(--nb) - 1) * var(--gx)) / var(--nb)); min-width: 0; display: flex; }
.udisc .udisc-pc { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; container-type: inline-size; overflow: hidden; padding: 28px clamp(20px, 6.4cqi, 28px) 22px; border-radius: 5px;
  color: var(--pc-encre); background: var(--pc-papier); isolation: isolate; translate: 0 0; transition: translate .6s var(--ease), box-shadow .6s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 24px 40px -24px rgba(0, 0, 0, .9), 0 6px 12px -8px rgba(0, 0, 0, .45); }
/* Filet de couleur en haut (vert ou rouge) */
.udisc .udisc-pc::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3px; background: var(--pc-accent); pointer-events: none; }
/* Reflet qui balaie la carte au survol */
.udisc .udisc-pc::after { content: ""; position: absolute; z-index: 5; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .9) 48%, transparent 58%) 140% 0 / 260% 100% no-repeat; transition: background-position 1.1s var(--ease); }
.udisc.udisc-ill .udisc-pc::after { mix-blend-mode: overlay; }
.udisc .udisc-pc-id { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 18px; }
.udisc .udisc-pc-id .udisc-logo { --lg: clamp(56px, 16cqi, 66px); }
.udisc .udisc-pc-titres { min-width: 0; }
.udisc .udisc-pc-cat { display: block; font-size: clamp(17px, 4.8cqi, 21px); line-height: 1.1; color: var(--pc-brun); }
.udisc .udisc-pc-nom { display: block; margin: 3px 0 0; font-size: clamp(18px, min(7.6cqi, calc(58cqi / (var(--L, 8) * .74))), 30px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.03em;
  text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.udisc .udisc-pc-desc { position: relative; z-index: 2; margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--pc-texte); text-wrap: pretty; }
.udisc .udisc-pc-bas { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: auto; padding-top: 22px; }
.udisc .udisc-pc-info { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-brun); }
.udisc .udisc-pc .udisc-live { column-gap: 12px; }
.udisc .udisc-pc .udisc-live-sep { display: none; }
.udisc .udisc-pc-repos { min-width: 0; display: inline-flex; align-items: center; gap: 7px; opacity: .8; }
.udisc .udisc-pc-repos[hidden] { display: none; }
.udisc .udisc-pc-repos .bx { font-size: 16px; color: var(--discord); }
.udisc .udisc-pc-lien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Le petit bouton « Discord » : en bas à droite de chaque carte */
.udisc .udisc-pc-discord { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-left: auto; padding: 0 15px 0 12px; background: var(--discord); color: #fff;
  font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transform: skewX(-8deg); box-shadow: 4px 4px 0 rgba(var(--discord-rgb), .28); transition: transform .45s var(--ease), box-shadow .4s, gap .45s var(--ease), background .3s; -webkit-tap-highlight-color: transparent; }
.udisc .udisc-pc-discord > * { transform: skewX(8deg); }
.udisc .udisc-pc-discord i { font-size: 18px; }
.udisc .udisc-pc-discord .bx-right-arrow-alt { width: 0; margin-left: -8px; opacity: 0; overflow: hidden; transition: width .45s var(--ease), margin .45s var(--ease), opacity .3s; }
.udisc .udisc-pc-discord:hover { background: #4752e0; transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(var(--discord-rgb), .38); }
.udisc .udisc-pc-discord:hover .bx-right-arrow-alt { width: 18px; margin-left: 0; opacity: 1; }
.udisc .udisc-pc-discord:active { transform: skewX(-8deg) scale(.97); }
@media (hover: hover) {
  .udisc .udisc-cel:hover .udisc-pc { translate: 0 -6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 40px 56px -26px rgba(0, 0, 0, .92), 0 12px 18px -10px rgba(0, 0, 0, .5); }
  .udisc .udisc-cel:hover .udisc-pc::after { background-position: -40% 0; }
  .udisc .udisc-cel:hover .udisc-logo::before { rotate: 180deg; }
}

/* Passerelle vers l'autre page (Le Business ↔ Le Milieu) : bandeau photo, couleur de l'autre ambiance */
.udisc .udisc-pont { --p-rgb: 196, 52, 36; --p-acc: #e46a55; position: relative; isolation: isolate; display: flex; align-items: center; gap: 24px; min-height: 140px;
  margin-top: clamp(64px, 7vw, 110px); padding: 24px clamp(22px, 3vw, 44px) 24px clamp(30px, 3.4vw, 54px); overflow: hidden; border: 1px solid var(--verre-bord); border-radius: 4px;
  background: #0d0c0b; box-shadow: 0 40px 70px -40px #000; -webkit-tap-highlight-color: transparent; }
/* Depuis Le Milieu, la passerelle mène au légal : elle prend le vert du Business */
.udisc.udisc-ill .udisc-pont { --p-rgb: 62, 150, 108; --p-acc: #7fc3a0; }
.udisc .udisc-pont::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 4px; background: var(--p-acc); transition: width .5s var(--ease); }
.udisc .udisc-pont::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 12, 11, .97) 0%, rgba(13, 12, 11, .86) 42%, rgba(13, 12, 11, .38) 78%, rgba(var(--p-rgb), .22) 100%); }
.udisc .udisc-pont-img { position: absolute; inset: 0 0 0 36%; z-index: -2; background: var(--img) var(--pos) / var(--size) no-repeat; filter: saturate(.8) brightness(.6); transform: scale(1.03);
  -webkit-mask: linear-gradient(90deg, transparent, #000 32%); mask: linear-gradient(90deg, transparent, #000 32%); transition: transform 1.4s var(--ease), filter .6s; }
.udisc .udisc-pont-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.udisc .udisc-pont-k { font-size: 24px; line-height: 1.1; color: var(--p-acc); }
.udisc .udisc-pont-t { font-size: clamp(30px, 3.6vw, 54px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.udisc .udisc-pont-s { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 241, 234, .74); }
.udisc .udisc-pont-s::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: var(--p-acc); }
.udisc .udisc-pont-fl { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border: 1.5px solid rgba(var(--p-rgb), .55); border-radius: 50%; background: rgba(13, 12, 11, .4);
  color: var(--p-acc); font-size: 28px; transition: transform .6s var(--ease), background .4s, color .4s, border-color .4s; }
.udisc .udisc-pont:hover .udisc-pont-img { transform: scale(1.09); filter: saturate(1) brightness(.72); }
.udisc .udisc-pont:hover::before { width: 8px; }
.udisc .udisc-pont:hover .udisc-pont-fl { transform: translateX(6px); border-color: var(--p-acc); background: var(--p-acc); color: #0d0c0b; }

/* Aucun résultat */
.udisc .udisc-vide { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 10px; padding: 46px 24px; border: 2px dashed var(--line-2); border-radius: 4px; text-align: center; }
.udisc .udisc-vide[hidden] { display: none; }
.udisc .udisc-vide > i { font-size: 34px; color: var(--amb); }
.udisc .udisc-vide p { margin: 0; font-weight: 700; font-style: italic; color: var(--muted); }
.udisc .udisc-vide .btn { height: 46px; padding: 0 22px; font-size: 12.5px; }

/* ---------- Adaptation écrans ---------- */
@media (max-width: 1100px) {
  .udisc .udisc-grille { --nb: 2; }
}
/* Écran moyen : le titre au-dessus, la scène en dessous */
@media (max-width: 960px) {
  .udisc .udisc-hero-grille { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .udisc .udisc-scene { width: min(100%, 640px); margin-inline: auto; }
  .udisc .ph-desc { max-width: 600px; }
}
@media (max-width: 700px) {
  .udisc .udisc-retour { margin: -4px 0 6px; }
  /* Haut de page */
  .udisc .udisc-hero { padding-top: calc(var(--hd) + 14px); padding-bottom: 64px; }
  .udisc .ph-title { font-size: clamp(40px, 12vw, 62px); margin-bottom: 16px; }
  .udisc .udisc-sous { font-size: 12.5px; margin-bottom: 12px; }
  .udisc .ph-desc { font-size: 15.5px; line-height: 1.7; }
  .udisc .udisc-exemple { margin-top: 22px; }
  .udisc .udisc-hero-grille { gap: 34px; }
  .udisc .udisc-scene { padding-top: 12px; }
  .udisc .udisc-photo-cel { width: 92%; rotate: 1.6deg; }
  .udisc .udisc-photo-cel .udisc-tape { width: 84px; height: 26px; }
  .udisc .udisc-photo-cel .udisc-tape + .udisc-tape { width: 70px; }
  .udisc .udisc-photo { padding: 7px; }
  .udisc .udisc-carte-cel { width: calc(100% - 4px); margin: -20% 0 0 2px; }
  .udisc .udisc-carte { transform: perspective(1500px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(-1deg); }
  .udisc .udisc-c-in { padding: 8cqi 6.6cqi 6.4cqi; }
  .udisc .udisc-c-id .udisc-logo { --lg: clamp(64px, 20cqi, 88px); }
  .udisc .udisc-c-nom { font-size: clamp(22px, min(9.4cqi, calc(56cqi / (var(--L, 8) * .74))), 40px); }
  /* Liste */
  .udisc .udisc-h2 { font-size: clamp(30px, 9vw, 40px); margin-bottom: 14px; }
  /* Une carte par ligne */
  .udisc .udisc-grille { --nb: 1; gap: 18px; }
  .udisc .udisc-pc { padding: 24px 20px 20px; }
  .udisc .udisc-pc-desc { margin-top: 14px; }
  .udisc .udisc-pc-bas { padding-top: 18px; }
  /* Passerelle vers l'autre page */
  .udisc .udisc-pont { gap: 14px; min-height: 120px; margin-top: 52px; padding: 20px 16px 20px 24px; }
  .udisc .udisc-pont-img { left: 0; }
  .udisc .udisc-pont-k { font-size: 20px; }
  .udisc .udisc-pont-t { font-size: clamp(26px, 8.4vw, 34px); }
  .udisc .udisc-pont-s { font-size: 11px; letter-spacing: .08em; }
  .udisc .udisc-pont-s::before { width: 18px; }
  .udisc .udisc-pont-fl { width: 48px; height: 48px; font-size: 24px; }
}