:root {
  --fivote-blue-light: #1E4A7A;  /* Bleu foncé - couleur principale */
  --fivote-blue-dark: #4FA8E8;   /* Bleu clair - couleur hover */
  --fivote-green: #28a745;
  --fivote-red: #dc3545;
  --fivote-gray: #6c757d;
}
  --fivote-green: #28a745;        /* Vert (succès) */
  --fivote-red: #dc3545;          /* Rouge (danger) */
  --fivote-gray: #6c757d;         /* Gris (neutre) */
}

/* ============================================================
   BOUTONS - Classes principales
   ============================================================ */
.btn {
  display: inline-block;
  padding: 8px 14px;
  line-height: 1.25;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  opacity: 0.92;
}

.btn--block {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.btn--fixed {
  min-width: 140px;
}

/* Variantes de couleur */
.btn-primary {
  background-color: var(--fivote-blue-light);
}

.btn-primary:hover {
  background-color: var(--fivote-blue-dark);
}

.btn-secondary {
  background-color: var(--fivote-gray);
  color: #fff;
  cursor: default;
}

.btn-secondary:hover {
  background-color: var(--fivote-gray);
  opacity: 0.85;
}

.btn-danger {
  background-color: var(--fivote-red);
}

.btn-danger:hover {
  background-color: #c9302c;
}

.btn-success {
  background-color: var(--fivote-green);
}

.btn-success:hover {
  background-color: #155d14;
}

.btn-closed {
  background-color: #c9302c;
}

/* États désactivés */
.btn.disabled,
.btn:disabled,
.btn-secondary.disabled,
.btn-secondary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}


/* Style général */
body {
    font-family: Arial, sans-serif;
    background: #f4f6f8;
    margin: 0;
    padding: 20px;
}


