/* Onglet ENTREPRISES. Valide par Fabrice le 30 octobre 2026, puis simplifie
   le meme jour: un titre, une ligne de filtres, les cartes.

   Les cartes de club facon carte de joueur: tete en metal, panneau sombre
   dessous. Le metal dit d'ou viennent les leads: or = leads entrants,
   argent = mixte, bronze = prospection a froid, carbone = a confirmer.
   Un clic ouvre la fiche dans un panneau lateral.

   Tout est prefixe « en- »: base.css et les autres feuilles ont deja des
   .chiffres, .stats, .pastille et .sec, et une collision se voit seulement
   sur la page qu'on ne regarde pas. */

.en, dialog.en-fiche {
  --en-encre: #1E1400;
  --en-voile: rgba(5,3,12,.74);
  /* les quatre metaux : degrade, encre, lueur, pastille */
  --en-or-m: linear-gradient(158deg, #FBEFC6 0%, var(--or1) 14%, var(--or2) 34%, var(--or3) 62%, var(--or4) 100%);
  --en-or-e: #2E2208; --en-or-l: rgba(255,200,87,.38); --en-or-p: var(--gold);
  --en-ar-m: linear-gradient(158deg, #FFFFFF 0%, #E9EDF4 16%, #C3CAD6 38%, #8D96A7 66%, #4C5464 100%);
  --en-ar-e: #1A2030; --en-ar-l: rgba(205,214,230,.32); --en-ar-p: #D5DCE8;
  --en-br-m: linear-gradient(158deg, #FBE0C6 0%, #EDB98C 16%, #C98B5A 38%, #8E5530 66%, #4A2914 100%);
  --en-br-e: #2B160A; --en-br-l: rgba(221,146,90,.34); --en-br-p: #E59A62;
  --en-ca-m: linear-gradient(158deg, #6E5FB0 0%, #4B3D8A 22%, #33296A 50%, #221A49 76%, #140E2E 100%);
  --en-ca-e: #FFFFFF; --en-ca-l: rgba(142,123,255,.32); --en-ca-p: #A99BFF;
}
.en-or { --m: var(--en-or-m); --e: var(--en-or-e); --l: var(--en-or-l); --p: var(--en-or-p); }
.en-ar { --m: var(--en-ar-m); --e: var(--en-ar-e); --l: var(--en-ar-l); --p: var(--en-ar-p); }
.en-br { --m: var(--en-br-m); --e: var(--en-br-e); --l: var(--en-br-l); --p: var(--en-br-p); }
.en-ca { --m: var(--en-ca-m); --e: var(--en-ca-e); --l: var(--en-ca-l); --p: var(--en-ca-p); }

.en { padding-top: 18px; padding-bottom: 20px; }
.en svg.en-i, dialog.en-fiche svg.en-i { width: 16px; height: 16px; flex: none; display: block; }
.en-num { font-variant-numeric: tabular-nums; }

/* ---------- l'apercu de l'equipe ---------- */
.en-apercu {
  margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  border: 1px dashed var(--line2); border-radius: 10px; padding: 9px 14px;
  font-size: 13px; color: var(--lav); background: rgba(198,184,232,.05);
}
.en-apercu b { font: 800 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ---------- le titre ---------- */
.en-stade {
  position: relative; overflow: hidden; border-radius: 16px;
  padding-block: 24px 22px; padding-inline: clamp(18px, 4vw, 36px);
  background:
    radial-gradient(600px 220px at 50% -60%, rgba(255,226,160,.18), transparent 70%),
    radial-gradient(420px 200px at 0% 130%, rgba(91,36,196,.42), transparent 70%),
    linear-gradient(180deg, #1E1542 0%, #120C29 100%);
  border: 1px solid var(--line2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.en-terrain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.en-chrome {
  position: relative; margin: 0; font: 900 clamp(34px, 5.4vw, 58px)/.92 var(--cond); text-transform: uppercase;
  background: linear-gradient(176deg, #FFFFFF 0%, #F1ECFF 34%, #B9B0DA 50%, #FFFFFF 52%, #D9D3F0 74%, #8F86B5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.en-chrome em {
  font-style: normal;
  background: linear-gradient(176deg, #FFF6DA 0%, #FFE3A3 30%, #D8BC77 49%, #FFF1C9 51%, #C9A45A 76%, #8A6B2C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.en-stade p { position: relative; margin: 10px 0 0; color: var(--txt2); font-size: 16px; line-height: 1.45; }

/* ---------- une seule ligne de filtres ---------- */
.en-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 20px; }
.en-cherche { position: relative; flex: 0 1 260px; min-width: 0; }
.en-cherche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--txt3); }
.en-cherche input {
  width: 100%; height: 40px; border-radius: 9px; border: 1px solid var(--line2); background: var(--surf);
  color: var(--txt); padding: 0 12px 0 36px; font: 14px var(--ui);
}
.en-cherche input::placeholder { color: var(--txt3); }
.en-puces { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
.en-puce {
  height: 38px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--line2); background: var(--surf);
  color: var(--txt2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px/1 var(--semi); letter-spacing: .02em;
}
.en-puce i { width: 10px; height: 10px; border-radius: 2px; background: var(--m); transform: rotate(45deg); flex: none; }
.en-puce em { font-style: normal; color: var(--txt3); font-weight: 600; }
.en-puce:hover { border-color: var(--txt3); }
.en-puce[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--en-encre); }
.en-puce[aria-pressed="true"] em { color: var(--en-encre); opacity: .7; }
.en-seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 9px; overflow: hidden; background: var(--surf); flex: none; margin-left: auto; }
.en-seg button {
  width: 42px; height: 38px; border: 0; background: none; color: var(--txt3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-left: 1px solid var(--line);
}
.en-seg button:first-child { border-left: 0; }
.en-seg button[aria-pressed="true"] { background: var(--gold); color: var(--en-encre); }
.en-seg button:hover:not([aria-pressed="true"]) { background: var(--surf2); color: var(--txt2); }
/* Pas la place pour une seule ligne: la recherche et l'affichage en haut, les leads dessous. */
@media (max-width: 1100px) { .en-puces { order: 3; flex-basis: 100%; } }
@media (max-width: 640px) {
  .en-cherche { flex: 1 1 0; }
  /* Sur cell, les leads sur une seule ligne qu'on fait glisser, pas trois lignes de boutons. */
  .en-puces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding-inline: 2px; }
  .en-puces::-webkit-scrollbar { display: none; }
  .en-puce { flex: none; }
}

/* ---------- la carte de club ---------- */
.en-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px 18px; }
@media (max-width: 400px) { .en-grille { grid-template-columns: minmax(0,1fr); } }
.en-club {
  display: block; cursor: pointer; min-width: 0; transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));
}
.en-club:hover, .en-club:focus-within { transform: translateY(-5px); filter: drop-shadow(0 18px 30px var(--l)) drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
/* le cadre en metal : 2 px de metal autour de tout, coins coupes facon carte de joueur */
.en-cadre {
  --c: 16px;
  padding: 2px; background: var(--m); height: 100%;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%, 0 var(--c));
  display: flex; flex-direction: column;
}
.en-tete {
  position: relative; overflow: hidden; color: var(--e); padding: 14px 15px 12px;
  clip-path: polygon(calc(var(--c) - 1px) 0, calc(100% - var(--c) + 1px) 0, 100% calc(var(--c) - 1px), 100% 100%, 0 100%, 0 calc(var(--c) - 1px));
  background:
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.26) 38% 50%, transparent 50%),
    linear-gradient(62deg, transparent 52%, rgba(255,255,255,.12) 52% 62%, transparent 62%),
    var(--m);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.25);
}
/* le reflet qui traverse la carte au survol */
.en-tete::after {
  content: ""; position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform: translateX(-70%); transition: transform .9s ease;
}
.en-club:hover .en-tete::after, .en-club:focus-within .en-tete::after { transform: translateX(70%); }
.en-thaut { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 10px; align-items: start; position: relative; z-index: 1; }
.en-pos { display: grid; gap: 2px; justify-items: center; padding-top: 2px; }
.en-pos b { font: 900 26px/.9 var(--cond); letter-spacing: .01em; }
.en-pos b + b { font-size: 15px; opacity: .8; }
.en-blason { display: flex; justify-content: flex-end; min-width: 0; }
.en-plaque {
  height: 58px; min-width: 58px; max-width: min(190px, 100%); flex: 0 1 auto; border-radius: 11px; background: #F4F1FB;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 9px 12px;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35);
}
.en-plaque img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; display: block; }
.en-plaque.en-mono { width: 58px; padding: 0; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  font: 900 22px/1 var(--cond); color: inherit; letter-spacing: .02em; }
.en-nom {
  position: relative; z-index: 1; margin-top: 12px; padding: 6px 0 5px; text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--e) 35%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--e) 35%, transparent);
  font: 900 23px/1.02 var(--cond); text-transform: uppercase; letter-spacing: .015em; overflow-wrap: anywhere;
}
.en-sec { position: relative; z-index: 1; margin-top: 6px; text-align: center; font: 700 12px/1.25 var(--semi); letter-spacing: .03em; opacity: .82; }

