/* =========================================================================
   NSX Kompetenz — V1 « Clair & Éditorial » — EXTRA-A
   Règles spécifiques aux pages converties par l'agent A :
   b-academie.html · b-espace-employeur.html · b-espace-talents.html
   Lié APRÈS v1.css. N'écrase ni v1.css ni charte-2026.css.
   Aucune animation en boucle. Interactions au SURVOL uniquement.
   ========================================================================= */

/* ----------------------------------------------------- HERO chips (langues) */
.v1-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.v1-chip{
  font-family:var(--font-head);font-weight:800;font-size:.88rem;color:var(--c-navy);
  background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);
  padding:.5em 1em;transition:border-color .26s var(--ease),color .26s var(--ease),box-shadow .26s var(--ease)}
.v1-chip:hover{border-color:var(--c-green);color:var(--c-green);box-shadow:var(--sh-green)}
.v1-chip.soon{color:var(--muted);border-style:dashed}
.v1-chip.soon:hover{border-color:var(--c-orange);color:var(--c-orange);box-shadow:none}

/* --------------------------------------------------- BANDEAU PARCOURS (intro) */
/* Carte d'intro pleine largeur pour un parcours (PRISM / BRIDGE), style éditorial */
.v1-course-intro{
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--pill,var(--c-green));
  border-radius:var(--radius-lg);padding:clamp(28px,4vw,46px);box-shadow:var(--sh-sm)}
.v1-course-intro .v1-eyebrow{color:var(--pill,var(--c-green))}
.v1-course-intro .sub{font-family:var(--font-head);font-weight:800;font-size:clamp(1.05rem,1.6vw,1.2rem);
  color:var(--c-navy);margin:0 0 16px}
.v1-course-intro p{color:var(--muted);line-height:1.66;font-size:clamp(1rem,1.3vw,1.1rem);margin:0 0 14px}
.v1-course-intro p:last-child{margin-bottom:0}
.v1-course-intro strong{color:var(--c-navy)}

