/* ============================================================
   Infographie – Histoire du Shiatsu
   Amathélia Shiatsu · Agence Bethauv
   Fichier : histoire-shiatsu.css
   Dossier : /wp-content/themes/generatepress-child/assets/css/
      Il ne redéclare ni :root, ni polices, ni variables —
      tout est hérité du thème enfant.
   ============================================================ */

/* ─── Variables locales propres à cette page ────────────────── */
/* (uniquement ce qui n'existe pas dans style.css)              */
.histoire-shiatsu {
  --humain: var(--col-primary);
  --animal: var(--col-accent-turquoise);
  --tige-h: 32px;
}

/* ─── Reset léger scoped ────────────────────────────────────── */
.histoire-shiatsu *,
.histoire-shiatsu *::before,
.histoire-shiatsu *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Conteneur principal ───────────────────────────────────── */
.histoire-shiatsu {
  /* font-family, color, background : déjà définis sur body dans style.css */
  max-width: 1240px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

/* ─── En-tête ───────────────────────────────────────────────── */
.histoire-shiatsu__header {
  text-align: center;
  margin-bottom: 3rem;
}

.histoire-shiatsu__surtitre {
  /* hérite font-body de body */
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--col-accent-terre);   /* --col-accent-terre depuis style.css */
  margin-bottom: 0.5rem;
}

.histoire-shiatsu__titre {
  /* hérite font-heading de h2 dans style.css */
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--col-primary);
  line-height: 1.1;
  margin-bottom: 0.9rem;
  text-align: center;               /* déjà dans h2, précisé pour clarté */
}

.histoire-shiatsu__intro {
  font-size: 0.88rem;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
  opacity: 0.8;
}

/* ─── Section rail ──────────────────────────────────────────── */
.section-rail {
  margin-bottom: 3rem;
}

.section-rail__label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);  /* depuis style.css */
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin-bottom: 1.4rem;
}

.section-rail__label .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.section-rail--humain .section-rail__label { color: var(--humain); }
.section-rail--humain .section-rail__label .dot { background: var(--humain); }
.section-rail--animal .section-rail__label { color: var(--animal); }
.section-rail--animal .section-rail__label .dot { background: var(--animal);

}

/* ─── Axe ───────────────────────────────────────────────────── */
.axe {
    position: relative;
    z-index: 1;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--col-primary) 2%,
    var(--col-primary) 98%,
    transparent 100%
  );
}