/* Les formulaires "carte" par défaut : n'applique PAS ce style aux forms marqués .form-mail */
form:not(.form-mail) {
  max-width: 400px;
  margin: 50px auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


h2 {
    text-align: center;
    margin-bottom: 20px;
}

input, button {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    font-size: 16px;
}

button {
    background: var(--fivote-blue-light);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

button:hover {
    background: var(--fivote-blue-dark);
}

.message {
    text-align: center;
    color: green;
    margin-bottom: 10px;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background: var(--fivote-blue-light);
    color: #fff;
}

tr:hover {
    background: #f1f1f1;
}



/* Base commune (si tu l'as déjà, garde-la) */
.btn {
  display: inline-block;   /* sera surchargé par .btn--block */
  padding: 8px 14px;
  line-height: 1.25;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Liens delete */
a.delete {
    color: #6f42c1;
    font-weight: bold;
}

a.delete:hover {
    text-decoration: underline;
}

.center-text {
    text-align: center;
    margin-top: 10px;
}



.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    width: 400px;
    max-height: 80vh; /* limite la hauteur à 80% de la fenêtre */
    overflow-y: auto; /* active le scroll si contenu dépasse */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    border-radius: 8px;
}



.popup-content {
    max-height: 70vh; /* limite à 70% de la hauteur de l'écran */
    overflow-y: auto; /* active le scroll vertical */
}

<style>
  .result-col { text-align:center; width: 60px; }
  .res-ok { color:#065f46; font-weight:800; font-size:20px; line-height:1; display:inline-block; }
  .res-ko { color:#7f1d1d; font-weight:800; font-size:20px; line-height:1; display:inline-block; }
</style>


/* Champs de filtre dans l'en-tête du tableau */
.tbl-filter {
  width: 180px;          /* taille compacte */
  max-width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 6px;
  box-sizing: border-box;
}

/* Évite que des règles globales "input { width:100%; padding:14px; ... }"
   gonflent nos filtres */
thead .tbl-filter {
  width: 180px !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
  max-width: 100% !important;
}


/* Surbrillance verte plus soutenue */
tr.row-active {
  background-color: #b9e7c2 !important; /* <-- choisis ta teinte */
}
tr.row-active:hover {
  background-color: #b3e3bd !important; /* légère variation au survol */
}

/* ===== Présence : mise en page ===== */
.presence-wrapper {
  max-width: 900px;
  margin: 20px auto;
}

.presence-header {
  text-align: center;
  margin-bottom: 8px;
}

.presence-stats {
  text-align: center;
  color: #555;
  margin-bottom: 16px;
  font-size: 14px;
}

/* ===== Présence : tableau ===== */
.presence-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.presence-table th,
.presence-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.presence-table th {
  background: var(--fivote-blue-light);
  color: #fff;
}

.presence-table th:nth-child(1),
.presence-table td:nth-child(1) { width: 65%; }

.presence-table th:nth-child(2),
.presence-table td:nth-child(2) { width: 35%; }

/* ===== Surbrillance des lignes Présent / Représenté ===== */
tr.row-active { background-color: #b9e7c2; }
tr.row-active:hover { background-color: #b3e3bd; }

/* ===== Badges de statut ===== */
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
}

.badge-present    { background: #1c7c1a; color: #fff; }
.badge-represente { background: #0275d8; color: #fff; }
.badge-absent     { background: #6c757d; color: #fff; }


/* ===== Login: styles scoppés pour ne pas impacter le reste ===== */

/* Contrainte de largeur et centrage cohérent pour le titre + formulaire */
.login-page {
  /* optionnel: fond légèrement différent si tu veux distinguer la page */
  /* background: #f5f7fb; */
}

.login-page h1,
.login-page h2 {
  /* Aligne le titre sur le même axe horizontal que le form */
  max-width: 400px;          /* même max-width que 'form' défini plus haut */
  margin: 30px auto 12px;    /* centre et rapproche du formulaire */
  padding: 0 2px;            /* évite les décalages visuels */
  text-align: left;          /* on force l’alignement à gauche (tu n’aimais pas centré) */
  line-height: 1.2;
}

/* Formulaire de login: on cible par ID pour ne pas affecter les autres forms */
#login-form {
  max-width: 400px;          /* hérite de ta règle "form" mais on garantit ici */
  margin: 0 auto 40px;       /* centre parfaitement */
  padding: 20px;             /* conserve ton style existant */
  box-sizing: border-box;    /* supprime toute impression de "marge droite" perdue */
}

/* Champs: forcer une vraie pleine largeur dans le login (sans impact global) */
.login-page #login-form input[type="text"],
.login-page #login-form input[type="email"],
.login-page #login-form input[type="password"] {
  width: 100%;
  box-sizing: border-box;    /* inclut padding/bordures dans la largeur */
  display: block;
}

/* Bouton de login: même largeur que les champs, sans débordement */
.login-page #login-form button[type="submit"] {
  width: 100%;
  box-sizing: border-box;
}

/* Messages (erreurs/succès) mieux calés sous le titre */
.login-page .message,
.login-page .alert {
  max-width: 400px;
  margin: 0 auto 12px;
  text-align: left;          /* au cas où c’était centré, on passe à gauche */
}

/* Conteneur colonne, centré */
.login-page-wrap {
  max-width: 520px;       /* même largeur que .login-wrap + marge */
  margin: 2rem auto;      /* centre horizontalement */
  padding: 0 1rem;        /* petite marge interne */
}

/* Titre et message alignés au-dessus de la box */
.login-title {
  margin: 0 0 .75rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.login-error {
  background: #fdeaea;
  border: 1px solid #f5bcbc;
  color: #8a1f1f;
  padding: .5rem .75rem;
  border-radius: 6px;
  margin: .75rem 0 1rem;
}

/* Ta box existante — conserve ton style actuel */
.login-wrap {
  max-width: 520px;     /* aligne la largeur avec le titre */
  margin: 0 auto;       /* centre sous le titre */
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;     /* si tu as un fond gris clair derrière */
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.register-wrapper { max-width: 720px; margin: 24px auto; }
.register-card { background:#fff; border:1px solid #eee; border-radius:8px; padding:16px; }
.row { margin-bottom: 10px; }
    label { display:block; font-weight: 600; margin-bottom:4px; }
    input { width:100%; padding:10px; border:1px solid #ccd0d5; border-radius:6px; box-sizing:border-box; }
    fieldset { border:1px solid #e6e6e6; border-radius:8px; padding:10px 12px; }
    legend { font-weight:700; }
.alert { padding:10px; border-radius:6px; margin-bottom:12px; }
.alert.error { background:#fdecea; color:#611a15; border:1px solid #f5c6cb; }
.alert.ok { background:#e6ffed; color:#046d2c; border:1px solid #b2f5c5; }
.muted { color:#777; }
 

/* Désactive visuellement et fonctionnellement */
.btn.disabled, .btn:disabled {
  pointer-events: none;       /* ne clique pas */
  opacity: 0.65;              /* effet grisé */
  cursor: not-allowed;
}


/* ===== Mise en page convocation/votants ===== */

/* Conteneur de page : bornage et centrage cohérent */
.page-content {
  max-width: 1100px;           /* consensus de largeur pour l’aperçu + tableau */
  margin: 0 auto;              /* centre le contenu */
  padding: 0 8px;              /* petite marge interne pour respirer */
  box-sizing: border-box;
}


/* ===== Override fort pour les formulaires d'envoi des convocations ===== */

/* 1) Règle ciblée et plus spécifique : form.form-mail */
form.form-mail {
  max-width: none !important;   /* lève la contrainte des 400px */
  width: 100% !important;       /* utilise toute la largeur du conteneur */
  margin: 0 !important;         /* supprime la marge "carte" */
  padding: 0 !important;        /* supprime le padding "carte" */
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* 2) Si le form est dans le wrapper existant .mail-preview */
.mail-preview form.form-mail {
  max-width: none !important;
  width: 100% !important;
}

/* 3) Le tableau des destinataires doit prendre 100% de la largeur disponible */
.mail-preview table {
  width: 100% !important;
  table-layout: fixed;          /* colonnes stables */
  border-collapse: collapse;
}

/* 4) Répartition des colonnes (ajuste si nécessaire) */
.mail-preview th:nth-child(1),
.mail-preview td:nth-child(1) { width: 80px; }   /* Envoyer */
.mail-preview th:nth-child(2),
.mail-preview td:nth-child(2) { width: 30%; }    /* Nom & Prénom */
.mail-preview th:nth-child(3),
.mail-preview td:nth-child(3) { width: 45%; }    /* Email */
.mail-preview th:nth-child(4),
.mail-preview td:nth-child(4) { width: 25%; }    /* Token */

/* 5) Casse contrôlée pour emails/tokens longs */
.mail-preview td, .mail-preview th {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ============================================================
   STYLES SPÉCIFIQUES AG.PHP
   ============================================================ */
.status-active {
  color: var(--fivote-green);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.status-inactive {
  text-align: center;
}

.paypal-button-container {
  min-width: 200px;
  max-width: 300px;
  margin: 0 auto;
}

.ag-desc {
  text-align: left;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-left: 3px solid var(--fivote-blue-light);
  margin-top: 5px;
  font-size: 0.9em;
  color: #555;
}

.btn-activate-free {
  background-color: var(--fivote-blue-light);
  color: white;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85em;
  margin-top: 5px;
}

.btn-activate-free:hover {
  background-color: var(--fivote-blue-dark);
}