/* ----------------------------------------------- GRILLE NIVEAUX (A1 → C2) */
.v1-levels{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:20px;margin-top:clamp(28px,4vw,40px)}
.v1-level{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;border-top:4px solid var(--lv,var(--c-orange));overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.v1-level:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.v1-level .badge{
  display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:800;font-size:.84rem;
  color:#fff;background:var(--lv,var(--c-orange));border-radius:8px;padding:5px 11px;margin-bottom:12px}
.v1-level h3{font-size:1.26rem;margin:0 0 9px;color:var(--c-navy)}
.v1-level p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.58}
/* palette des 6 niveaux — 3 familles charte, clair (niv.1) → foncé (niv.2) */
.v1-level.lv-a1{--lv:var(--c-orange)}   /* orange clair */
.v1-level.lv-a2{--lv:#8A4206}           /* orange brûlé (foncé) */
.v1-level.lv-b1{--lv:var(--c-green)}    /* vert clair */
.v1-level.lv-b1-green{--lv:var(--c-green)}
.v1-level.lv-b2{--lv:#17543C}           /* vert forêt (foncé) */
.v1-level.lv-c1{--lv:var(--c-blue)}     /* bleu clair */
.v1-level.lv-c2{--lv:var(--c-navy)}     /* navy (foncé) */

/* ---------------------------------------------- ÉTAPES TETRIS (numérotées) */
.v1-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v1-step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px 26px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.v1-step:hover{transform:translateY(-5px);border-color:var(--c-blue);box-shadow:var(--sh-blue)}
.v1-step .idx{font-family:var(--font-head);font-weight:900;font-size:2.4rem;line-height:1;
  color:var(--tint-blue);position:absolute;top:18px;right:22px;z-index:0}
.v1-step .kick{position:relative;z-index:1;font-family:var(--font-head);font-weight:800;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-blue)}
.v1-step h3{position:relative;z-index:1;font-size:1.22rem;margin:8px 0 10px;color:var(--c-navy)}
.v1-step p{position:relative;z-index:1;margin:0;color:var(--muted);font-size:.97rem;line-height:1.58}
/* carte d'appel à l'action (dernière de la grille TETRIS) */
.v1-step.cta{display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,var(--c-orange),var(--c-orange-d));border:0;color:#fff}
.v1-step.cta h3{color:#fff;margin-top:0}
.v1-step.cta p{color:rgba(255,255,255,.92);margin-bottom:16px}
.v1-step.cta .v1-btn{align-self:flex-start}

/* ---------------------------------------------- GRILLE 4 (packs / secteurs) */
.v1-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.v1-mini{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 22px;border-top:4px solid var(--c-orange);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.v1-mini:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.v1-mini:nth-child(2){border-top-color:var(--c-blue)}
.v1-mini:nth-child(3){border-top-color:var(--c-green)}
.v1-mini:nth-child(4){border-top-color:var(--c-yellow-d)}
.v1-mini .kick{font-family:var(--font-head);font-weight:800;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-orange)}
.v1-mini:nth-child(2) .kick{color:var(--c-blue)}
.v1-mini:nth-child(3) .kick{color:var(--c-green)}
.v1-mini:nth-child(4) .kick{color:var(--c-yellow-d)}
.v1-mini h3{font-size:1.18rem;margin:7px 0 9px;color:var(--c-navy)}
.v1-mini p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.58}
.v1-mini strong{color:var(--c-navy)}

/* --------------------------------------------------------- NOTE centrée */
.v1-note{margin-top:24px;text-align:center;color:var(--muted);
  font-size:clamp(1rem,1.3vw,1.12rem);max-width:70ch;margin-inline:auto;line-height:1.6}
.v1-note strong{color:var(--c-navy)}

/* ----------------------------------------------------------- RESPONSIVE */
@media (max-width:1023px){
  .v1-levels,.v1-steps{grid-template-columns:repeat(2,1fr)}
  /* sous 1024px : flux normal (les 2 niveaux d'une famille restent côte à côte par ligne) */
  .v1-levels{grid-auto-flow:row;grid-template-rows:auto}
  .v1-grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .v1-levels,.v1-steps,.v1-grid4{grid-template-columns:1fr}
}

/* =========================================================================
   ACCORDÉON « dépliant » des niveaux (activé par JS : classe .v1-acc)
   Mélange props 1+2 : liseré couleur (barre latérale) + badge + titre +
   bouton rond (+/−), panneau descriptif au clic. Inspiré ESG.
   ========================================================================= */
.v1-levels.v1-acc{display:block;grid-template-columns:none;grid-template-rows:none;grid-auto-flow:row}
.v1-acc .v1-level{display:block;padding:0;background:#fff;border:1px solid var(--line);
  border-left:6px solid var(--lv,var(--c-orange));border-radius:14px;margin-bottom:12px;overflow:hidden;
  transition:box-shadow .25s var(--ease)}
.v1-acc .v1-level:hover{box-shadow:var(--sh-md);transform:none}
.v1-acc-head{width:100%;display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;
  padding:16px 18px;text-align:left;font-family:inherit}
.v1-acc-head .badge{margin:0;flex:0 0 auto}
.v1-acc-head h3{margin:0;flex:1;font-size:1.12rem;color:var(--c-navy)}
.v1-acc-tog{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:22px;font-weight:800;line-height:1;color:#fff;background:var(--lv,var(--c-orange))}
.v1-acc-head:hover .v1-acc-tog{filter:brightness(1.08)}
.v1-acc-head:focus-visible{outline:2px solid var(--lv,var(--c-orange));outline-offset:-2px;border-radius:12px}
.v1-acc-panel{padding:0 18px 18px 78px}
.v1-acc-panel p{margin:0;color:var(--muted);line-height:1.62}
@media (max-width:560px){ .v1-acc-panel{padding-left:18px} }

/* Bug#7 — étapes Tessera colorées par catégorie (charte 2026) */
.v1-step{border-left:5px solid var(--ac,var(--c-navy))}
.v1-step .idx{color:var(--ac,var(--c-navy))}
.v1-step .kick{color:var(--ac,var(--c-navy))}
.v1-step:nth-child(6n+1){--ac:var(--c-navy)}
.v1-step:nth-child(6n+2){--ac:var(--c-orange)}
.v1-step:nth-child(6n+3){--ac:var(--c-blue)}
.v1-step:nth-child(6n+4){--ac:var(--c-green)}
.v1-step:nth-child(6n+5){--ac:var(--c-yellow-d)}
.v1-step:nth-child(6n+6){--ac:var(--c-navy-700)}
.v1-step:hover{border-color:var(--ac,var(--c-navy));box-shadow:var(--sh-md);transform:translateY(-5px)}
.v1-step.cta{border-left-color:var(--c-orange)}