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

html, body {
			height: 100%;
			margin: 0;
		}

html {
    min-height: 100%;
    background: #0f0e11;
    background-image: radial-gradient(ellipse at 20% 50%, #1a1040 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 20%, #0d1a2e 0%, transparent 60%);
    background-attachment: fixed;
}

  body {
			display: flex;
			flex-direction: column; 
			min-height: 100vh; 
			align-items: center;
			font-family: 'DM Sans', sans-serif;
			background: transparent;  /* body devient transparent */
		}

  header {
			position: sticky;  /* ou sticky */
			top: 0;
            width: 100%;
			background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

	.main {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			padding: 1rem 0;  /* ← haut et bas */
			width: 100%;
			min-height: calc(100vh - header_height - footer_height);
		}

  footer {
			width: 100%;
			text-align: center;
            padding: 1rem;
            background: rgba(10, 10, 10, 0.95);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
			margin-top: auto;
            color: #b0b0b0;
        }

.navbar {
			display: flex;
			align-items: center;   /* aligne verticalement au centre */
			gap: 20px;             /* espace entre les éléments */
			padding: 10px 10px;
			background-color: #333;
			width:100%
		}
/*
 body, .container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* évite le scroll horizontal 
  box-sizing: border-box;
 }
 */		
	.logo {
	  height: 50px;
	  width: auto;
	}

img {
  max-width: 100%;
  height: auto;
}

	.titre {
	  color: white;
	  font-size: 1.2rem;
	}

	.liens {
	  margin-left: auto;   /* pousse les liens vers la droite */
	  display: flex;
	  gap: 15px;
	}

	.liens a {
	  color: white;
	  text-decoration: none;
	}

	.liens a:hover {
	  text-decoration: underline;
	}		
		
    nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }
/*		
  .logo {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
*/  
  .nav-links {
            display: flex;
            gap: 2.5rem;
            list-style: none;
        }

  .nav-links a {
            color: #00e0e0;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
        }

  .nav-links a:hover {
            color: #667eea;
        }

  .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: #667eea;
            transition: width 0.3s;
        }

  .nav-links a:hover::after {
            width: 100%;
        }
/*
  .card {
	margin: 2rem auto;  /* ← marge haut/bas + centrage horizontal 
    background: #18161d;
    border: 1px solid #2a2735;
    border-radius: 20px;
    padding: 48px 40px;
    width: 380px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  }

  .card h1 {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 28px;
    color: #f0edf8;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
  }

  .card p {
    font-size: 13px;
    color: #6b6578;
    margin-bottom: 36px;
  }

  .field {
    margin-bottom: 20px;
  }
 */ 
.field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-checkbox .field-label {
    display: inline;
    margin-bottom: 0;
}
  label.field-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a7388;
    margin-bottom: 0;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    width: 100%;
    background: #0f0e11;
    border: 1px solid #2a2735;
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #f0edf8;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    caret-color: #9d82d4; /* couleur du curseur clignotant, bonus */
  }

  input:focus {
    border-color: #7c5cbf;
    box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15);
  }

  /* Password wrapper */
  .password-wrapper {
    position: relative;
  }

  .password-wrapper input {
    padding-right: 48px;
  }

  /* Hidden checkbox */
  .toggle-password {
    display: none;
  }

  /* Eye button label */
  .eye-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
    color: #5a5368;
  }

  .eye-toggle:hover {
    background: #2a2735;
    color: #9d82d4;
  }

  /* SVG eyes */
  .eye-open, .eye-closed { 
    width: 18px; 
    height: 18px; 
    transition: opacity 0.2s, transform 0.2s;
    position: absolute;
  }

  /* Default: password hidden → show "eye-open" icon (click to reveal) */
  .eye-open  { opacity: 1; transform: scale(1); }
  .eye-closed { opacity: 0; transform: scale(0.8); }

  /* When checkbox is checked: password visible → show "eye-closed" icon */
  .toggle-password:checked ~ .eye-toggle .eye-open  { opacity: 0; transform: scale(0.8); }
  .toggle-password:checked ~ .eye-toggle .eye-closed { opacity: 1; transform: scale(1); }

  /* Strength indicator */
  .strength-bar {
    display: flex;
    gap: 4px;
    margin-top: 8px;
  }
  .strength-bar span {
    flex: 1;
    height: 3px;
    border-radius: 99px;
    background: #2a2735;
    transition: background 0.3s;
  }
  .strength-bar.weak span:nth-child(1)   { background: #e05c5c; }
  .strength-bar.fair span:nth-child(-n+2) { background: #e09c3a; }
  .strength-bar.good span:nth-child(-n+3) { background: #5cb8e0; }
  .strength-bar.strong span               { background: #5ce08c; }

  .strength-label {
    font-size: 11px;
    color: #5a5368;
    margin-top: 5px;
    min-height: 16px;
    transition: color 0.3s;
  }

  /* Button */
  .btn {
    width: 100%;
    margin-top: 20px;
    padding: 13px;
    background: linear-gradient(135deg, #7c5cbf, #5c7cbf);
    border: none;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: opacity 0.2s, transform 0.15s;
  }
  .btn:hover { opacity: 0.9; transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  

		@media (max-width: 768px) {
  img {
    width: 100%;
  }

  .container {
    padding: 10px;
  }
          /* --- Formulaire de recherche --- */
        .recherche { margin-bottom: 15px; display: flex; gap: 10px; align-items: center; }
        .recherche input  { padding: 6px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
        .recherche select { padding: 6px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
        .recherche button { padding: 6px 14px; background: #0069d9; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
        .recherche button:hover { background: #0053a6; }
        .recherche a { padding: 6px 12px; background: #6c757d; color: #fff; border-radius: 4px; text-decoration: none; }

        /* --- Tableau --- */
        table { width: 100%; border-collapse: collapse; font-size: 14px; }
        th { background: #343a40; color: #fff; padding: 8px 12px; text-align: left; }
        td { padding: 7px 12px; border-bottom: 1px solid #dee2e6; }
        tr:nth-child(even) { background: #f8f9fa; }
        tr:hover { background: #e9f0fb; }

        /* --- Pagination --- */
        .pagination { margin-top: 15px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
        .pagination a, .pagination span {
            padding: 5px 11px; border: 1px solid #ccc; border-radius: 4px;
            text-decoration: none; color: #333; font-size: 14px;
        }
        .pagination a:hover  { background: #0069d9; color: #fff; border-color: #0069d9; }
        .pagination .actif   { background: #0069d9; color: #fff; border-color: #0069d9; font-weight: bold; }
        .pagination .desactive { color: #aaa; pointer-events: none; }
        .info { margin-top: 8px; font-size: 13px; color: #555; }
}