/* ==========================================================================
   KYSKAN · Design « verre de nuit » (maquette kyskan_news) appliqué à « Mon annuaire »
   En-tête (moi · logo à étincelle · jour / nuit · langue), accroche SkanAll, carrousel 3D des cartes,
   Importer · bouton de scan · Rechercher, choix de l'affichage. Cotes de la maquette (écran 400 × 900).
   Jour : fond clair du Y, textes bleu nuit ; nuit : panorama (cerisiers, temple, ville), textes blancs.
   ========================================================================== */

@property --gl-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.gl {
    --gl-ink: #0b1433;                     /* texte sur le fond (jour) */
    --gl-ink-soft: rgba(11, 20, 51, .78);
    --gl-lift: 0 1px 10px rgba(255, 255, 255, .85);
    --gl-top: calc(env(safe-area-inset-top) + 92px);      /* bas de l'en-tête */
    --gl-hero: 112px;                                      /* hauteur de l'accroche */
    --gl-bottom: calc(env(safe-area-inset-bottom) + 250px); /* haut de la zone d'actions */
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --title-gradient: linear-gradient(90deg, #2f57ff 0%, #8a46ea 25%, #e05cfd 50%, #8a46ea 75%, #2f57ff 100%);
    font-family: 'Plus Jakarta Sans', Inter, system-ui, var(--cjk, 'PingFang SC'), sans-serif;
}
:root[data-theme="dark"] .gl { --gl-ink: #fff; --gl-ink-soft: rgba(255, 255, 255, .9); --gl-lift: 0 1px 8px rgba(8, 12, 35, .45); }

/* Nuit : le panorama du design, légèrement assombri */
:root[data-theme="dark"] .gl .dv-scene { background-image: url('../img/brand/bg-night.webp'); background-position: center 30%; filter: brightness(.8) saturate(1.15); }
:root[data-theme="dark"] .gl .dv-scene::after { background: linear-gradient(to bottom, rgba(8, 12, 40, .35), transparent 30%, transparent 70%, rgba(8, 12, 40, .45)); }

/* Selon l'affichage : le Y et le faisceau seulement dans le défilé, l'accroche seulement dans le carrousel */
.gl:not([data-mode="dispatchees"]) .dv-y--me, .gl:not([data-mode="dispatchees"]) .dv-beam { display: none; }
.gl[data-mode="carrousel"] .dv-lane, .gl[data-mode="carrousel"] .dv-empty { display: none; }
.gl:not([data-mode="carrousel"]) .gl-hero { display: none; }

/* Verre commun (pastilles, bascule, langue) */
.gl-rim, .gl-pill__rim { position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--gl-angle), rgba(255,255,255,.95), rgba(170,195,255,.55) 40deg, rgba(215,225,255,.5) 140deg,
        rgba(230,175,255,.55) 200deg, rgba(170,195,255,.55) 320deg, rgba(255,255,255,.95));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: gl-spin 12s linear infinite; }
@keyframes gl-spin { to { --gl-angle: 360deg; } }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.gl-head { position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
    padding: calc(env(safe-area-inset-top) + 14px) max(10px, calc(50vw - 300px)) 14px; color: var(--gl-ink); }
