@charset "utf-8";
/* ─── Essai design du 25/09 : carte profil « verre » (Romain) ───
   Inspirée du composant GlassmorphismProfileCard, en CSS pur et aux couleurs Bulldozer : statut qui pulse en haut,
   grande photo, nom et poste centrés, halo citron sous la carte. Pendant la recherche du profil, la photo, le nom
   et le poste restent en blanc animé (plus de fenêtre de chargement par-dessus).
   Pour revenir en arrière : retirer glasscard.css et glasscard.js de index.html (branche essai-design). */
.s2-card.gc{position:relative;overflow:visible;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(14,14,14,.12);border-radius:20px;
  box-shadow:0 18px 40px -18px rgba(14,14,14,.28)}
.s2-card.gc>.s2-scrim{display:none}
.gc-status{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.02em}
.gc-status span{display:inline-flex;align-items:center;gap:8px}
.gc-dot{width:9px;height:9px;border-radius:50%;background:var(--lime-dark);box-shadow:0 0 0 0 rgba(153,178,0,.5)}
.gc-loading .gc-dot{background:var(--lime);animation:gc-ping 1.4s ease-out infinite}
.gc-found .gc-dot{background:var(--lime-dark)}
.gc-empty .gc-dot{background:var(--grey-2)}
@keyframes gc-ping{0%{box-shadow:0 0 0 0 rgba(221,255,86,.9)}100%{box-shadow:0 0 0 10px rgba(221,255,86,0)}}
.s2-card.gc .s2-phead{flex-direction:column;align-items:center;text-align:center;gap:14px}
.s2-card.gc .s2-phead .s2-id{align-items:center}
.s2-card.gc .s2-avatar-big{width:168px;height:168px;border-radius:20px;box-shadow:0 0 0 3px var(--lime),0 0 0 6px rgba(221,255,86,.35),0 10px 24px -12px rgba(14,14,14,.35)}
.s2-card.gc .s2-avatar-big .mono{font-size:44px}
.s2-card.gc .s2-logo.s2-avatar-big img{border-radius:20px}
.s2-card.gc .s2-pfull{font-size:30px}
.s2-card.gc .s2-prole{font-size:13px}
/* Blanc animé pendant la recherche */
.gc-loading .s2-avatar-big:not(.has-img),.gc-loading .s2-prole{color:transparent!important;
  background:linear-gradient(100deg,#eeeeee 20%,#f9f9f9 40%,#eeeeee 60%)!important;background-size:200% 100%!important;animation:gc-shimmer 1.3s linear infinite}
.gc-loading .s2-avatar-big:not(.has-img) .mono{opacity:0}
.gc-loading .s2-prole{border-radius:6px;min-width:140px}
@keyframes gc-shimmer{from{background-position:120% 0}to{background-position:-80% 0}}
/* 28/09 (Romain, Claap avec Enguerrand) : le halo citron sous la carte (« Déjà pré-rempli pour vous ») est retiré. */
@media (prefers-reduced-motion:reduce){.gc-loading .gc-dot,.gc-loading .s2-avatar-big,.gc-loading .s2-prole{animation:none}}
@media (max-width:600px){.s2-card.gc .s2-avatar-big{width:132px;height:132px}.s2-card.gc .s2-pfull{font-size:26px}}
/* 29/09 (test iPhone de Romain) : sur mobile, la recherche repart quand on complète son nom, plus bas dans la carte et clavier
   ouvert ; la ligne « Recherche de votre profil… » restait au-dessus de l'écran pendant les 2 à 4 s de la recherche. Tant que la
   recherche tourne, elle reste collée en haut de l'écran, dans les limites de la carte. Au repos, rien ne bouge (marges compensées). */
@media (max-width:959px){.s2-card.gc.gc-loading>.gc-status{position:-webkit-sticky;position:sticky;top:calc(8px + env(safe-area-inset-top,0px));z-index:5;margin:-6px -8px;padding:6px 8px;border-radius:10px;background:#fff}}
.s2-card.gc .s2-avatar-big.has-img{background:transparent}
/* 25/09 (Romain) : le bouton de validation à droite, sous la carte ; le lien retour reste à gauche. */
.s2-done > .btn-lime:not(.btn-full){align-self:flex-end}   /* les deux étapes, entreprise et profil (25/09) ; sur mobile le bouton reste pleine largeur (26/09) */
/* 25/09 (Romain) : le logo du cas en haut du panneau, qui change en fondu avec le cas ; plus dans la photo. */
.s2-panel .panel-hero .case-logo{display:none}
.s2-hlogo{position:relative;height:100px;margin-top:10px}
.s2-hl-in{position:absolute;left:0;top:0;height:100px;display:flex;align-items:center;font-size:30px;font-weight:600;letter-spacing:-.02em;color:#fff;
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.s2-hl-in.on{opacity:1;transform:none}
.s2-hl-in.out{opacity:0;transform:translateY(-10px)}
.s2-hl-in img{height:170px;width:auto;max-width:480px;margin-left:-32px;filter:brightness(0) invert(1)}   /* mêmes proportions que dans la photo : ces logos ont beaucoup de marge intérieure */
.s2-hl-in img.s2-logo-site{filter:none;background:#fff;border-radius:8px;padding:8px 12px;height:60px;margin-left:0;object-fit:contain}
@media (prefers-reduced-motion:reduce){.s2-hl-in{transition:none}}
/* Plus d'air dans le texte des cas (panneau de droite) */
.s2-panel .case-copy{gap:14px}
.s2-panel .case-kpis{margin-top:4px}
.s2-panel .case-sub{margin-top:2px;line-height:1.5}
.s2-panel .case-say{margin-top:14px;gap:20px}
.s2-panel .case-say blockquote{line-height:1.5}
/* 25/09 (Romain) : contour citron autour des photos des témoins (rail des décideurs et citation des cas). */
.s2-kface,.case-who img{box-shadow:0 0 0 2px var(--lime),0 0 0 5px rgba(221,255,86,.18)}