/* Cartes du parcours qui se retournent. Survol sur ordinateur, appui au doigt,
   touche Entree au clavier. L'etat visible est porte par .est-retournee.

   Deux contraintes du navigateur, apprises a l'essai :
   - isolation:isolate force transform-style a plat, donc la carte tournait en
     montrant sa face avant en miroir. On le remet a auto.
   - en retirant l'isolation, le degrade ::after (z-index:-1) passerait derriere
     le fond photo. On le remonte a 0 et on pose le texte au-dessus, a 1.
   - overflow:hidden aplatit aussi la 3D ; le fond reste decoupe par border-radius. */
.journey-cards { perspective: 1500px; }
.journey-cards article {
  isolation: auto;
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
}
.journey-cards article::after { z-index: 0; border-radius: inherit; }
.journey-cards article > div {
  position: relative;
  z-index: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.journey-cards article > .carte-dos {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  width: auto;
  padding: 26px 22px;
  border-radius: inherit;
  background: #274b42;
  transform: rotateY(180deg);
}
.carte-dos p {
  margin: 0;
  color: #f2f5e7;
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
}
.carte-dos span {
  color: #b9c9bd;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: normal;
}
.journey-cards article.est-retournee { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .journey-cards article:hover { transform: translateY(-5px) rotateY(180deg); }
  .journey-cards article.est-retournee:hover { transform: translateY(-5px) rotateY(180deg); }
}
.journey-cards article:focus-visible { outline: 2px solid #f2f5e7; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .journey-cards article { transition: none; } }
@media (max-width: 760px) {
  .carte-dos p { font-size: 13px; line-height: 1.5; }
  .journey-cards article > .carte-dos { padding: 18px 15px; gap: 10px; }
}