/* ============================================================
   LISTES · PISTES · SHORTLIST · ÉQUIPE AGENT — VISUELS AU CHOIX
   ============================================================
   Le terrain (Compo Shortlist de l'appli) et le carrousel par poste
   (js/recrut-visuels.js). */

.rv-vues { display: flex; align-items: center; }

/* ---------------- Le terrain ---------------- */
.rv-terrain {
  position: relative; display: flex; flex-direction: column; gap: 22px; padding: 34px 26px; border-radius: 26px; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 60px, transparent 60px 120px),
    radial-gradient(130% 90% at 50% 0%, #12703a 0%, #0c5229 55%, #073219 100%);
  border: 1px solid rgba(132, 230, 160, .2); box-shadow: inset 0 0 140px rgba(0, 0, 0, .5), var(--ombre);
}
.rv-terrain::before { content: ""; position: absolute; inset: 14px; border: 2px solid rgba(255, 255, 255, .17); border-radius: 14px; pointer-events: none; }
.rv-trait { position: absolute; left: 14px; right: 14px; height: 0; border-top: 2px solid rgba(255, 255, 255, .13); pointer-events: none; }
.rv-t22h { top: 26%; border-top-style: dashed; }
.rv-t50 { top: 50%; border-top-width: 3px; border-color: rgba(255, 255, 255, .2); }
.rv-t22b { top: 74%; border-top-style: dashed; }
.rv-rangee { position: relative; z-index: 1; display: flex; justify-content: center; gap: 18px; }
.rv-rangee.rv-n4 { justify-content: space-between; }
.rv-rangee.rv-n2 { gap: 9%; }
.rv-rangee.rv-n3 { gap: 5%; }
.rv-case {
  flex: 0 1 290px; min-width: 0; display: flex; flex-direction: column; padding: 11px 11px 9px; border-radius: 16px;
  background: rgba(3, 16, 9, .55); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rv-n4 .rv-case { flex-basis: 250px; }
.rv-case.est-vide { opacity: .55; }
.rv-case-tete { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rv-case-tete b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; color: #0b3d1e; font: 600 16px var(--titre); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); }
.rv-case-tete span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.rv-case-tete em { display: block; font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .5); }
.rv-case-liste { display: flex; flex-direction: column; gap: 6px; max-height: 452px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }

/* Un joueur : la couleur de fin de contrat sur le bord gauche. */
.rv-pion {
  --c: 111, 125, 163; display: flex; gap: 9px; padding: 7px 9px 7px 7px; border-radius: 11px; cursor: pointer;
  background: rgba(4, 12, 30, .78); border: 1px solid rgba(255, 255, 255, .07); border-left: 4px solid rgb(var(--c));
  transition: transform .3s var(--ressort), background .2s, border-color .2s;
}
.rv-pion:hover, .rv-pion:focus-visible { transform: translate3d(0, -2px, 0); background: rgba(14, 30, 72, .95); border-color: rgba(143, 179, 255, .45); border-left-color: rgb(var(--c)); outline: 0; }
.rv-pion.est-rouge { --c: 224, 49, 58; }
.rv-pion.est-orange { --c: 255, 159, 67; }
.rv-pion.est-vert { --c: 54, 210, 122; }
.rv-pion-av { flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .07); font: 600 13px var(--titre); color: var(--texte-3); }
.rv-pion-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.rv-pion-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-pion-l1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-pion-l1 b { font-size: 12.5px; font-weight: 800; line-height: 1.15; }
.rv-an { padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 800; color: rgb(var(--c)); background: rgba(var(--c), .14); }
.rv-jiff { padding: 0 6px; border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #ff8d93; background: rgba(224, 49, 58, .14); }
.rv-jiff.est-jiff { color: #6ff0a6; background: rgba(54, 210, 122, .14); }
.rv-pion small { display: block; font-size: 11px; line-height: 1.3; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; }
.rv-pion-pied { display: flex !important; gap: 10px; }
.rv-pion-pied span { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-2); }
.rv-pion-pied svg { width: 11px; height: 11px; }
.rv-pion .etoiles svg { margin-right: -1px; }

.rv-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 4px 0; font-size: 12px; color: var(--texte-3); }
.rv-legende span { display: inline-flex; align-items: center; gap: 7px; }
.rv-legende span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: rgb(111, 125, 163); }
.rv-legende .est-rouge::before { background: var(--rouge); }
.rv-legende .est-orange::before { background: var(--orange); }
.rv-legende .est-vert::before { background: var(--vert); }
.rv-sans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }

