/* ================================================================
   VOITURE SHIATSU — CSS
   Charte Amathélia Shiatsu | même style que bienfaits-shiatsu.css
   ================================================================ */

/* ── Variables (reprises du thème enfant) ── */
.shiatsu-voiture {
  --col-primary:   #4D604A;
  --col-secondary: #B2B695;
  --col-bg:        #F3F4F5;
  --col-text:      #3A4D39;
  --col-accent:    #FF6663;
  --col-turquoise: #A8C5A0;
  --col-white:     #FFFFFF;
  --col-border:    #DCDED8;
  --font-heading:  'Caveat Brush', cursive;
  --font-body:     'Montserrat', sans-serif;

  /* Couleurs par organe */
  --clr-coeur:    #FF6663;
  --clr-reins:    #4D604A;
  --clr-foie:     #A8C5A0;
  --clr-intestin: #B2B695;
}

/* ── Section wrapper ── */
.shiatsu-voiture {
  font-family: var(--font-body);
  background-color: var(--col-bg);
  color: var(--col-text);
  padding: 48px 24px 60px;
  position: relative;
  overflow: hidden;
}

/* ── Titre principal ── */
.shiatsu-voiture .main-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  color: var(--col-primary);
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(-24px);
  animation: fadeDown 1.6s ease forwards;
  animation-delay: 0.2s;
}

/* ── Scène principale ── */
.shiatsu-voiture .voiture-scene {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px 32px;
  align-items: center;
  justify-items: stretch;
}

/* ── Image voiture ── */
.shiatsu-voiture .car-wrap {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeScale 2s ease forwards;
  animation-delay: 0.8s;
}

.shiatsu-voiture .car-wrap img {
  width: clamp(280px, 38vw, 520px);
  height: auto;
  display: block;
    border-radius: 20px;
  /* L'image n'est pas modifiée */
  filter: drop-shadow(0 12px 28px rgba(77,96,74,0.18));
}

/* ── Cartes organes ── */
.shiatsu-voiture .vcard {
  background: rgba(255,255,255,0.92);
  border-radius: 18px;
  border-left: 5px solid var(--col-primary);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: default;
  opacity: 0;
  transform: scale(0.85);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  box-shadow: 0 6px 22px rgba(77,96,74,0.10);
}

/* Positions dans la grille */
.shiatsu-voiture .vc-coeur    { grid-column: 1; grid-row: 1; border-color: var(--clr-coeur); }
.shiatsu-voiture .vc-reins    { grid-column: 3; grid-row: 1; border-color: var(--clr-reins); }
.shiatsu-voiture .vc-foie     { grid-column: 1; grid-row: 2; border-color: var(--clr-foie); }
.shiatsu-voiture .vc-intestin { grid-column: 3; grid-row: 2; border-color: var(--clr-intestin); }

/* Animations d'entrée — même timing que bienfaits */
.shiatsu-voiture .vc-coeur    { animation: slideIn 1.6s ease forwards; animation-delay: 2.0s; }
.shiatsu-voiture .vc-reins    { animation: slideIn 1.6s ease forwards; animation-delay: 2.4s; }
.shiatsu-voiture .vc-foie     { animation: slideIn 1.6s ease forwards; animation-delay: 2.8s; }
.shiatsu-voiture .vc-intestin { animation: slideIn 1.6s ease forwards; animation-delay: 3.2s; }

/* Hover – glow coloré par carte */
.shiatsu-voiture .vc-coeur:hover    { box-shadow: 0 0 20px 7px rgba(255,102,99,0.35);  transform: scale(1.02); }
.shiatsu-voiture .vc-reins:hover    { box-shadow: 0 0 20px 7px rgba(77,96,74,0.35);    transform: scale(1.02); }
.shiatsu-voiture .vc-foie:hover     { box-shadow: 0 0 20px 7px rgba(78,205,196,0.40);  transform: scale(1.02); }
.shiatsu-voiture .vc-intestin:hover { box-shadow: 0 0 20px 7px rgba(178,182,149,0.45); transform: scale(1.02); }

/* ── Contenu des cartes ── */
.shiatsu-voiture .vcard-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  color: var(--col-primary);
}
.shiatsu-voiture .vc-coeur    .vcard-title { color: var(--clr-coeur); }
.shiatsu-voiture .vc-reins    .vcard-title { color: var(--clr-reins); }
.shiatsu-voiture .vc-foie     .vcard-title { color: var(--clr-foie); }
.shiatsu-voiture .vc-intestin .vcard-title { color: #8a9066; }

.shiatsu-voiture .vcard-equiv {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--col-secondary);
  margin-top: -4px;
}

.shiatsu-voiture .vcard-sep {
  width: 40px;
  height: 3px;
  border-radius: 99px;
  margin: 2px 0 4px;
  background: var(--col-primary);
}
.shiatsu-voiture .vc-coeur    .vcard-sep { background: var(--clr-coeur); }
.shiatsu-voiture .vc-reins    .vcard-sep { background: var(--clr-reins); }
.shiatsu-voiture .vc-foie     .vcard-sep { background: var(--clr-foie); }
.shiatsu-voiture .vc-intestin .vcard-sep { background: var(--clr-intestin); }

.shiatsu-voiture .vcard-text {
  font-size: clamp(0.82rem, 1.3vw, 0.93rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--col-text);
  font-style: italic;
}

/* ── Conclusion ── */
.shiatsu-voiture .voiture-conclusion {
  max-width: 800px;
  margin: 36px auto 0;
  background: var(--col-secondary);
  color: var(--col-white);
  border-radius: 18px;
  padding: 28px 36px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.6s ease forwards;
  animation-delay: 4.0s;
  box-shadow: 0 8px 28px rgba(77,96,74,0.20);
}

.shiatsu-voiture .voiture-conclusion h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  margin-bottom: 10px;
  color: #E8F0E7;
}

.shiatsu-voiture .voiture-conclusion p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
  max-width: 640px;
  margin: 0 auto;
}

.shiatsu-voiture .voiture-conclusion .accent-word {
  color: var(--col-turquoise);
  font-weight: 600;
}

/* ── Keyframes (identiques à bienfaits) ── */
@keyframes slideIn {
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeDown {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeScale {
  to { opacity: 1; }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 820px) {
  .shiatsu-voiture .voiture-scene {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: 480px;
  }
  .shiatsu-voiture .car-wrap     { grid-column: 1; grid-row: 3; }
  .shiatsu-voiture .vc-coeur     { grid-column: 1; grid-row: 1; }
  .shiatsu-voiture .vc-reins     { grid-column: 1; grid-row: 2; }
  .shiatsu-voiture .vc-foie      { grid-column: 1; grid-row: 4; }
  .shiatsu-voiture .vc-intestin  { grid-column: 1; grid-row: 5; }
  .shiatsu-voiture .car-wrap img { width: 100%; }
  .shiatsu-voiture .voiture-conclusion { padding: 22px 20px; }
}