/* ===== Badge « disponibilité » (availability.css) — markup : profile-data.js (Avail.html) =====
   Une pastille verte qui pulse doucement + « En recherche d'alternance · septembre 2027 », déclinée par environnement :
   --home (accueil, sombre), --win (Windows, verre clair), --linux (aubergine / orange), --mini (panneau supérieur Linux).
   Le point est la seule animation continue (transform + opacity) ; coupée en reduced-motion, animations coupées
   et appareil modeste. */
.avail{--av-dot:#2fbf71;display:inline-flex;align-items:center;gap:.6em;max-width:100%;line-height:1.3;font-weight:600;vertical-align:middle}
.avail-dot{position:relative;flex:none;width:.62em;height:.62em;border-radius:50%;background:var(--av-dot)}
.avail-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--av-dot);opacity:0;animation:availPulse 2.8s ease-out infinite}
@keyframes availPulse{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}
.avail-txt{min-width:0}
.avail-txt>span[data-avail-date]{font-weight:500;opacity:.85}

/* Accueil */
.avail--home{padding:8px 15px;border:1px solid #3ddc8455;border-radius:99px;background:#3ddc8414;color:#dff7e8;font-size:12.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.badge.avail--home{gap:.6em}

/* Windows : verre clair, bleu / rose */
.avail--win{padding:8px 15px;border:1px solid #bfe6d3;border-radius:99px;background:linear-gradient(95deg,#effbf5,#f4f1ff);color:#17513a;font-size:13px;box-shadow:0 8px 20px #2fbf7118}
.avail--win .avail-dot{width:.7em;height:.7em}

/* Linux : aubergine + orange */
.avail--linux{padding:7px 14px;border:1px solid color-mix(in srgb,var(--accent,#e95420) 45%,transparent);border-radius:99px;background:color-mix(in srgb,var(--accent,#e95420) 11%,transparent);color:var(--win-fg,#24192d);font-size:12.5px}

/* Petit indicateur du panneau supérieur Linux */
.avail--mini{gap:.5em;padding:0 9px;height:22px;border-radius:99px;background:#ffffff14;color:#f5f1f7;font-size:12px}
.top .avail-top{position:absolute;left:98px;top:6px;display:flex}
@media (max-width:900px){.top .avail-top{display:none}}

/* Bouton « Me proposer une alternance » */
.avail-mail{display:inline-flex;align-items:center;gap:.5em;padding:9px 16px;border-radius:99px;background:linear-gradient(95deg,#ff5b7e,#7058dc);color:#fff;font:700 13px 'DM Sans',system-ui,sans-serif;text-decoration:none;box-shadow:0 10px 22px #7058dc33;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.avail-mail::after{content:'→'}
.avail-mail:hover{transform:translateY(-2px);box-shadow:0 14px 28px #7058dc44}
.avail-mail:focus-visible{outline:2px solid #7058dc;outline-offset:3px}
.avail-mail--linux{background:var(--accent,#e95420);box-shadow:0 8px 18px color-mix(in srgb,var(--accent,#e95420) 35%,transparent)}
.avail-mail--home{background:#3ddc84;color:#06240f;box-shadow:none}

/* thème sombre (ex-@media prefers-color-scheme) */

  :where(:root[data-theme="dark"]) .avail--win {border-color:#2d6f52;background:linear-gradient(95deg,#12332a,#211b44);color:#c9f5df}

html.lang-rtl .avail-mail::after{content:'←'}
.perf-lite .avail-dot::after,body.no-anim .avail-dot::after{animation:none}
@media (prefers-reduced-motion:reduce){.avail-dot::after{animation:none}.avail-mail{transition:none}}
.avail-wrap{display:flex;justify-content:center;margin-bottom:8px}
.start-user .avail--mini{background:#2fbf7118;color:inherit;height:auto;padding:3px 9px;font-size:11px;margin-top:6px}
.contact-avail,.ab-avail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.term-avail{padding:10px 14px 0}
.ov-avail{display:flex;justify-content:center;margin:8px 0 0}
.ov-avail .avail--linux{color:#f5f1f7}

/* Bandeau « alternance » du Contact Windows : même composant et mêmes données que le badge, en grand */
.avail--banner{padding:16px 22px;border:1px solid #9fdcc0;border-radius:16px;background:linear-gradient(100deg,#effbf5,#f4f1ff);color:#14513a;font-size:17px;box-shadow:0 12px 28px #2fbf7120}
.avail--banner .avail-dot{width:.8em;height:.8em}
/* thème sombre (ex-@media prefers-color-scheme) */
:where(:root[data-theme="dark"]) .avail--banner {border-color:#2d6f52;background:linear-gradient(100deg,#12332a,#211b44);color:#c9f5df}
