/* Styles specifiques a la page Formations.
   Extraits verbatim du <style> de claude_design_v2/formations.html.
   Charges via le slot head depuis src/pages/formations.astro.
   Les classes partagees (.sub-hero, .intro-split, .btn, .container, .fform-footer)
   restent dans formation-styles.css et ne sont pas redefinies ici. */

:root {
  --r-pill: 999px;
}

/* ── HERO — parite avec la maquette .fpage-hero ──
   La page rend le hero via le composant partage .sub-hero (plus petit que
   la maquette). On restaure ici, en restant scope a la page formations
   (.sub-hero--formations), les tailles exactes du .fpage-hero de
   claude_design_v2/formations.html sans toucher au CSS partage.
   Cette feuille se charge apres formation-styles.css : elle gagne en cascade. */
.sub-hero--formations {
  padding: 160px 0 60px;
}
.sub-hero--formations > .container {
  max-width: 900px;
}
.sub-hero--formations .sub-hero__crumb {
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 20px;
}
.sub-hero--formations .sub-hero__title {
  /* .fpage-hero__title : clamp(48px, 6vw, 88px) — plus grand que .sub-hero__title */
  font-size: clamp(48px, 6vw, 88px);
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0 0 20px;
  max-width: none;
}
.sub-hero--formations .sub-hero__sub {
  /* .fpage-hero__sub : font-size 19px / line-height 1.65 / max-width 720px */
  font-size: 19px;
  line-height: 1.65;
  max-width: 720px;
}
@media (max-width: 768px) {
  .sub-hero--formations { padding: 120px 0 48px; }
  .sub-hero--formations .sub-hero__title { font-size: clamp(38px, 11vw, 60px); }
  .sub-hero--formations .sub-hero__sub { font-size: 17px; }
}

/* ── FORMATIONS GRID ── */
.formations { background: var(--light, var(--bg-light)); padding: 80px 0 100px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; gap: 24px; flex-wrap: wrap; }
.section-head__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 12px; }
.section-head__title { font-family: 'Josefin Sans', sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; color: var(--text-light, var(--text-body)); margin: 0; }
.section-head__count { color: var(--teal); }

.filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.filters__row {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}
.filters__row--levels {
  flex-wrap: wrap;
}
.filters__row--metiers {
  flex-wrap: nowrap;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: transparent; border: 1.5px solid var(--border-light);
  font-family: 'Josefin Sans', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-on-light); cursor: pointer;
  transition: all var(--transition);
}
.filter-btn__remove {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -7px;
  border-radius: 999px;
  background: rgba(10,46,42,.14);
  color: currentColor;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.filter-btn:hover { color: var(--text-light, var(--text-body)); border-color: var(--muted-on-light); }
.filter-btn.active { background: var(--teal); border-color: var(--teal); color: #0A2E2A; }
html[data-theme] body[data-screen-label] .formations .filter-btn {
  border-color: #BDD0CF;
  color: #425E5D;
}
html[data-theme] body[data-screen-label] .formations .filter-btn:hover {
  border-color: #527472;
  color: #1A2827;
}
html[data-theme] body[data-screen-label] .formations .filter-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #0A2E2A;
}
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme] {
  --filter-pole: var(--teal);
  --filter-contrast: #0A2E2A;
  background: var(--filter-pole);
  border-color: var(--filter-pole);
  color: var(--filter-contrast);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--filter-pole) 22%, transparent);
}
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme]:hover,
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme].active {
  background: color-mix(in oklab, var(--filter-pole) 88%, #fff);
  border-color: color-mix(in oklab, var(--filter-pole) 88%, #fff);
  color: var(--filter-contrast);
  transform: translateY(-1px);
}
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme] .filter-btn__remove {
  background: rgba(255,255,255,.24);
}
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme="tech"] {
  --filter-pole: var(--pole-tech);
}
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme="graph"] {
  --filter-pole: var(--pole-graph);
}
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme="sport"] {
  --filter-pole: var(--pole-sport);
}
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme="com"] {
  --filter-pole: var(--pole-com);
}
html[data-theme] body[data-screen-label] .formations .filter-btn[data-filter-theme="elec"] {
  --filter-pole: var(--pole-elec);
  --filter-contrast: #FFFFFF;
}

