/* ===========================================================================
   z311 — Composants partagés (boutons, inputs, modal, logo, cards…)
   ===========================================================================
   Style "app polishée" inspirée du terminal : monospace, sobre, blanc/cassé,
   bordures fines. Pas de glow CRT, pas d'ASCII gratuit, pas de blink partout.
   =========================================================================== */

/* --- LOGO Z311 (pentagone creux / outline) -------------------------------
   Réalisé en SVG inline pour rester net à toute taille. Style stroke-only
   (cohérent avec le loader). */
.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--fg-strong);
}
.logo svg { width: 100%; height: 100%; overflow: visible; }
.logo path {
    fill: none;
    stroke: currentColor;
    stroke-width: 8;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Logo cliquable (anchor wrapping) : pas de bordure de lien */
a.logo, a > .logo { border-bottom: 0; }

/* --- LOGO LOADER (pentagone qui s'assemble côté par côté) -----------------
   Animation de 1.5s max. Trait blanc franc, sans glow. */
.logo-loader {
    width: 80px;
    height: 80px;
    color: var(--fg-strong);
}
.logo-loader svg { width: 100%; height: 100%; overflow: visible; }
.logo-loader line {
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    /* Boucle infinie : le pentagone se trace, reste visible un instant,
       puis s'efface dans le même ordre. Si le chargement traîne, le user
       voit l'app "respirer" au lieu d'une image figée. */
    animation: z-draw-side 2.4s ease-in-out infinite;
}
.logo-loader line:nth-child(1) { animation-delay: 0.00s; }
.logo-loader line:nth-child(2) { animation-delay: 0.16s; }
.logo-loader line:nth-child(3) { animation-delay: 0.32s; }
.logo-loader line:nth-child(4) { animation-delay: 0.48s; }
.logo-loader line:nth-child(5) { animation-delay: 0.64s; }
@keyframes z-draw-side {
    0%   { stroke-dashoffset: 80; }   /* invisible (côté en attente) */
    35%  { stroke-dashoffset: 0; }    /* tracé (assemblé) */
    65%  { stroke-dashoffset: 0; }    /* maintenu visible */
    100% { stroke-dashoffset: 80; }   /* effacé, prêt à recommencer */
}

/* --- LOADER SCREEN ------------------------------------------------------- */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    transition: opacity 250ms ease;
}
.loader.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.loader-text {
    margin-top: var(--space-4);
    font-size: 12px;
    color: var(--fg-muted);
    letter-spacing: 0.6px;
}
.loader-text .caret {
    margin-left: 1px;
    animation: z-blink 1.1s steps(1) infinite;
}
@keyframes z-blink { 50% { opacity: 0; } }

/* --- BUTTONS -------------------------------------------------------------
   Boutons "app" propres : pas de crochets, juste un rectangle net. */
.btn {
    appearance: none;
    border: var(--border-w) solid var(--border-strong);
    background: var(--bg-elev-1);
    color: var(--fg);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 10px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform 80ms ease;
}
.btn:hover    { border-color: var(--fg-strong); background: var(--bg-elev-2); }
.btn:active   { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible {
    outline: 2px solid var(--fg-strong);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--fg-strong);
    color: var(--bg);
    border-color: var(--fg-strong);
}
.btn-primary:hover { background: var(--fg); border-color: var(--fg); }

.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
    background: transparent;
}
.btn-danger:hover { background: rgba(249, 122, 122, 0.08); }
:root[data-theme='light'] .btn-danger:hover,
:root:not([data-theme='dark']) .btn-danger:hover { background: rgba(163, 50, 47, 0.08); }

.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--fg-muted);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--border-strong); }

.btn-block { width: 100%; display: block; }
.btn-sm    { font-size: 12px; padding: 7px 10px; }

/* Icon button (header) */
.icon-btn {
    appearance: none;
    background: transparent;
    border: var(--border-w) solid var(--border);
    color: var(--fg);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius);
    font-size: 16px;
    line-height: 1;
    transition: border-color var(--transition), color var(--transition),
                background var(--transition);
}
.icon-btn:hover { border-color: var(--fg-strong); color: var(--fg-strong); }
.icon-btn.is-active {
    border-color: var(--fg-strong);
    color: var(--fg-strong);
    background: var(--accent-soft);
}

/* --- INPUTS -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: var(--space-3); }
.field label {
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.field-hint {
    font-size: 11px;
    color: var(--fg-dim);
    line-height: 1.4;
}
.input,
.textarea,
select.input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-elev-1);
    color: var(--fg);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    /* 16px minimum : iOS Safari déclenche un zoom auto sur focus si < 16px,
       ce qu'on veut éviter (cf. désactivation du zoom dans le viewport). */
    font-size: 16px;
    caret-color: var(--fg-strong);
    transition: border-color var(--transition), background var(--transition);
    /* Empêche le débordement horizontal de gros inputs */
    max-width: 100%;
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-dim); }
.input:focus,
.textarea:focus {
    outline: none;
    border-color: var(--fg-strong);
}
.textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

/* --- CARDS --------------------------------------------------------------- */
.card {
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* --- BANNER (alertes inline) --------------------------------------------- */
.banner {
    margin: var(--space-3) 0;
    padding: 10px 12px;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--bg-elev-1);
}
.banner.is-error { color: var(--danger);  border-color: var(--danger); }
.banner.is-ok    { color: var(--success); border-color: var(--success); }
.banner.is-hidden { display: none; }

/* --- TABS PILLS ---------------------------------------------------------- */
.tabs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-2) 0 var(--space-4);
}
.tab-pill {
    appearance: none;
    padding: 7px 12px;
    font-size: 12px;
    background: transparent;
    border: var(--border-w) solid var(--border);
    color: var(--fg-muted);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    transition: color var(--transition), border-color var(--transition),
                background var(--transition);
}
.tab-pill:hover { color: var(--fg); border-color: var(--border-strong); }
.tab-pill.is-active {
    color: var(--bg);
    background: var(--fg-strong);
    border-color: var(--fg-strong);
}

/* --- MODAL --------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: z-fade 140ms ease;
}
.modal-backdrop.is-hidden { display: none; }
.modal {
    width: 100%;
    max-width: 420px;
    background: var(--bg-elev-2);
    border: var(--border-w) solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-2);
    animation: z-pop 160ms ease;
}
.modal h3 { margin: 0 0 var(--space-2); font-size: 15px; }
.modal p  { margin: 0 0 var(--space-3); color: var(--fg-muted); font-size: 13px; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
@keyframes z-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes z-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* --- INSTALL BANNER ------------------------------------------------------ */
.install-banner {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--fg-muted);
}
.install-banner strong { color: var(--fg-strong); }
.install-banner.is-hidden { display: none; }
.install-banner .actions {
    margin-top: var(--space-2);
    display: flex;
    gap: var(--space-2);
}