/* ==========================================================================
   Badges ServiGo : ancienneté (rôles), Admin, fiabilité, abonnés Pro
   Rendu par includes/badges.php. Animations limitées à transform / opacity
   (calculées par la carte graphique) sauf le texte irisé ; coupées si
   l'utilisateur a demandé moins d'animations.
   Taille pilotée par la police : .sgb-lg (profil), .sgb-md (annonce, service), .sgb-sm (chat).
   ========================================================================== */
.sgb-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.7em;vertical-align:middle}
.sgb-lg{font-size:15px}
.sgb-md{font-size:13px}
.sgb-sm{font-size:11px}
.sgb-row.sgb-sm{gap:.55em}

.sgb{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.5em;padding:.36em 1.05em .36em .36em;border-radius:999px;font-family:inherit;font-weight:700;font-size:1em;line-height:1.25;white-space:nowrap;vertical-align:middle;text-decoration:none}
.sgb-ic{width:1.75em;height:1.75em;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.sgb-ic svg{width:1.05em;height:1.05em;display:block}
.sgb-sm .sgb{padding:.25em .8em .25em .25em;gap:.35em}
.sgb-sm .sgb-ic{width:1.45em;height:1.45em}

/* Effets partagés */
.sgb-shine{overflow:hidden}
.sgb-shine::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sgbShine 4.5s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes sgbShine{0%,70%{left:-70%}100%{left:140%}}
.sgb-wrap{position:relative;isolation:isolate;display:inline-flex;vertical-align:middle}
.sgb-wrap::before{content:"";position:absolute;inset:-.65em;border-radius:999px;z-index:-1;opacity:.5;animation:sgbPulse 2.6s ease-in-out infinite;pointer-events:none}
@keyframes sgbPulse{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.07)}}
@keyframes sgbSpin{to{transform:rotate(360deg)}}
@keyframes sgbText{to{background-position:200% 0}}
.sgb-anim-text{background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sgbText 3s linear infinite}

