/**
 * ================================================================
 * FROGGY NETWORK — COMPONENTS
 * ================================================================
 * Bibliothèque de composants UI prêts à l'emploi.
 * PRÉREQUIS : froggy-tokens.css + froggy-fonts.css chargés avant
 *
 * <link rel="stylesheet" href="css/froggy-components.css">
 * ================================================================
 */

/* ============================================================
   RESET MINIMAL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--fn-font-body);
  background: var(--fn-surface-bg);
  color: var(--fn-text-primary);
  line-height: var(--fn-leading-normal);
  transition: background 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--fn-teal); text-decoration: none; }
a:hover { color: var(--fn-teal-dark); text-decoration: underline; }

/* ============================================================
   LAYOUT
   ============================================================ */
.fn-container {
  max-width: var(--fn-container-max);
  margin: 0 auto;
  padding: 0 var(--fn-space-xl);
}
.fn-container-wide {
  max-width: var(--fn-container-wide);
  margin: 0 auto;
  padding: 0 var(--fn-space-xl);
}
.fn-container-narrow {
  max-width: var(--fn-container-narrow);
  margin: 0 auto;
  padding: 0 var(--fn-space-xl);
}

.fn-section {
  padding: var(--fn-space-3xl) 0;
  border-bottom: 1px solid var(--fn-surface-border);
}
.fn-section:last-child { border-bottom: none; }

.fn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fn-space-xl); }
.fn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fn-space-xl); }
.fn-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fn-space-lg); }

@media (max-width: 768px) {
  .fn-grid-2, .fn-grid-3, .fn-grid-4 { grid-template-columns: 1fr; }
  .fn-container, .fn-container-wide, .fn-container-narrow { padding: 0 var(--fn-space-md); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.fn-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--fn-nav-height);
  background: var(--fn-navy);
  border-bottom: 3px solid var(--fn-teal);
  display: flex;
  align-items: center;
  padding: 0 var(--fn-space-xl);
  gap: var(--fn-space-lg);
}
.fn-nav-logo { height: 40px; width: auto; object-fit: contain; flex-shrink: 0; }
.fn-nav-brand {
  font-family: var(--fn-font-spinc);
  color: var(--fn-white);
  font-size: var(--fn-text-lg);
  letter-spacing: 0.02em;
}
.fn-nav-links {
  display: flex;
  gap: var(--fn-space-lg);
  list-style: none;
}
.fn-nav-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fn-text-sm);
  font-weight: var(--fn-weight-medium);
  transition: var(--fn-transition-fast);
}
.fn-nav-links a:hover { color: var(--fn-teal); text-decoration: none; }
.fn-nav-links a.active { color: var(--fn-teal); }
.fn-nav-spacer { flex: 1; }
.fn-nav-actions { display: flex; gap: var(--fn-space-sm); align-items: center; }

/* ============================================================
   HERO / SECTION HERO
   ============================================================ */
