/* ═══════════════════════════════════════════════════════════════
   Composant : accordion horizontal
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens locaux (si menu.css pas chargé) ─────────────────── */
.ldnr-formations {
  --ease:     cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Conteneur ──────────────────────────────────────────────── */
/* display:flex !important — Kadence injecte display:block sur .entry-content > * */
.ldnr-formations {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  /*height: clamp(480px, calc(100vh - 160px), 780px);*/
  height: 70vh;
  width: 100%;
  margin: 3rem 0;
  box-sizing: border-box;
}

/* ── Card (collapsed par défaut) ────────────────────────────── */
/* width/max-width !important annulent les resets Kadence (pas flex — sinon flex:5 ne s'applique plus) */
.ldnr-formations > .ldnr-formation-card {
  width: auto !important;
  max-width: none !important;
  min-width: 96px !important;
  box-sizing: border-box;
}

.ldnr-formation-card {
  position: relative;
  flex: 1;
  min-width: 96px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  background: #161b22;
  cursor: pointer;
  isolation: isolate;

  /* Isole le layout/paint interne de la carte : un changement de largeur
     (flex-grow, resize) ne propage plus reflow ni repaint au reste de la page. */
  contain: layout paint;

  /* Pas de will-change permanent : flex-grow est une propriété de LAYOUT,
     elle ne peut pas être compositée GPU → le hint ne servait à rien et
     gardait une couche inutile sur chaque carte. Promu dynamiquement en JS
     via [data-animating] uniquement le temps du mouvement. */
  transition:
    flex-grow     0.9s cubic-bezier(.2,.8,.2,1),
    border-color  0.6s cubic-bezier(.2,.8,.2,1),
    box-shadow    0.6s cubic-bezier(.2,.8,.2,1);
}

/* Pendant un redimensionnement actif de la fenêtre : on fige les transitions,
   restaurées ~180ms après l'arrêt (attribut posé par formations.js). */
.ldnr-formations[data-resizing] .ldnr-formation-card,
.ldnr-formations[data-resizing] .formation-panel__bg { transition: none !important; }

/* ── Reveal à l'entrée (classes globales reveal / reveal-N) ─────
   La card a déjà une transition (flex-grow…) qui écraserait celle du
   .reveal global : on la redéclare ici le temps de l'entrée. Les classes
   sont retirées par ldnr-scroll.js une fois l'animation jouée → les
   transitions hover normales reprennent la main. */
.ldnr-formation-card.reveal {
  transition:
    opacity   .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s),
    transform .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s);
}

/* ── Expanded ────────────────────────────────────────────────────
   La card « ouverte » = celle survolée, OU la card active quand la souris
   n'est PAS sur le composant (état de repos / fallback clavier).
   Ce découplage supprime l'ancienne compression des voisines (flex .9) :
   le ratio de la card ouverte est désormais IDENTIQUE au repos et au survol
   de la card déjà ouverte (toujours 5 / (5+1+1+1+1) = 5/9) → plus d'effet
   « elle grossit encore un peu » quand on repasse dessus. */
.ldnr-formation-card:hover,
.ldnr-formations:not(:hover) .ldnr-formation-card.active {
  flex: 5;
  border-color: var(--card-accent, var(--color-accent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--card-accent, var(--color-accent)) 18%, transparent),
    0 40px 100px -30px color-mix(in srgb, var(--card-accent, var(--color-accent)) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.4);
}

[data-theme="light"] .ldnr-formation-card {
  background: #ffffff;
  border-color: rgba(15,23,42,.07);
}

