/* portal.css — compléments à Tailwind pour le Developer Portal WattMind.

   Tout est encapsulé dans @layer components pour que les utilities Tailwind
   (ex. `.hidden`, `.text-red-600`) gagnent dans la cascade. Sans ce layer,
   les règles brutes ici écrasent silencieusement les utilities (les styles
   hors-layer ont une priorité supérieure à tout @layer en CSS v4). */

/* Tabular numerals globaux : tous les nombres (prix, quotas, ticker, JSON, IDs)
   s'alignent en colonnes proprement, et un changement de valeur n'induit pas
   de reflow horizontal (critique pour le panel live dans le hero). */
body {
    font-feature-settings: 'cv11';
    font-variant-numeric: tabular-nums;
}

@layer components {

.text-wm-600 { color: #16a34a; }
.text-wm-700 { color: #15803d; }
.text-wm-800 { color: #166534; }
.text-wm-900 { color: #14532d; }

.bg-wm-50   { background-color: #f0fdf4; }
.bg-wm-100  { background-color: #dcfce7; }
.bg-wm-600  { background-color: #16a34a; }
.bg-wm-700  { background-color: #15803d; }

.border-wm-200 { border-color: #bbf7d0; }
.border-wm-600 { border-color: #16a34a; }

.hover\:bg-wm-50:hover    { background-color: #f0fdf4; }
.hover\:bg-wm-700:hover   { background-color: #15803d; }
.hover\:bg-wm-800:hover   { background-color: #166534; }
.hover\:text-wm-700:hover { color: #15803d; }
.hover\:text-wm-800:hover { color: #166534; }
.hover\:border-wm-200:hover { border-color: #bbf7d0; }

.focus\:ring-wm-600:focus { box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.4); }
.focus\:border-wm-600:focus { border-color: #16a34a; }

/* Gradient helper (Tailwind `from-*` sur CDN ne résout pas toujours notre palette). */
.from-wm-50 {
    --tw-gradient-from: #f0fdf4;
    --tw-gradient-to: rgba(240, 253, 244, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Spinner utilisé dans les boutons pendant les appels API. */
@keyframes wm-spin {
    to { transform: rotate(360deg); }
}

.wm-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: wm-spin 0.6s linear infinite;
    vertical-align: -0.125em;
}

/* Fade-in discret pour les sections qui s'affichent après un fetch. */
@keyframes wm-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wm-fade-in {
    animation: wm-fade-in 0.25s ease-out;
}

/* Scrollbar mince dans les blocs <pre> code. */
.wm-code::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.wm-code::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}
.wm-code::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

/* Focus ring discret pour le clavier-only (Tailwind 4 n'est pas disponible en CDN). */
.wm-focus:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

/* Transitions douces par défaut sur les boutons. */
button:not(:disabled) {
    transition: all 0.15s ease-in-out;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   Eyebrow pill — pattern de labels de sections du Design System.
   Mono kebab-case avec préfixe vert "//", utilisable on light et on dark.
   ============================================================ */
.eb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    line-height: 1;
}
.eb::before {
    content: '//';
    color: #16a34a;
    font-weight: 700;
    letter-spacing: -0.05em;
}
.eb.on-dark {
    color: #86efac;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.30);
}
.eb.on-dark::before { color: #4ade80; }
.eb.muted {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
}
.eb.muted::before { color: #94a3b8; }

/* ============================================================
   Buttons motion — translateY GPU-only au hover, snap-down au press.
   À combiner avec .btn-primary-anim pour le glow sur CTA principal dark.
   ============================================================ */
.btn-anim {
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease,
                background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease;
    will-change: transform;
}
.btn-anim:hover { transform: translateY(-1px); }
.btn-anim:active {
    transform: translateY(0);
    transition-duration: 0.06s;
}
.btn-primary-anim:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset,
                0 10px 28px -8px rgba(34, 197, 94, 0.55);
}

}