<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>auth.css - MNLA CONCEPT</title>
<style>
/* =========================================
   MNLA CONCEPT - Styles Authentification
   ========================================= */

/* Variables CSS */
:root {
  --primary-color: #1a56a2;       /* Bleu principal MNLA */
  --secondary-color: #d4af37;     /* Jaune/Doré MNLA */
  --text-color: #333;
  --light-color: #fff;
  --dark-color: #222;
  --gray-color: #f5f5f5;
  --error-color: #dc3545;
  --success-color: #28a745;
  --font-main: 'Montserrat', sans-serif;
  --transition: all 0.3s ease;
  --border-radius: 8px;
  --box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--gray-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Container principal */
.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.auth-container {
  background-color: var(--light-color);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 440px;
  padding: 50px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.5s ease-out;
}

/* Effet doré subtil sur les bords */
.auth-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--primary-color) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* Logo */
.logo-container {
  margin-bottom: 35px;
}

.logo-container a {
  display: inline-block;
  transition: transform 0.3s ease;
}

.logo-container a:hover {
  transform: scale(1.05);
}

.logo-container img {
  width: 180px;
  height: auto;
  margin: 0 auto;
}

/* Titres */
h1, h2 {
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--primary-color);
  font-size: 2rem;
  letter-spacing: -0.5px;
}

.subtitle-intro {
  margin-bottom: 35px;
  color: #666;
  font-size: 1rem;
  font-weight: 400;
}

/* Bouton Google */
.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--light-color);
  color: var(--text-color);
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px 24px;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  text-decoration: none;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.google-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.5s;
}

.google-button:hover::before {
  left: 100%;
}

.google-button:hover {
  background-color: #fafafa;
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 86, 162, 0.2);
}

.google-button img {
  width: 20px;
  height: 20px;
}

/* Séparateur */
.separator {
  text-align: center;
  margin: 30px 0;
  position: relative;
}

.separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ddd 20%, #ddd 80%, transparent);
}

.separator span {
  background-color: var(--light-color);
  padding: 0 20px;
  color: #999;
  font-size: 0.85rem;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* Formulaires */
form {
  margin-top: 30px;
}

.form-group {
  margin-bottom: 24px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
  font-size: 0.95rem;
}

.form-group input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #fafafa;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary-color);
  background-color: var(--light-color);
  box-shadow: 0 0 0 4px rgba(26, 86, 162, 0.1);
}

.form-group input::placeholder {
  color: #aaa;
}

.form-group input:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Champs en ligne */
.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 0;
}

.form-row .form-group {
  flex: 1;
}

/* Boutons */
button[type="submit"] {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #154785 100%);
  color: var(--light-color);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

button[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
  transition: left 0.5s;
}

button[type="submit"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--secondary-color);
  transition: width 0.3s ease;
}

button[type="submit"]:hover::before {
  left: 100%;
}

button[type="submit"]:hover {
  background: linear-gradient(135deg, #154785 0%, var(--primary-color) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 86, 162, 0.3);
}

button[type="submit"]:hover::after {
  width: 100%;
}

button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(26, 86, 162, 0.2);
}

button[type="submit"]:active::after {
  height: 3px;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

button[type="submit"]:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

button[type="submit"]:disabled::before,
button[type="submit"]:disabled::after {
  display: none;
}

/* Messages */
.error-message,
.success-message {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 0.95rem;
  animation: slideDown 0.3s ease-out;
  text-align: left;
}

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

.error-message {
  background-color: #fef2f2;
  border: 1px solid #fee2e2;
  color: var(--error-color);
}

.success-message {
  background-color: #f0fdf4;
  border: 1px solid #dcfce7;
  color: var(--success-color);
  text-align: center;
  font-weight: 500;
}

/* Liens */
.links {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  font-size: 0.9rem;
}

.links a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 3px;
}

.links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  transition: width 0.3s ease;
}

.links a:hover {
  color: var(--secondary-color);
}

.links a:hover::after {
  width: 100%;
}

/* Effet de clic avec animation dorée */
.links a:active {
  transform: translateY(1px);
}

.links a:active::after {
  height: 3px;
  background: var(--secondary-color);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

/* Note messages */
.note-message {
  background-color: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-message {
  background-color: #e0f2fe;
  border-color: #0284c7;
  color: #0c4a6e;
}

/* Success icon */
.success-icon {
  text-align: center;
  margin: 30px 0;
}

.success-icon svg {
  width: 80px;
  height: 80px;
}

/* Footer */
footer {
  background-color: #222;
  color: var(--light-color);
  padding: 25px 5%;
  text-align: center;
}

/* Icônes sociales circulaires parfaites */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--light-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.social-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--secondary-color);
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  border-radius: 50%;
}

.social-icon:hover::before {
  width: 100%;
  height: 100%;
}

.social-icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.social-icon:active {
  transform: translateY(-3px);
}

