/* =====================================================================
   CEFAT-INTER — Système visuel
   Palette dérivée du logo (rouge UCI + marine du bloc-texte), typographie
   Poppins (titres, esprit géométrique/architecturé comme les lettres du
   logo) + Inter (texte courant, très lisible en interface de gestion).
   Les NOMS de variables historiques (--app-primary, --app-danger, etc.)
   sont conservés à l'identique : ils sont référencés en dur dans de
   nombreuses pages (styles inline générés en JS) — seules leurs VALEURS
   changent, pour ne rien casser ailleurs.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
  /* --- Identité de marque --- */
  --brand-red: #E01E2B;
  --brand-red-dark: #B4131F;
  --brand-red-tint: #FDECEC;
  --brand-navy: #24236E;
  --brand-navy-dark: #17163F;
  --brand-navy-tint: #ECEBF6;
  --brand-gold: #F0A202;

  /* --- Rôles fonctionnels (noms historiques conservés) --- */
  --app-primary: var(--brand-navy);
  --app-primary-dark: var(--brand-navy-dark);
  --app-danger: var(--brand-red);
  --app-success: #0F8B6C;
  --app-bg: #F5F6FB;
  --app-card-bg: #ffffff;
  --app-border: #E1E4F0;
  --app-text: #1C1E2E;
  --app-muted: #667085;
  --app-radius: 12px;

  /* --- Rythme / mouvement --- */
  --app-shadow-sm: 0 1px 3px rgba(23, 22, 63, 0.06);
  --app-shadow-md: 0 6px 20px rgba(23, 22, 63, 0.10);
  --app-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --app-transition: 0ms; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--app-bg);
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .app-card h1, .app-panel h2 {
  font-family: 'Poppins', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

a { color: var(--app-primary); }

:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   Écran de connexion / activation — mosaïque de marque
   --------------------------------------------------------------------- */

.app-shell {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

/* Mosaïque décorative : composée en CSS pur (dégradés + motifs SVG
   inline en data-URI), dans la palette du logo, avec des icônes
   orientées enseignement (livre, diplôme, plume, tableau). Choix
   délibéré plutôt que des photos stock hotlinkées : pas de dépendance
   à un service tiers (fragile/juridiquement incertain sur un site de
   production), et un résultat plus distinctif, cohérent avec l'identité
   déjà posée par le logo. */
.app-mosaic {
  display: none;
  flex: 1.1;
  max-width: 620px;
  position: relative;
  background:
    linear-gradient(155deg, var(--brand-navy) 0%, var(--brand-navy-dark) 60%, #0F0E33 100%);
  overflow: hidden;
}

.app-mosaic-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
  padding: 2px;
  opacity: 0.9;
}

.app-mosaic-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 1;
  animation: mosaicSettle 700ms var(--app-transition) both;
}
.app-mosaic-tile svg { width: 24%; height: 24%; max-width: 46px; max-height: 46px; opacity: 0.8; }
.app-mosaic-tile.t-red { background: var(--brand-red); }
.app-mosaic-tile.t-navy-light { background: #34327E; }
.app-mosaic-tile.t-gold { background: var(--brand-gold); }
.app-mosaic-tile.t-outline { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.25); }
.app-mosaic-tile.t-dark { background: #14133C; }

/* Animation d'appoint : part d'un léger zoom, jamais d'une opacité nulle,
   pour que la mosaïque reste visible même si l'animation ne se déclenche
   pas (moteur de rendu particulier, prefers-reduced-motion, etc.). */
@keyframes mosaicSettle {
  from { transform: scale(0.9); }
  to { transform: scale(1); }
}

.app-mosaic-caption {
  position: absolute;
  left: 40px;
  bottom: 40px;
  right: 40px;
  color: #fff;
  z-index: 2;
}
.app-mosaic-caption img { height: 46px; margin-bottom: 18px; border-radius: 6px; }
.app-mosaic-caption h2 {
  font-size: 1.6rem;
  margin: 0 0 8px;
  color: #fff;
}
.app-mosaic-caption p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
  max-width: 380px;
}

@media (min-width: 860px) {
  .app-mosaic { display: block; }
}

.app-shell-form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--app-bg);
}

.app-card {
  background: var(--app-card-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--app-shadow-sm);
  animation: cardRise 420ms var(--app-transition) both;
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-card-logo { height: 40px; margin-bottom: 18px; }

.app-card h1 {
  font-size: 1.35rem;
  margin: 0 0 4px;
  color: var(--brand-navy);
}

.app-card p.app-subtitle {
  color: var(--app-muted);
  margin: 0 0 24px;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   Champs, boutons, liens
   --------------------------------------------------------------------- */

.app-field { margin-bottom: 16px; }

.app-field-password-wrap { position: relative; }
.app-field-password-wrap input { padding-right: 42px; }
.app-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  color: var(--app-muted);
  transition: color var(--app-transition);
}
.app-password-toggle:hover { color: var(--brand-navy); }
.app-password-toggle svg { width: 18px; height: 18px; }

.app-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--app-text);
}

