*, *::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);
			margin: 1em;
		}

  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;
        }
		
      h2 {
            font-size: 2rem;
            margin-bottom: 5px;
            text-align: center;
            background: linear-gradient(135deg, #ffffff 0%, #667eea 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%;
        }

.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; }
}

/**************  index2.css ******************/
.dropbtn {
  background-color: #333;
  color: #00e0e0;
  padding: 5px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
color: #00e0e0;
  padding: 5px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
	background-color: #333;
	}

.dropdown:hover .dropdown-content {
	color: #667eea;
	display: block;
	}

.dropdown:hover .dropbtn {
	background-color: #333;
	}

.card-l {
  margin: 2rem auto;
  background: #18161d;
  border: 1px solid #2a2735;
  border-radius: 20px;
  padding: 12px 12px;
  width: min(760px, 95vw);  /* élargi pour 2 colonnes */
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}

.card {
  margin: 2rem auto;
  background: #18161d;
  border: 1px solid #2a2735;
  border-radius: 20px;
  padding: 12px 12px;
  width: min(760px, 95vw);  /* élargi pour 2 colonnes */
  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: 4px;
  letter-spacing: -0.5px;
}
.card p {
  font-size: 13px;
  color: #6b6578;
  margin-bottom: 36px;
}

.card-blanc {
  margin: 2rem auto;
  background: #ffffff !important;
  border: 1px solid #e0dce8;
  border-radius: 20px;
  padding: 12px 12px;
  width: min(760px, 95vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

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

.card-blanc label.field-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7090;
  margin-bottom: 0;
}

.card-blanc input[type="text"],
.card-blanc input[type="email"],
.card-blanc input[type="tel"],
.card-blanc input[type="password"] {
  background: #f5f3f8 !important;
  border: 1px solid #d0cce0 !important;
  color: #1a1040 !important;
}

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

.card-blanc a             { color: #7c5cbf; }
.card-blanc a:hover       { color: #5c7cbf; }
.card-blanc .btn          { width: 100%; }

.field {
  margin-bottom: 8px;
}

/* Classe de base : uniquement display:grid et gap */
.form-grid {
  display: grid;
  gap: 0 20px;
  /* PAS de grid-template-columns ici */
}

/* Fallback 1 colonne mobile, écrasé par les modificatrices en desktop */
@media (max-width: 619px) {
  .form-grid { grid-template-columns: 1fr; }
}

@media (min-width: 620px) {
  .form-grid          { grid-template-columns: 1fr; } /* défaut desktop si aucune modificatrice */
  .form-grid-2        { grid-template-columns: 1fr 1fr; }
  .form-grid-3        { grid-template-columns: 1fr 1fr 1fr; }
  .form-grid-3-2      { grid-template-columns: 2fr 1fr; }
  .form-grid-4        { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .form-grid-4-2      { grid-template-columns: 2fr 1fr 1fr; }
  .form-grid-5        { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
  .form-grid-5-2      { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .form-grid-5-3      { grid-template-columns: 2fr 2fr 1fr; } 
  .form-grid-6        { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
  .form-grid-6-2      { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
  .form-grid-6-3      { grid-template-columns: 2fr 2fr 1fr 1fr; }
}

.field-full { grid-column: 1 / -1; }
.field-2col { grid-column: span 2; }

.autocomplete-wrapper {
    position: relative;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1e1e2e;
    border: 1px solid #444;
    border-radius: 6px;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

.autocomplete-list li {
    padding: 10px 14px;
    cursor: pointer;
    color: #e0e0e0;
    font-size: 0.9rem;
    border-bottom: 1px solid #2a2a3a;
    transition: background 0.15s;
}

.autocomplete-list li:hover,
.autocomplete-list li.active {
    background: #7c6af7;
    color: #fff;
}

select#collaborateur_role {
    background: #1e1e2e;      /* même fond que vos inputs */
    color: #e0e0e0;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px 14px;
    width: 100%;
    cursor: pointer;
    appearance: none;         /* supprime la flèche native du navigateur */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300bcd4' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent; /* ou rgba(255,255,255,0.05) pour un léger voile */
    color: #e0e0e0; /* texte clair */
}

thead tr {
    border-bottom: 1px solid #00bcd4; /* cyan pour s'harmoniser avec ta nav */
}

th {
    text-align: left;
    padding: 2px 2px;
    color: #00bcd4; /* couleur accent cyan/turquoise comme tes liens */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

td {
    padding: 2px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #d0d0d0;
}

tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Bouton action */
td button {
    background-color: transparent;
    border: 1px solid #f0a500; /* jaune/or comme tes icônes */
    color: #f0a500;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

td button:hover {
    background-color: rgba(240, 165, 0, 0.15);
}

.siege {
    background-color: #f0f8e8;
}

.nav-links button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: underline;
}
/* Tableau liste */
.tbl-films       { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.tbl-films th    { background: #222; color: #00e0e0; padding: 8px 10px; text-align: left; font-size: 13px; border-bottom: 1px solid #444; }
.tbl-films td    { padding: 7px 10px; border-bottom: 1px solid #2a2a2a; vertical-align: middle; }
.tbl-films tr:hover td { background: rgba(0,224,224,0.04); }
.badge           { font-size: 11px; padding: 2px 8px; border-radius: 3px; font-weight: bold; }
.badge-salle     { background: #0a3a2a; color: #00e0e0; }
.badge-prep      { background: #2a2040; color: #aa99ff; }
.badge-projet    { background: #2a1a00; color: #ffaa44; }
.badge-archive   { background: #2a2a2a; color: #888; }
.vis-on          { color: #00e0e0; }
.vis-off         { color: #555; }
.btn-sm          { font-size: 12px; padding: 3px 10px; border-radius: 3px; border: 1px solid #444; background: #222; color: #ccc; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-sm:hover    { border-color: #00e0e0; color: #00e0e0; }
.btn-del         { border-color: #8b0000; color: #ff6666; }
.btn-del:hover   { background: #3a0000; }
.btn-new         { background: #0a3a2a; border: 1px solid #00e0e0; color: #00e0e0; padding: 6px 16px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px; }
.btn-new:hover   { background: #0f5040; }
/*
select,
select::picker(select){
	appearance: base-select;
	height:2.4rem;
	padding:.5rem
	font-size: 16px;
	text-align: center;
	text-align-last: center;
}

select option {
	display: flex;
	padding: .3rem 1rem;
	text-align: center;
	text-align-last: center;
}
*/
textarea{
	appearance: base-select;
}
select {
	appearance: base-select;
    height: 2.2rem;
    line-height: 2.2rem; /* Indispensable pour le centrage vertical au repos */
    text-align: center;
    text-align-last: center;
    padding: 0; /* Évite que Chrome ajoute ses propres marges internes */
    text-indent: 10px; /* Décale le texte vers la droite */
}
/* Option placeholder (valeur vide) */
select option[value=""] {
    color: #999;
}

/* Toutes les options dans le dropdown */
select option {
    background-color: #ffffff;
    color: #000000;
}

select selectedoption {
    display: block;
    width: 100%;
	padding: 0
}


/* ── En-têtes de panneaux ────────────────────────────────── */

.crm-phead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-bottom: 1px solid #333;
font-family: 'Segoe UI', Arial, sans-serif;
    
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #888;
    flex-shrink: 0;
    background: #2a2a2a;
}

.crm-phead-btn {
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #666;
    background: #333;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 1px 6px;
    cursor: pointer;
}

.crm-phead-btn:hover {
    color: #ccc;
    border-color: #666;
}