.social-icon img {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  transition: filter 0.3s ease;
}

.social-icon:hover img {
  filter: brightness(0) invert(1);
}

.container--linkfooter {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.container--linkfooter a {
  font-size: 14px;
  transition: all 0.3s ease;
  color: var(--light-color);
  text-decoration: none;
  position: relative;
}

.container--linkfooter a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--secondary-color);
  transition: width 0.3s ease;
}

.container--linkfooter a:hover {
  color: var(--secondary-color);
}

.container--linkfooter a:hover::after {
  width: 100%;
}

.copyright {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

/* Responsive Tablette */
@media (max-width: 768px) and (min-width: 481px) {
  .container {
    padding: 30px 20px;
  }
  
  .auth-container {
    max-width: 500px;
    padding: 40px 35px;
  }
  
  h1, h2 {
    font-size: 1.8rem;
  }
  
  .form-row {
    gap: 12px;
  }
  
  .links {
    font-size: 0.85rem;
    gap: 20px;
  }
  
  .social-icon {
    width: 38px;
    height: 38px;
  }
  
  .social-icon img {
    width: 19px;
    height: 19px;
  }
  
  .container--linkfooter {
    font-size: 13px;
  }
}

/* Responsive Mobile */
@media (max-width: 480px) {
  .container {
    padding: 20px 15px;
    min-height: 100vh;
  }
  
  .auth-container {
    padding: 30px 20px;
    border-radius: 10px;
    max-width: 100%;
    margin: 0 auto;
  }
  
  h1, h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .subtitle-intro {
    font-size: 0.85rem;
    margin-bottom: 25px;
  }
  
  .logo-container {
    margin-bottom: 25px;
  }
  
  .logo-container img {
    width: 140px;
  }
  
  .google-button {
    font-size: 0.9rem;
    padding: 12px 18px;
    gap: 10px;
    margin-bottom: 25px;
  }
  
  .separator {
    margin: 25px 0;
  }
  
  .separator span {
    font-size: 0.8rem;
    padding: 0 15px;
  }
  
  .form-group {
    margin-bottom: 18px;
  }
  
  .form-group label {
    font-size: 0.9rem;
    margin-bottom: 6px;
  }
  
  .form-group input {
    font-size: 16px; /* Évite le zoom sur iOS */
    padding: 12px 14px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  button[type="submit"] {
    padding: 12px 18px;
    font-size: 0.9rem;
  }
  
  .links {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    margin-top: 25px;
    font-size: 0.85rem;
  }
  
  .links a {
    display: inline-block;
  }
  
  .error-message,
  .success-message {
    padding: 12px 16px;
    font-size: 0.85rem;
    margin-bottom: 20px;
  }
  
  .social-icon {
    width: 35px;
    height: 35px;
  }
  
  .social-icon img {
    width: 18px;
    height: 18px;
  }
  
  .container--linkfooter {
    font-size: 12px;
    gap: 15px;
  }
  
  footer {
    padding: 20px 15px;
  }
  
  .copyright {
    font-size: 12px;
  }
}

/* Desktop large et très large écran */
@media (min-width: 1200px) {
  .container {
    padding: 60px 40px;
  }
  
  .auth-container {
    max-width: 480px;
    padding: 60px 50px;
  }
  
  h1, h2 {
    font-size: 2.2rem;
  }
  
  .subtitle-intro {
    font-size: 1.1rem;
  }
  
  .form-group input {
    padding: 16px 20px;
  }
  
  button[type="submit"] {
    padding: 16px 30px;
    font-size: 1.05rem;
  }
}

/* Focus visible pour accessibilité */
*:focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 2px;
}

/* Animations supplémentaires */
.auth-container > * {
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0;
}

.auth-container > *:nth-child(1) { animation-delay: 0.1s; }
.auth-container > *:nth-child(2) { animation-delay: 0.2s; }
.auth-container > *:nth-child(3) { animation-delay: 0.3s; }
.auth-container > *:nth-child(4) { animation-delay: 0.4s; }
.auth-container > *:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Style pour les pages de vérification */
.verification-container {
  text-align: center;
  animation: fadeIn 0.4s ease-out;
}

.verification-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.countdown {
  font-size: 0.9rem;
  color: #666;
  margin: 20px 0;
}

.countdown-number {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 1.2rem;
}

/* Effet de survol élégant sur le container */
.auth-container:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>
  <div style="padding: 40px; text-align: center; background: #f5f5f5;">
    <h1 style="color: #1a56a2; margin-bottom: 20px;">Fichier auth.css pour MNLA CONCEPT</h1>
    <p style="color: #666; max-width: 800px; margin: 0 auto;">
      Ce fichier CSS contient tous les styles nécessaires pour les pages d'authentification 
      de MNLA CONCEPT avec un design élégant, des effets dorés subtils et des icônes sociales 
      circulaires comme sur votre site principal.
    </p>
  </div>
</body>
</html>