.en-panneau {
  flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: linear-gradient(180deg, #19122F 0%, #120C24 100%);
}
.en-accroche { margin: 0; font-size: 14px; line-height: 1.45; color: var(--txt2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.en-accroche.en-prep { color: var(--txt3); font-style: italic; }
.en-postes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.en-postes li { display: grid; gap: 3px; padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.en-postes li b { font: 700 14.5px/1.15 var(--semi); display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.en-postes li em { font-style: normal; font-size: 12.5px; color: var(--gold1); font-weight: 600; overflow-wrap: anywhere; }
.en-format { font-size: .82em; font-weight: 600; color: var(--lav); letter-spacing: .02em; }
.en-lead { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 800 10.5px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--p); }
.en-lead::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--m); transform: rotate(45deg); box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
/* « Site web » et « Voir la fiche » sur la meme ligne, toujours en bas de la carte. */
.en-pied { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.en-site {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line2); color: var(--txt2); text-decoration: none; font: 700 13px/1 var(--semi); white-space: nowrap;
}
.en-site:hover { border-color: var(--gold); color: var(--gold); }
.en-tbl .en-site { height: 30px; padding: 0 10px; font-size: 12.5px; }
.en-voir {
  margin-left: auto; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px;
  font: 800 13.5px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--en-encre);
  background: linear-gradient(180deg, #FFE08F 0%, #FFC857 55%, #E3A93A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px -4px rgba(255,200,87,.6);
}
.en-vide { padding: 40px 20px; text-align: center; color: var(--txt3); border: 1px dashed var(--line2); border-radius: 12px; }
.en-suite { margin-top: 26px; text-align: center; color: var(--txt3); font-size: 13.5px; }

/* ---------- tableau ---------- */
.en-tbl { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; background: var(--surf); }
.en-tbl table { width: 100%; border-collapse: collapse; min-width: 760px; }
.en-tbl thead th { text-align: left; padding: 0; background: var(--surf2); border-bottom: 1px solid var(--line2); }
.en-tbl thead button {
  width: 100%; text-align: left; background: none; border: 0; color: var(--txt3); cursor: pointer;
  padding: 11px 14px; font: 800 11.5px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; gap: 6px; align-items: center;
}
.en-tbl thead button[data-actif] { color: var(--gold); }
.en-tbl thead button svg.en-i { width: 10px; height: 10px; }
.en-tbl tbody tr { border-top: 1px solid var(--line); cursor: pointer; }
.en-tbl tbody tr:hover { background: rgba(255,200,87,.05); }
.en-tbl tbody tr:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.en-tbl td { padding: 10px 14px; font-size: 13.5px; color: var(--txt2); vertical-align: middle; }
.en-tbl td.en-tnom { display: flex; align-items: center; gap: 11px; color: var(--txt); font-weight: 700; min-width: 230px; }
.en-barre { width: 4px; height: 34px; border-radius: 2px; background: var(--m); flex: none; }
.en-tbl td.en-tnom .en-plaque { height: 34px; min-width: 34px; max-width: 96px; border-radius: 7px; padding: 4px 7px; box-shadow: none; }
.en-tbl td.en-tnom .en-plaque img { max-height: 24px; }
.en-tbl td.en-tnom .en-plaque.en-mono { width: 34px; padding: 0; font-size: 14px; color: var(--gold); background: var(--surf2); }
.en-p { display: flex; gap: 8px; align-items: center; line-height: 1.35; padding: 2px 0; }
.en-p.en-r { color: var(--gold1); font-weight: 600; }

/* ---------- la fiche ----------
   dossier.css pose « dialog » a 560 px, fond transparent: le selecteur
   dialog.en-fiche passe devant. */
/* Au milieu de l'ecran (Fabrice, 30 oct. 2026), plus en panneau sur le cote. */
dialog.en-fiche {
  padding: 0; margin: auto; width: min(660px, calc(100% - 32px)); max-width: none; height: auto; max-height: min(88vh, 920px);
  background: var(--bg); color: var(--txt); border: 1px solid var(--line2); border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85);
}
dialog.en-fiche::backdrop { background: var(--en-voile); backdrop-filter: blur(3px); }
.en-fcorps { max-height: min(88vh, 920px); overflow-y: auto; display: flex; flex-direction: column; }
/* Sans ceci, l'entete en metal se faisait ecraser par le defilement. */
.en-fcorps > * { flex-shrink: 0; }
.en-ftete {
  position: relative; overflow: hidden; color: var(--e);
  padding-block: 22px 18px;
  padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px));
  background:
    linear-gradient(118deg, transparent 40%, rgba(255,255,255,.24) 40% 52%, transparent 52%),
    var(--m);
  display: grid; gap: 14px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.3);
}
.en-fermer {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(0,0,0,.25); background: rgba(0,0,0,.18);
  color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.en-fermer:hover { background: rgba(0,0,0,.3); }
.en-fid { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center; padding-right: 44px; min-width: 0; }
.en-fid .en-plaque { height: 76px; max-width: 200px; border-radius: 13px; padding: 12px 16px; }
.en-fid .en-plaque img { max-height: 52px; }
.en-fid .en-plaque.en-mono { width: 76px; font-size: 30px; }
.en-fid h2 { margin: 0; font: 900 32px/.98 var(--cond); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.en-fsec { margin-top: 6px; font: 700 13.5px/1.3 var(--semi); opacity: .85; }
@media (max-width: 520px) { .en-fid { grid-template-columns: minmax(0,1fr); } }
.en-fmeta { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 600 13px/1.3 var(--ui); }
.en-fmeta span, .en-fmeta a { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.en-fmeta svg.en-i { width: 15px; height: 15px; opacity: .8; }
.en-fmeta a { text-decoration: underline; text-underline-offset: 3px; }
.en-fbloc {
  padding-block: 20px; display: grid; gap: 12px;
  padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line);
}
.en-fbloc h3 { margin: 0; font: 800 13px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--gold1); }
.en-fbloc p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--txt2); max-width: 64ch; }
.en-fbloc p.en-prep { color: var(--txt3); font-style: italic; }
.en-poste { border-radius: 12px; overflow: hidden; background: var(--surf); border: 1px solid var(--line2); }
.en-ptete { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surf2); border-bottom: 1px solid var(--line); }
.en-code {
  height: 38px; width: 46px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 7px;
  font: 900 16px/1 var(--cond); letter-spacing: .04em; color: var(--e); background: var(--m);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.en-ptete b { font: 800 20px/1.05 var(--cond); letter-spacing: .03em; text-transform: uppercase; }
.en-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.en-stat { background: var(--surf); padding: 10px 14px; display: grid; gap: 4px; min-width: 0; }
.en-stat.en-large { grid-column: 1 / -1; }
.en-stat > span { font: 800 10.5px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--txt3); }
.en-stat b { font: 800 17px/1.2 var(--cond); letter-spacing: .02em; color: var(--txt); overflow-wrap: anywhere; }
.en-stat b.en-montant { color: var(--gold1); }
.en-stat b.en-attente { color: var(--txt3); font-weight: 700; }
.en-stat .en-lead { font-size: 13px; }
.en-pcorps { padding: 12px 14px 14px; display: grid; gap: 10px; }
.en-pcorps:empty { display: none; }
.en-ligne { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 10px; font-size: 14px; line-height: 1.5; }
.en-ligne .en-k { font: 800 11px/1.6 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--txt3); }
.en-ligne .en-v { color: var(--txt2); }
@media (max-width: 480px) { .en-ligne { grid-template-columns: minmax(0,1fr); gap: 2px; } }
.en-fpied {
  margin-top: auto; position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(10,7,20,.7), var(--bg) 30%);
  padding-block: 16px;
  padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--line); display: grid; gap: 9px;
}
.en-postuler {
  height: 48px; border-radius: 10px; border: 0; color: var(--en-encre);
  background: linear-gradient(180deg, #FFE08F 0%, #FFC857 55%, #E3A93A 100%);
  font: 900 18px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; cursor: not-allowed; opacity: .55;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.en-fpied p { margin: 0; font-size: 12.5px; color: var(--txt3); line-height: 1.45; display: flex; gap: 8px; align-items: center; }
.en-fpied p svg.en-i { color: var(--lav); }
.en-reseaux { display: flex; gap: 8px; flex-wrap: wrap; }
.en-reseaux a {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--line2); color: var(--txt2); text-decoration: none; font: 700 13px/1 var(--semi);
}
.en-reseaux a:hover { border-color: var(--gold); color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .en *, .en *::after, dialog.en-fiche * { transition: none !important; } }