/* Toutes les popups du site sur le modèle de « Rejoindre l'équipe Wappizy » (form.css, .wf-panel) :
   panneau collé à droite, marges de 12 px, verre sombre ou blanc en clair, voile léger, entrée par la droite.
   Concerne : choix de contact (.ctx-), fiche d'un membre (.eqm-).
   « Que dirait l'équipe de votre projet ? » garde sa grande fenêtre centrée ; le quiz et la plongée Factory restent en plein écran. Chargée en dernier. */

/* Conteneurs : le panneau se cale à droite */
.ctx-modal,.eqm{display:flex!important;justify-content:flex-end!important;align-items:stretch!important;place-items:initial!important;padding:12px!important}

.ctx-modal[hidden],.eqm[hidden]{display:none!important}

/* Voiles : ceux du formulaire de recrutement */
.ctx-mbg,.eqm-bg{background:rgba(5,6,10,.5)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}
[data-theme="light"] .ctx-mbg,[data-theme="light"] .eqm-bg{background:rgba(20,20,30,.28)!important}

/* Panneaux */
.ctx-mbox,.eqm-box{position:relative;width:min(520px,calc(100vw - 24px))!important;height:auto!important;max-height:none!important;margin:0!important;
  overflow:auto;overscroll-behavior:contain;border-radius:24px!important;color:var(--ink,#EDEEF3);
  background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,#BBA8F8 16%,transparent),transparent 60%),radial-gradient(80% 50% at 0% 100%,color-mix(in srgb,#9BE8D4 12%,transparent),transparent 60%),color-mix(in srgb,var(--bg,#07080B) 94%,transparent)!important;
  border:1px solid var(--glass-border,rgba(255,255,255,.09))!important;box-shadow:0 40px 90px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)!important;
  transform:translateX(24px)!important;translate:none!important;scale:none!important;opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s!important}
.ctx-mbox,.eqm-box{backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2)}
.ctx-modal.in .ctx-mbox,.eqm.in .eqm-box{transform:none!important;opacity:1}
[data-theme="light"] .ctx-mbox,[data-theme="light"] .eqm-box{
  background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,#BBA8F8 20%,transparent),transparent 60%),#fff!important;color:#0E1016;
  border-color:rgba(14,16,22,.08)!important;box-shadow:0 40px 90px -30px rgba(14,16,22,.3)!important}
.ctx-mbox::before{display:none!important}

/* Croix : la croix ronde du formulaire */
.ctx-mx,.eqm-x{width:36px!important;height:36px!important;border-radius:50%!important;display:grid!important;place-items:center;font-size:18px!important;line-height:1;cursor:pointer;
  color:var(--ink-2,#A3A7B5)!important;background:var(--glass-in,rgba(255,255,255,.03))!important;border:1px solid var(--glass-line,rgba(255,255,255,.07))!important;box-shadow:none!important;transition:color .2s,border-color .2s}
.ctx-mx:hover,.eqm-x:hover{color:var(--ink,#fff)!important;border-color:var(--glass-border,rgba(255,255,255,.15))!important}
[data-theme="light"] .ctx-mx,[data-theme="light"] .eqm-x{background:#F6F6F9!important;border-color:rgba(14,16,22,.1)!important;color:#4B5060!important}

/* Mobile : plein écran, comme le formulaire */
@media (max-width:640px){
  .ctx-modal,.eqm{padding:0!important}
  .ctx-mbox,.eqm-box{width:100%!important;border-radius:0!important}
}
@media (prefers-reduced-motion:reduce){.ctx-mbox,.eqm-box{transition:none!important}}

/* Fiche d'un membre : le panneau est haut, on cale en bas le reste de l'équipe et un contact direct */
.eqm-box{display:flex!important;flex-direction:column;padding-bottom:24px!important}
.eqm-c{flex:1;display:flex;flex-direction:column;gap:0}
.eqm-c > .eqm-foot{margin-top:auto!important}
.eqm-c > :nth-last-child(2){margin-bottom:28px}
.eqm-foot{margin-top:auto!important;padding-top:22px;border-top:1px solid var(--glass-line,rgba(255,255,255,.07))}
.eqm-team{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:12px}
.eqm-mate{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 6px;border:0;border-radius:14px;background:transparent;color:var(--ink-2);cursor:pointer;font:inherit;transition:background .2s,transform .25s}
.eqm-mate:hover,.eqm-mate:focus-visible{background:color-mix(in srgb,var(--mc) 14%,transparent);transform:translateY(-2px)}
.eqm-mh{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--mc) 22%,#fff),color-mix(in srgb,var(--mc) 65%,#fff))}
.eqm-mh .t3d{width:120%;translate:0 10%}
.eqm-mate small{font-size:12px;line-height:1}
.eqm-cta{width:100%;justify-content:center;margin-top:18px}
[data-theme="light"] .eqm-foot{border-top-color:rgba(14,16,22,.08)}
@media (max-width:420px){.eqm-team{grid-template-columns:repeat(3,1fr)}}

/* Fiche d'un membre : le bandeau de l'avatar prend plus de hauteur (le panneau est pleine hauteur) */
.eqm-hero{height:clamp(300px,42vh,460px)!important;border-radius:24px 24px 0 0!important}
.eqm-av{width:clamp(230px,30vh,310px)!important;translate:0 6%!important}
.eqm-hero::before{width:clamp(320px,44vh,440px)!important}
.eqm-hero .eqm-nav,.eqm-box > .eqm-nav{top:calc(clamp(300px,42vh,460px) - 70px)!important}
@media (max-width:640px){.eqm-hero{height:clamp(240px,36vh,340px)!important;border-radius:0!important}.eqm-av{width:clamp(190px,26vh,250px)!important}}

/* Fiche d'un membre : fond de l'avatar du clair au plus clair (plus de bords sombres) */
.eqm-hero{background:
  linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px) 0 0/16px 16px,
  radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c) 22%,#fff) 0%,color-mix(in srgb,var(--c) 48%,#fff) 55%,color-mix(in srgb,var(--c) 70%,#fff) 100%)!important}