/* ============================================================
   COMPOSANTS.CSS — Repère
   Composants partagés entre les vues : en-tête de marque,
   badges, listes/items, états (vide, erreur, chargement).
   Dépend des variables de base.css.
   ============================================================ */

/* ---------- En-tête fixe : fond blanc, logo, « Repère by OptimizerLabs » ---------- */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--entete-hauteur);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.entete__marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.entete__logo {
  height: 2.4rem;
  width: auto;
}

/* « Repère » avec « by OptimizerLabs » en dessous */
.entete__titres {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.entete__nom {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
}

.entete__editeur {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);   /* le « by » */
}

.entete__optimizer { color: var(--color-primary); }        /* #458651 */
.entete__labs      { color: var(--color-primary-light); }  /* #97b879 */

/* Actions de session (connexion / déconnexion / administrer). Poussées à droite,
   secondaires : la consultation reste l'usage prioritaire. */
.entete__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* La forme de déconnexion ne doit pas casser l'alignement flex : ses enfants
   participent directement à la rangée d'actions. */
.entete__deconnexion { display: contents; }

/* Bouton d'action, valable pour <a> comme pour <button>. */
.entete__action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--touch-target);
  padding: 0 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.entete__action:active { background: var(--color-primary-bg); }
.entete__action i { font-size: 1rem; }

/* Sur très petit écran, les libellés passent en lecture d'écran seule : les icônes
   (avec leur cible tactile) suffisent, on économise la largeur. */
@media (max-width: 400px) {
  .entete__action-texte {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge--critique { background: var(--color-danger-bg); color: var(--color-danger); }
.badge--valide   { background: var(--color-success-bg); color: var(--color-success); }
.badge--neutre   { background: var(--color-surface-alt); color: var(--color-text-secondary); }
.badge--domaine  { background: var(--color-primary-bg); color: var(--color-primary-dark); }

/* ---------- Listes tactiles (valeurs de navigation, fiches) ---------- */
.liste { display: flex; flex-direction: column; gap: 0.6rem; }

.item {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1rem;
  min-height: var(--touch-target-lg);
  text-decoration: none;
  color: var(--color-text);
}

.item:active {
  border-left-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.item__titre { font-weight: 600; }

.item__extrait {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item__meta { margin-top: 0.4rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---------- États ---------- */
.etat-vide {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
}

.etat-vide__icone { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }

.erreur {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius-lg);
  padding: 1rem;
}

.spinner {
  width: 1.75rem;
  height: 1.75rem;
  margin-inline: auto;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: rotation 0.8s linear infinite;
}

@keyframes rotation { to { transform: rotate(360deg); } }