.formations-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--border-light); margin-bottom: 2px;
}
.formations-grid--animating .formation-card {
  pointer-events: none;
}
.formation-card.is-hidden { display: none; }
.formation-card {
  --formation-hover-text: #0A2E2A;
  --formation-hover-border: rgba(10,46,42,.24);
  --formation-hover-chip-bg: rgba(255,255,255,.34);
  --formation-hover-arrow-bg: rgba(10,46,42,.08);
  --holo-x: 50%;
  --holo-y: 50%;
  --holo-rotate-x: 0deg;
  --holo-rotate-y: 0deg;
  --holo-shadow-x: 0px;
  --holo-shadow-y: 10px;
  --holo-perspective: 1200px;
  --holo-shadow-color: rgba(10,46,42,.28);
  background: #fff; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  position: relative; overflow: hidden;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  isolation: isolate;
  backface-visibility: hidden;
  transition:
    transform .16s ease-out,
    opacity var(--transition),
    filter .16s ease-out;
  cursor: pointer;
  will-change: transform, opacity, filter;
}
.formation-card.is-holo-active:not(.is-filtering-out):not(.is-filtering-in) {
  z-index: 4;
  transform:
    perspective(var(--holo-perspective))
    rotateY(var(--holo-rotate-y))
    rotateX(var(--holo-rotate-x))
    scale(1.04);
  filter: drop-shadow(var(--holo-shadow-x) var(--holo-shadow-y) 18px var(--holo-shadow-color));
}
.formation-card.is-filtering-out {
  animation: formation-card-crt-out .24s cubic-bezier(.4,0,.2,1) both;
}
.formation-card.is-filtering-in {
  animation: formation-card-crt-in .46s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--filter-index, 0) * 28ms);
}
.formation-card__img { width: 100%; height: 160px; overflow: hidden; flex-shrink: 0; position: relative; transition: opacity var(--transition); }
.formation-card__img::before,
.formation-card__img::after,
.formation-card__body::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease, background-position .2s linear;
}
.formation-card__img::before {
  z-index: 1;
  background:
    radial-gradient(
      circle at var(--holo-x) var(--holo-y),
      rgba(255,255,255,.78) 0%,
      color-mix(in oklab, var(--pole, var(--teal)) 24%, white) 22%,
      transparent 56%
    );
  mix-blend-mode: screen;
}
.formation-card__img::after {
  z-index: 2;
  background:
    linear-gradient(
      112deg,
      transparent 0%,
      color-mix(in oklab, var(--pole, var(--teal)) 18%, transparent) 22%,
      rgba(255,255,255,.42) 42%,
      transparent 64%
    );
  background-position: var(--holo-x) var(--holo-y);
  mix-blend-mode: screen;
}
.formation-card__img svg { width: 100%; height: 100%; display: block; }
.formation-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Visuel de repli (ClaudeIcon) quand une carte Directus n'a pas d'image :
   remplit le conteneur 160px pour eviter un bloc effondre/centrage casse. */