/* ---- Ancienneté ---- */
.sgb-debutant{background:#eef6f5;color:#0f766e;border:1px solid #cfe8e4}
.sgb-debutant .sgb-ic{background:#fff;color:#0f766e}
.sgb-confirme{background:#2EC4B6;color:#fff;box-shadow:0 .35em 1em rgba(46,196,182,.35)}
.sgb-confirme .sgb-ic{background:rgba(255,255,255,.22);color:#fff}
.sgb-senior{background:linear-gradient(135deg,#ffcf4a,#f59e0b);color:#3b2300;font-weight:800;box-shadow:0 .35em 1.1em rgba(245,158,11,.45)}
.sgb-senior .sgb-ic{background:rgba(255,255,255,.35);color:#3b2300}
.sgb-wrap-senior::before{background:radial-gradient(closest-side,rgba(255,184,0,.55),rgba(255,184,0,0))}
.sgb-legende{overflow:hidden;font-weight:800;letter-spacing:.05em;color:#f5d77a}
.sgb-legende::before{content:"";position:absolute;inset:-150%;background:conic-gradient(from 0deg,#000 0deg,#000 250deg,#f5d77a 300deg,#fff 320deg,#b48cff 340deg,#000 360deg);animation:sgbSpin 3.2s linear infinite;z-index:-2}
.sgb-legende::after{content:"";position:absolute;inset:2px;border-radius:999px;background:#0b0b0f;z-index:-1}
.sgb-legende .sgb-ic{background:#1b1b24;color:#f5d77a}
.sgb-legende .sgb-anim-text{background-image:linear-gradient(90deg,#f5d77a,#ffffff,#f5d77a)}
.sgb-wrap-legende::before{inset:-.8em;background:radial-gradient(closest-side,rgba(180,140,255,.45),rgba(0,0,0,0))}

/* ---- Admin ---- */
.sgb-admin{background:linear-gradient(135deg,#3b82f6,#1d4ed8 55%,#0a1f6b);color:#fff;font-weight:900;letter-spacing:.14em;border:1px solid rgba(147,197,253,.6)}
.sgb-admin .sgb-ic{background:rgba(255,255,255,.16);color:#fff}
.sgb-wrap-admin::before{background:radial-gradient(closest-side,rgba(59,130,246,.75),rgba(59,130,246,0))}
/* Emblème (profil) */
.sgb-emblem{position:relative;isolation:isolate;width:7.4em;height:7.4em;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}
.sgb-emblem-aura{position:absolute;inset:-1.2em;border-radius:999px;background:radial-gradient(closest-side,rgba(59,130,246,.75),rgba(37,99,235,.25) 55%,rgba(37,99,235,0));z-index:-2;animation:sgbPulse 2.4s ease-in-out infinite}
.sgb-emblem-ring{position:absolute;inset:0;z-index:-1;animation:sgbSpin 9s linear infinite}
.sgb-emblem-ring2{position:absolute;inset:.55em;z-index:-1;animation:sgbSpin 6s linear infinite reverse}
.sgb-emblem-hex{position:relative;width:5.2em;height:5.8em;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#3b82f6 0%,#1d4ed8 45%,#0a1f6b 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;overflow:hidden;color:#fff}
.sgb-emblem-hex::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%);pointer-events:none}
.sgb-emblem-hex::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-80%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);animation:sgbShine 3.6s ease-in-out infinite;pointer-events:none}
.sgb-emblem-hex svg{width:1.45em;height:1.45em}
.sgb-emblem-hex b{font-size:.92em;font-weight:900;letter-spacing:.16em;padding-left:.16em}

/* ---- Fiabilité ---- */
.sgb-fiable{background:#fdf1e6;color:#8a4a22;border:1px solid #ecc9aa}
.sgb-fiable .sgb-ic{background:#b4683a;color:#fff}
.sgb-tresfiable{background:#eef2f6;color:#475569;border:1px solid #cbd5e1}
.sgb-tresfiable .sgb-ic{background:#7c8899;color:#fff}
.sgb-exemplaire{background:#fef6d0;color:#854d0e;border:1px solid #f1d672}
.sgb-exemplaire .sgb-ic{background:#ca8a04;color:#fff}
.sgb-wrap-exemplaire::before{background:radial-gradient(closest-side,rgba(250,204,21,.5),rgba(250,204,21,0))}
.sgb-spark{position:absolute;width:.5em;height:.5em;border-radius:2px;background:#fde68a;transform:rotate(45deg);opacity:0;animation:sgbTwinkle 2.2s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes sgbTwinkle{0%,100%{opacity:0;transform:rotate(45deg) scale(.4)}50%{opacity:1;transform:rotate(45deg) scale(1)}}

/* ---- Abonnés Pro : hexagone allongé (les rôles sont des pilules) ---- */
.sgb-pro{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.6em;padding:.5em 1.5em .5em .9em;overflow:hidden;white-space:nowrap;vertical-align:middle;clip-path:polygon(.85em 0,calc(100% - .85em) 0,100% 50%,calc(100% - .85em) 100%,.85em 100%,0 50%)}
.sgb-pro::before{content:"";position:absolute;inset:-220%;z-index:-2;animation:sgbSpin 3.4s linear infinite}
.sgb-pro::after{content:"";position:absolute;inset:2px;z-index:-1;clip-path:polygon(.8em 0,calc(100% - .8em) 0,100% 50%,calc(100% - .8em) 100%,.8em 100%,0 50%)}
.sgb-pro svg{width:1.15em;height:1.15em;display:block;flex-shrink:0}
.sgb-pro-tag{font-weight:900;font-size:.75em;letter-spacing:.22em;padding:.25em .45em .25em .6em;border-radius:.35em}
.sgb-pro-name{font-weight:900;font-size:1.05em;letter-spacing:.08em}
.sgb-sm .sgb-pro{padding:.35em 1.2em .35em .7em;gap:.4em}
.sgb-wrap-pro::before{inset:-.8em -.6em;border-radius:1.4em}
/* Essentiel : bronze, braise */
.sgb-pro-essentiel::before{background:conic-gradient(from 0deg,#24120a 0deg,#24120a 220deg,#a0582c 280deg,#f3c79a 315deg,#cd7f32 340deg,#24120a 360deg);animation-duration:2.6s}
.sgb-pro-essentiel::after{background:linear-gradient(135deg,#170b05,#2a150b)}
.sgb-pro-essentiel .sgb-pro-tag{background:linear-gradient(135deg,#e7a46b,#a0582c);color:#170b05}
.sgb-pro-essentiel .sgb-anim-text{background-image:linear-gradient(90deg,#e7a46b,#fff1e2,#cd7f32,#e7a46b)}
.sgb-pro-essentiel svg{color:#e7a46b}
.sgb-wrap-essentiel::before{background:radial-gradient(closest-side,rgba(205,127,50,.5),rgba(205,127,50,0))}
.sgb-flame{animation:sgbFlicker 1.3s ease-in-out infinite;transform-origin:50% 90%}
@keyframes sgbFlicker{0%,100%{transform:scale(1) rotate(-2deg);opacity:1}35%{transform:scale(1.12,1.18) rotate(2deg);opacity:.85}70%{transform:scale(.95,1.05) rotate(-1deg);opacity:1}}
.sgb-ember{position:absolute;bottom:.25em;width:.28em;height:.28em;border-radius:999px;background:#f3c79a;box-shadow:0 0 .4em #cd7f32;opacity:0;animation:sgbRise 2.4s ease-out infinite;pointer-events:none;z-index:2}
@keyframes sgbRise{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translateY(-2.8em) scale(.4)}}
/* Avantage : vert platine */
.sgb-pro-avantage::before{background:conic-gradient(from 0deg,#04211f 0deg,#04211f 230deg,#2EC4B6 285deg,#f8fffd 315deg,#cfe9e4 330deg,#2EC4B6 345deg,#04211f 360deg)}
.sgb-pro-avantage::after{background:linear-gradient(135deg,#031a18,#0a2f2b 60%,#1b3b38)}
.sgb-pro-avantage .sgb-pro-tag{background:linear-gradient(135deg,#e6f7f4,#8fe3d8 45%,#2EC4B6);color:#03201d}
.sgb-pro-avantage .sgb-anim-text{background-image:linear-gradient(90deg,#99f6e4,#ffffff,#d6e6e3,#5eead4,#99f6e4)}
.sgb-pro-avantage svg{color:#ccfbf1}
.sgb-wrap-avantage::before{background:radial-gradient(closest-side,rgba(94,234,212,.5),rgba(226,247,244,.2) 60%,rgba(45,212,191,0))}
/* Max : holographique */
.sgb-pro-max::before{background:conic-gradient(#22d3ee,#818cf8,#e879f9,#f472b6,#fde68a,#22d3ee);animation-duration:2.8s}
.sgb-pro-max::after{background:linear-gradient(135deg,#0c0a24,#1e1b4b)}
.sgb-pro-max .sgb-pro-tag{background:linear-gradient(90deg,#22d3ee,#818cf8,#e879f9);color:#0c0a24}
.sgb-pro-max .sgb-anim-text{background-image:linear-gradient(90deg,#a5f3fc,#c7d2fe,#f5d0fe,#fde68a,#a5f3fc)}
.sgb-pro-max svg{color:#c7d2fe}
.sgb-wrap-max::before{background:radial-gradient(closest-side,rgba(129,140,248,.6),rgba(232,121,249,.25) 60%,rgba(0,0,0,0))}
.sgb-star{position:absolute;width:.6em;height:.6em;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:sgbStar 2.2s ease-in-out infinite;pointer-events:none;z-index:2}
.sgb-pro-avantage ~ .sgb-star{background:#ecfffb}
@keyframes sgbStar{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

@media (prefers-reduced-motion: reduce){
  .sgb-shine::after,.sgb-wrap::before,.sgb-anim-text,.sgb-legende::before,.sgb-emblem-aura,.sgb-emblem-ring,.sgb-emblem-ring2,.sgb-emblem-hex::after,
  .sgb-spark,.sgb-pro::before,.sgb-flame,.sgb-ember,.sgb-star{animation:none}
  .sgb-spark,.sgb-ember,.sgb-star{display:none}
}

/* ==========================================================================
   Bouton « Devenir Pro » de la barre de navigation (proposition A : or liquide)
   ========================================================================== */
#mainNav .nav-pro-btn,.nav-pro-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.5em;margin-left:.4em;padding:.68em 1.4em;border:0;border-radius:999px;background:linear-gradient(135deg,#fff1a8,#ffd700 40%,#f5b400);color:#1a1a2e;font-weight:800;font-size:.95em;text-decoration:none;white-space:nowrap;box-shadow:0 6px 18px rgba(245,180,0,.45),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .2s ease,box-shadow .2s ease}
.nav-pro-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:sgbShine 3.8s ease-in-out infinite;pointer-events:none}
.nav-pro-btn svg{width:1.15em;height:1.15em;flex-shrink:0}
.nav-pro-btn:hover,.nav-pro-btn:focus-visible{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 26px rgba(245,180,0,.55);color:#1a1a2e}
.nav-pro-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:1100px){
  #mainNav .nav-pro-btn{width:100%;margin:.6rem 0 .4rem;padding:.95em 1.5em;border-bottom:0;border-radius:999px}
}
@media (prefers-reduced-motion: reduce){.nav-pro-btn::after{animation:none}}