/* ─── Rails ─────────────────────────────────────────────────── */
.rail {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.rail--above { align-items: flex-end; }   /* cartes au-dessus, points vers l'axe */
.rail--below { align-items: flex-start; } /* points vers l'axe, cartes en dessous */

.section-rail--humain .rail {
  gap: 0;
}

.section-rail--humain .node:not(:has(*)) {
  flex: 0 0 16px;   /* spacer étroit */
}

.section-rail--humain .node:has(.node__card) {
  flex: 0 0 220px;  /* vraie carte */
}

.section-rail--animal .rail {
  gap: 3rem;    /* aéré pour 3 cartes */
}

/* ─── Nœud ──────────────────────────────────────────────────── */
.node {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}


/* ─── Card ──────────────────────────────────────────────────── */
.node__card {
  background: var(--col-bg-card);       /* --col-bg-card depuis style.css */
  border-radius: 12px;
  padding: 0.9rem 0.75rem 0.8rem;
  width: 100%;
  box-shadow: var(--shadow-soft);       /* --shadow-soft depuis style.css */
  border-top: 3px solid transparent;
  transition: box-shadow 0.22s, transform 0.22s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.node__card:hover {
  box-shadow: var(--shadow-mid);        /* --shadow-mid depuis style.css */
  transform: translateY(-3px);
}

/* ─── Icône ─────────────────────────────────────────────────── */
.node__icone {
  width: 46px;
  height: 46px;
  margin-bottom: 0.55rem;
  flex-shrink: 0;
}

.node__icone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;                     /* annule le border-radius global de img dans style.css */
}

/* ─── Textes dans la card ───────────────────────────────────── */
.node__annee {
  font-family: var(--font-heading);     /* depuis style.css */
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.node__titre {
  font-size: 0.69rem;
  font-weight: 600;                     /* .font-semibold dans style.css */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.node__texte {
  font-size: 0.67rem;
  line-height: 1.5;
  opacity: 0.8;
  margin-bottom: 0;                     /* annule le margin-bottom de p dans style.css */
}

/* ─── Tige ──────────────────────────────────────────────────── */
.node__tige {
  width: 2px;
  height: var(--tige-h);
  flex-shrink: 0;
}

/* ─── Point ─────────────────────────────────────────────────── */
.node__point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--col-bg);      /* --col-bg depuis style.css */
  flex-shrink: 0;
}

/* ══ Couleurs HUMAIN ══ */
.node--humain .node__card  { border-top-color: var(--humain); }
.node--humain .node__tige  { background: var(--humain); }
.node--humain .node__point { background: var(--humain); box-shadow: 0 0 0 2px var(--humain); }
.node--humain .node__annee { color: var(--humain); }
.node--humain .node__titre { color: var(--humain); }

/* ══ Couleurs ANIMAL ══ */
.node--animal .node__card  { border-top-color: var(--animal); }
.node--animal .node__tige  { background: var(--animal); }
.node--animal .node__point { background: var(--animal); box-shadow: 0 0 0 2px var(--animal); }
.node--animal .node__annee { color: var(--col-primary); }
.node--animal .node__titre { color: var(--animal); }

/* ─── Nœud inversé (dessous de l'axe) ──────────────────────── */
.node--below .node__point { order: 1; }
.node--below .node__tige  { order: 2; }
.node--below .node__card  {
  order: 3;
  border-top: none;
  border-bottom: 3px solid transparent;
}
.node--below .node__card:hover        { transform: translateY(3px); }
.node--humain.node--below .node__card { border-bottom-color: var(--humain); }
.node--animal.node--below .node__card { border-bottom-color: var(--animal); }

/* ─── Source ────────────────────────────────────────────────── */
.histoire-shiatsu__source {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.67rem;
  opacity: 0.45;
  font-style: italic;
  margin-bottom: 0;                     /* annule le margin-bottom de p dans style.css */
}

/* ═══════════════════════════════════════════════════
   MOBILE  (≤ 768px)
   Le breakpoint est aligné sur celui de style.css
═══════════════════════════════════════════════════ */
.timeline-mobile { display: none; }

@media (max-width: 768px) {
  .timeline-scroll  { display: none; }
  .timeline-mobile  { display: block; }

  .groupe {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 2.5rem;
  }

  .groupe::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 2px;
  }

  .groupe--humain::before { background: var(--humain); }
  .groupe--animal::before { background: var(--animal); }

  .groupe__label {
    font-family: var(--font-heading);   /* depuis style.css */
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  .groupe__label .dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .node-m {
    position: relative;
    margin-bottom: 1.1rem;
  }

  .node-m__point {
    position: absolute;
    left: -1.83rem;
    top: 0.7rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--col-bg);    /* --col-bg depuis style.css */
  }

  .node-m--humain .node-m__point {
    background: var(--humain);
    box-shadow: 0 0 0 2px var(--humain);
  }

  .node-m--animal .node-m__point {
    background: var(--animal);
    box-shadow: 0 0 0 2px var(--animal);
  }

  .node-m .node__card {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0.7rem;
    flex-wrap: nowrap;
  }

  .node-m .node__icone {
    width: 38px;
    height: 38px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .node-m__body { flex: 1; }

  .node-m .node__annee { font-size: 1.1rem; }
  .node-m .node__texte { font-size: 0.68rem; }

  .node-m--humain .node__card  { border-top-color: var(--humain); }
  .node-m--animal .node__card  { border-top-color: var(--animal); }
  .node-m--humain .node__annee { color: var(--humain); }
  .node-m--animal .node__annee { color: var(--col-primary); }
  .node-m--humain .node__titre { color: var(--humain); }
  .node-m--animal .node__titre { color: var(--animal); }
}