/* =========================================================================
   Sporae — accueil.css
   Sections spécifiques à la page d'accueil (héro photo, problème/réponse,
   produits phares, timeline traçabilité, document à l'appui, revendeurs).
   Chargé APRÈS theme.css ; réutilise ses variables, n'invente aucune couleur.
   ========================================================================= */

/* ---- Héro : photo plein cadre + voile crème à gauche pour le texte ------- */
.hero { position: relative; overflow: hidden; background: var(--color-surface-alt); }
.hero__bg { position: absolute; inset: 0; background: center right / cover no-repeat; }
.hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-bg) 0%, rgba(245,240,235,.94) 30%, rgba(245,240,235,.62) 50%, rgba(245,240,235,0) 72%); }
.hero .container { position: relative; z-index: 1; display: flex; align-items: center;
  min-height: 480px; padding-block: var(--space-8); }
.hero__text { max-width: 560px; }
.hero h1 { margin-bottom: var(--space-5); }
.hero .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.hero__meta { margin-top: var(--space-5); font-size: var(--fs-300); color: var(--color-text-muted);
  display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__meta span { display: inline-flex; align-items: center; gap: .4em; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); flex: 0 0 auto; }

/* ---- Problème / réponse ------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.answer { background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary); border-radius: var(--radius);
  padding: var(--space-6); box-shadow: var(--shadow-sm); }
.answer h3 { font-size: var(--fs-500); margin-bottom: var(--space-3); color: var(--color-primary-dark); }
.answer p { margin: 0; color: var(--color-text-muted); }

/* ---- Produits phares ---------------------------------------------------- */
.species { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.scard { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; }
.scard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.scard__media { aspect-ratio: 1/1; border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt); overflow: hidden; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scard__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.scard__body h3 { font-size: var(--fs-500); margin: 0; }
.scard__latin { font-style: italic; color: var(--color-text-muted); font-size: var(--fs-300); margin: 0; }
.scard__desc { color: var(--color-text-muted); font-size: var(--fs-300); margin: 0; flex: 1; }
.scard__foot { display: flex; align-items: center; justify-content: flex-end; margin-top: var(--space-2); }
.scard__link { font-size: var(--fs-300); font-weight: 700; white-space: nowrap; }

/* ---- Traçabilité : les rubriques qui composent la fiche ------------------
   Ce n'est PAS une chronologie / frise : la fiche n'a pas d'ordre d'exécution,
   juste un ordre de lecture. On présente donc les rubriques en blocs (pas de
   ligne de liaison ni de pastilles numérotées qui suggéreraient des étapes). */
.tl-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-8); margin-top: var(--space-6); }
.tl-block { display: grid; grid-template-rows: auto 1fr; gap: var(--space-4); }
.tl-visual { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); background: var(--color-surface-alt); }
.tl-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-text h3 { font-size: var(--fs-600); margin-bottom: var(--space-2); }
.tl-text p { color: var(--color-text-muted); margin: 0; }

/* ---- Document à l'appui : aperçu du vrai PDF (non cliquable) ------------ */
.doc-showcase { display: grid; grid-template-columns: .85fr 1fr; gap: var(--space-8); align-items: center; margin-top: var(--space-7); }
.doc-showcase__text .doc-note { font-size: var(--fs-300); color: var(--color-text-muted);
  border-left: 3px solid var(--color-border); padding-left: var(--space-4); margin-block: var(--space-5); }
.pdf-shot { display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg); max-width: 400px; margin: 0 auto; }
.pdf-shot img { display: block; width: 100%; height: auto; }

/* ---- Revendeurs & professionnels --------------------------------------- */
.reseller { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.reseller ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.reseller li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-muted); }
.reseller li::before { content: "\2713"; color: var(--color-primary); font-weight: 800; flex: 0 0 auto; }
.reseller li b { color: var(--color-text); font-weight: 700; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .hero .container { min-height: 400px; }
  .hero__scrim { background:
    linear-gradient(180deg, rgba(245,240,235,.9) 0%, rgba(245,240,235,.62) 55%, rgba(245,240,235,.4) 100%),
    linear-gradient(90deg, var(--color-bg), rgba(245,240,235,.25)); }
  .split, .reseller, .doc-showcase { grid-template-columns: 1fr; }
  .species { grid-template-columns: repeat(2, 1fr); }
  .tl-blocks { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .species { grid-template-columns: 1fr; }
}