.formation-card__visual {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pole-soft, #D0F5F0);
  color: var(--pole, var(--teal-dark));
}
.formation-card:hover .formation-card__img { opacity: .78; }
.formation-card__body {
  padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; flex: 1;
  position: relative; z-index: 1;
}
.formation-card__body::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pole, var(--teal-dark));
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.formation-card__body::after {
  z-index: 0;
  background:
    radial-gradient(circle at var(--holo-x) var(--holo-y), rgba(255,255,255,.34), transparent 42%),
    linear-gradient(
      120deg,
      transparent 10%,
      rgba(255,255,255,.18) 28%,
      color-mix(in oklab, var(--pole, var(--teal)) 20%, transparent) 44%,
      transparent 68%
    );
  mix-blend-mode: soft-light;
}
.formation-card:hover .formation-card__body::before { transform: translateY(0); }
.formation-card__body > * { position: relative; z-index: 1; }
.formation-card.is-holo-active .formation-card__img::before { opacity: .1; }
.formation-card.is-holo-active .formation-card__img::after { opacity: .1; }
.formation-card.is-holo-active .formation-card__body::after { opacity: .1; }
.formation-card:hover .formation-card__domain,
.formation-card:hover .formation-card__title,
.formation-card:hover .formation-card__meta-tag,
.formation-card:hover .formation-card__cta {
  color: var(--formation-hover-text);
  border-color: var(--formation-hover-border);
}
.formation-card:hover .formation-card__badge {
  background: var(--formation-hover-chip-bg) !important;
  color: var(--formation-hover-text) !important;
  border-color: var(--formation-hover-border) !important;
}
.formation-card:hover .formation-card__arrow {
  border-color: var(--formation-hover-text);
  color: var(--formation-hover-text);
  background: var(--formation-hover-arrow-bg);
}

.formation-card__top { display: flex; align-items: center; justify-content: space-between; }
.formation-card__badge {
  font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: #D0F5F0; color: #1C7269;
}

