/* =============================================================
   FORPRO - Surcharge page de connexion (v2)
   - Fond vert profond, moins saturé
   - Logo : halo blanc sobre (sans anneau tricolore)
   - Cartes thématiques sur toute la largeur (4 colonnes)
   - Effets d'apparition en cascade au chargement
   Chargé après le style inline de layouts/auth.php
   ============================================================= */

/* ---------- 1. Fond ---------- */
.auth-body .auth-hero {
  background: linear-gradient(135deg,
    #0a2617 0%, #0e3a23 38%, #12482b 62%, #0c2f1c 100%);
  background-size: 200% 200%;
  animation: forpro-bg-drift 60s ease-in-out infinite alternate;
}
@keyframes forpro-bg-drift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
.auth-body .auth-hero::before {
  background:
    radial-gradient(circle at 20% 25%, rgba(253,239,66,0.06), transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(255,255,255,0.05), transparent 40%);
}
.gov-hero-pattern { opacity: 0.04; }

/* ---------- 2. Logo : halo blanc doux, sans anneau ---------- */
.gov-emblem::before,
.gov-emblem::after { display: none !important; content: none !important; }
.gov-emblem {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,0.85);
  box-shadow:
    0 4px 18px rgba(0,0,0,0.25),
    0 0 0 6px rgba(255,255,255,0.08),
    0 0 28px rgba(255,255,255,0.18);
  animation: forpro-pop 800ms cubic-bezier(0.34, 1.4, 0.64, 1) 300ms both;
}

/* ---------- 3. Cartes : pleine largeur, 4 colonnes ---------- */
.gov-hero-main p { max-width: 720px; }
.auth-body .gov-hero-themes {
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.auth-body .theme-card {
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
}
.auth-body .theme-card-icon { width: 38px; height: 38px; font-size: 15px; }
.auth-body .theme-card-title { font-size: 13.5px; margin-bottom: 4px; }
.auth-body .theme-card-desc  { font-size: 11.5px; line-height: 1.5; }
.auth-body .theme-card:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(253,239,66,0.35);
  transform: translateY(-3px);
}
@media (max-width: 1400px) {
  .auth-body .gov-hero-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 4. Effets d'apparition en cascade ---------- */
@keyframes forpro-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes forpro-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes forpro-slide-in {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Colonne gauche : chaque bloc arrive à son tour */
.gov-republic        { animation: forpro-rise 600ms ease-out 0ms both; }
.gov-ministry-name   { animation: forpro-rise 600ms ease-out 450ms both; }
.gov-direction       { animation: forpro-rise 600ms ease-out 600ms both; }
.gov-hero-main h1    { animation: forpro-rise 650ms ease-out 750ms both; }
.gov-hero-main p     { animation: forpro-rise 650ms ease-out 900ms both; }
.auth-body .theme-card:nth-child(1) { animation: forpro-rise 600ms ease-out 1050ms both; }
.auth-body .theme-card:nth-child(2) { animation: forpro-rise 600ms ease-out 1200ms both; }
.auth-body .theme-card:nth-child(3) { animation: forpro-rise 600ms ease-out 1350ms both; }
.auth-body .theme-card:nth-child(4) { animation: forpro-rise 600ms ease-out 1500ms both; }
.gov-hero-footer     { animation: forpro-rise 600ms ease-out 1700ms both; }

/* Colonne droite : la carte glisse, puis ses champs se dévoilent */
.auth-body .auth-card { animation: forpro-slide-in 700ms cubic-bezier(0.25, 0.8, 0.25, 1) 300ms both; }
.auth-body .auth-card .auth-head     { animation: forpro-rise 500ms ease-out 700ms both; }
.auth-body .auth-card .field:nth-of-type(1) { animation: forpro-rise 500ms ease-out 850ms both; }
.auth-body .auth-card .field:nth-of-type(2) { animation: forpro-rise 500ms ease-out 1000ms both; }
.auth-body .auth-card .auth-actions  { animation: forpro-rise 500ms ease-out 1150ms both; }
.auth-body .auth-card .btn-primary   { animation: forpro-rise 500ms ease-out 1300ms both; }
.auth-body .auth-card > a.btn        { animation: forpro-rise 500ms ease-out 1450ms both; }
.auth-body .auth-footer              { animation: forpro-rise 500ms ease-out 1600ms both; }

/* ---------- 5. Réglage système "réduire les animations" ----------
   Le style d'origine coupe TOUT dès que Windows/macOS le demande.
   On garde les effets d'apparition (courts, joués une seule fois)
   et on ne coupe que le mouvement continu du fond. */
@media (prefers-reduced-motion: reduce) {
  .auth-body .auth-hero { animation: none !important; }
  .auth-body .gov-republic, .auth-body .gov-emblem,
  .auth-body .gov-ministry-name, .auth-body .gov-direction,
  .auth-body .gov-hero-main h1, .auth-body .gov-hero-main p,
  .auth-body .theme-card, .auth-body .gov-hero-footer,
  .auth-body .auth-card, .auth-body .auth-card .auth-head,
  .auth-body .auth-card .field, .auth-body .auth-card .auth-actions,
  .auth-body .auth-card .btn-primary, .auth-body .auth-card > a.btn,
  .auth-body .auth-footer {
    animation-duration: 500ms !important;
    animation-name: forpro-rise !important;
    animation-fill-mode: both !important;
    animation-iteration-count: 1 !important;
  }
}