/* ============================================================
   LEXIQUE CLASSIQUE — MOTION & COULEUR (écran)
   Surcouche. À charger APRÈS classique-couleur-ecran.css
   ============================================================ */

/* ============================================================
   1. EXTENSION DE PALETTE — accents vifs en plus du système
   ============================================================ */
:root {
  --pop-coral:    #ff5d3a;
  --pop-magenta:  #d92a7c;
  --pop-amber:    #f7a823;
  --pop-cyan:     #1cb5c0;
  --pop-violet:   #7d4fc7;
  --pop-lime:     #8fc23a;
}

/* ============================================================
   2. KEYFRAMES partagées
   ============================================================ */
@keyframes cm-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cm-pop-in {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cm-shimmer {
  0%   { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes cm-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}
@keyframes cm-pulse-ring {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes cm-draw-line {
  to { stroke-dashoffset: 0; }
}
@keyframes cm-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes cm-orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 0)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r, 0)) rotate(-360deg); }
}
@keyframes cm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes cm-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   3. REVEAL — fiches & sections au scroll
   ============================================================ */
.cm-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1),
              transform 0.7s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--cm-delay, 0s);
}
.cm-reveal.cm-in {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal cascade pour les fiches dans une grille */
.fiche-grid > .fiche.cm-reveal:nth-child(1)  { --cm-delay: 0.00s; }
.fiche-grid > .fiche.cm-reveal:nth-child(2)  { --cm-delay: 0.06s; }
.fiche-grid > .fiche.cm-reveal:nth-child(3)  { --cm-delay: 0.12s; }
.fiche-grid > .fiche.cm-reveal:nth-child(4)  { --cm-delay: 0.18s; }
.fiche-grid > .fiche.cm-reveal:nth-child(5)  { --cm-delay: 0.24s; }
.fiche-grid > .fiche.cm-reveal:nth-child(6)  { --cm-delay: 0.30s; }
.fiche-grid > .fiche.cm-reveal:nth-child(7)  { --cm-delay: 0.36s; }
.fiche-grid > .fiche.cm-reveal:nth-child(8)  { --cm-delay: 0.42s; }

/* ============================================================
   4. TITRES DE SECTION — gradient animé selon famille
   ============================================================ */
.page.fam-minerales .section-title,
.page.fam-vegetales .section-title,
.page.fam-animales  .section-title,
.page.fam-specifiques .section-title {
  background: linear-gradient(
    100deg,
    var(--fam-deep) 0%,
    var(--fam-accent) 35%,
    var(--fam-deep) 65%,
    var(--fam-accent) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: cm-gradient-shift 9s ease-in-out infinite;
}

/* Impression : background-clip:text ne s'imprime pas -> couleur pleine (thème clair) */
@media print {
  .page.fam-minerales .section-title,
  .page.fam-vegetales .section-title,
  .page.fam-animales  .section-title,
  .page.fam-specifiques .section-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
            background-clip: border-box !important;
    -webkit-text-fill-color: var(--fam-deep, #2d2a22) !important;
    color: var(--fam-deep, #2d2a22) !important;
    animation: none !important;
  }
}

/* Trait sous le titre — animé à l'apparition */
.page.fam-minerales .section-title::after,
.page.fam-vegetales .section-title::after,
.page.fam-animales  .section-title::after,
.page.fam-specifiques .section-title::after {
  display: none !important;
  content: none !important;
}

/* Trait sous le titre retiré */
.section-title::after {
  content: none !important;
  display: none !important;
}
.section-title { margin-bottom: 20px; }

/* Eyebrow + petit point animé */
.page.fam-minerales .eyebrow,
.page.fam-vegetales .eyebrow,
.page.fam-animales  .eyebrow,
.page.fam-specifiques .eyebrow {
  position: relative;
}
.page.fam-minerales .eyebrow::after,
.page.fam-vegetales .eyebrow::after,
.page.fam-animales  .eyebrow::after,
.page.fam-specifiques .eyebrow::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fam-accent);
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 var(--fam-accent);
  animation: cm-blink 1.6s ease-in-out infinite;
}
@keyframes cm-blink {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fam-accent) 70%, transparent); }
  60%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--fam-accent) 0%, transparent); }
}

/* ============================================================
   5. NPK BARS — gradient + animation au reveal
   ============================================================ */
.npk-bar-track {
  height: 9px !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-edge) 60%, white) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  overflow: hidden;
  position: relative;
}
.npk-bar-track::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: cm-shimmer 3s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}
.npk-bar-fill {
  height: 100% !important;
  border-radius: 999px;
  position: relative;
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--bar-color, var(--c-N)) 70%, white) 0%,
    var(--bar-color, var(--c-N)) 60%,
    color-mix(in srgb, var(--bar-color, var(--c-N)) 80%, black) 100%) !important;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--bar-color, var(--c-N)) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transform-origin: left center;
  animation: cm-bar-grow 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.npk-bar-label {
  font-weight: 700;
}