.fn-hero {
  background: var(--fn-navy);
  background-image: radial-gradient(ellipse at 25% 50%, rgba(0, 152, 149, 0.18) 0%, transparent 65%);
  padding: var(--fn-space-3xl) 0;
  position: relative;
  overflow: hidden;
}
.fn-hero::after {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0, 152, 149, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.fn-hero-content { position: relative; z-index: 1; }
.fn-hero-logo { height: 90px; width: auto; margin-bottom: var(--fn-space-xl); }
.fn-hero-title {
  font-family: var(--fn-font-spinc);
  font-size: var(--fn-text-3xl);
  color: var(--fn-white);
  line-height: var(--fn-leading-tight);
  margin-bottom: var(--fn-space-md);
}
.fn-hero-tagline {
  font-family: var(--fn-font-segoe);
  font-size: var(--fn-text-xl);
  color: var(--fn-teal);
  margin-bottom: var(--fn-space-md);
}
.fn-hero-desc {
  font-size: var(--fn-text-md);
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  line-height: var(--fn-leading-loose);
  margin-bottom: var(--fn-space-xl);
}
.fn-hero-tags { display: flex; gap: var(--fn-space-sm); flex-wrap: wrap; }
.fn-hero-tag {
  background: rgba(0, 152, 149, 0.20);
  color: var(--fn-teal);
  border: 1px solid rgba(0, 152, 149, 0.40);
  padding: 6px 18px;
  border-radius: var(--fn-radius-full);
  font-size: var(--fn-text-sm);
  font-weight: var(--fn-weight-semibold);
  letter-spacing: 0.06em;
}

/* ============================================================
   HEADINGS
   ============================================================ */
.fn-section-tag {
  font-size: var(--fn-text-xs);
  font-weight: var(--fn-weight-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fn-teal);
  margin-bottom: var(--fn-space-sm);
}
.fn-section-title {
  font-size: var(--fn-text-2xl);
  font-weight: var(--fn-weight-bold);
  color: var(--fn-navy);
  line-height: var(--fn-leading-snug);
  margin-bottom: var(--fn-space-sm);
}
[data-theme="dark"] .fn-section-title { color: var(--fn-text-primary); }

.fn-section-subtitle {
  font-size: var(--fn-text-md);
  color: var(--fn-text-secondary);
  margin-bottom: var(--fn-space-2xl);
  max-width: 640px;
  line-height: var(--fn-leading-normal);
}
.fn-subsection-title {
  font-size: var(--fn-text-lg);
  font-weight: var(--fn-weight-bold);
  color: var(--fn-navy);
  border-left: 3px solid var(--fn-teal);
  padding-left: var(--fn-space-md);
  margin-bottom: var(--fn-space-lg);
  line-height: var(--fn-leading-snug);
}
[data-theme="dark"] .fn-subsection-title { color: var(--fn-text-primary); }

/* En-tête de section style présentation */
.fn-slide-header {
  background: var(--fn-navy);
  color: var(--fn-white);
  padding: var(--fn-space-lg) var(--fn-space-xl);
  border-radius: var(--fn-radius-md);
  border-left: 5px solid var(--fn-teal);
  display: flex;
  align-items: center;
  gap: var(--fn-space-md);
  margin-bottom: var(--fn-space-xl);
}
.fn-slide-header-num {
  font-size: var(--fn-text-3xl);
  font-weight: var(--fn-weight-black);
  color: rgba(0, 152, 149, 0.35);
  line-height: 1;
  min-width: 50px;
}
.fn-slide-header-title { font-size: var(--fn-text-xl); font-weight: var(--fn-weight-bold); }
.fn-slide-header-sub   { font-size: var(--fn-text-sm); opacity: 0.7; margin-top: 2px; }

/* ============================================================
   BOUTONS
   ============================================================ */
.fn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: var(--fn-radius-md);
  font-family: var(--fn-font-body);
  font-size: var(--fn-text-sm);
  font-weight: var(--fn-weight-semibold);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--fn-transition-base);
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1.4;
}
.fn-btn:focus-visible {
  outline: 3px solid var(--fn-teal);
  outline-offset: 2px;
}

/* Variantes */
.fn-btn-primary {
  background: var(--fn-teal);
  color: var(--fn-white);
  border-color: var(--fn-teal);
}
.fn-btn-primary:hover {
  background: var(--fn-teal-dark);
  border-color: var(--fn-teal-dark);
  color: var(--fn-white);
  box-shadow: var(--fn-shadow-teal);
}

.fn-btn-secondary {
  background: transparent;
  color: var(--fn-teal);
  border-color: var(--fn-teal);
}
.fn-btn-secondary:hover {
  background: var(--fn-teal-alpha10);
  color: var(--fn-teal-dark);
}

.fn-btn-navy {
  background: var(--fn-navy);
  color: var(--fn-white);
  border-color: var(--fn-navy);
}
.fn-btn-navy:hover {
  background: var(--fn-navy-dark);
  border-color: var(--fn-navy-dark);
  color: var(--fn-white);
  box-shadow: var(--fn-shadow-md);
}

.fn-btn-ghost {
  background: transparent;
  color: var(--fn-text-secondary);
  border-color: var(--fn-surface-border);
}
.fn-btn-ghost:hover {
  border-color: var(--fn-teal);
  color: var(--fn-teal);
}

.fn-btn-white {
  background: var(--fn-white);
  color: var(--fn-navy);
  border-color: var(--fn-white);
}
.fn-btn-white:hover {
  background: var(--fn-teal-light);
  color: var(--fn-navy);
}

