/* ═══════════════════════════════════════════════════════════════
   FranceConcours — patterns UI communs (B3 / B3.1)
   Référence : landing publique (eyebrow, .btn-primary, .btn-light)
   Périmètre : portail authentifié (fc-home) + tableau de bord (fc-contest)
   Charger après fc-core.css, avant fc-portal.css
   ═══════════════════════════════════════════════════════════════ */

#app-layer.is-fc-catalog,
#app-layer[data-shell="contest"] #screen-fc-contest {
  /* —— Titres de section (échelle app ; famille landing) —— */
  .fc-ui-section-title {
    margin: 0;
    font-family: var(--fc-font-display);
    font-weight: 740;
    letter-spacing: var(--fc-tracking-section, -0.02em);
    color: var(--fc-ui-section-title-color, var(--fc-ink));
  }

  /* —— Kicker / eyebrow (landing .eyebrow → indigo) —— */
  .fc-ui-kicker {
    margin: 0 0 6px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: var(--fc-tracking-eyebrow, 0.13em);
    text-transform: uppercase;
    color: var(--fc-ui-kicker-color, var(--fc-indigo));
  }

  .fc-home-kicker.fc-ui-kicker {
    margin-bottom: 12px;
    color: var(--fc-indigo);
  }

  /* Session concours : accent or (exception maîtrisée) */
  .fc-contest-kicker.fc-ui-kicker {
    color: var(--fc-gold);
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  /* —— Barres de progression —— */
  .fc-ui-progress__track {
    border-radius: 999px;
    background: var(--fc-ui-progress-track-bg);
    overflow: hidden;
  }

  .fc-ui-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fc-ui-progress-fill);
  }

  .fc-ui-progress {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .fc-ui-progress--stack {
    display: block;
  }

  .fc-ui-progress--stack .fc-ui-progress__track {
    height: 4px;
    margin-top: 6px;
  }

  .fc-ui-progress--inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
  }

  .fc-ui-progress--inline .fc-ui-progress__track {
    flex: 1;
    height: 3px;
    min-width: 48px;
  }

  .fc-ui-progress__label,
  .fc-ui-progress__pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--fc-text-sub);
  }

  .fc-ui-progress__pct {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--fc-text);
  }

  /* —— CTA primaire (landing .btn-primary) —— */
  .fc-ui-cta--primary.fc-btn-primary,
  .fc-btn-primary.fc-ui-cta--primary {
    border: 0;
    border-radius: var(--fc-radius-btn, 12px);
    padding: 13px 19px;
    font-family: var(--fc-font-body);
    font-weight: 750;
    font-size: 0.92rem;
    background: var(--fc-indigo);
    color: #fff;
    box-shadow: var(--fc-btn-primary-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  .fc-ui-cta--primary.fc-btn-primary:hover,
  .fc-btn-primary.fc-ui-cta--primary:hover {
    background: var(--fc-indigo-dark);
    box-shadow: var(--fc-btn-primary-shadow-hover);
    transform: translateY(-2px);
  }

  /* —— CTA secondaire (landing .btn-light) —— */
  .fc-ui-cta--secondary.fc-btn-ghost,
  .fc-btn-ghost.fc-ui-cta--secondary {
    border: 1px solid #dfe2ed;
    border-radius: var(--fc-radius-btn, 12px);
    padding: 13px 19px;
    font-family: var(--fc-font-body);
    font-weight: 650;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.8);
    color: var(--fc-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

  .fc-ui-cta--secondary.fc-btn-ghost:hover,
  .fc-btn-ghost.fc-ui-cta--secondary:hover {
    border-color: #bdc0ed;
    box-shadow: var(--fc-shadow-md);
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
  }

  /* —— CTA tertiaire —— */
  .fc-ui-cta--tertiary {
    border: 0;
    background: none;
    padding: 4px 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--fc-text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }

  .fc-ui-cta--tertiary:hover {
    color: var(--fc-indigo);
    text-decoration-color: color-mix(in srgb, var(--fc-indigo) 45%, transparent);
  }

  .fc-ui-cta--tertiary:focus-visible,
  .fc-ui-cta--primary:focus-visible,
  .fc-ui-cta--secondary:focus-visible {
    outline: 3px solid var(--fc-focus-ring);
    outline-offset: 3px;
  }

  /* —— Cartes d'épreuve (surfaces landing) —— */
  .fc-ui-exam-card.fc-card {
    border-color: var(--fc-line);
    border-radius: var(--fc-radius-xl, 17px);
    background: var(--fc-surface);
    box-shadow: var(--fc-shadow-sm);
    transition: transform var(--fc-motion-std, 0.25s ease),
      border-color var(--fc-motion-std, 0.25s ease),
      box-shadow var(--fc-motion-std, 0.25s ease);
  }

  .fc-ui-exam-card.fc-card:hover {
    border-color: #d0d2ef;
    box-shadow: var(--fc-shadow-md);
    transform: translateY(-4px);
  }

  .fc-ui-exam-card .fc-card-cover {
    aspect-ratio: 16 / 10;
    background: linear-gradient(165deg, #fff 0%, var(--fc-bg-secondary) 100%);
  }

  .fc-ui-exam-card .fc-card-cover--preview {
    padding: 8px 10px 10px;
    background: linear-gradient(165deg, #fff 0%, var(--fc-bg-secondary) 100%);
  }

  .fc-ui-exam-card .fc-card-cover--preview .fc-format-preview {
    min-height: 100%;
    border: none;
    box-shadow: none;
    padding: 10px 12px;
  }

  .fc-ui-exam-card .fc-card-cover img {
    transition: transform 0.45s var(--fc-ease-out, ease);
  }

  .fc-ui-exam-card.fc-card:hover .fc-card-cover img {
    transform: scale(1.04);
  }

  .fc-card--format-preview.fc-train-card .fc-card-cover--preview {
    padding: 8px 10px;
  }

  .fc-ui-exam-card .fc-card-body {
    padding: 16px 18px 18px;
  }

  .fc-ui-exam-card .fc-card-title {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
  }

  .fc-ui-exam-card .fc-card-sub {
    line-height: 1.55;
    margin-bottom: 12px;
  }

  .fc-ui-exam-card .fc-card-badge {
    background: var(--fc-gold-soft);
    color: var(--fc-ink);
    border: 1px solid color-mix(in srgb, var(--fc-gold) 35%, transparent);
  }

  .fc-ui-exam-card .fc-card-progress {
    color: var(--fc-indigo);
    margin-bottom: 10px;
  }

  .fc-ui-exam-card .fc-ui-progress--inline .fc-ui-progress__track {
    height: 5px;
  }

  .fc-ui-exam-card .fc-card-cta {
    color: var(--fc-indigo);
    font-weight: 800;
    font-size: 0.84rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .fc-ui-exam-card.fc-card,
    .fc-ui-exam-card .fc-card-cover img {
      transition: none;
    }
    .fc-ui-exam-card.fc-card:hover {
      transform: none;
    }
    .fc-ui-exam-card.fc-card:hover .fc-card-cover img {
      transform: none;
    }
  }

  /* —— Badges —— */
  .fc-ui-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* Mode sombre — CTA secondaire & cartes épreuve (spécificité ≥ règles scoped #screen-*) */
:root[data-theme="dark"] #app-layer.is-fc-catalog #screen-fc-home .fc-home-actions .fc-btn-ghost.fc-ui-cta--secondary,
:root[data-theme="dark"] #app-layer.is-fc-catalog .fc-ui-cta--secondary.fc-btn-ghost,
:root[data-theme="dark"] #app-layer.is-fc-catalog .fc-btn-ghost.fc-ui-cta--secondary {
  background: var(--surface2, #1c212d);
  border: 1px solid color-mix(in srgb, var(--indigo, var(--fc-indigo)) 52%, var(--border2, rgba(232, 234, 237, 0.16)));
  color: var(--text, #e8eaed);
  box-shadow: none;
}

:root[data-theme="dark"] #app-layer.is-fc-catalog #screen-fc-home .fc-home-actions .fc-btn-ghost.fc-ui-cta--secondary:hover,
:root[data-theme="dark"] #app-layer.is-fc-catalog .fc-ui-cta--secondary.fc-btn-ghost:hover,
:root[data-theme="dark"] #app-layer.is-fc-catalog .fc-btn-ghost.fc-ui-cta--secondary:hover {
  background: color-mix(in srgb, var(--indigo, var(--fc-indigo)) 16%, var(--surface2, #1c212d));
  border-color: color-mix(in srgb, var(--indigo, var(--fc-indigo)) 58%, var(--border2, rgba(232, 234, 237, 0.2)));
  color: var(--text, #e8eaed);
}

:root[data-theme="dark"] #app-layer[data-shell="contest"] #screen-fc-contest .fc-ui-exam-card .fc-card-badge {
  background: color-mix(in srgb, var(--fc-gold) 44%, #1a1520);
  color: #f5e8d2;
  border: 1px solid color-mix(in srgb, var(--fc-gold) 58%, transparent);
}

:root[data-theme="dark"] #app-layer[data-shell="contest"] .fc-ui-exam-card.fc-card {
  background: var(--fc-surface);
  border-color: var(--border2, var(--fc-line));
}

:root[data-theme="dark"] #app-layer[data-shell="contest"] .fc-ui-exam-card .fc-card-cover,
:root[data-theme="dark"] #app-layer[data-shell="contest"] .fc-ui-exam-card .fc-card-cover--preview {
  background: linear-gradient(165deg, var(--surface2, #1c212d) 0%, var(--fc-surface) 100%);
}

:root[data-theme="dark"] #app-layer.is-fc-catalog .fc-ui-section-title,
:root[data-theme="dark"] #app-layer.is-fc-catalog .fc-ui-kicker {
  color: var(--text, var(--fc-text));
}

:root[data-theme="dark"] #app-layer.is-fc-catalog .fc-ui-kicker {
  color: var(--indigo, #8b9cff);
}