#formations {
  background: var(--surface-1);
  padding: 0;
}
.formations-header {
  padding: 5rem 1.5rem 3rem;
}
@media (max-width: 768px) {
  .formations-header { padding: 3rem 1.5rem 2rem; }
}

/* --- item — traitement uniforme, avec ou sans image ---
   Rotation sur 3 teintes claires, mêmes pour toutes les formations
   (plus de hiérarchie featured/compact à deux vitesses) : sable,
   blanc cassé, bleu clair. Fond plein clair au survol → texte sombre
   pour rester lisible, même logique que les cards CTA du footer. */
.fp-rot-0 { --fp-color: #A9C4D6; }  /* bleu clair — première ligne, moins brut en ouverture */
.fp-rot-1 { --fp-color: #F2EFE9; }  /* blanc cassé */

.fp-item {
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}
.fp-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }

/* bande verticale en accroche — colonne à part entière de .fp-inner,
   alignée avec le bloc numéro+contenu (pas collée au bord de la page :
   le styleguide la place dans le padding de la grille, "flottante"
   sous le numéro, pas en trait de conteneur). */
.fp-stripe {
  align-self: stretch;
  width: 4px;
  background: var(--fp-color);
  transition: background-color 0.8s cubic-bezier(0.86,0,0.07,1);
}
.fp-item:hover .fp-stripe { background: rgba(255,255,255,0.6); }

.fp-bg {
  position: absolute;
  inset: 0;
  background: var(--fp-color);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.86,0,0.07,1);
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
}
.fp-item:hover .fp-bg,
.fp-item.is-active .fp-bg { opacity: 1; }

/* hauteur identique pour toutes les lignes, image ou pas — même padding,
   même grille 4 colonnes (bande, numéro, contenu, média). */
.fp-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4px 5rem 1fr 1fr;
  gap: 1.5rem 2rem;
  padding: 3.5rem 4rem;
  align-items: start;
  min-height: 22em;
}
@media (max-width: 1024px) {
  .fp-inner { grid-template-columns: 3rem 1fr; padding: 2rem 1.5rem; min-height: 0; }
  .fp-stripe { display: none; }
  .fp-assets-cross { display: none; }
}

/* pastille + numéro — porteur de couleur permanent, indépendant du
   hover (inexistant au tactile) : identique desktop et mobile. */
.fp-num-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.3rem;
}
.fp-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--fp-color);
  flex-shrink: 0;
}
.fp-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-inverse-3);
  letter-spacing: 0.05em;
  transition: color 0.8s cubic-bezier(0.86,0,0.07,1);
}
.fp-item:hover .fp-num,
.fp-item.is-active .fp-num { color: rgba(15,23,42,0.5); }

.fp-title {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
  transition: font-size 0.5s cubic-bezier(0.86,0,0.07,1), color 0.4s;
}
.fp-item:hover .fp-title { font-size: clamp(1.5rem, 2.5vw, 2.2rem); color: #0f172a; }
/* mobile : pas d'agrandissement de police au scroll (trop instable),
   seulement le changement de couleur pour rester lisible sur .fp-bg. */
.fp-item.is-active .fp-title { color: #0f172a; }

.fp-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-inverse-3);
  max-width: 36ch;
  margin-top: 0.5rem;
  transition: color 0.4s;
}
.fp-item:hover .fp-desc,
.fp-item.is-active .fp-desc { color: rgba(15,23,42,0.7); }

.fp-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0);
  letter-spacing: 0.02em;
  transition: color 0.4s;
  text-decoration: none;
}
.fp-item:hover .fp-cta,
.fp-item.is-active .fp-cta { color: #0f172a; }
/* Sur tactile, :hover ne se déclenche jamais — le CTA resterait
   invisible en permanence (opacity/color 0) tant que .is-active n'a
   pas encore été posé par l'IntersectionObserver (ex: avant le
   premier scroll). Fallback visible dès le départ. */
@media (hover: none) {
  .fp-cta { color: var(--ink-inverse-2); }
}

/* --- CTA renforcé : visible en permanence, porte l'accent de marque ---
   Retour utilisateur : mettre l'accent sur "Demander un devis" plutôt
   que sur des tags génériques retirés des cartes. */
.fp-cta-strong {
  color: var(--color-accent, #A8442E) !important;
  opacity: 1;
}
.fp-item:hover .fp-cta-strong,
.fp-item.is-active .fp-cta-strong { color: #0f172a !important; }

/* --- zone média : image croisée si dispo, sinon numéro géant ---
   Volontairement absente sur mobile (pas de photo, ni de numéro géant) :
   pas de hover pour révéler quoi que ce soit, autant garder le gabarit
   texte seul + la pastille de couleur comme identité visuelle. */
.fp-media {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 1024px) {
  .fp-media { display: none; }
}

/* formations sans photo : le numéro en très grand, dans la teinte de
   la ligne, tient le rôle de repère visuel que joue l'image ailleurs —
   même poids de mise en avant, pas de trou dans la grille. Desktop
   uniquement (voir .fp-media ci-dessus). */
.fp-num-large {
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--fp-color);
  opacity: 0.5;
  transition: opacity 0.5s ease, color 0.5s ease;
  font-family: Georgia, serif;
  font-style: italic;
}
.fp-item:hover .fp-num-large { opacity: 0.9; }

/* assets croisées — toujours visibles, le survol ne fait plus que
   zoomer (scale, piloté en JS) au lieu de faire apparaître/disparaître
   les images ; le délai d'ouverture/fermeture n'a plus lieu d'être.
   Hauteur et décalages réduits pour ne pas déborder sur les lignes
   voisines — l'ancien réglage (28em, offsets ±2/8em) était pensé pour
   un débordement temporaire au survol, plus pour un affichage permanent. */
.fp-assets-cross {
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  height: 22em;
  overflow: visible;
  /* pointer-events actif : les images sont cliquables (zoom lightbox),
     contrairement à l'ancien état "fermé" où ce conteneur devait
     laisser passer les clics vers les éléments en dessous. */
  pointer-events: none;
  z-index: 10;
}
.fp-cross-img { pointer-events: auto; }
@media (max-width: 1024px) {
  .fp-assets-cross { display: none; }
}

.fp-cross-img {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.3),
    0 0 12px 4px rgba(255,255,255,0.18),
    0 0 32px 8px rgba(255,255,255,0.08),
    0 24px 64px rgba(0,0,0,0.7),
    0 4px 16px rgba(0,0,0,0.4);
  will-change: transform;
  z-index: 20;
  /* inclinaison posée par défaut en CSS — auparavant uniquement en JS
     au premier survol, donc absente (0deg) pour toute ligne jamais
     survolée depuis le chargement de la page. */
  transition: transform 0.5s cubic-bezier(0.76,0,0.24,1);
}
.fp-cross-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* même dimension pour les deux images de la paire — seuls la position
   et le décalage en z créent la composition, pas une différence de taille.
   Alignées à la même hauteur (top calculé, pas transform: translateY —
   le JS de parallaxe pilote déjà .style.transform au survol, un centrage
   en transform serait écrasé dès le premier mousemove). */
.fp-cross-img:first-child {
  width: 58%; aspect-ratio: 16/9;
  top: 50%; left: 0;
  margin-top: -11.5em;
  transform: rotate(-1.5deg);
  z-index: 21;
}
.fp-cross-img:last-child {
  width: 58%; aspect-ratio: 16/9;
  top: 50%; right: 0;
  margin-top: -11.5em;
  transform: rotate(2deg);
  z-index: 22;
}