.gl-head::before { content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
:root[data-theme="dark"] .gl-head::before { background: linear-gradient(to bottom, rgba(8, 12, 40, .55), rgba(8, 12, 40, 0)); }
.gl-user { display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; justify-self: start; }
.gl-user__pic { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #1a5cf0, #8a46ea); box-shadow: 0 0 9px rgba(110, 150, 255, .5); animation: gl-avatar 2.4s ease-in-out infinite; }
.gl-user__pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gl-user__pic b { color: #fff; font-size: 14px; font-weight: 800; }
.gl-user__ring { position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from var(--gl-angle), #fff, #8fb4ff 20%, #b9a2ff 50%, #7fa6ff 80%, #fff);
    -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 91%, #000 97%, transparent 100%); mask: radial-gradient(closest-side, transparent 88%, #000 91%, #000 97%, transparent 100%);
    animation: gl-spin 10s linear infinite; }
.gl-user__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; text-shadow: var(--gl-lift); }
.gl-user__text small { font-size: 10px; color: var(--gl-ink-soft); }
.gl-user__text strong { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
@keyframes gl-avatar { 0%, 100% { box-shadow: 0 0 9px rgba(110, 150, 255, .5); } 50% { box-shadow: 0 0 14px 2px rgba(130, 165, 255, .75); } }

/* Logo : étincelle dorée, KYSKAN espacé (point doré sous le A), « Mon annuaire » entre deux traits */
.gl-brand { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 12px; color: inherit; text-decoration: none; text-shadow: var(--gl-lift); }
.gl-brand__spark { position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 1.2px; transform: rotate(45deg);
    background: linear-gradient(135deg, #fff6d8 0%, #f8dd9c 40%, #e2b673 70%, #c08c55 100%); box-shadow: 0 0 6px rgba(255, 214, 150, .55); animation: gl-spark 3.6s ease-in-out infinite; }
.gl-brand__word { padding-inline-start: 6px; font-size: 17px; line-height: 1; font-weight: 400; letter-spacing: 6.4px; }
.gl-brand__a { position: relative; }
.gl-brand__a::after { content: ''; position: absolute; left: calc(50% - 4px); top: 10.5px; width: 2px; height: 1.6px; border-radius: 1px; background: #e9a868; box-shadow: 0 0 3px rgba(255, 170, 90, .8); }
.gl-brand__sub { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 9.5px; font-weight: 500; color: var(--gl-ink-soft); white-space: nowrap; }
.gl-brand__sub::before, .gl-brand__sub::after { content: ''; width: 12px; height: .75px; background: currentColor; opacity: .8; }
@keyframes gl-spark { 0%, 100% { filter: brightness(1); box-shadow: 0 0 6px rgba(255, 214, 150, .55); } 50% { filter: brightness(1.25); box-shadow: 0 0 11px rgba(255, 214, 150, .9); } }

.gl-head__end { justify-self: end; display: flex; align-items: center; gap: 6px; }
/* Bascule jour / nuit et langue : verre bleu nuit, liseré irisé qui tourne, respiration */
.gl-daynight, .gl-head .lang-switch > summary { position: relative; height: 30px; border-radius: 15px; color: #fff;
    background: linear-gradient(180deg, rgba(100, 125, 200, .42) 0%, rgba(24, 34, 84, .62) 100%);
    box-shadow: inset 0 1px 5px rgba(255, 255, 255, .12), inset 0 0 10px rgba(110, 140, 255, .12), 0 0 8px rgba(60, 100, 255, .16);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); animation: gl-chip 2.4s ease-in-out infinite; }
.gl-daynight { display: flex; width: 60px; }
.gl-daynight button { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.gl-daynight svg { width: 15px; height: 15px; transition: transform .5s var(--ease-spring); }
.gl-daynight [data-theme-set="light"][aria-pressed="true"] svg { animation: gl-sun 24s linear infinite; }
.gl-daynight [data-theme-set="dark"][aria-pressed="true"] svg { animation: gl-moon 4.8s ease-in-out infinite; }
.gl-daynight__thumb { position: absolute; left: 2.5px; top: 2.5px; width: 25px; height: 25px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(205, 220, 255, .45), rgba(120, 145, 220, .25) 75%);
    box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .6), 0 0 9px rgba(130, 165, 255, .4); transition: transform .5s var(--ease-spring); }
:root[data-theme="dark"] .gl-daynight__thumb { transform: translateX(30px); }
.gl-head .lang-switch { position: relative; }
.gl-head .lang-switch > summary { display: flex; align-items: center; gap: 4px; padding: 0 10px; border: 0; font-size: 11px; font-weight: 700; }
.gl-head .lang-switch > summary svg { width: 15px; height: 15px; }
.gl-head .lang-switch > summary::after { content: ''; width: 6px; height: 6px; margin-inline-start: 2px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); }
@keyframes gl-chip { 0%, 100% { box-shadow: inset 0 1px 5px rgba(255,255,255,.12), inset 0 0 10px rgba(110,140,255,.12), 0 0 8px rgba(60,100,255,.16); }
    50% { box-shadow: inset 0 1px 5px rgba(255,255,255,.16), inset 0 0 12px rgba(120,150,255,.2), 0 0 13px 2px rgba(70,110,255,.28); } }
@keyframes gl-sun { to { transform: rotate(360deg); } }
@keyframes gl-moon { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }

/* --------------------------------------------------------------------------
   Accroche
   -------------------------------------------------------------------------- */
.gl-hero { position: fixed; left: 0; right: 0; top: var(--gl-top); z-index: 15; height: var(--gl-hero); text-align: center; color: var(--gl-ink); pointer-events: none; }
.gl-hero p { margin: 0; }
.gl-hero__kicker { padding-inline-start: 2px; font-size: 8px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gl-ink-soft); text-shadow: var(--gl-lift); }
.gl-hero__title { margin-top: 2px !important; font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -2.5px; text-shadow: 0 2px 18px rgba(10, 20, 60, .25); }
:root:not([data-theme="dark"]) .gl-hero__title { text-shadow: 0 2px 16px rgba(255, 255, 255, .9); }
.gl-hero__title span { background: var(--title-gradient); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
    animation: gl-title 7s ease-in-out infinite alternate; }
.gl-hero__lead { margin-top: 6px !important; padding: 0 30px; font-size: 12px; line-height: 1.5; text-shadow: var(--gl-lift); }
@keyframes gl-title { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* --------------------------------------------------------------------------
   Carrousel 3D (cotes de la maquette, mises à l'échelle par book-carousel.js : --k)
   -------------------------------------------------------------------------- */
.gl-stage { position: fixed; left: 0; right: 0; top: calc(var(--gl-top) + var(--gl-hero)); bottom: var(--gl-bottom); z-index: 20; }
.gl-carousel { position: absolute; left: 50%; top: 50%; width: 400px; height: 370px; transform: translate(-50%, -50%) scale(var(--k, 1));
    touch-action: pan-y; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; opacity: 0; transition: opacity .4s; }
.gl-carousel.is-ready { opacity: 1; }
.gl-carousel.is-dragging { cursor: grabbing; }
.gl-carousel__track { position: absolute; inset: 0; perspective: 520px; perspective-origin: 200.75px 341px; }
.gl-count { position: absolute; left: 0; right: 0; bottom: -4px; margin: 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gl-ink-soft); text-shadow: var(--gl-lift); }

.pcard { --glow: 255, 200, 245; --photo: linear-gradient(150deg, #2a4fd8, #8a46ea 60%, #e05cfd);
    position: absolute; left: 124px; top: 52.5px; width: 153.5px; height: 288.5px; border-radius: 19px; color: #fff; text-decoration: none;
    -webkit-user-drag: none; will-change: transform; transition: transform .7s cubic-bezier(.22, .9, .25, 1), filter .7s var(--ease-out), opacity .5s var(--ease-out); }
.gl-carousel.is-dragging .pcard { transition: none; }
.pcard__float { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 22px 40px -14px rgba(5, 10, 40, .65); transition: transform .45s var(--ease-spring); }
.pcard.is-center .pcard__float { animation: gl-float 6s ease-in-out infinite; }
.pcard__float::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 14px 2px rgba(var(--glow), .55), 0 0 34px 6px rgba(var(--glow), .3), 0 8px 20px rgba(var(--glow), .3); animation: gl-breathe-soft 2.4s ease-in-out infinite; }
.pcard.is-center .pcard__float::before { animation-name: gl-breathe; }
.pcard__photo { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: start center; border-radius: inherit; background: var(--photo); background-position: center top; background-size: cover; }
.pcard__photo b { margin-top: 30px; font-size: 54px; font-weight: 300; letter-spacing: -1px; color: rgba(255, 255, 255, .92); text-shadow: 0 4px 18px rgba(10, 20, 60, .35); }
.pcard__photo::after { content: ''; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%); transform: translateX(-70%); }
.pcard.is-center:hover .pcard__photo::after { transform: translateX(70%); transition: transform 1s var(--ease-out); }
.pcard__float::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 0 3px 1px rgba(255, 255, 255, .5), inset 0 0 16px rgba(var(--glow), .35); }
.pcard__rim { position: absolute; inset: 0; z-index: 3; padding: 4px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--gl-angle), rgba(255,255,255,.85), rgba(255,255,255,0) 45deg, rgba(var(--glow),.35) 120deg, rgba(255,255,255,0) 180deg, rgba(190,210,255,.3) 250deg, rgba(255,255,255,0) 315deg, rgba(255,255,255,.85)),
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.14) 55%, rgba(var(--glow),.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gl-spin 16s linear infinite; }
.pcard__rim::after { content: ''; position: absolute; inset: 4px; border-radius: 15px; box-shadow: 0 0 0 .6px rgba(255, 255, 255, .45); }
.pcard:nth-child(even) .pcard__rim { animation-direction: reverse; }
.pcard.is-center:hover .pcard__rim { animation-duration: 4s; }
.pcard:not(.is-center):hover .pcard__float { transform: translateY(-5px); }
.gl-carousel.is-dragging .pcard__float { transition: none; }
.pcard__panel { position: absolute; left: 13.75px; right: 13.75px; top: 125px; bottom: 18.5px; overflow: hidden; border-radius: 12px; display: flex; flex-direction: column; align-items: center;
    isolation: isolate; text-shadow: 0 1px 6px rgba(8, 10, 30, .45); }
