/* personnes.css — les fiches des personnes du club, partout sur le site (23/10/2026).
   1. La fiche (« pop-up ») : les règles étaient dans palmares.html ; elles servent
      maintenant à toutes les pages, qui ouvrent la même fiche.
   2. Le nom cliquable et le médaillon qui apparaît au survol (personnes.js). */

/* ══ LA FICHE ══ (z-index 150 : la visionneuse d'images, à 200, passe au-dessus) */
.site-pop{position:fixed;inset:0;z-index:150;display:none;align-items:flex-start;
  justify-content:center;padding:4vh 16px;background:rgba(5,10,25,.86);overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
.site-pop.on{display:flex;}
.site-pop .bx{background:#132A63;border:1px solid #28417A;border-radius:18px;
  max-width:760px;width:100%;padding:26px 28px 24px;position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.4),0 30px 70px -20px rgba(0,0,0,.8);
  color:#EAF1FF;font-family:'Inter',system-ui,sans-serif;line-height:1.6;}
.site-pop .bx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  border-radius:18px 0 0 18px;background:#F2C41C;}
.site-pop .bx.argent::before{background:#C7D0E0;}
.site-pop .bx.bronze::before{background:#D08A45;}
.site-pop .x{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;
  border-radius:50%;background:#1C3A7E;color:#EAF1FF;font-size:1.45rem;line-height:.9;
  cursor:pointer;}
.site-pop .x:hover{background:#F2C41C;color:#0A1836;}
.site-pop .hd{display:flex;gap:13px;align-items:center;padding-right:42px;}
.site-pop .hd .ini{width:46px;height:46px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-weight:800;font-size:.9rem;color:#fff;
  background:linear-gradient(135deg,#2E7BFF,#7A5BFF);}
.site-pop .hd img.ini{object-fit:cover;border:2px solid #F2C41C;width:64px;height:64px;}
.site-pop .hd .md{font-size:1.7rem;line-height:1;flex:none;}
.site-pop h3{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.28rem;
  font-weight:860;letter-spacing:-.015em;line-height:1.16;margin:0;}
.site-pop .sous{font-size:.79rem;color:#8296C4;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin-top:3px;}
.site-pop .chapo{font-size:.97rem;color:#EAF1FF;margin-top:15px;line-height:1.62;}
.site-pop h4{font-family:'Space Grotesk',system-ui,sans-serif;font-size:.73rem;
  font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#F2C41C;
  margin:20px 0 8px;}
.site-pop ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.site-pop li{display:flex;gap:9px;font-size:.9rem;color:#B9C7E8;line-height:1.55;}
.site-pop li::before{content:"";width:6px;height:6px;border-radius:50%;background:#F2C41C;
  margin-top:7px;flex:none;}
.site-pop li b{color:#EAF1FF;font-weight:750;}
/* .resa n'est plus produit depuis le 10/09/2026 (PUBLIER_RESERVES = False) ;
   la règle reste, pour que le drapeau suffise si on republie ces blocs. */
.site-pop .resa{margin-top:20px;padding:13px 15px;background:#0E2154;border:1px solid #28417A;
  border-left:3px solid #8296C4;border-radius:11px;font-size:.85rem;color:#B9C7E8;
  line-height:1.58;}
.site-pop .resa b{color:#EAF1FF;}
.site-pop .pal-thumbs{margin-top:18px;}
.site-pop button.qn{font-family:inherit;font-size:inherit;font-weight:800;padding:0;
  background:none;border:0;border-bottom:1.5px dotted #F2C41C;color:#FFE47A;cursor:pointer;}
.site-pop button.qy{font-family:"SFMono-Regular",Consolas,monospace;font-size:.82rem;
  font-weight:700;padding:1px 8px;border-radius:999px;cursor:pointer;background:transparent;
  color:#FFE47A;border:1px solid rgba(242,196,28,.4);}
.site-pop button.qn:hover,.site-pop button.qy:hover{color:#F2C41C;}
@media (max-width:820px){
  .site-pop{padding:0;}
  .site-pop .bx{border-radius:0;min-height:100%;padding:22px 18px 30px;}
  .site-pop .bx::before{border-radius:0;}
}

/* La fiche ouverte hors de la page palmarès : un <dialog>, pour passer au-dessus de tout,
   y compris d'une autre fenêtre déjà ouverte (celle d'une pastille de l'expo). */
dialog.pers-dlg{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  color:inherit;}
dialog.pers-dlg::backdrop{background:transparent;}
.pers-dlg .pal-thumbs{display:flex;gap:8px;flex-wrap:wrap;}
.pers-dlg .pal-thumbs img{height:66px;width:92px;object-fit:cover;border-radius:9px;
  border:1px solid #28417A;background:#0E2154;cursor:zoom-in;}
/* « En photos » : les photos choisies pour la fiche */
.pers-galerie{display:flex;gap:8px;flex-wrap:wrap;}
.pers-galerie img{height:84px;width:auto;max-width:160px;object-fit:cover;border-radius:9px;
  border:1px solid #28417A;background:#0E2154;cursor:zoom-in;}
.pers-galerie img:hover{border-color:#F2C41C;}
.pers-lb.page{z-index:400;}
.pers-lb{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:24px;background:rgba(5,10,25,.94);cursor:zoom-out;}
.pers-lb img{max-width:96%;max-height:82vh;border-radius:8px;}
.pers-lb p{margin:0;color:#fff;font-family:'Inter',system-ui,sans-serif;font-size:1rem;
  text-align:center;max-width:min(90%,760px);}

/* ══ LE NOM CLIQUABLE ══ */
.pers{cursor:pointer;text-decoration:underline dotted;text-decoration-thickness:1px;
  text-underline-offset:3px;}
.pers:hover,.pers:focus-visible{text-decoration-style:solid;outline:none;}

/* ══ LE MÉDAILLON ══ (au survol, ou au toucher quand la personne n'a pas de fiche) */
.pers-medaillon{position:fixed;z-index:400;display:flex;align-items:center;gap:12px;
  max-width:min(320px,calc(100vw - 16px));padding:8px 16px 8px 8px;border-radius:44px;
  background:#132A63;border:1px solid #28417A;color:#EAF1FF;
  box-shadow:0 14px 34px rgba(0,0,0,.5);font-family:'Inter',system-ui,sans-serif;
  pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;}
.pers-medaillon.on{opacity:1;transform:none;}
.pers-medaillon .pm-img{width:72px;height:72px;border-radius:50%;flex:none;object-fit:cover;
  border:2px solid #F2C41C;display:grid;place-items:center;font-weight:800;font-size:1.05rem;
  color:#fff;background:linear-gradient(135deg,#2E7BFF,#7A5BFF);}
.pers-medaillon b{display:block;font-size:.95rem;line-height:1.25;}
.pers-medaillon small{display:block;font-size:.74rem;line-height:1.35;color:#B9C7E8;margin-top:2px;}
.pers-medaillon em{display:block;font-style:normal;font-size:.72rem;color:#F2C41C;margin-top:4px;}
@media (prefers-reduced-motion:reduce){.pers-medaillon{transition:none;transform:none;}}