/* Couleurs NPK personnalisées (override la couleur passée en prop via attribut) */
.fiche .npk-bars:nth-child(1) .npk-bar-fill { --bar-color: var(--pop-coral); }
.fiche .npk-bars:nth-child(2) .npk-bar-fill { --bar-color: var(--pop-cyan); }
.fiche .npk-bars:nth-child(3) .npk-bar-fill { --bar-color: var(--pop-amber); }
.fiche .npk-bars:nth-child(4) .npk-bar-fill { --bar-color: var(--pop-violet); }

/* ============================================================
   6. FICHES — accent vif + hover plus expressif
   ============================================================ */
.page.fam-minerales .fiche,
.page.fam-vegetales .fiche,
.page.fam-animales  .fiche,
.page.fam-specifiques .fiche {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s cubic-bezier(.2,.8,.2,1),
    border-top-color 0.35s ease;
}

/* Bandeau coloré en haut de fiche, plus marqué */
.page.fam-minerales .fiche,
.page.fam-vegetales .fiche,
.page.fam-animales  .fiche,
.page.fam-specifiques .fiche {
  border-top: 5px solid var(--fam-accent) !important;
}

/* Coin coloré décoratif */
.page.fam-minerales .fiche::before,
.page.fam-vegetales .fiche::before,
.page.fam-animales  .fiche::before,
.page.fam-specifiques .fiche::before {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right,
    color-mix(in srgb, var(--fam-accent) 35%, transparent),
    transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.page.fam-minerales .fiche:hover,
.page.fam-vegetales .fiche:hover,
.page.fam-animales  .fiche:hover,
.page.fam-specifiques .fiche:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--fam-accent) 28%, transparent),
    0 2px 6px color-mix(in srgb, var(--fam-accent) 15%, transparent) !important;
  border-top-color: var(--fam-deep) !important;
}

/* Le pastille famille devient lumineuse */
.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: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--fam-accent) 40%, white) 0%,
    var(--fam-accent) 70%) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--fam-tint) 80%, white),
    0 0 10px color-mix(in srgb, var(--fam-accent) 60%, transparent);
}

.fiche-name {
  position: relative;
  z-index: 1;
}

/* ============================================================
   7. NAV — boutons plus colorés + indicateur animé
   ============================================================ */
.nav-btn {
  position: relative;
  overflow: hidden;
}
.nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--pop-coral), var(--pop-magenta), var(--pop-amber));
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.nav-btn.active::before {
  opacity: 1;
  animation: cm-gradient-shift 5s linear infinite;
}
.nav-btn.active {
  border-color: transparent !important;
  background: transparent !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pop-coral) 30%, transparent);
}

/* ============================================================
   8. CYCLE DE L'AZOTE — particules animées le long des chemins
   ============================================================ */
.cm-cycle-svg .cm-flow-particle {
  fill: var(--cycle-color, var(--pop-coral));
  filter: drop-shadow(0 0 4px var(--cycle-color, var(--pop-coral)));
}
.cm-cycle-svg .cm-cycle-node {
  transform-box: fill-box;
  transform-origin: center;
}
.cm-cycle-svg .cm-cycle-node-pulse {
  animation: cm-pulse 3.2s ease-in-out infinite;
}
.cm-cycle-svg .cm-cycle-arrow {
  stroke-dasharray: 4 4;
  animation: cm-dash-flow 1.4s linear infinite;
}
@keyframes cm-dash-flow {
  to { stroke-dashoffset: -16; }
}

/* ============================================================
   9. CAH SCHEMA — cations qui orbitent
   ============================================================ */
.cm-cation-orbit {
  transform-origin: center;
  transform-box: fill-box;
  animation: cm-float 4s ease-in-out infinite;
}
.cm-cation-orbit:nth-child(2) { animation-delay: -0.6s; }
.cm-cation-orbit:nth-child(3) { animation-delay: -1.2s; }
.cm-cation-orbit:nth-child(4) { animation-delay: -1.8s; }
.cm-cation-orbit:nth-child(5) { animation-delay: -2.4s; }

/* ============================================================
   10. MINERALIZATION CHART — courbe qui se trace
   ============================================================ */
