/* =============================================================
   Les Cerises — En-tête d'application (composant STANDARD)
   -------------------------------------------------------------
   Carte `--radius-md` posée en haut de page :

     [ pastille cherry + titre ]  ……  [ nav (option) ]  [ actions ]

   Formalise la convention de DESIGN_SYSTEM.md §5. Toutes les apps
   partagent ce fichier : le header est identique partout, seul le
   contenu des slots « nav » et « actions » varie.

   Signature de marque : le suffixe « des Cerises » du titre est rendu
   en accent (`<strong>`) — il se recolore avec la communauté, comme la
   pastille du logo. Tous les titres d'apps finissent par ce suffixe
   (L'annuaire / Le petit précis / Le coffre à idées / La Bibliothèque…).

   Ne consomme QUE des tokens (tokens.css doit être chargé avant).
   Source unique : packages/ui/ — copie dans chaque app via `make sync`.
   ============================================================= */

.app-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ---------------- Marque : pastille + titre ---------------- */
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto; /* pousse nav + actions vers la droite */
    min-width: 0;
}

.logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    /* Couleur unie (animable → fondu fluide cerises/pixels) + voile fixe pour
       le relief. Un dégradé accent→accent-hover ne se transitionne pas. */
    background-color: var(--accent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.06) 100%);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--shadow-primary);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}
.logo-icon i { width: 22px; height: 22px; }

.header-logo h1 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Suffixe « des Cerises » : signature, suit l'accent de la communauté. */
.header-logo h1 strong {
    color: var(--accent);
    font-weight: 700;
    transition: color 0.3s ease;
}

/* ---------------- Navigation interne (slot optionnel) ---------------- */
/* Utilisé par les apps à rubriques (precis…). Absent ailleurs (annuaire). */
.app-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.app-nav a {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.app-nav a:hover { color: var(--text-main); }
.app-nav a.is-active { color: var(--accent); }

/* ---------------- Actions (communauté, thème, retour…) ---------------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ---------------- Boutons : base commune ----------------
   Les apps ajoutent leurs variantes (.btn-primary, .btn-back…). */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s, color 0.2s;
}
.btn:hover { background-color: var(--bg-tertiary); }
.btn:active { transform: scale(0.97); }
.btn i { width: 18px; height: 18px; }
.btn-icon { padding: 9px; }

/* Bascules d'icône : thème (soleil/lune) et communauté (cerise/pixel). */
.btn-icon .moon-icon { display: none; }
:root[data-theme="dark"] .btn-icon .sun-icon { display: none; }
:root[data-theme="dark"] .btn-icon .moon-icon { display: inline-flex; }

.btn-icon .pixels-icon { display: none; }
:root[data-community="pixels"] .btn-icon .cerises-icon { display: none; }
:root[data-community="pixels"] .btn-icon .pixels-icon { display: inline-flex; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
    .app-header { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
    .header-logo h1 { font-size: 1.1rem; }
    /* La nav passe sur une 2e ligne et défile plutôt que de casser la carte. */
    .app-nav { order: 3; width: 100%; gap: 18px; }
}