.pcard__panel::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(22, 20, 40, .18), rgba(18, 16, 36, .42)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.pcard__panel::before { content: ''; position: absolute; z-index: -1; left: -13.75px; top: -125px; width: 153.5px; height: 288.5px; background: var(--photo); background-position: center top; background-size: cover; filter: blur(9px) saturate(1.25); transform: scale(1.04); }
.pcard__name { margin-top: 6px; max-width: calc(100% - 10px); display: flex; align-items: center; gap: 3px; font-size: 13px; line-height: 1.1; font-weight: 600; letter-spacing: -.1px; white-space: nowrap; }
.pcard__name-text { overflow: hidden; text-overflow: ellipsis; }
.pcard__badge { width: 10px; height: 10px; flex: none; }
.pcard__role { margin-top: 4px; max-width: calc(100% - 12px); font-size: 8px; line-height: 1.2; color: rgba(255, 255, 255, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__qr { position: relative; margin-top: 10px; width: 64px; height: 64px; flex: none; overflow: hidden; border-radius: 6px; background: #fff; }
.pcard__qr img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pcard__qr-k { position: absolute; z-index: 1; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; display: grid; place-items: center; border-radius: 2.5px;
    background: #fff; color: #1d2549; font-size: 10.5px; font-weight: 800; line-height: 1; text-shadow: none; }
.pcard__qr--kyp { display: grid; place-items: center; align-content: center; gap: 2px; background: linear-gradient(135deg, #fff1c4, #f5c542); color: #6b4700; text-shadow: none; }
.pcard__qr--kyp b { font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.pcard__qr--kyp small { font-size: 18px; }
.pcard__socials { margin-top: 8px; display: flex; gap: 5px; }
.soc { --sg: 255, 255, 255; position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff;
    --gloss: inset 0 .75px 1px rgba(255,255,255,.32), inset 0 -1.5px 3px rgba(0,0,0,.2), inset 0 0 0 .5px rgba(255,255,255,.14); box-shadow: var(--gloss); }
.soc svg { width: 11.5px; height: 11.5px; }
.pcard.is-center .soc { animation: gl-soc 2.4s ease-in-out infinite; }
.pcard.is-center .soc:nth-child(2) { animation-delay: .15s; } .pcard.is-center .soc:nth-child(3) { animation-delay: .3s; }
.pcard.is-center .soc:nth-child(4) { animation-delay: .45s; } .pcard.is-center .soc:nth-child(5) { animation-delay: .6s; }
/* Carte « Nouvelle KY-card » au bout du carrousel */
.pcard--new { --photo: linear-gradient(160deg, rgba(150, 190, 255, .55), rgba(110, 80, 230, .55)); }
.pcard--new .pcard__photo { place-items: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pcard--new .pcard__photo b { margin: 0 0 70px; font-size: 64px; font-weight: 200; }
.pcard__panel--new { justify-content: center; text-align: center; padding: 0 8px; }
.pcard__panel--new .pcard__name { white-space: normal; justify-content: center; }
.pcard__panel--new .pcard__role { white-space: normal; font-size: 9px; }
@keyframes gl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes gl-breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes gl-breathe-soft { 0%, 100% { opacity: .25; } 50% { opacity: .45; } }
@keyframes gl-soc { 0%, 100% { box-shadow: var(--gloss); } 50% { box-shadow: var(--gloss), 0 0 7px 1px rgba(var(--sg), .6); } }

/* Podium holographique sous la carte du centre */
.gl-podium { position: absolute; left: 50%; bottom: 6%; width: 0; height: 0; pointer-events: none; }
.gl-podium::before { content: ''; position: absolute; left: -70px; top: -40px; width: 140px; height: 46px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(150, 210, 255, .55), rgba(110, 150, 255, .18) 60%, transparent); filter: blur(4px); animation: gl-beam 3.2s ease-in-out infinite; }
.gl-podium i { position: absolute; left: -90px; top: -13px; width: 180px; height: 26px; border-radius: 50%; border: 1px solid rgba(170, 215, 255, .55); box-shadow: 0 0 8px rgba(120, 180, 255, .45); opacity: 0; animation: gl-ring 4.5s ease-out infinite; }
.gl-podium i:nth-child(2) { animation-delay: 1.5s; } .gl-podium i:nth-child(3) { animation-delay: 3s; }
@keyframes gl-ring { 0% { transform: scale(.55); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes gl-beam { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* --------------------------------------------------------------------------
   Actions : importer un QR code · scanner · rechercher ; choix de l'affichage
   -------------------------------------------------------------------------- */
.gl-actions { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 88px); z-index: 80; width: min(400px, 100vw); height: 162px; transform: translateX(-50%); color: #fff; }
.gl-pill { position: absolute; top: 45px; height: 50px; padding: 0; border: 0; border-radius: 25px; overflow: hidden; isolation: isolate; cursor: pointer; text-align: start; color: #fff; font: inherit;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(100deg, rgba(120, 140, 220, .5) 0%, rgba(60, 80, 160, .45) 45%, rgba(50, 60, 140, .5) 100%);
    box-shadow: inset 0 1px 6px rgba(255,255,255,.14), inset 0 0 12px rgba(130,160,255,.16), 0 0 10px rgba(70,110,255,.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); animation: gl-pill 2.4s ease-in-out infinite; transition: transform .35s var(--ease-spring); }
.gl-pill--import { left: 7px; width: 132px; }
.gl-pill--search { right: 7px; width: 134px; }
.gl-pill--search .gl-pill__rim { animation-direction: reverse; }
.gl-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 66%); transform: translateX(-110%); }
.gl-pill:hover::before { transform: translateX(110%); transition: transform .8s var(--ease-out); }
.gl-pill:active { transform: scale(.97); }
.gl-pill:focus-visible, .gl-pill:focus-within { outline: 2px solid #fff; outline-offset: 3px; }
.gl-pill__icon { position: absolute; left: 10px; top: 7.5px; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.2), rgba(255,255,255,.07) 70%); box-shadow: inset 0 0 0 .75px rgba(255,255,255,.5), inset 0 0 6px rgba(170,195,255,.25); }
.gl-pill__icon svg { width: 21px; height: 21px; }
.gl-pill__icon--bare { left: 5px; background: none; box-shadow: none; }
.gl-pill__icon--bare svg { width: 25px; height: 25px; }
.gl-pill__text { position: absolute; left: 52px; right: 8px; top: 12px; display: flex; flex-direction: column; gap: 3px; text-shadow: 0 1px 6px rgba(8, 12, 35, .35); }
.gl-pill--search .gl-pill__text { left: 44px; }
.gl-pill__text b { font-size: 11px; line-height: 1.1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-pill__text small { font-size: 9.5px; line-height: 1.1; color: rgba(255, 255, 255, .88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .gl-pill--import { left: auto; right: 7px; } [dir="rtl"] .gl-pill--search { right: auto; left: 7px; }
@keyframes gl-pill { 0%, 100% { box-shadow: inset 0 1px 6px rgba(255,255,255,.14), inset 0 0 12px rgba(130,160,255,.16), 0 0 10px rgba(70,110,255,.2); }
    50% { box-shadow: inset 0 1px 6px rgba(255,255,255,.18), inset 0 0 14px rgba(140,170,255,.26), 0 0 16px 2px rgba(80,120,255,.36); } }

/* Bouton de scan : ondes sonar, bague de verre irisée, anneau néon, disque nuit */
.gl-scan { position: absolute; left: 50%; top: 0; width: 105px; height: 105px; margin-left: -52.5px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: transform .45s var(--ease-spring); }
.gl-scan > span { position: absolute; border-radius: 50%; pointer-events: none; }
.gl-scan__waves { inset: 0; }
.gl-scan__waves i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(150, 175, 255, .85); box-shadow: 0 0 10px rgba(100, 130, 255, .6), inset 0 0 8px rgba(110, 130, 255, .35); opacity: 0; animation: gl-wave 3s cubic-bezier(.2, .6, .35, 1) infinite; }
.gl-scan__waves i:nth-child(2) { animation-delay: 1s; } .gl-scan__waves i:nth-child(3) { animation-delay: 2s; }
.gl-scan__bezel { inset: 0; background: conic-gradient(from 200deg, rgba(25,70,245,.5), rgba(60,70,240,.42) 25%, rgba(165,70,240,.45) 50%, rgba(90,70,240,.42) 75%, rgba(25,70,245,.5));
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: inset 0 0 0 1px rgba(170,205,255,.95), inset 0 0 5px rgba(90,150,255,.6), 0 0 14px 4px rgba(35,90,255,.7), 0 0 40px 12px rgba(60,70,255,.35); animation: gl-rimglow 2.4s ease-in-out infinite; }
.gl-scan__glow { inset: -6.5px; background: conic-gradient(from 200deg, #2e63ff, #5a55ff 25%, #e070ff 50%, #8c5cff 75%, #2e63ff);
    -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 74%, #000 81%, transparent 93%); mask: radial-gradient(closest-side, transparent 64%, #000 74%, #000 81%, transparent 93%); opacity: .95; }
.gl-scan__ring { inset: 5.5px; border: 3.5px solid #f7f2ff; box-shadow: 0 0 3px 1px rgba(255,255,255,.9), 0 0 8px 2px rgba(90,130,255,.9), inset 0 0 6px 2px rgba(110,120,255,.85); animation: gl-neon 2.4s ease-in-out infinite; }
.gl-scan__ring::after { content: ''; position: absolute; inset: -3.5px; border-radius: 50%; padding: 3.5px; background: conic-gradient(from 0deg, transparent 0 72%, rgba(255,255,255,.95) 86%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gl-turn 3.6s linear infinite; }
.gl-scan__disc { inset: 9.5px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle, #050d36 0%, #081751 42%, #0f2a86 72%, #2048c9 94%, #3a63f0 100%);
    box-shadow: inset 0 0 10px 2px rgba(70,110,255,.55), inset 0 0 2px 1px rgba(200,210,255,.45); }
.gl-scan__disc svg { width: 37px; height: 37px; filter: drop-shadow(0 0 2px rgba(140, 175, 255, .55)); animation: gl-beat 2.4s ease-in-out infinite; }
.gl-scan:hover { transform: scale(1.04); }
.gl-scan:active { transform: scale(.94); }
.gl-scan:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.gl-scan__label { position: absolute; left: 0; right: 0; top: 112px; margin: 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--gl-ink); text-shadow: var(--gl-lift); pointer-events: none; }
@keyframes gl-wave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes gl-rimglow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(170,205,255,.95), inset 0 0 5px rgba(90,150,255,.6), 0 0 14px 4px rgba(35,90,255,.7), 0 0 40px 12px rgba(60,70,255,.35); }
    50% { box-shadow: inset 0 0 0 1px rgba(210,230,255,1), inset 0 0 8px rgba(120,170,255,.8), 0 0 22px 8px rgba(45,100,255,.9), 0 0 58px 18px rgba(90,70,255,.5); } }
@keyframes gl-neon { 0%, 100% { box-shadow: 0 0 3px 1px rgba(255,255,255,.9), 0 0 8px 2px rgba(90,130,255,.9), inset 0 0 6px 2px rgba(110,120,255,.85); }
    50% { box-shadow: 0 0 5px 2px #fff, 0 0 14px 4px rgba(140,165,255,1), inset 0 0 9px 3px rgba(170,150,255,1); } }
@keyframes gl-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes gl-turn { to { transform: rotate(360deg); } }

/* Choix de l'affichage : carrousel · défilé · fiches alignées */
.gl-modes { position: absolute; left: 50%; top: 132px; display: flex; gap: 2px; padding: 2px; border-radius: 15px; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(100, 125, 200, .42) 0%, rgba(24, 34, 84, .62) 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gl-modes__btn { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 26px; border-radius: 13px; color: rgba(255, 255, 255, .75); transition: background .25s, color .25s; }
.gl-modes__btn.is-on { color: #fff; background: radial-gradient(circle at 50% 40%, #1d72f7 0%, #0a58e2 100%); box-shadow: 0 0 10px rgba(20, 95, 255, .6); }
.gl-modes__btn:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Autres affichages, demandes, petits écrans
   -------------------------------------------------------------------------- */
.gl .bk-list { padding-top: calc(var(--gl-top) + 8px); padding-bottom: calc(var(--gl-bottom) + 8px);
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--gl-top) - 30px), #000 calc(var(--gl-top) + 10px), #000 calc(100% - var(--gl-bottom) - 10px), transparent calc(100% - var(--gl-bottom) + 40px));
            mask-image: linear-gradient(to bottom, transparent calc(var(--gl-top) - 30px), #000 calc(var(--gl-top) + 10px), #000 calc(100% - var(--gl-bottom) - 10px), transparent calc(100% - var(--gl-bottom) + 40px)); }
.gl .bk-head { scroll-margin-top: calc(var(--gl-top) + 8px); }
.gl .bk-requests { top: calc(var(--gl-top) + 2px); }
.gl[data-mode="dispatchees"] .dv-empty { top: auto; bottom: calc(var(--gl-bottom) + 12px); }
.gl.is-aligned .dv-empty { top: calc(var(--gl-top) + 20px); }
.gl .dv-toast { bottom: calc(var(--gl-bottom) + 14px); }
body.gl.me-open .gl-head, body.gl.me-open .gl-hero, body.gl.me-open .gl-stage, body.gl.me-open .gl-actions, body.gl.me-open .bnav { opacity: 0; pointer-events: none; transition: opacity .3s; }
.gl-head, .gl-hero, .gl-stage, .gl-actions { transition: opacity .3s; }
@media (max-height: 760px) {
    .gl { --gl-hero: 72px; --gl-bottom: calc(env(safe-area-inset-bottom) + 236px); }
    .gl-hero__lead { display: none; }
    .gl-hero__title { font-size: 40px; }
}
@media (max-height: 640px) {
    .gl { --gl-top: calc(env(safe-area-inset-top) + 80px); --gl-hero: 52px; }
    .gl-hero__kicker { display: none; }
    .gl-hero__title { font-size: 34px; }
}
@media (max-width: 360px) { .gl-user__text { display: none; } .gl-pill { width: 116px !important; } .gl-pill__text small { display: none; } .gl-pill__text { top: 18px; } }
@media (prefers-reduced-motion: reduce) { .gl *, .gl *::before, .gl *::after { animation: none !important; } }

/* Compteur « 3 / 12 » : lu par les lecteurs d'écran (visuellement, le halo du bouton de scan occupe la place) */
.gl-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Demandes de mise en relation : verre de nuit, compactes */
.gl .bk-request { color: #fff; background: linear-gradient(180deg, rgba(100, 125, 200, .5), rgba(24, 34, 84, .78)); border-color: rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 0 14px rgba(60, 100, 255, .3), 0 12px 30px rgba(8, 12, 40, .35); }
.gl .bk-request__text { font-size: 12px; }
.gl .bk-request__no { color: rgba(255, 255, 255, .8); }
.gl .bk-request__yes { background: radial-gradient(circle at 50% 40%, #1d72f7 0%, #0a58e2 100%); box-shadow: 0 0 12px rgba(20, 95, 255, .55); }

/* ==========================================================================
   Fiches au nouveau design (défilé, liste, cartes sans photo)
   ========================================================================== */

/* Cartes sans photo : le panorama du design, voilé, avec les initiales en grand */
.pcard--initials { --photo: linear-gradient(180deg, rgba(20, 24, 70, .15), rgba(30, 20, 80, .55)), url('../img/brand/bg-night.webp') center 28% / cover; }
.pcard--initials .pcard__photo { background: var(--photo); }
.pcard--initials .pcard__panel::before { background: var(--photo); }
.pcard__photo b { font-weight: 200; letter-spacing: 2px; text-shadow: 0 0 18px rgba(150, 190, 255, .8), 0 2px 10px rgba(10, 20, 60, .5); }

/* --- Défilé : la carte du nuage reprend la carte du carrousel (cotes 153,5 × 288,5) --- */
.gl .kc-item { --glow: 120, 170, 255; }
.gl .kc-item[data-side="east"] { --glow: 255, 185, 140; }
.gl .kc { position: relative; aspect-ratio: 153.5 / 288.5; overflow: hidden; border: 0; border-radius: calc(var(--cw, 200px) * .124); color: #fff;
    background: #1b2340; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 0 14px 2px rgba(var(--glow), .5), 0 0 34px 6px rgba(var(--glow), .25), 0 22px 40px -14px rgba(5, 10, 40, .65); }
.gl .kc::after { content: ''; position: absolute; inset: 0; z-index: 4; padding: calc(var(--cw, 200px) * .026); border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--gl-angle), rgba(255,255,255,.85), rgba(255,255,255,0) 45deg, rgba(var(--glow),.35) 120deg, rgba(255,255,255,0) 180deg, rgba(190,210,255,.3) 250deg, rgba(255,255,255,0) 315deg, rgba(255,255,255,.85)),
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.14) 55%, rgba(var(--glow),.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gl-spin 16s linear infinite; }
.gl .kc__photo { position: absolute; inset: 0; aspect-ratio: auto; background: linear-gradient(180deg, rgba(20, 24, 70, .15), rgba(30, 20, 80, .55)), url('../img/brand/bg-night.webp') center 28% / cover; }
.gl .kc--east .kc__photo { background: linear-gradient(180deg, rgba(70, 30, 20, .1), rgba(90, 30, 60, .5)), url('../img/brand/bg-night.webp') 70% 28% / cover; }
.gl .kc__photo > img { object-position: center top; }
.gl .kc__photo::after { height: 100%; background: linear-gradient(to bottom, transparent 35%, rgba(10, 10, 30, .25)); }
.gl .kc__initials { align-items: start; height: 40%; padding-top: 10%; font-size: calc(var(--cw, 200px) * .3); font-weight: 200; letter-spacing: 2px;
    text-shadow: 0 0 18px rgba(150, 190, 255, .8), 0 2px 10px rgba(10, 20, 60, .5); }
/* Panneau de verre : nom, métier, (KYcode), réseaux */
.gl .kc__body { position: absolute; z-index: 2; left: 9%; right: 9%; top: 43.3%; bottom: 6.4%; display: flex; flex-direction: column; align-items: center; padding: calc(var(--cw, 200px) * .035) 4% 0;
    overflow: hidden; border-radius: calc(var(--cw, 200px) * .078); text-align: center; text-shadow: 0 1px 6px rgba(8, 10, 30, .45);
    background: linear-gradient(180deg, rgba(22, 20, 40, .18), rgba(18, 16, 36, .42)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(9px) saturate(1.25); backdrop-filter: blur(9px) saturate(1.25); }
.gl .kc__name { justify-content: center; max-width: 100%; font-size: calc(var(--cw, 200px) * .085); font-weight: 600; line-height: 1.15; }
.gl .kc__name .vbadge svg { min-width: 0; min-height: 0; width: .8em; height: .8em; }
.gl .kc__line { min-height: 0; margin-top: calc(var(--cw, 200px) * .02); max-width: 100%; font-size: calc(var(--cw, 200px) * .052); color: rgba(255, 255, 255, .9); }
.gl .kc__foot { justify-content: center; margin-top: auto; padding-bottom: calc(var(--cw, 200px) * .045); }
.gl .kc__loc { display: none; }
.gl .kc__nets { gap: calc(var(--cw, 200px) * .032); }
.gl .kc__nets i { width: calc(var(--cw, 200px) * .13); height: calc(var(--cw, 200px) * .13); border: 0; border-radius: 50%; color: #fff !important; background: var(--net, #5b6479) !important;
    box-shadow: inset 0 .75px 1px rgba(255,255,255,.32), inset 0 -1.5px 3px rgba(0,0,0,.2), inset 0 0 0 .5px rgba(255,255,255,.14); }
.gl .kc__nets i:nth-child(n+3) { display: grid; }
.gl .kc__nets svg { width: 58%; height: 58%; }
/* KYcode blanc au centre du panneau (le « K » au milieu) ; carte privée : tuile dorée « KYP » */
.gl .kc__qr { z-index: 3; inset-inline-end: auto; left: 50%; bottom: auto; top: 58.6%; width: 41.7%; padding: 0; border-radius: calc(var(--cw, 200px) * .04); transform: translateX(-50%); box-shadow: none; }
.gl .kc__private { z-index: 3; inset-inline-end: auto; left: 50%; bottom: auto; top: 58.6%; width: 41.7%; border-radius: calc(var(--cw, 200px) * .04); transform: translateX(-50%);
    background: linear-gradient(135deg, #fff1c4, #f5c542); box-shadow: none; font-size: calc(var(--cw, 200px) * .12); }
.gl .kc__kyp { z-index: 5; top: 6%; inset-inline-start: 9%; padding: 3px 8px; font-size: calc(var(--cw, 200px) * .055); }
.gl .dv-slot.is-focus .kc { animation: none; }

/* --- Fiches alignées : rangées de verre de nuit --- */
.gl .bk-row__link { color: #fff; border: 0; border-radius: 18px; position: relative; overflow: hidden;
    background: linear-gradient(100deg, rgba(120, 140, 220, .5) 0%, rgba(60, 80, 160, .5) 45%, rgba(40, 50, 120, .6) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 6px rgba(255,255,255,.14), 0 0 12px rgba(70, 110, 255, .22), 0 10px 24px rgba(8, 12, 40, .2);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); text-shadow: 0 1px 6px rgba(8, 12, 35, .35); }
.gl .bk-row__link:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 18px 2px rgba(110, 150, 255, .45); }
.gl .bk-row__photo { position: relative; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 0 10px rgba(130, 165, 255, .6);
    background: linear-gradient(180deg, rgba(20, 24, 70, .2), rgba(30, 20, 80, .55)), url('../img/brand/bg-night.webp') center 28% / cover; }
.gl .bk-row__text small { color: rgba(255, 255, 255, .85); }
.gl .bk-dirs i { color: #fff; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); }
.gl .bk-kyp { text-shadow: none; }
.gl .bk-head { color: #fff; border-radius: 12px; text-shadow: 0 1px 6px rgba(8, 12, 35, .4);
    background: linear-gradient(180deg, rgba(100, 125, 200, .5) 0%, rgba(24, 34, 84, .65) 100%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gl .bk-index { background: linear-gradient(180deg, rgba(100, 125, 200, .5) 0%, rgba(24, 34, 84, .7) 100%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); }
.gl .bk-index a { color: #fff; }
.gl .bk-more { color: var(--gl-ink); }

/* ==========================================================================
   Page SkanAll (visiteur, membre, invitation) au design KYSKAN
   ========================================================================== */
.sk-gl { color: var(--gl-ink); }
:root[data-theme="dark"] body.sk-gl { background: #0b1030; }
:root[data-theme="dark"] body.sk-gl::before { background-image: url('../img/brand/bg-night.webp'); background-position: center 30%; filter: brightness(.82) saturate(1.15); }
:root[data-theme="dark"] body.sk-gl::after { background: linear-gradient(to bottom, rgba(8,12,40,.35), transparent 35%, transparent 65%, rgba(8,12,40,.5)); }
body.sk-gl::after { background: radial-gradient(ellipse 85% 50% at 50% 28%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 60%, rgba(255,255,255,0) 100%); }
.sk-gl .sk-gl__head { position: relative; max-width: 720px; margin: 0 auto; grid-template-columns: 44px 1fr 44px auto; }
.sk-gl .sk-gl__head::before { display: none; }
.sk-gl .sk-gl__head .gl-brand { grid-column: 2; }
.sk-gl .sk-gl__head .gl-head__end { grid-column: 3 / 5; }
.sk-gl__blank { width: 38px; }
.sk-gl__back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; text-decoration: none;
    background: rgba(60, 90, 160, .45); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.55), inset 0 0 6px rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sk-gl .sk-home { padding-top: clamp(10px, 5vh, 54px); }
.sk-gl__kicker { margin: 0; padding-inline-start: 2px; font-size: 9px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gl-ink-soft); text-shadow: var(--gl-lift); }
.sk-gl .sk-title { margin-top: 4px; font-size: clamp(48px, 14vw, 64px); letter-spacing: -2.5px; color: var(--gl-ink); text-shadow: var(--gl-lift); }
.sk-gl .sk-title span { background: var(--title-gradient); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: gl-title 7s ease-in-out infinite alternate; }
.sk-gl .sk-sub { margin: 8px 0 22px; font-size: 13px; color: var(--gl-ink); text-shadow: var(--gl-lift); }
/* Rangée : Importer · bouton de scan · Se connecter / Mon annuaire */
.sk-gl__actions { position: relative; width: min(400px, calc(100vw - 8px)); height: 112px; color: #fff; }
.sk-gl__actions .gl-scan { top: 2px; }
.sk-gl__actions .gl-pill { top: 30px; text-decoration: none; }
.sk-gl .sk-bigbtn { width: 105px; height: 105px; background: none; box-shadow: none; }
.sk-gl .sk-bigbtn::after { display: none; }
.sk-gl .sk-import { margin: 0; padding: 0; border: 0; font-size: inherit; }
.sk-gl .sk-hint { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--gl-ink); text-shadow: var(--gl-lift); }
.sk-gl .sk-status { color: var(--gl-ink); text-shadow: var(--gl-lift); }
/* Grand bouton dégradé « Créer mon compte » (CTA du design) */
.gl-cta { position: relative; display: grid; place-items: center; width: min(310px, calc(100vw - 48px)); height: 56px; margin-top: 26px; border-radius: 999px; color: #fff; text-decoration: none;
    box-shadow: 0 0 3px 1px rgba(205,220,255,.5), 0 0 12px 2px rgba(70,120,255,.3), 0 4px 14px rgba(90,110,255,.22); transition: transform .35s var(--ease-spring), filter .35s; }
.gl-cta__surface { position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
    background: linear-gradient(90deg, #96caff 0%, #67acfb 13%, #3e96fa 22.5%, #1e82f4 32%, #0f66df 47%, #0e5cd6 56.5%, #285cda 66%, #5769e7 75.5%, #8e82f6 85.5%, #c49ff9 95%, #dfaefb 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.95), inset 0 0 4px 1.5px rgba(255,255,255,.45), inset 0 1px 3px rgba(255,255,255,.4); }
.gl-cta__surface::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 80%, transparent 100%);
    transform: translateX(-120%) skewX(-12deg); animation: gl-shine 4.8s var(--ease-out) 1.2s infinite; }
.gl-cta__waves { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.gl-cta__waves i { position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid rgba(165,185,255,.85); box-shadow: 0 0 8px rgba(110,140,255,.55); opacity: 0; animation: gl-ctawave 2.4s cubic-bezier(.2,.6,.35,1) infinite; }
.gl-cta__waves i:nth-child(2) { animation-delay: .8s; } .gl-cta__waves i:nth-child(3) { animation-delay: 1.6s; }
.gl-cta__content { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .2px; text-shadow: 0 1px 6px rgba(20,40,120,.35); }
.gl-cta:hover { transform: translateY(-1.5px); filter: saturate(1.15) brightness(1.05); }
.gl-cta:active { transform: scale(.97); }
@keyframes gl-shine { 0% { transform: translateX(-120%) skewX(-12deg); } 38%, 100% { transform: translateX(330%) skewX(-12deg); } }
@keyframes gl-ctawave { 0% { inset: 0; opacity: .85; } 100% { inset: -13px -18px; opacity: 0; } }
.sk-gl .sk-account { margin-top: 14px; }
.sk-gl .sk-account a { color: var(--gl-ink); text-shadow: var(--gl-lift); font-weight: 600; }
.sk-gl .sk-pitch { color: var(--gl-ink); text-shadow: var(--gl-lift); }
.sk-gl .sk-pitch a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sk-gl .sk-legal, .sk-gl .sk-legal a { color: var(--gl-ink-soft); }
/* Invitation (KYcode scanné) : carte de verre */
.sk-gl .sk-invite { color: #fff; background: rgba(71, 138, 220, .2); border: 0; text-shadow: 0 1px 8px rgba(8,12,35,.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 9px rgba(255,255,255,.16), 0 0 18px 3px rgba(150,170,255,.25); }
.sk-gl .sk-invite__card { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); }
.sk-gl .sk-invite__who small, .sk-gl .sk-invite__text, .sk-gl .sk-invite__no, .sk-gl .sk-invite__login { color: rgba(255,255,255,.9); }
.sk-gl .sk-invite__login a { color: #fff; text-decoration: underline; }
.sk-gl .sk-invite__yes { border-radius: 999px; background: linear-gradient(90deg, #67acfb 0%, #1e82f4 30%, #0e5cd6 55%, #5769e7 78%, #c49ff9 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), 0 0 14px rgba(70,120,255,.4); }
:root:not([data-theme="dark"]) .sk-gl .sk-invite { background: rgba(40, 80, 170, .42); }
.sk-gl .sk-home--invite .sk-gl__actions { transform: scale(.85); margin: -8px 0; }
.sk-gl .sk-home--invite .gl-pill--search { display: none; }
.sk-gl .sk-home--invite .sk-gl__actions { transform: none; margin: 0; }
@media (max-width: 400px) { .gl-pill { width: 124px !important; } .gl-pill__text b { font-size: 10.5px; } }
.sk-gl .sk-gl__actions .sk-bigbtn { position: absolute; left: 50%; top: 2px; margin-left: -52.5px; }
.sk-gl .home-link { display: none; }

/* Ma propre carte, en tête de « Mon annuaire » : pastille « Moi » */
.pcard__me, .gl .kc__me { position: absolute; z-index: 5; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff;
    background: radial-gradient(circle at 50% 40%, #1d72f7 0%, #0a58e2 100%); box-shadow: 0 0 10px rgba(20, 95, 255, .6), inset 0 0 0 .75px rgba(255,255,255,.6); }
.gl .kc__me { inset-inline-start: 9%; top: 6%; left: auto; font-size: calc(var(--cw, 200px) * .05); }
.bk-me { color: #fff !important; background: radial-gradient(circle at 50% 40%, #1d72f7 0%, #0a58e2 100%) !important; }
.gl .bk-row--me .bk-row__link { box-shadow: inset 0 0 0 1.5px rgba(150, 190, 255, .9), 0 0 16px rgba(70, 120, 255, .45); }
/* Avatar de l'en-tête : toujours recadré dans son cercle (photos de toutes tailles) */
.gl-user__pic { overflow: visible; }
.gl-user__pic > img { display: block; width: 40px !important; height: 40px !important; max-width: none !important; border-radius: 50%; object-fit: cover; clip-path: circle(50%); }

/* ==========================================================================
   Performances (annuaires de plusieurs centaines de cartes, iPhone) :
   pas de flou d'arrière-plan sur les éléments répétés — un verre teinté à l'aspect équivalent
   ========================================================================== */
.gl .kc__body { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(180deg, rgba(40, 46, 90, .55), rgba(24, 20, 50, .78)); }
.gl .bk-row__link, .gl .bk-head { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.gl .bk-row__link { background: linear-gradient(100deg, rgba(92, 112, 196, .82) 0%, rgba(52, 68, 148, .84) 45%, rgba(34, 42, 108, .88) 100%); }
.gl .bk-head { background: linear-gradient(180deg, rgba(84, 108, 184, .9) 0%, rgba(28, 38, 92, .92) 100%); }
.gl .kc::after { animation: none; }                          /* liseré fixe sur les cartes du nuage */
.gl .bk-list { content-visibility: auto; }
.gl .bk-row { content-visibility: auto; contain-intrinsic-size: auto 66px; }
/* Carrousel : seules les cartes proches du centre sont dessinées (les autres ne coûtent rien) */
.pcard.is-far { visibility: hidden; }
.pcard:not(.is-center) .pcard__panel::before { filter: blur(6px); }
.pcard.is-far .pcard__rim, .pcard.is-far .pcard__float::before { animation: none; }