/* ============================================================
   LEXIQUE — RÉHAUSSE COULEUR (version écran) — MODE PEPS
   Surcouche par-dessus styles.css.
   Colore les pages des chapitres par famille via .fam-* sur <Page>.
   ============================================================ */

:root {
  /* Minérales — terracotta vif */
  --fam-min:        #d35e1f;
  --fam-min-soft:   #fbe0c8;
  --fam-min-deep:   #7a2e08;
  --fam-min-bg:     #fdf3e6;

  /* Végétales — vert herbe */
  --fam-veg:        #4a8a3a;
  --fam-veg-soft:   #d8ecc4;
  --fam-veg-deep:   #1f4e1a;
  --fam-veg-bg:     #f1f7e8;

  /* Animales — rouge bordeaux profond */
  --fam-ani:        #b03040;
  --fam-ani-soft:   #f4ccd0;
  --fam-ani-deep:   #5e1218;
  --fam-ani-bg:     #fbeef0;

  /* Spécifiques — ocre soleil */
  --fam-spe:        #d4a02c;
  --fam-spe-soft:   #f7e4a8;
  --fam-spe-deep:   #6e4f10;
  --fam-spe-bg:     #fcf5dd;
}

/* Variables famille appliquées à la page */
.page.fam-minerales   { --fam-accent: var(--fam-min); --fam-tint: var(--fam-min-soft); --fam-deep: var(--fam-min-deep); --fam-bg: var(--fam-min-bg); }
.page.fam-vegetales   { --fam-accent: var(--fam-veg); --fam-tint: var(--fam-veg-soft); --fam-deep: var(--fam-veg-deep); --fam-bg: var(--fam-veg-bg); }
.page.fam-animales    { --fam-accent: var(--fam-ani); --fam-tint: var(--fam-ani-soft); --fam-deep: var(--fam-ani-deep); --fam-bg: var(--fam-ani-bg); }
.page.fam-specifiques { --fam-accent: var(--fam-spe); --fam-tint: var(--fam-spe-soft); --fam-deep: var(--fam-spe-deep); --fam-bg: var(--fam-spe-bg); }

/* ============================================================
   FOND DE PAGE TEINTÉ + BANDEAU LATÉRAL
   ============================================================ */
.page.fam-minerales,
.page.fam-vegetales,
.page.fam-animales,
.page.fam-specifiques {
  position: relative;
  background:
    radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--fam-tint) 55%, transparent), transparent 38%),
    radial-gradient(circle at 5% 95%, color-mix(in srgb, var(--fam-tint) 40%, transparent), transparent 42%),
    var(--fam-bg) !important;
}

/* Bandeau coloré en haut */
.page.fam-minerales::before,
.page.fam-vegetales::before,
.page.fam-animales::before,
.page.fam-specifiques::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--fam-accent), var(--fam-deep), var(--fam-accent));
  z-index: 5;
  pointer-events: none;
}

/* Liseré gauche */
.page.fam-minerales::after,
.page.fam-vegetales::after,
.page.fam-animales::after,
.page.fam-specifiques::after {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 0;
  width: 4px;
  background: var(--fam-accent);
  opacity: 0.55;
  z-index: 5;
  pointer-events: none;
}

/* ============================================================
   EYEBROW & TITRE DE SECTION
   ============================================================ */
.page.fam-minerales .eyebrow,
.page.fam-vegetales .eyebrow,
.page.fam-animales .eyebrow,
.page.fam-specifiques .eyebrow {
  color: var(--fam-accent);
  font-weight: 700;
}

.page.fam-minerales .eyebrow::before,
.page.fam-vegetales .eyebrow::before,
.page.fam-animales .eyebrow::before,
.page.fam-specifiques .eyebrow::before {
  background: var(--fam-accent) !important;
}

.page.fam-minerales .section-title,
.page.fam-vegetales .section-title,
.page.fam-animales .section-title,
.page.fam-specifiques .section-title {
  color: var(--fam-deep);
}

.page.fam-minerales .section-title::after,
.page.fam-vegetales .section-title::after,
.page.fam-animales .section-title::after,
.page.fam-specifiques .section-title::after {
  background: var(--fam-accent) !important;
  height: 3px !important;
  width: 60px !important;
}

/* ============================================================
   FICHES (cartes matières) — fond légèrement teinté + accent vif
   ============================================================ */
.page.fam-minerales .fiche,
.page.fam-vegetales .fiche,
.page.fam-animales .fiche,
.page.fam-specifiques .fiche {
  border-top: 4px solid var(--fam-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fam-tint) 25%, var(--paper)), var(--paper)) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--fam-accent) 12%, transparent);
}