/* ── Fond dégradé par variables CSS ─────────────────────────────────── */
.formation-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .55;
  transition: opacity 0.9s var(--ease), transform 1.4s var(--ease);
  background:
    radial-gradient(var(--grad-size-1, 80% 60%) at var(--grad-pos-1, 30% 20%), var(--grad-color-1-dark, rgba(122,204,239,.55)), transparent 60%),
    radial-gradient(var(--grad-size-2, 60% 60%) at var(--grad-pos-2, 80% 90%), var(--grad-color-2-dark, rgba(85,140,200,.45)), transparent 60%),
    linear-gradient(var(--grad-angle, 160deg), var(--grad-base-dark, #1a2540), var(--grad-mid-dark, #0f1626) 60%, var(--grad-end-dark, #0a0f1a));
}
.ldnr-formation-card:hover .formation-panel__bg,
.ldnr-formations:not(:hover) .ldnr-formation-card.active .formation-panel__bg {
  opacity: .85;
  transform: scale(1.04);
}

[data-theme="light"] .formation-panel__bg {
  background:
    radial-gradient(var(--grad-size-1, 80% 60%) at var(--grad-pos-1, 30% 20%), var(--grad-color-1-light, rgba(122,204,239,.25)), transparent 60%),
    radial-gradient(var(--grad-size-2, 60% 60%) at var(--grad-pos-2, 80% 90%), var(--grad-color-2-light, rgba(122,204,239,.18)), transparent 60%),
    linear-gradient(var(--grad-angle, 160deg), var(--grad-base-light, #e8f2ff), var(--grad-mid-light, #dce9ff) 60%, var(--grad-end-light, #d0e4ff));
}

/* ── Motif SVG décoratif ─────────────────────────────────────────
   Pas de mix-blend-mode : un blend force la recomposition de toute la
   card à chaque frame de l'animation flex (cause majeure du lag au
   survol). Les traits sont déjà teintés + semi-transparents dans le SVG. */
.formation-panel__motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  pointer-events: none;
}
[data-theme="light"] .formation-panel__motif {
  opacity: .3;
}

/* ── Grain de bruit ─────────────────────────────────────────── */
.formation-panel__noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Pas de mix-blend-mode (recomposition par frame) — grain blanc direct. */
  opacity: .05;
}
[data-theme="light"] .formation-panel__noise {
  filter: invert(1);
  opacity: .06;
}

/* ── Inner — par dessus le fond ─────────────────────────────── */
.formation-panel__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(16px, 2.5vh, 32px) clamp(20px, 2.5vw, 32px) clamp(20px, 3.5vh, 44px);
  display: flex;
  flex-direction: column;
  color: #fff;
}
[data-theme="light"] .formation-panel__inner { color: #0f172a; }

/* ── Numéro + label ─────────────────────────────────────────── */
.formation-num-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  margin-bottom: clamp(6px, 1.2vh, 16px);
}
[data-theme="light"] .formation-num-wrap { color: rgba(15,23,42,.6); }

.formation-num-pill {
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: clamp(32px, min(5vw, 7vh), 68px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.9);
  word-break: normal;
  overflow-wrap: normal;
}
[data-theme="light"] .formation-num-pill { color: rgba(15,23,42,.85); }

