/* ═══════════════ STUDIA SUP — OFFRE DE FORMATION ═══════════════
   Page synthèse (offre-formation.html) + section « Offre » de l'accueil.
   S'appuie sur main.css / accueil.css / filieres.css / filiere-page.css. */

/* ── Page : bandeau des trois niveaux ─────────────────────────── */
.of-niveaux {
  display: flex; justify-content: center; gap: clamp(18px, 4vw, 44px);
  flex-wrap: wrap; margin-top: 26px;
}
.of-niveau { text-align: center; display: grid; gap: 2px; justify-items: center; }
.of-niveau__n {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--accent, var(--green)); font-variant-numeric: tabular-nums;
}
.of-niveau__l {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(247,249,248,.55);
}

/* ── Page : bloc pôle ─────────────────────────────────────────── */
.of-pole { padding-block: clamp(48px, 8vh, 84px); }
.of-pole--alt { background: #0c1310; }
.of-pole .fp-wrap { max-width: 1080px; }

.of-pole__head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.of-pole__num {
  font-family: var(--display); font-weight: 800; font-size: .8rem;
  letter-spacing: .14em; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 6px 12px; border-radius: 99px;
}
.of-pole__titre {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.2;
  margin: 0; flex: 1 1 260px;
}
.of-pole__lien {
  font-family: var(--display); font-weight: 700; font-size: .86rem;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.of-pole__lien:hover { text-decoration: underline; }

.of-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.of-col {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; padding: 20px 18px;
}
.of-col__titre {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: .82rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(247,249,248,.85);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding-bottom: 10px; margin: 0 0 14px;
}
.of-col__compte {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--accent);
}
.of-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.of-col li {
  font-size: .88rem; line-height: 1.45; color: rgba(247,249,248,.82);
  padding: 9px 12px 9px 26px; position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
}
.of-col li::before {
  content: ''; position: absolute; left: 12px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 900px) {
  .of-grille { grid-template-columns: 1fr; }
}

/* ── Accueil : section Offre ──────────────────────────────────── */
/* Compte sur le reset de main.css ; suit la grammaire des sections
   voisines (eyebrow pointé, titre en cascade via .w). */
/* .fil-btn--primary et l'eyebrow tirent leur couleur de --accent,
   posé sur les pages filières mais pas sur l'accueil. */
.offre { --accent: var(--green); padding: clamp(72px, 11vh, 120px) 24px; background: #0a100c; }
.of-inner { max-width: 1080px; margin: 0 auto; }

.of-head { max-width: 640px; margin-bottom: 40px; }

.of-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.of-carte {
  display: block; text-decoration: none;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; padding: 24px 22px;
  transition: border-color .25s ease, transform .25s ease;
}
.of-carte:hover { border-color: color-mix(in srgb, var(--of-accent) 55%, transparent); transform: translateY(-3px); }
.of-carte--clair    { --of-accent: #d8f7e6; }
.of-carte--emeraude { --of-accent: #2ee08a; }
.of-carte--or       { --of-accent: #f2c230; }

.of-carte__num {
  font-family: var(--display); font-weight: 800; font-size: .74rem;
  letter-spacing: .14em; color: var(--of-accent);
}
.of-carte__titre {
  font-family: var(--display); font-weight: 800;
  font-size: 1.06rem; line-height: 1.3; color: var(--white);
  margin: 10px 0 12px;
}
.of-carte__niveaux {
  font-size: .8rem; color: rgba(247,249,248,.6); line-height: 1.5;
}
.of-carte__niveaux strong { color: rgba(247,249,248,.88); font-weight: 700; }

.of-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 34px;
}
.of-total { font-size: .92rem; color: rgba(247,249,248,.65); }
.of-total strong { color: var(--white); }

@media (max-width: 860px) {
  .of-cartes { grid-template-columns: 1fr; max-width: 540px; }
}