/* =====================================================================
   Ez Average — feuille de style de base
   UNE SEULE COPIE, partagée par toutes les fédérations.

   Tout est bâti sur des variables CSS. Une fédération ne redéfinit que
   des valeurs — jamais des règles — via ez_federationweb.fThemeConfig,
   injecté par le gabarit dans un :root{} après ce fichier.

   La conséquence est celle qu'on cherchait : une correction ici profite
   à tout le monde d'un coup. Si chaque fédération avait sa copie, il
   faudrait la répéter autant de fois qu'il y a de fédérations — le
   défaut qu'on a justement corrigé sur les rôles.
   ===================================================================== */

:root {
  --ez-primary:      #003a70;
  --ez-primary-text: #ffffff;
  --ez-accent:       #d4af37;
  --ez-surface:      #ffffff;
  --ez-text:         #1a1a1a;
  --ez-logo-height:  44px;

  /* Valeurs de structure : pas surchargeables par une fédération.
     Elles tiennent la cohérence de l'interface d'un bout à l'autre. */
  --ez-bg:           #f4f5f7;
  --ez-muted:        #6b7280;
  --ez-border:       #d9dde3;
  --ez-radius:       6px;
  --ez-gap:          16px;
  --ez-font:         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ez-mono:         ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ez-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ez-text);
  background: var(--ez-bg);
}

/* ------------------------------------------------------------------ en-tête
   Deux lignes : la barre de SERVICE (langues, nom du site, déconnexion)
   puis la barre de MENU. La première concerne la session, la seconde le
   travail — les mélanger reviendrait à mettre « Déconnexion » à côté de
   « Licenciés ».

   La barre de service est la même couleur que le menu, assombrie par un
   voile noir semi-transparent. Ça marche avec N'IMPORTE QUELLE couleur
   de fédération, sans avoir à en stocker une deuxième.               */

.ez-header { background: var(--ez-primary); color: var(--ez-primary-text); }

.ez-topbar {
  background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22));
  font-size: 13px;
}
.ez-topbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-gap);
}

.ez-site { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ez-site__name {
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ez-logo { height: var(--ez-logo-height); width: auto; display: block; }

.ez-account { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.ez-account__name { opacity: .85; }
.ez-account__out  { color: inherit; text-decoration: none; opacity: .85; }
.ez-account__out:hover, .ez-account__out:focus { opacity: 1; text-decoration: underline; }
.ez-account__off  { opacity: .55; font-style: italic; }

/* --- sélecteur de langue --- */
.ez-lang { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ez-lang a, .ez-lang__current {
  display: block;
  padding: 2px 6px;
  border-radius: var(--ez-radius);
  text-decoration: none;
  color: inherit;
  opacity: .7;
}
.ez-lang a:hover, .ez-lang a:focus { opacity: 1; background: rgba(255,255,255,.15); }
.ez-lang__current { opacity: 1; font-weight: 600; background: rgba(255,255,255,.22); }

/* --- barre de menu --- */
.ez-menu__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ez-menu__item {
  display: block;
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  opacity: .85;
}
.ez-menu__item:hover, .ez-menu__item:focus { opacity: 1; background: rgba(255,255,255,.10); }
.ez-menu__item.is-active {
  opacity: 1;
  font-weight: 600;
  border-bottom-color: var(--ez-accent);
}

.ez-main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px; }

.ez-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 20px 32px;
  color: var(--ez-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------------ panneau */
.panel {
  background: var(--ez-surface);
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius);
  padding: 20px 24px;
  margin-bottom: var(--ez-gap);
}
.panel--center { text-align: center; }
.panel--narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.panel__title { margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.panel__lead  { margin: 0 0 16px; color: var(--ez-muted); }

/* ------------------------------------------------------------------ chiffres */
.stats { display: flex; gap: 32px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat__value { font-size: 32px; font-weight: 600; color: var(--ez-primary); line-height: 1.1; }
.stat__label { font-size: 14px; color: var(--ez-muted); }

/* ------------------------------------------------------------------ tableau */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ez-border);
  vertical-align: top;
}
.table thead th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ez-muted);
  border-bottom-width: 2px;
}
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody th { font-weight: 500; color: var(--ez-muted); width: 34%; }

/* Un tableau de licenciés est large : il défile dans son cadre, la page
   elle-même ne défile jamais horizontalement. */
.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------------ champs */
.field { margin-bottom: var(--ez-gap); }
.field__label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.field__hint  { display: block; font-size: 13px; color: var(--ez-muted); margin-top: 4px; }
.field__input, .field__select {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  color: inherit;
  background: var(--ez-surface);
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius);
}
.field__input:focus, .field__select:focus {
  outline: 2px solid var(--ez-accent);
  outline-offset: 1px;
  border-color: var(--ez-primary);
}
.field--error .field__input { border-color: #b42318; }
.field__error { display: block; font-size: 13px; color: #b42318; margin-top: 4px; }
.field__input--mono { font-family: var(--ez-mono); letter-spacing: .04em; }

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-block;
  padding: 9px 18px;
  font: inherit;
  font-weight: 500;
  color: var(--ez-primary-text);
  background: var(--ez-primary);
  border: 1px solid var(--ez-primary);
  border-radius: var(--ez-radius);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .btn:focus { filter: brightness(1.12); }
.btn--ghost { color: var(--ez-primary); background: transparent; }
.btn--danger { background: #b42318; border-color: #b42318; color: #fff; }

/* ------------------------------------------------------------------ alertes */
.alert {
  padding: 10px 14px;
  border-radius: var(--ez-radius);
  border: 1px solid transparent;
  margin: 0 0 var(--ez-gap);
  font-size: 15px;
}
.alert--error  { background: #fdeceb; border-color: #f3c7c3; color: #8a1c14; }
.alert--info   { background: #eef4fb; border-color: #cddef2; color: #1c4e8a; }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
}
.badge--ok { background: #e7f4ec; color: #17603a; }
.badge--ko { background: #fdeceb; color: #b42318; }

/* ------------------------------------------------------------------ divers */
code { font-family: var(--ez-mono); font-size: .92em; background: var(--ez-bg); padding: 1px 5px; border-radius: 3px; }

@media (max-width: 640px) {
  /* Sur un téléphone, la barre de service passe sur deux lignes plutôt
     que d'écraser le nom du site. Le menu, lui, reste horizontal et
     défile — c'est ce qu'on utilise le plus souvent. */
  .ez-topbar__inner { flex-wrap: wrap; justify-content: flex-start; gap: 8px 14px; }
  .ez-site { order: -1; width: 100%; }
  .ez-menu__inner { flex-wrap: nowrap; overflow-x: auto; }
  .ez-menu__item { white-space: nowrap; }
  .table tbody th { width: auto; }
  .stats { gap: 20px; }
}

.detail {
  font-family: var(--ez-mono);
  font-size: 13px;
  text-align: left;
  background: var(--ez-bg);
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius);
  padding: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}