/* ── Titre vertical (collapsed) ─────────────────────────────── */
.formation-title-vertical {
  position: absolute;
  left: 32px;
  bottom: 32px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-ui, 'Space Grotesk', sans-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #fff;
  opacity: 1;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  word-break: normal;
  overflow-wrap: normal;
}
[data-theme="light"] .formation-title-vertical { color: #0f172a; }

.ldnr-formation-card:hover .formation-title-vertical,
.ldnr-formations:not(:hover) .ldnr-formation-card.active .formation-title-vertical { opacity: 0; }

/* ── Contenu (visible en expanded) ───────────────────────────────
   LARGEUR FIXE (min(600px, 44vw)) : la valeur ne dépend que du viewport,
   donc elle reste CONSTANTE pendant l'animation d'expansion (flex-grow).
   Le texte est mis en page une seule fois — fini le re-calcul du retour à
   la ligne à chaque frame (cause principale du lag). Quand la card est
   étroite, le contenu déborde et est simplement clippé par overflow:hidden ;
   il glisse ensuite depuis la droite via translateX (composité GPU). */
.formation-content {
  margin-top: clamp(6px, 1vh, 16px);
  width: min(600px, 44vw);
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity   .5s var(--ease) .1s,
    transform .7s var(--ease) .1s;
  pointer-events: none;
}
.ldnr-formation-card:hover .formation-content,
.ldnr-formations:not(:hover) .ldnr-formation-card.active .formation-content {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ── Catégorie (niveau BAC+x) ───────────────────────────────── */
.ldnr-formation-card .formation-cat {
  display: block !important;
  font-family: var(--font-ui, monospace);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75) !important;
  margin-bottom: clamp(6px, 1.2vh, 14px);
}
[data-theme="light"] .ldnr-formation-card .formation-cat { color: rgba(15,23,42,.6) !important; }

/* ── Titre H3 ───────────────────────────────────────────────── */
.formation-titre {
  font-size: clamp(20px, min(3vw, 4vh), 50px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 clamp(8px, 1.5vh, 18px) !important;
  padding: 0 !important;
  word-break: normal;
  overflow-wrap: normal;
}
[data-theme="light"] .formation-titre { color: #0f172a; }

.formation-titre em {
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-style: italic;
  font-weight: 400;
  color: var(--card-accent, var(--color-accent, #7accef));
  letter-spacing: -.02em;
}

/* ── Description ────────────────────────────────────────────── */
.formation-description {
  font-size: clamp(13px, 1.6vh, 15px);
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  max-width: 62ch;
  margin-bottom: clamp(10px, 1.8vh, 22px);
}
[data-theme="light"] .formation-description { color: rgba(15,23,42,.7); }

/* ── Champs stats ───────────────────────────────────────────── */
.formation-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-bottom: clamp(10px, 1.8vh, 22px);
}
.formation-champ { display: flex; flex-direction: column; gap: 3px; }
.champ-valeur {
  font-size: clamp(15px, 2vh, 20px);
  font-weight: 500;
  color: #fff;
  letter-spacing: -.01em;
}
[data-theme="light"] .champ-valeur { color: #0f172a; }
.champ-label {
  font-family: var(--font-ui, monospace);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
[data-theme="light"] .champ-label { color: rgba(15,23,42,.55); }

/* ── Tags ───────────────────────────────────────────────────── */
.formation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: clamp(12px, 2vh, 26px);
}
.formation-tag {
  font-family: var(--font-ui, monospace);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
}
[data-theme="light"] .formation-tag {
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.10);
  color: #0f172a;
}

/* ── CTA ────────────────────────────────────────────────────── */
.formation-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  text-decoration: none;
  transition:
    background .3s var(--ease),
    border-color .3s var(--ease),
    transform .3s var(--ease),
    color .3s var(--ease);
}
.formation-cta:hover {
  background: var(--card-accent, var(--color-accent, #7accef));
  color: #0d1117;
  border-color: var(--card-accent, var(--color-accent, #7accef));
  transform: translateY(-1px);
  text-decoration: none;
}

[data-theme="light"] .formation-cta {
  background: rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.14);
  color: #0f172a;
}
[data-theme="light"] .formation-cta:hover {
  background: var(--card-accent, var(--color-accent, #7accef));
  color: #fff;
  border-color: var(--card-accent, var(--color-accent, #7accef));
}

.formation-cta .arr { transition: transform .3s var(--ease); }
.formation-cta:hover .arr { transform: translate(3px,-3px); }

/* ── Focus clavier ──────────────────────────────────────────── */
.ldnr-formation-card:focus-visible {
  outline: 2px solid var(--card-accent, var(--color-accent));
  outline-offset: 2px;
}

/* ── Responsive mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
  .ldnr-formations {
    flex-direction: column !important;
    height: auto;
  }
  .ldnr-formation-card {
    flex: none !important;
    width: 100% !important;
    height: 80px;
    min-height: 80px;
    overflow: hidden;
    transition: height .7s cubic-bezier(.2,.8,.2,1);
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .ldnr-formation-card.active {
    height: auto;
    min-height: 560px;
    flex-direction: column;
    align-items: flex-start;
  }

  .formation-panel__inner {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  .ldnr-formation-card.active .formation-panel__inner {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
  }

  .formation-num-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .formation-num-pill {
    font-size: clamp(28px, 5vw, 48px);
  }

  .formation-title-vertical {
    writing-mode: horizontal-tb;
    transform: none;
    position: static;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    flex-shrink: 0;
  }
  .ldnr-formation-card.active .formation-title-vertical {
    display: none;
  }

  /* Mobile : pleine largeur (pas de largeur fixe desktop) + glissement
     vertical, cohérent avec l'accordéon qui s'ouvre en hauteur. */
  .formation-content {
    padding-top: 1rem;
    width: 100%;
    transform: translateY(12px);
  }
}

/* ── Accessibilité ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ldnr-formation-card,
  .formation-panel__bg,
  .formation-title-vertical,
  .formation-content { transition: none !important; }
}