/* ==========================================================================
   Lockace — Page « Mon carnet de bord »
   Feuille propre à une page, chargée uniquement par /mon-carnet/
   (même principe que quiz.css et local-data.css).
   ========================================================================== */

.carnet-stats {
  margin-block: var(--space-6);
}

.carnet-section {
  margin-block: var(--space-7);
}

.carnet-section h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-h3);
}

/* Avertissements et invitation
   -------------------------------------------------------------------------- */

/* Stockage partiel : une information, pas une alerte — d'où le ton discret. */
.carnet-notice {
  margin-block: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.carnet-invitation {
  margin-block: var(--space-6);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  background:
    radial-gradient(28rem 14rem at 50% 0%, rgb(221 119 125 / 0.12), transparent),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.carnet-invitation p {
  margin-inline: auto;
  max-width: var(--container-narrow);
  color: var(--color-text-muted);
}

.carnet-invitation-lead {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
}

.carnet-invitation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Barre de progression
   -------------------------------------------------------------------------- */

.carnet-bar {
  height: 10px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.carnet-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary-soft));
  border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: no-preference) {
  .carnet-bar-fill {
    transition: width 400ms ease;
  }
}

.carnet-bar-caption {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Liste du catalogue
   -------------------------------------------------------------------------- */

.carnet-catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carnet-catalogue-item {
  /* `base.css` borne `li` à 70ch pour la lisibilité des textes suivis. Ces
     lignes-ci sont une mise en page, pas de la prose : elles doivent occuper
     toute la colonne, sinon l'état se décroche du bord droit. */
  max-width: none;
  display: grid;
  /* Coche · titre · état : l'état reste calé à droite quel que soit le titre. */
  grid-template-columns: 1.25rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.carnet-catalogue-item.is-done {
  border-color: rgb(76 175 117 / 0.5);
}

.carnet-mark {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  text-align: center;
}

.carnet-catalogue-item.is-done .carnet-mark {
  color: var(--color-success);
}

.carnet-catalogue-link {
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.carnet-catalogue-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* L'état est écrit, pas seulement suggéré par la coche et la couleur. */
.carnet-state {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.carnet-catalogue-item.is-done .carnet-state {
  color: var(--color-success);
}

/* Dernières parties
   -------------------------------------------------------------------------- */

.carnet-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.carnet-timeline-item {
  /* Même raison que `.carnet-catalogue-item` : la borne de 70ch de `base.css`
     couperait la ligne en plein milieu de la largeur disponible. */
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.carnet-timeline-item:last-child {
  border-bottom: 0;
}

.carnet-timeline-title {
  flex: 1 1 14rem;
}

.carnet-timeline-detail {
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.carnet-timeline-date {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Rappel de fin de page
   -------------------------------------------------------------------------- */

.carnet-footnote {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Succès (Lot 2.3)
   -------------------------------------------------------------------------- */

.carnet-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carnet-achievement {
  /* Même raison qu'ailleurs : `base.css` borne `li` à 70ch pour la prose. */
  max-width: none;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md);
}

.carnet-achievement-icon {
  font-size: 1.75rem;
  line-height: 1;
  text-align: center;
}

.carnet-achievement-label {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

.carnet-achievement-description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.carnet-achievement-date {
  align-self: start;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .carnet-achievement {
    grid-template-columns: 2.5rem 1fr;
  }

  .carnet-achievement-date {
    grid-column: 2;
  }
}

/* Parcours thématiques (Lot 2.4)
   -------------------------------------------------------------------------- */

.carnet-series {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carnet-series-item {
  max-width: none;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.carnet-series-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.carnet-series-label {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
}

.carnet-series-count {
  margin: 0;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.carnet-series-description,
.carnet-series-next,
.carnet-series-done {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.carnet-series-done {
  color: var(--color-success);
}