/* Tailles */
.fn-btn-sm { padding: 6px 16px; font-size: var(--fn-text-xs); }
.fn-btn-lg { padding: 14px 32px; font-size: var(--fn-text-md); }
.fn-btn-xl { padding: 18px 40px; font-size: var(--fn-text-lg); }
.fn-btn-block { width: 100%; }
.fn-btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--fn-radius-md);
}
.fn-btn-icon-round {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--fn-radius-full);
}

/* ============================================================
   BADGES
   ============================================================ */
.fn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--fn-radius-full);
  font-size: var(--fn-text-xs);
  font-weight: var(--fn-weight-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.fn-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.fn-badge-teal    { background: rgba(0,152,149,.12); color: #007a78; border-color: rgba(0,152,149,.25); }
.fn-badge-navy    { background: rgba(36,42,70,.10);  color: var(--fn-navy); border-color: rgba(36,42,70,.20); }
.fn-badge-critique{ background: rgba(192,57,43,.10); color: #9b2335; border-color: rgba(192,57,43,.25); }
.fn-badge-eleve   { background: rgba(211,84,0,.10);  color: #a04000; border-color: rgba(211,84,0,.25); }
.fn-badge-moyen   { background: rgba(212,172,13,.12);color: #7d6408; border-color: rgba(212,172,13,.30); }
.fn-badge-ok      { background: rgba(30,132,73,.10); color: #145a32; border-color: rgba(30,132,73,.25); }
.fn-badge-white   { background: rgba(255,255,255,.15);color: var(--fn-white); border-color: rgba(255,255,255,.25); }

/* ============================================================
   ALERTES
   ============================================================ */
.fn-alert {
  display: flex;
  gap: var(--fn-space-md);
  align-items: flex-start;
  padding: var(--fn-space-md) var(--fn-space-lg);
  border-radius: var(--fn-radius-md);
  border-left: 4px solid;
  margin-bottom: var(--fn-space-sm);
}
.fn-alert-icon  { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }
.fn-alert-body  { flex: 1; font-size: var(--fn-text-sm); line-height: var(--fn-leading-normal); }
.fn-alert-title { font-weight: var(--fn-weight-bold); font-size: var(--fn-text-sm); margin-bottom: 2px; display: block; }

.fn-alert-ok       { background: rgba(30,132,73,.08);  border-color: var(--fn-ok);       color: #1e5631; }
.fn-alert-info     { background: rgba(0,152,149,.08);  border-color: var(--fn-teal);     color: #006b69; }
.fn-alert-moyen    { background: rgba(212,172,13,.10); border-color: var(--fn-moyen);    color: #6e5400; }
.fn-alert-eleve    { background: rgba(211,84,0,.08);   border-color: var(--fn-eleve);    color: #784212; }
.fn-alert-critique { background: rgba(192,57,43,.08);  border-color: var(--fn-critique); color: #7b241c; }

/* ============================================================
   CARDS
   ============================================================ */
.fn-card {
  background: var(--fn-surface-card);
  border: 1px solid var(--fn-surface-border);
  border-radius: var(--fn-radius-lg);
  padding: var(--fn-space-xl);
  transition: var(--fn-transition-base);
}
.fn-card:hover {
  box-shadow: var(--fn-shadow-md);
  transform: translateY(-2px);
}
.fn-card-title { font-weight: var(--fn-weight-bold); font-size: var(--fn-text-md); margin-bottom: var(--fn-space-sm); }
.fn-card-body  { font-size: var(--fn-text-sm); color: var(--fn-text-secondary); line-height: var(--fn-leading-normal); }

/* Variantes card */
.fn-card-navy {
  background: var(--fn-navy);
  border-color: var(--fn-navy);
  color: var(--fn-white);
}
.fn-card-navy .fn-card-body { color: rgba(255,255,255,0.75); }

.fn-card-teal {
  background: var(--fn-teal);
  border-color: var(--fn-teal);
  color: var(--fn-white);
}
.fn-card-teal .fn-card-body { color: rgba(255,255,255,0.85); }

.fn-card-teal-light {
  background: var(--fn-teal-light);
  border-color: rgba(0,152,149,.20);
  color: var(--fn-navy);
}

/* KPI Card */
.fn-kpi-card {
  background: var(--fn-surface-card);
  border: 1px solid var(--fn-surface-border);
  border-radius: var(--fn-radius-lg);
  padding: var(--fn-space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fn-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fn-teal);
}
.fn-kpi-value {
  font-family: var(--fn-font-noto);
  font-size: var(--fn-text-3xl);
  font-weight: var(--fn-weight-black);
  color: var(--fn-navy);
  line-height: 1;
}
[data-theme="dark"] .fn-kpi-value { color: var(--fn-text-primary); }
.fn-kpi-label { font-size: var(--fn-text-sm); color: var(--fn-text-secondary); margin-top: var(--fn-space-sm); }
.fn-kpi-trend { font-size: var(--fn-text-xs); font-weight: var(--fn-weight-semibold); margin-top: var(--fn-space-1); }
.fn-kpi-up    { color: var(--fn-ok); }
.fn-kpi-down  { color: var(--fn-critique); }

/* ============================================================
   TABLEAU
   ============================================================ */
.fn-table-wrap {
  overflow-x: auto;
  border-radius: var(--fn-radius-lg);
  border: 1px solid var(--fn-surface-border);
}
.fn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fn-text-sm);
}
.fn-table thead {
  background: var(--fn-navy);
  color: var(--fn-white);
}
.fn-table thead th {
  padding: 14px var(--fn-space-lg);
  text-align: left;
  font-weight: var(--fn-weight-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fn-table tbody tr {
  border-bottom: 1px solid var(--fn-surface-border);
  transition: background 0.15s;
}
.fn-table tbody tr:last-child { border-bottom: none; }
.fn-table tbody tr:hover { background: rgba(0,152,149,.05); }
.fn-table tbody td { padding: 12px var(--fn-space-lg); color: var(--fn-text-primary); }
.fn-table tfoot {
  background: rgba(0,152,149,.08);
  border-top: 2px solid var(--fn-teal);
}
.fn-table tfoot td {
  padding: 10px var(--fn-space-lg);
  font-weight: var(--fn-weight-bold);
  color: var(--fn-teal-dark);
}

/* ============================================================
   FORMULAIRE
   ============================================================ */
.fn-form-group { margin-bottom: var(--fn-space-lg); }
.fn-label {
  display: block;
  font-size: var(--fn-text-sm);
  font-weight: var(--fn-weight-semibold);
  margin-bottom: 6px;
  color: var(--fn-text-primary);
}
.fn-label-required { color: var(--fn-critique); margin-left: 2px; }

.fn-input, .fn-select, .fn-textarea {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--fn-surface-border);
  border-radius: var(--fn-radius-md);
  font-family: var(--fn-font-body);
  font-size: var(--fn-text-sm);
  background: var(--fn-surface-card);
  color: var(--fn-text-primary);
  transition: var(--fn-transition-fast);
  appearance: none;
}
.fn-input:focus, .fn-select:focus, .fn-textarea:focus {
  outline: none;
  border-color: var(--fn-teal);
  box-shadow: 0 0 0 3px rgba(0,152,149,.15);
}
.fn-input::placeholder { color: var(--fn-gray-light); }
.fn-textarea { min-height: 110px; resize: vertical; }
.fn-form-hint { font-size: var(--fn-text-xs); color: var(--fn-text-secondary); margin-top: 4px; }
.fn-form-error { font-size: var(--fn-text-xs); color: var(--fn-critique); margin-top: 4px; }

/* ============================================================
   TIMELINE
   ============================================================ */
.fn-timeline {
  position: relative;
  padding-left: var(--fn-space-2xl);
}
.fn-timeline::before {
  content: '';
  position: absolute;
  left: 11px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--fn-teal), rgba(0,152,149,.1));
}
.fn-timeline-item {
  position: relative;
  padding-bottom: var(--fn-space-xl);
}
.fn-timeline-dot {
  position: absolute;
  left: calc(-1 * var(--fn-space-2xl) + 5px);
  top: 5px;
  width: 14px; height: 14px;
  border-radius: var(--fn-radius-full);
  background: var(--fn-teal);
  border: 2px solid var(--fn-surface-bg);
  box-shadow: 0 0 0 2px var(--fn-teal);
}
.fn-timeline-meta  { font-size: var(--fn-text-xs); color: var(--fn-teal); font-weight: var(--fn-weight-semibold); margin-bottom: 4px; }
.fn-timeline-title { font-weight: var(--fn-weight-bold); font-size: var(--fn-text-md); color: var(--fn-text-primary); margin-bottom: 4px; }
.fn-timeline-body  { font-size: var(--fn-text-sm); color: var(--fn-text-secondary); line-height: var(--fn-leading-normal); }

/* ============================================================
   DIVIDER
   ============================================================ */
.fn-divider {
  border: none;
  border-top: 1px solid var(--fn-surface-border);
  margin: var(--fn-space-2xl) 0;
}
.fn-divider-teal {
  border-top-color: var(--fn-teal);
  border-top-width: 2px;
}

/* ============================================================
   CODE / MONO
   ============================================================ */
.fn-code {
  font-family: var(--fn-font-noto);
  font-size: var(--fn-text-sm);
  background: rgba(36,42,70,.06);
  color: var(--fn-navy);
  padding: 2px 6px;
  border-radius: var(--fn-radius-sm);
}
[data-theme="dark"] .fn-code {
  background: rgba(255,255,255,.08);
  color: var(--fn-teal-mid);
}
.fn-code-block {
  background: #0f1220;
  border-radius: var(--fn-radius-lg);
  padding: var(--fn-space-xl);
  font-family: var(--fn-font-noto);
  font-size: var(--fn-text-xs);
  color: #a8d8ea;
  line-height: 1.8;
  overflow-x: auto;
}

/* ============================================================
   FOOTER
   ============================================================ */
.fn-footer {
  background: var(--fn-navy);
  color: rgba(255,255,255,.6);
  padding: var(--fn-space-2xl) 0;
}
.fn-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fn-space-lg);
  flex-wrap: wrap;
}
.fn-footer-logo   { height: 36px; width: auto; opacity: 0.85; }
.fn-footer-links  { display: flex; gap: var(--fn-space-lg); list-style: none; flex-wrap: wrap; }
.fn-footer-links a {
  color: rgba(255,255,255,.5);
  font-size: var(--fn-text-sm);
  transition: var(--fn-transition-fast);
}
.fn-footer-links a:hover { color: var(--fn-teal); text-decoration: none; }
.fn-footer-copy { font-size: var(--fn-text-xs); opacity: 0.5; }

/* ============================================================
   THEME TOGGLE (optionnel)
   ============================================================ */
.fn-theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--fn-radius-full);
  cursor: pointer;
  color: rgba(255,255,255,.7);
  font-size: var(--fn-text-sm);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fn-font-body);
  transition: var(--fn-transition-fast);
}
.fn-theme-toggle:hover {
  color: var(--fn-teal);
  border-color: var(--fn-teal);
}

/* ============================================================
   SCROLLBAR (navigateurs WebKit)
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--fn-surface-subtle); }
::-webkit-scrollbar-thumb { background: var(--fn-navy-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fn-teal); }

/* ============================================================
   UTILITAIRES
   ============================================================ */
.fn-text-navy      { color: var(--fn-navy) !important; }
.fn-text-teal      { color: var(--fn-teal) !important; }
.fn-text-muted     { color: var(--fn-text-secondary) !important; }
.fn-text-white     { color: var(--fn-white) !important; }
.fn-text-critique  { color: var(--fn-critique) !important; }
.fn-text-ok        { color: var(--fn-ok) !important; }

.fn-bg-navy        { background-color: var(--fn-navy) !important; }
.fn-bg-teal        { background-color: var(--fn-teal) !important; }
.fn-bg-teal-light  { background-color: var(--fn-teal-light) !important; }
.fn-bg-subtle      { background-color: var(--fn-surface-subtle) !important; }

.fn-font-spinc     { font-family: var(--fn-font-spinc) !important; }
.fn-font-segoe     { font-family: var(--fn-font-segoe) !important; }
.fn-font-mono      { font-family: var(--fn-font-noto) !important; }

.fn-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}