/* ==========================================================================
   Carte de formation (composant partagé : catalogue, fiche, univers).
   Futur template-part WordPress. Préfixe : .fcarte
   ========================================================================== */
.fcarte {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-l);
  background: var(--bg-raised);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  overflow: hidden; isolation: isolate;
  transition: box-shadow var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}
.fcarte:hover, .fcarte:focus-within {
  box-shadow: var(--shadow-3), inset 0 0 0 1px color-mix(in oklab, var(--u) 50%, transparent);
  transform: translateY(-4px);
}
.fcarte:has(.fcarte__lien:active) { transform: translateY(-1px) scale(0.995); transition-duration: var(--dur-instant); }

.fcarte__visuel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.fcarte__media { position: absolute; inset: 0; display: block; }
.fcarte__media img { transition: transform 900ms var(--ease-out); transform: scale(1.02); }
.fcarte:hover .fcarte__media img { transform: scale(1.08); }
.fcarte__visuel::after { /* voile de la couleur d'univers au survol */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, color-mix(in oklab, var(--u) 55%, transparent));
  opacity: 0; transition: opacity var(--dur-normal) linear;
}
.fcarte:hover .fcarte__visuel::after { opacity: 1; }
.fcarte__niveau {
  position: absolute; z-index: 3; left: 14px; top: 14px;
  font-size: var(--step--1); padding: 0.32em 0.75em; box-shadow: var(--shadow-1);
}
.fcarte__pro {
  position: absolute; z-index: 3; left: 14px; top: calc(22px + 1.9em); /* sous le niveau : les deux étiquettes ne se touchent jamais */
  padding: 0.3em 0.7em; border-radius: var(--radius-pill);
  background: var(--navy); color: #fff; font-size: var(--step--2); font-weight: 650; letter-spacing: 0.02em;
}

.fcarte__corps { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.25rem 1.2rem; flex: 1; }
.fcarte__corps::before { /* liseré pétale qui s'étire */
  content: ''; position: absolute; left: 1.25rem; top: 0; height: 5px; width: calc(100% - 2.5rem);
  border-radius: 0 0 var(--radius-pill) var(--radius-pill); background: var(--u);
  transform: scaleX(0.12); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.fcarte:hover .fcarte__corps::before { transform: scaleX(1); }
.fcarte__univers {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--step--2); font-weight: 650; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--u-text);
}
.fcarte__univers::before { content: ''; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--u); }
.fcarte__titre {
  font-family: var(--font-display); font-weight: 750; font-size: var(--step-1); line-height: 1.08; letter-spacing: -0.005em;
  text-wrap: balance;
}
.fcarte__lien { color: var(--ink); text-decoration: none; }
.fcarte__lien::after { content: ''; position: absolute; inset: 0; z-index: 4; } /* toute la carte est cliquable */
.fcarte__lien:focus-visible { outline: none; }
.fcarte:has(.fcarte__lien:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

.fcarte__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; list-style: none; padding: 0; font-size: var(--step--1); color: var(--ink-soft); }
.fcarte__meta li { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.1em 0.55em; border-radius: var(--radius-s); background: var(--bg-sunken); }
.fcarte__meta .fcarte__taux { background: var(--u-soft); }
.fcarte__meta .fcarte__nouveau { background: transparent; box-shadow: inset 0 0 0 1.5px var(--u); }
.fcarte__taux strong { color: var(--ink); font-weight: 700; }
.fcarte__nouveau { color: var(--u-text); font-weight: 600; }

/* Pied de carte : garde la flèche alignée en bas (aucun nombre de places affiché, règle du BRIEF) */
.fcarte__pied {
  margin-top: auto; padding-top: 0.6rem; padding-right: 48px; min-height: 40px; display: flex; align-items: center;
  font-size: var(--step--1); font-weight: 600; color: var(--u-text);
}
.fcarte__fleche {
  position: absolute; right: 1.1rem; bottom: 1.05rem; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink);
  transition: background-color var(--dur-fast) linear, transform var(--dur-normal) var(--ease-spring), color var(--dur-fast) linear;
}
.fcarte__fleche svg { width: 18px; height: 18px; }
.fcarte:hover .fcarte__fleche { background: var(--u-fond); color: var(--u-ink); transform: rotate(-38deg) scale(1.06); }

/* Case « Comparer » au-dessus du lien étiré */
.fcarte__comparer {
  position: absolute; z-index: 6; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem; border-radius: var(--radius-pill);
  background: color-mix(in oklab, #fff 92%, transparent); color: var(--navy);
  font-size: var(--step--2); font-weight: 650; box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-fast) linear, transform var(--dur-normal) var(--ease-out), background-color var(--dur-fast) linear;
}
.fcarte:hover .fcarte__comparer, .fcarte__comparer:focus-within, .fcarte__comparer:has(input:checked), .is-comparaison .fcarte__comparer { opacity: 1; transform: none; }
.fcarte__comparer input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fcarte__case {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px var(--navy); color: transparent; transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-normal) var(--ease-spring);
}
.fcarte__case svg { width: 14px; height: 14px; }
.fcarte__comparer:has(input:checked) { background: var(--navy); color: #fff; }
.fcarte__comparer:has(input:checked) .fcarte__case { background: var(--yellow); color: var(--navy); box-shadow: none; transform: rotate(-8deg) scale(1.05); }
.fcarte__comparer:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Variante large (catalogue, rythme éditorial) : image à gauche, texte à droite */
.fcarte.is-grand { flex-direction: row; grid-column: span 2; }
.fcarte.is-grand .fcarte__visuel { aspect-ratio: auto; flex: 0 0 56%; }
.fcarte.is-grand .fcarte__corps { padding: 1.6rem 1.6rem 1.4rem; justify-content: flex-start; }
.fcarte.is-grand .fcarte__titre { font-size: var(--step-2); line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .fcarte:hover { transform: none; }
  .fcarte:hover .fcarte__media img { transform: scale(1.02); }
}

/* Boucle vidéo de métier posée sur l'image de repli (fiche, univers) */
.video-metier { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .video-metier { display: none; } }