/* ---------------- Le carrousel par poste ---------------- */
.rv-bloc { margin-bottom: 8px; }
.rv-cf {
  position: relative; margin: 0 0 26px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(90% 120% at 50% 0%, rgba(47, 107, 255, .22), transparent 60%), linear-gradient(180deg, #050f26 0%, #071a45 70%, #0a2a6b 100%);
  border: 1px solid var(--ligne); box-shadow: var(--ombre);
}
.rv-cf-scene {
  position: relative; height: 380px; perspective: 1300px; perspective-origin: 50% 42%; touch-action: pan-y; cursor: grab; outline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  user-select: none; -webkit-user-select: none;
}
.rv-cf-scene > * {
  position: absolute; left: 50%; top: 50%; margin: 0; transform-style: preserve-3d;
  transition: transform .6s var(--ressort), opacity .45s, box-shadow .4s, border-color .4s !important;
}
.rv-cf-scene > .carte { width: 214px; }
.rv-cf-scene > .carte img { -webkit-user-drag: none; pointer-events: none; }
.rv-cf-scene > .carte.est-centre { border-color: rgba(245, 196, 81, .6); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(245, 196, 81, .35), 0 0 60px -10px rgba(245, 196, 81, .35); }
.rv-cf-nav {
  position: absolute; z-index: 200; top: 50%; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(4, 8, 22, .75); border: 1px solid var(--ligne-2); color: var(--texte); transition: background .2s, opacity .2s;
}
.rv-cf-nav:hover:not(:disabled) { background: var(--bleu); }
.rv-cf-nav:disabled { opacity: .25; cursor: default; }
.rv-cf-nav svg { width: 20px; height: 20px; }
.rv-cf-nav.est-prec { left: 14px; }
.rv-cf-nav.est-suiv { right: 14px; }
.rv-cf-compte { position: absolute; z-index: 200; right: 20px; bottom: 12px; font-size: 12px; font-weight: 800; color: var(--texte-3); letter-spacing: .06em; }

/* ---------------- Équipe agent ---------------- */
.ag-entete { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 20px; }
.ag-entete .liste-deroulante select { min-width: 260px; }
.ag-titre { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.ag-titre h2 { margin: 0; font: 600 30px var(--titre); text-transform: uppercase; letter-spacing: .02em; }
.ag-titre span { color: var(--texte-3); font-size: 13px; }
.agent.est-cliquable { cursor: pointer; transition: border-color .2s, transform .3s var(--ressort); }
.agent.est-cliquable:hover { border-color: rgba(143, 179, 255, .45); transform: translate3d(0, -2px, 0); }

@media (max-width: 1100px) {
  .rv-rangee { flex-wrap: wrap; justify-content: center !important; gap: 14px !important; }
  .rv-case { flex: 1 1 260px; max-width: 360px; }
}
@media (max-width: 640px) {
  .rv-terrain { padding: 22px 14px; }
  .rv-case { flex-basis: 100%; max-width: none; }
  .rv-cf-scene { height: 330px; }
  .rv-cf-scene > .carte { width: 170px; }
  .rv-cf-scene > .mt-cf-carte { width: 112px; }
  .rv-cf-nav { width: 38px; height: 38px; }
}