.page.fam-minerales .fiche:hover,
.page.fam-vegetales .fiche:hover,
.page.fam-animales .fiche:hover,
.page.fam-specifiques .fiche:hover {
  box-shadow: 0 4px 18px color-mix(in srgb, var(--fam-accent) 25%, transparent);
  border-top-color: var(--fam-deep);
}

.page.fam-minerales .fiche-name,
.page.fam-vegetales .fiche-name,
.page.fam-animales .fiche-name,
.page.fam-specifiques .fiche-name {
  color: var(--fam-deep);
}

.page.fam-minerales .fiche-family,
.page.fam-vegetales .fiche-family,
.page.fam-animales .fiche-family,
.page.fam-specifiques .fiche-family {
  color: var(--fam-accent);
  font-weight: 700;
}

.page.fam-minerales .fiche-family-dot,
.page.fam-vegetales .fiche-family-dot,
.page.fam-animales .fiche-family-dot,
.page.fam-specifiques .fiche-family-dot {
  background: var(--fam-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fam-tint) 80%, white);
}

.page.fam-vegetales .fiche.hero {
  border-top-width: 6px;
}

/* ============================================================
   PAGE HEADER & FOOTER — couleurs vives
   ============================================================ */
.page.fam-minerales .page-num,
.page.fam-vegetales .page-num,
.page.fam-animales .page-num,
.page.fam-specifiques .page-num {
  color: var(--fam-accent);
  font-weight: 700;
}

.page.fam-minerales .page-header > span:first-child,
.page.fam-vegetales .page-header > span:first-child,
.page.fam-animales .page-header > span:first-child,
.page.fam-specifiques .page-header > span:first-child {
  color: var(--fam-accent);
  font-weight: 700;
}

.page.fam-minerales .page-header,
.page.fam-vegetales .page-header,
.page.fam-animales .page-header,
.page.fam-specifiques .page-header,
.page.fam-minerales .page-footer,
.page.fam-vegetales .page-footer,
.page.fam-animales .page-footer,
.page.fam-specifiques .page-footer {
  border-color: color-mix(in srgb, var(--fam-accent) 35%, transparent) !important;
}

/* ============================================================
   BLOCS "À RETENIR" / "Saviez-vous"
   ============================================================ */
.page.fam-minerales .block.saviez,
.page.fam-vegetales .block.saviez,
.page.fam-animales .block.saviez,
.page.fam-specifiques .block.saviez {
  border-left: 4px solid var(--fam-accent);
  background: linear-gradient(135deg, var(--fam-tint), color-mix(in srgb, var(--fam-tint) 35%, var(--cream)));
  padding-left: 16px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--fam-accent) 15%, transparent);
}

.page.fam-minerales .block.saviez .block-label,
.page.fam-vegetales .block.saviez .block-label,
.page.fam-animales .block.saviez .block-label,
.page.fam-specifiques .block.saviez .block-label {
  color: var(--fam-deep);
  font-weight: 700;
}

/* ============================================================
   TABLEAU DATA
   ============================================================ */
.page.fam-minerales .data thead th,
.page.fam-vegetales .data thead th,
.page.fam-animales .data thead th,
.page.fam-specifiques .data thead th {
  color: var(--fam-deep);
  border-bottom: 2px solid var(--fam-accent) !important;
  background: color-mix(in srgb, var(--fam-tint) 40%, transparent);
}

.page.fam-minerales .data tbody tr:hover,
.page.fam-vegetales .data tbody tr:hover,
.page.fam-animales .data tbody tr:hover,
.page.fam-specifiques .data tbody tr:hover {
  background: color-mix(in srgb, var(--fam-tint) 30%, transparent);
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.page.fam-minerales .nav-btn.active,
.page.fam-vegetales .nav-btn.active,
.page.fam-animales .nav-btn.active,
.page.fam-specifiques .nav-btn.active {
  border-color: var(--fam-accent) !important;
  background: var(--fam-accent) !important;
  color: white !important;
}

.page.fam-minerales .nav-btn:hover,
.page.fam-vegetales .nav-btn:hover,
.page.fam-animales .nav-btn:hover,
.page.fam-specifiques .nav-btn:hover {
  border-color: var(--fam-accent);
  color: var(--fam-deep);
}

/* ============================================================
   CHAPTER OPENERS — un poil plus vifs aussi
   ============================================================ */
.page.chapter-opener.fam-minerales,
.page.chapter-opener.fam-vegetales,
.page.chapter-opener.fam-animales,
.page.chapter-opener.fam-specifiques {
  background-image: none !important;
}