/* ============================================================================
   COMPONENTS (couche « components » ITCSS) — Minigo
   ============================================================================
   Rôle : composants de la coque commune (header, nav, hero, listes, grilles).
   Ordre ITCSS des imports (baseof.html) :
     tokens (settings) → reset (generic) → lowdit-base (elements)
     → system + views → CE FICHIER (components) → utils (utilities)
     → product-doc → site-overrides (site).
   Les utilities (skip-links…) ont été extraites vers css/utils.css.
   ============================================================================ */

/* General */

.minigo-header {
  border-bottom: 1px solid color-mix(in srgb, var(--lowdit-night) 12%, transparent);
  padding: 1rem clamp(1rem, 4vw, 2rem);
}

.minigo-header__inner {
  max-width: var(--lowdit-content-default, 64rem);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: flex-start;
}

@media (min-width: 48rem) {
  .minigo-header__inner {
    flex-wrap: nowrap;
  }
}

/* L'en-tête suit la largeur du contenu (alignement gauche/droit). */
body[class*="minigo--view-"] .minigo-header__inner {
  max-width: var(--lowdit-main-max, var(--lowdit-content-wide, 84rem));
}

.minigo-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.minigo-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.35;
}

@media (min-width: 48rem) {
  .minigo-nav__list {
    flex-wrap: nowrap;
    gap: 0.35rem 1rem;
    font-size: 0.9rem;
  }
}

.minigo-nav__list li {
  margin: 0;
  text-wrap: nowrap;
}

.minigo-nav__spacer {
  flex: 1 1 2rem;
  min-width: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.minigo-nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.minigo-nav a:hover,
.minigo-nav a[aria-current="page"] {
  color: var(--lowdit-violet);
}

.minigo-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--lowdit-font-logo, "Optician Sans", "Subjectivity", ui-sans-serif, system-ui, sans-serif);
  font-weight: 700;
  color: var(--lowdit-night);
  text-decoration: none;
}

/* Marque de module (logo issu de la planche lowdit-brand) */
.lowdit-logo__mark {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  vertical-align: middle;
  flex: none;
}

.lowdit-logo__name {
  display: inline-block;
}

/* Liens de marque dans les thèmes dérivés (sligo, fromago, resugo) */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--lowdit-font-logo, "Optician Sans", "Subjectivity", ui-sans-serif, system-ui, sans-serif);
  font-weight: 700;
}

.minigo-logo:hover {
  color: var(--lowdit-violet);
}

.minigo-search {
  flex: 0 1 16rem;
  width: 100%;
  max-width: 20rem;
  margin-inline-start: auto;
}

.minigo-search input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--lowdit-muted);
  border-radius: 4px;
  font: inherit;
}

.minigo-main {
  max-width: var(--lowdit-content-default, 64rem);
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2rem) 3rem;
}

.minigo-main > h2 {
  margin-block: 2.25rem 1rem;
}

.minigo-main > h2:first-of-type {
  margin-block-start: 1.75rem;
}

.minigo-card-grid {
  display: grid;
  gap: var(--lowdit-grid-gap-lg, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  list-style: none;
  padding: 0;
  margin-block: 0.75rem 2.75rem;
}

.minigo-card {
  border: 1px solid color-mix(in srgb, var(--lowdit-night) 10%, transparent);
  border-radius: 6px;
  padding: 1rem;
  background: var(--lowdit-white);
}

.minigo-card a {
  font-weight: 600;
}

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

.minigo-timeline li {
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lowdit-night) 8%, transparent);
}

.minigo-timeline time {
  color: var(--lowdit-muted);
  font-size: 0.9rem;
}

.minigo-summary,
.minigo-card__summary {
  margin: 0.35rem 0 0;
  color: var(--lowdit-muted);
  max-width: 68ch;
  line-height: 1.5;
}

.minigo-card__meta {
  margin: 0.25rem 0 0;
  color: var(--lowdit-muted);
  font-size: 0.9rem;
}

.minigo-exports {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.minigo-exports a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--lowdit-radius-sm, 6px);
  background: color-mix(in srgb, var(--lowdit-violet) 14%, var(--lowdit-cream));
  border: 1px solid color-mix(in srgb, var(--lowdit-violet) 30%, transparent);
  color: var(--lowdit-night);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.minigo-exports a:hover {
  background: color-mix(in srgb, var(--lowdit-violet) 26%, var(--lowdit-cream));
  border-color: var(--lowdit-violet);
}

.minigo-page-header {
  margin-bottom: 1.5rem;
}

.minigo-page-header h1 {
  margin: 0 0 0.5rem;
}

.minigo-desc {
  color: var(--lowdit-muted);
  margin: 0;
}

/* Largeur par vue : voir css/views/*.css (priorité sur cette coque) */
body[class*="minigo--view-"] .minigo-main {
  max-width: var(--lowdit-main-max, var(--lowdit-content-wide, 84rem));
}

.minigo-hero {
  margin: 0 0 2.5rem;
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--lowdit-night) 10%, transparent);
}

.minigo-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lowdit-violet);
  margin: 0 0 0.75rem;
}

.minigo-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.minigo-hero__lead {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--lowdit-muted);
  margin: 0 0 1rem;
  max-width: 38em;
}

.minigo-hero__intro {
  max-width: 40em;
  line-height: 1.55;
}

.minigo-hero--slides .minigo-hero__eyebrow { color: var(--lowdit-turquoise); }
.minigo-hero--publisher .minigo-hero__eyebrow { color: var(--lowdit-night); }
.minigo-hero--cv .minigo-hero__eyebrow { color: var(--lowdit-violet); }

.minigo-home-section__head {
  margin-bottom: 1.25rem;
}

.minigo-home-section__head h2 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}

.minigo-home-section__head p {
  margin: 0;
  color: var(--lowdit-muted);
}

.minigo-home-section__more {
  margin: 1.25rem 0 0;
  font-weight: 600;
}

.minigo-home-section__more a {
  text-decoration: none;
}

.minigo-home-section__more a:hover {
  text-decoration: underline;
}

.minigo-featured-book {
  display: grid;
  gap: 1.5rem;
  margin: 0 0 2.5rem;
  padding: 1.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lowdit-night) 4%, var(--lowdit-cream));
  border: 1px solid color-mix(in srgb, var(--lowdit-night) 8%, transparent);
}

@media (min-width: 40rem) {
  .minigo-featured-book {
    grid-template-columns: 1fr min(14rem, 35%);
    align-items: center;
  }
}

.minigo-featured-book__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
  color: var(--lowdit-muted);
}

.minigo-featured-book__desc {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.minigo-featured-book__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.minigo-featured-book__cover .catalog-card__visual {
  border-radius: 6px;
  aspect-ratio: 2 / 3;
}

.minigo-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.minigo-btn--primary {
  background: var(--lowdit-night);
  color: var(--lowdit-white);
}

.minigo-btn--primary:hover {
  background: var(--lowdit-violet);
  color: var(--lowdit-white);
}

.minigo-btn--ghost {
  border: 1px solid color-mix(in srgb, var(--lowdit-night) 25%, transparent);
  color: var(--lowdit-night);
}

.minigo-btn--ghost:hover {
  border-color: var(--lowdit-violet);
  color: var(--lowdit-violet);
}

.repogo-toc {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--lowdit-night) 10%, transparent);
}

.repogo-toc ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.6;
}