.formation-card[data-domain="dev"]    { --pole: var(--pole-tech);  --pole-soft: var(--pole-tech-soft); }
.formation-card[data-domain="tech"]   { --pole: var(--pole-tech);  --pole-soft: var(--pole-tech-soft); }
.formation-card[data-domain="design"] { --pole: var(--pole-graph); --pole-soft: var(--pole-graph-soft); }
.formation-card[data-domain="graph"]  { --pole: var(--pole-graph); --pole-soft: var(--pole-graph-soft); }
.formation-card[data-domain="sport"]  { --pole: var(--pole-sport); --pole-soft: var(--pole-sport-soft); }
.formation-card[data-domain="com"]    {
  --pole: var(--pole-com);
  --pole-soft: var(--pole-com-soft);
  --formation-hover-text: #fff;
  --formation-hover-border: rgba(255,255,255,.3);
  --formation-hover-chip-bg: rgba(0,0,0,.3);
  --formation-hover-arrow-bg: rgba(255,255,255,.1);
}
.formation-card[data-domain="elec"]   { --pole: var(--pole-elec);  --pole-soft: var(--pole-elec-soft); }
.formation-card[data-domain] {
  --holo-shadow-color: color-mix(in oklab, var(--pole, var(--teal)) 36%, rgba(10,46,42,.32));
}
.formation-card[data-domain]::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--pole, var(--teal)); z-index: 2;
}
.formation-card[data-domain] .formation-card__badge { background: var(--pole-soft, #D0F5F0); color: var(--pole, #1C7269); }
.formation-card[data-domain] .formation-card__domain { color: var(--pole, var(--muted-light)); }
.formation-card[data-domain] .formation-card__cta { color: var(--pole, var(--teal-dark)); }
.formation-card[data-domain] .formation-card__arrow { border-color: var(--pole, var(--teal-dark)); color: var(--pole, var(--teal-dark)); }
.formation-card[data-domain]:hover .formation-card__body::before { background: var(--pole, var(--teal-dark)); }

@keyframes formation-card-crt-out {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
  55% {
    opacity: .82;
    transform: scale(1.006, .28);
    filter: brightness(1.18) saturate(1.12);
  }
  100% {
    opacity: 0;
    transform: scale(.98, .035);
    filter: brightness(1.7) blur(1px);
  }
}

@keyframes formation-card-crt-in {
  0% {
    opacity: 0;
    transform: scale(.98, .035);
    filter: brightness(1.55) blur(1px);
  }
  44% {
    opacity: .92;
    transform: scale(1.01, 1.035);
    filter: brightness(1.12) saturate(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .formation-card,
  .formation-card.is-filtering-out,
  .formation-card.is-filtering-in {
    animation: none;
    transition: opacity .12s ease;
    transform: none;
    filter: none;
  }
  .formation-card.is-holo-active {
    box-shadow: none;
    transform: none;
    filter: none;
  }
  .formation-card__img::before,
  .formation-card__img::after,
  .formation-card__body::after {
    display: none;
  }
}

.formation-card__domain { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-light); transition: color var(--transition); }
.formation-card__title { font-family: 'Josefin Sans', sans-serif; font-size: 22px; font-weight: 700; color: var(--text-light, var(--text-body)); line-height: 1.2; letter-spacing: -.01em; transition: color var(--transition); margin: 0; }
.formation-card__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.formation-card__meta-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--pole, var(--teal-dark));
  background: var(--pole-soft, #D0F5F0);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--pole, var(--teal-dark)) 18%, transparent);
  transition: all var(--transition);
}
.formation-card__cta { display: flex; align-items: center; justify-content: space-between; margin-top: 0; color: var(--teal-dark); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; transition: color var(--transition); padding-top: 8px; }
.formation-card__arrow { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--teal-dark); display: flex; align-items: center; justify-content: center; color: var(--teal-dark); transition: all var(--transition); }

/* Empty state */
.empty-state {
  text-align: center; padding: 80px 32px;
  background: #fff; border-radius: 20px;
  border: 1.5px dashed var(--border-light);
}
.empty-state[hidden] { display: none; }
.empty-state__icon { display: inline-flex; color: var(--muted-on-light); margin-bottom: 16px; }
.empty-state__title {
  font-family: 'Josefin Sans', sans-serif; font-size: 22px; font-weight: 700;
  color: var(--text-light, var(--text-body)); margin: 0 0 8px;
}
.empty-state__sub { color: var(--muted-on-light); font-size: 15px; margin: 0; }

@media (max-width: 980px) {
  .formations-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .formations-grid { grid-template-columns: 1fr; }
  .filters {
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .filters__row {
    justify-content: flex-start;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .filters__row::-webkit-scrollbar { display: none; }
  .filters__row--levels,
  .filters__row--metiers {
    flex-wrap: nowrap;
  }
  .filter-btn { padding: 8px 14px; font-size: 11px; }
}

/* FAQ CTA reuse */
.faq-cta {
  position: relative;
  padding: 100px 0;
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(76,204,184,.35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 100% at 0% 100%, rgba(253,161,0,.12) 0%, transparent 55%),
    linear-gradient(135deg, #082522 0%, #0F4540 35%, #1C7269 65%, #2E9988 100%);
  overflow: hidden;
}
.faq-cta__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.faq-cta__text { flex: 1 1 480px; }
.faq-cta__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 24px; }
.faq-cta__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(.7); } }
.faq-cta__title { font-family: 'Josefin Sans', sans-serif; font-size: clamp(36px, 4.5vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: #fff; margin: 0 0 16px; text-wrap: balance; }
.faq-cta__title em { font-style: normal; color: var(--amber); }
.faq-cta__sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 480px; margin: 0; }
.faq-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.faq-cta__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  border-radius: var(--r-pill);
  padding: 14px 22px 12px;
  border: 1.5px solid rgba(76,204,184,.45);
  background: var(--teal);
  box-shadow: 0 12px 30px rgba(76,204,184,.22);
  color: var(--black);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.faq-cta__phone svg { width: 18px; height: 18px; flex: 0 0 auto; }
.faq-cta__phone:hover {
  background: #6FE2D0;
  border-color: rgba(255,255,255,.4);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(76,204,184,.3);
}
html[data-theme] .faq-cta .faq-cta__phone,
html[data-theme] .faq-cta .faq-cta__phone:hover,
html[data-theme] .faq-cta .faq-cta__phone svg {
  color: var(--black);
}

/* Banniere preview locale brouillon (parite avec home-preview-banner) */
.formations-preview-banner {
  position: fixed; right: 16px; bottom: 16px; z-index: 120;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0; padding: 10px 14px;
  background: rgba(253,161,0,.14);
  border: 1px solid rgba(253,161,0,.35);
  border-radius: 18px;
  color: var(--amber);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase;
  text-align: center;
}

@media (max-width: 760px) {
  .formations-preview-banner {
    position: static;
    max-width: none;
    margin: 24px 16px;
    border-radius: 16px;
  }
}