.cm-curve-path {
  stroke-dasharray: var(--curve-len, 1000);
  stroke-dashoffset: var(--curve-len, 1000);
  animation: cm-draw-line 2.2s cubic-bezier(.3,.8,.3,1) forwards;
  animation-delay: 0.3s;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, currentColor 40%, transparent));
}
.cm-curve-area {
  opacity: 0;
  animation: cm-fade-in 0.8s ease forwards;
  animation-delay: 1.6s;
}
.cm-curve-point {
  opacity: 0;
  animation: cm-pop-in 0.5s cubic-bezier(.2,.8,.2,1) forwards;
}
.cm-curve-point:nth-child(1) { animation-delay: 0.6s; }
.cm-curve-point:nth-child(2) { animation-delay: 0.8s; }
.cm-curve-point:nth-child(3) { animation-delay: 1.0s; }
.cm-curve-point:nth-child(4) { animation-delay: 1.2s; }
.cm-curve-point:nth-child(5) { animation-delay: 1.4s; }
.cm-curve-point:nth-child(6) { animation-delay: 1.6s; }
.cm-curve-point:nth-child(7) { animation-delay: 1.8s; }
.cm-curve-point:nth-child(8) { animation-delay: 2.0s; }

/* ============================================================
   11. CARBON PHASES — barres colorées qui poussent
   ============================================================ */
.cm-carbon-phase {
  transform-origin: left center;
  animation: cm-bar-grow 1.0s cubic-bezier(.2,.8,.2,1) both;
}
.cm-carbon-phase:nth-child(1) { animation-delay: 0.1s; }
.cm-carbon-phase:nth-child(2) { animation-delay: 0.4s; }
.cm-carbon-phase:nth-child(3) { animation-delay: 0.7s; }

/* ============================================================
   12. CARENCE LEAF — battement subtil
   ============================================================ */
.carence-leaf-svg {
  animation: cm-float 5s ease-in-out infinite;
}

/* ============================================================
   13. BLOCS "Saviez-vous" — gradient soft + icône qui pulse
   ============================================================ */
.page.fam-minerales .block.saviez,
.page.fam-vegetales .block.saviez,
.page.fam-animales  .block.saviez,
.page.fam-specifiques .block.saviez {
  position: relative;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--fam-accent) 15%, white),
      color-mix(in srgb, var(--fam-tint) 60%, white)) !important;
  border-left: 4px solid var(--fam-accent) !important;
  border-radius: 0 8px 8px 0;
  box-shadow:
    0 2px 8px color-mix(in srgb, var(--fam-accent) 12%, transparent),
    inset 4px 0 0 var(--fam-deep);
}
.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;
  letter-spacing: 0.12em;
}
.page.fam-minerales .block.saviez .block-label::before,
.page.fam-vegetales .block.saviez .block-label::before,
.page.fam-animales  .block.saviez .block-label::before,
.page.fam-specifiques .block.saviez .block-label::before {
  content: "✦";
  display: inline-block;
  margin-right: 6px;
  color: var(--fam-accent);
  animation: cm-spin-slow 6s linear infinite;
  transform-origin: center;
}
@keyframes cm-spin-slow {
  to { transform: rotate(360deg); }
}

/* ============================================================
   14. BADGES & TAGS — couleurs vives
   ============================================================ */
.badge {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fam-accent, var(--pop-coral)) 20%, white),
    color-mix(in srgb, var(--fam-tint, white) 80%, white)) !important;
  border: 1px solid color-mix(in srgb, var(--fam-accent, var(--pop-coral)) 40%, transparent) !important;
  color: var(--fam-deep, var(--ink)) !important;
  font-weight: 600;
  transition: all 0.25s ease;
}
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--fam-accent, var(--pop-coral)) 30%, transparent);
}

/* ============================================================
   15. TABLEAU DATA — header coloré
   ============================================================ */
.page.fam-minerales .data thead th,
.page.fam-vegetales .data thead th,
.page.fam-animales  .data thead th,
.page.fam-specifiques .data thead th {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fam-tint) 70%, white),
    color-mix(in srgb, var(--fam-tint) 30%, white)) !important;
  color: var(--fam-deep) !important;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--fam-accent) !important;
}
.page.fam-minerales .data tbody tr,
.page.fam-vegetales .data tbody tr,
.page.fam-animales  .data tbody tr,
.page.fam-specifiques .data tbody tr {
  transition: background 0.2s ease;
}

/* ============================================================
   16. PAGE NUMBERS — gradient
   ============================================================ */
.page.fam-minerales .page-num,
.page.fam-vegetales .page-num,
.page.fam-animales  .page-num,
.page.fam-specifiques .page-num {
  background: linear-gradient(135deg, var(--fam-accent), var(--fam-deep));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ============================================================
   17. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pop-coral), var(--pop-magenta));
  border-radius: 999px;
  border: 3px solid white;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--pop-magenta), var(--pop-violet));
}

/* ============================================================
   18. RESPECT prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}