.app-field input, .app-field select, .app-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  transition: border-color var(--app-transition), box-shadow var(--app-transition);
}
.app-field input:focus, .app-field select:focus, .app-field textarea:focus {
  outline: none;
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px rgba(36, 35, 110, 0.12);
}

.app-btn {
  display: inline-block;
  width: 100%;
  padding: 11px 16px;
  border-radius: 8px;
  border: none;
  background: var(--app-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--app-transition), transform var(--app-transition), box-shadow var(--app-transition);
}
.app-btn:hover { background: var(--app-primary-dark); transform: translateY(-1px); box-shadow: var(--app-shadow-sm); }
.app-btn:active { transform: translateY(0); }
.app-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.app-link {
  color: var(--app-primary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color var(--app-transition);
}
.app-link:hover { color: var(--brand-red); text-decoration: underline; }

.app-links-row {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.app-alert {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.app-alert-error { background: var(--brand-red-tint); color: var(--app-danger); border: 1px solid #FBC7CA; }
.app-alert-success { background: #EAFBF5; color: var(--app-success); border: 1px solid #BEEEDD; }
.app-hidden { display: none; }

/* ---------------------------------------------------------------------
   Barre de navigation — logo intégré en CSS pur (::before), aucune page
   à modifier : robuste sur les 14 pages qui partagent déjà .app-topbar.
   --------------------------------------------------------------------- */

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 14px 68px;
  background: var(--app-card-bg);
  border-bottom: 1px solid var(--app-border);
  position: relative;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 30px;
}
.app-topbar::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background: url('/assets/img/logo.jpg') center/contain no-repeat;
  border-radius: 7px;
  box-shadow: var(--app-shadow-sm);
}

.app-topbar .app-badge {
  display: inline-block;
  background: var(--brand-navy-tint);
  color: var(--app-primary-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 6px;
}

.app-main { max-width: 960px; margin: 24px auto; padding: 0 24px; }

.app-panel {
  background: var(--app-card-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--app-shadow-sm);
  transition: box-shadow var(--app-transition);
}
.app-panel:hover { box-shadow: var(--app-shadow-md); }

.app-panel h2 {
  margin-top: 0;
  font-size: 1.05rem;
  color: var(--brand-navy);
}

.app-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--app-border);
  gap: 12px;
  flex-wrap: wrap;
  transition: background var(--app-transition);
}
.app-action-row:last-child { border-bottom: none; }
.app-action-row:hover { background: #FAFBFF; }

.app-muted { color: var(--app-muted); font-size: 0.85rem; }

/* ---------------------------------------------------------------------
   Menu latéral — complément à la barre du haut (ne la remplace pas). En
   position fixe : aucune page n'a besoin d'être restructurée pour
   l'accueillir, seule une ligne d'inclusion PHP est ajoutée après la
   barre du haut. Une seule couleur d'accent (rouge de marque) pour
   l'onglet actif ou survolé, comme convenu — pas de couleur par section.
   --------------------------------------------------------------------- */

.app-sidebar {
  display: none;
  position: fixed;
  top: 67px;
  left: 0;
  bottom: 0;
  width: 220px;
  background: var(--app-card-bg);
  border-right: 1px solid var(--app-border);
  padding: 18px 12px;
  overflow-y: auto;
  z-index: 5;
}

.app-sidebar-group { margin-bottom: 22px; }

.app-sidebar-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-muted);
  padding: 0 10px;
  margin-bottom: 8px;
}

.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--app-text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background var(--app-transition), color var(--app-transition), transform var(--app-transition);
}
.app-sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.app-sidebar-link:hover {
  background: var(--brand-red-tint);
  color: var(--brand-red-dark);
  transform: translateX(2px);
}

.app-sidebar-link.active {
  background: var(--brand-red);
  color: #fff;
  font-weight: 600;
}
.app-sidebar-link.active:hover { color: #fff; transform: none; }

@media (min-width: 860px) {
  .app-sidebar { display: block; }
  body.has-sidebar .app-main { margin-left: 220px; }
}

/* ---------------------------------------------------------------------
   Responsive — le socle (cartes, panneaux, formulaires) s'empile
   proprement sous 640px ; les tableaux passent en défilement horizontal
   plutôt que de casser la mise en page.
   --------------------------------------------------------------------- */

@media (max-width: 640px) {
  .app-topbar { padding-left: 60px; }
  .app-main { padding: 0 14px; margin: 16px auto; }
  .app-card { padding: 22px; }
  .app-links-row { flex-direction: column; gap: 8px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}