/* Fichier : style.css */
/* Date de mise à jour : 2025-06-25 08:30:00 (Mise à jour pour bouton Imprimer en haut et correction syntaxe) */

/* --------------------------------------------------- */
/* SECTION 1: Styles généraux et structure de base     */
/* --------------------------------------------------- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #4a4a49;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

.container, .main-container, .dashboard-container, .wrapper {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    padding: 30px;
    margin: 30px auto;
    width: 95%; /* Par défaut pour la réactivité */
    max-width: 1200px; /* Limite pour les grands écrans */
}

/* Ajustements pour les conteneurs spécifiques si nécessaire */
.dashboard-container {
    max-width: 1000px;
    text-align: center;
}
.wrapper { /* Pour la page de connexion, par exemple */
    max-width: 360px;
}


h1, h2 {
    color: #4a4a49;
    text-align: center;
    margin-bottom: 25px;
}
h1 {
    font-size: 2.2em;
    margin-bottom: 30px;
    line-height: 1.2;
}
h2 {
    font-size: 1.8em;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

/* --------------------------------------------------- */
/* SECTION 2: Styles spécifiques du tableau de bord    */
/* --------------------------------------------------- */
.app-subtitle {
    color: #ea5b0c;
    font-size: 1em;
    display: block;
    margin-top: -10px;
    margin-bottom: 20px;
    font-weight: bold;
}
.user-info {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.user-info strong {
    color: #ea5b0c;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
    margin-bottom: 40px;
}
.card {
    background-color: #f8f8f8;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    text-decoration: none;
    color: #4a4a49;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.card .icon {
    font-size: 3em;
    color: #ea5b0c;
    margin-bottom: 10px;
}
.card h2 {
    margin: 0;
    font-size: 1.4em;
    color: #4a4a49;
}
.card p {
    font-size: 0.95em;
    color: #777;
    margin-top: 5px;
}


/* --------------------------------------------------- */
/* SECTION 3: Styles des boutons                       */
/* --------------------------------------------------- */
.btn, .filter-group button {
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    text-decoration: none;
    display: inline-flex; /* Permet l'alignement icône/texte et le gap */
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-sm { /* Réduction de la taille pour les boutons d'action dans les tableaux */
    padding: 5px 9px;
}

.btn-primary {
    background-color: #ea5b0c;
    color: white;
}
.btn-primary:hover {
    background-color: #4a4a49;
    transform: translateY(-2px);
}

.btn-success {
    background-color: #a9cb56;
    color: #00455E;
    border: 1px solid #90b34d;
    font-size: 0.85em; /* Taille spécifique pour "Modifier" */
}
.btn-success:hover {
    background-color: #90b34d;
    color: #00455E;
    transform: translateY(-1px);
}

.btn-info {
    background-color: #17a2b8;
    color: white;
}
.btn-info:hover {
    background-color: #138496;
    transform: translateY(-1px);
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}
.btn-danger:hover {
    background-color: #c82333;
    transform: translateY(-1px);
}

/* Bouton de déconnexion */
.logout-section {
    margin-top: 40px;
    text-align: center; /* Assurez le centrage du bouton de déconnexion */
}
.btn-logout {
    background-color: #F2AAC8;
    color: #474090;
    border: 1px solid #e098b6;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-logout:hover {
    background-color: #e098b6;
    color: #474090;
}

/* Style pour le bouton "Valider" de la sélection des participants */
.btn-validate-selection {
    background-color: #F6A924;
    color: #555554;
    border: 1px solid #F6A924;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-validate-selection:hover {
    background-color: #e0981a;
    color: #555554;
    transform: translateY(-2px);
}


/* Bouton "Retour au tableau de bord" (haut et bas) */
.top-nav {
    text-align: left;
    margin-bottom: 20px;
}
.bottom-nav {
    text-align: left;
    margin-top: 30px;
}
.btn-back-dashboard {
    background-color: #00455E;
    color: #DFE7EC;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-back-dashboard:hover {
    background-color: #002e3f;
    color: #DFE7EC;
}
.btn-back-dashboard i {
    font-size: 1.1em;
}


/* --------------------------------------------------- */
/* SECTION 4: Styles des formulaires et des champs     */
/* --------------------------------------------------- */
.form-section {
    margin-bottom: 50px;
    /* Assurer que .form-section est un bloc ou flex pour son contenu s'agence bien */
    display: block; /* Ou 'flex' si le formulaire est directement un flex container de ses champs principaux */
}
/* Style pour la zone encadrée du formulaire de recherche */
.form-bordered-section {
    border: 2px solid #8ba8bf; /* Bordure plus visible et foncée */
    border-radius: 10px; /* Coins plus arrondis */
    padding: 30px; /* Plus de padding */
    background-color: #e6f0f5; /* Fond légèrement plus foncé */
    margin-bottom: 50px; /* Conserver la marge inférieure */
}

.form-group {
    margin-bottom: 20px;
    position: relative; /* Pour positionnement absolu des help-block */
}
label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
}
input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea, select {
    width: calc(100% - 24px); /* Prend en compte padding et bordures */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Inclure padding et border dans la largeur */
}
textarea {
    resize: vertical;
    min-height: 80px;
}
.form-group.error input, .form-group.error select, .form-group.error textarea {
    border-color: red;
}
.help-block {
    font-size: 0.9em;
    color: red;
    margin-top: 5px;
    display: block;
    position: absolute;
    bottom: -20px; /* Positionnement sous l'input */
    left: 0;
    width: 100%;
    text-align: left;
}

/* NOUVEAU: Conteneur pour les groupes de lignes (deux lignes de champs) */
.form-row-group {
    display: flex;
    flex-direction: column; /* Les divs inline-group s'empilent */
    gap: 25px; /* Espace entre les "lignes" de formulaires */
    margin-bottom: 20px; /* Espace sous ce groupe de lignes */
}

/* Conteneur générique pour les groupes de champs alignés horizontalement (Flexbox) */
.form-group-inline {
    display: flex;
    gap: 20px; /* Espacement entre les colonnes */
    flex-wrap: wrap; /* Permet le retour à la ligne sur petits écrans */
    align-items: flex-start; /* Aligner les éléments en haut (pour les labels au-dessus) */
}
/* Les form-group à l'intérieur d'un .form-group-inline sont les items flexibles */
.form-group-inline .form-group {
    margin-bottom: 0; /* Réinitialiser la marge verticale des items flex */
    flex-grow: 1; /* Permettre aux éléments de grandir pour remplir l'espace */
    min-width: 180px; /* Largeur minimale pour les champs standards */
}
/* Largeurs spécifiques pour les champs de date et select */
.form-group-inline .form-group input[type="date"],
.form-group-inline .form-group select {
    min-width: 150px; /* Largeur minimale pour les dates et select pour un bon affichage */
    width: auto; /* S'adapte à la taille du contenu */
}
.form-group.date-filter-group input[type="date"] {
    min-width: 140px; /* Plus petit pour les dates si nécessaire */
    width: auto;
}
.form-group.filter-global-logic select {
    min-width: 180px; /* Largeur pour "Tous critères (ET)" */
    width: auto;
}


/* Styles spécifiques pour le groupe "Titre", "Note", "Nom de la note" (manage_themes_sujets.php) */
/* col-titre est maintenant dans un form-row-group séparé, ajuster sa flex-basis pour le nouveau contexte */
.form-group.col-titre {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%; /* Occupe toute la largeur disponible car il est seul dans son form-row-group */
    min-width: 100%;
    max-width: none;
}
/* Correction: Ajustement de la largeur et alignement pour éviter le chevauchement du label */
.form-group.col-note {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 90px; /* Réduit encore la place pour Oui/Non */
    min-width: 70px; /* Minimum pour ne pas casser la mise en page */
    max-width: 100px;
}
.form-group.col-note select {
    width: 100%;
    box-sizing: border-box;
    /* text-align: center; */ /* RETIRE: Cela centrait le texte dans le select, pas le select lui-même. */
}
.form-group.col-nom-note {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 220px; /* Augmente la largeur pour Nom de la note */
    min-width: 180px;
    max-width: 280px;
}
.form-group.col-nom-note input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Styles pour les groupes de textarea/select en ligne (Sujet/Complément et Synthèse/Pôles) */
.textarea-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 20px;
}
.textarea-group .form-group {
    flex-grow: 1;
    min-width: 280px;
    margin-bottom: 0;
}
.textarea-group textarea,
.textarea-group select[multiple] {
    width: 100%;
    box-sizing: border-box;
}
.textarea-group select[name="poles[]"][multiple] {
    height: 90px; /* Hauteur pour 3 lignes (environ 30px par ligne) */
    min-height: 90px;
    overflow-y: auto;
}
/* Styles pour les boutons "Tout cocher/décocher" des pôles */
.select-all-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px; /* Espace sous les boutons et au-dessus du select */
    flex-wrap: wrap;
}
.select-all-controls .btn-sm {
    padding: 5px 10px;
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}


/* Styles pour le groupe de champs "Actions" et "Date limite" */
.actions-date-limit-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 20px;
}
.actions-date-limit-group .form-group {
    flex-grow: 1;
    min-width: 280px;
    margin-bottom: 0;
}
.actions-date-limit-group textarea,
.actions-date-limit-group input[type="text"],
.actions-date-limit-group input[type="date"] {
    width: 100%;
    box-sizing: border-box;
}


/* Styles pour les groupes de champs d'instance (dates, types) */
.date-range-group, .type-and-actions-group, .inline-fields {
    display: flex;
    align-items: flex-end; /* Aligner les éléments en bas de leur conteneur flex */
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}
.date-range-group .date-field,
.type-and-actions-group .type-field,
.inline-fields > div {
    flex: 1 1 auto;
    min-width: 150px;
    position: relative;
}
.date-range-group .date-field {
    width: 160px;
    min-width: 160px;
}
.date-range-group .separator {
    font-weight: bold;
    color: #4a4a49;
    padding-bottom: 10px;
    line-height: 1.0;
}
.inline-fields label, .inline-fields select, .inline-fields input[type="text"] {
    flex: 0 0 auto;
    width: auto;
}
.inline-fields input[type="text"] {
    max-width: 250px;
}


/* Styles pour le groupe principal de champs de vote (manage_themes_sujets.php) */
.vote-main-fields-group {
    display: flex; /* Utilisation de Flexbox pour aligner Vote et champs numériques */
    gap: 20px; /* Espacement entre les grands groupes */
    flex-wrap: wrap;
    align-items: flex-start; /* Aligner les labels au-dessus */
}
.vote-main-fields-group .form-group {
    margin-bottom: 0; /* Pas de marge en bas pour les items flex */
}

/* Style spécifique pour le groupe radio Vote: Oui/Non */
.vote-status-group {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 120px; /* Largeur fixe pour ce groupe */
    min-width: 100px;
    max-width: 150px;
}
.vote-status-group label {
    margin-bottom: 8px;
    display: block;
}
.radio-group { /* Conteneur des radios Oui/Non */
    display: flex;
    gap: 15px;
    margin-top: 5px;
    margin-bottom: 0;
    align-items: center;
}
.radio-group label { /* Labels individuels des radios */
    margin-bottom: 0;
    font-weight: normal;
    display: inline-block;
}
.radio-group input[type="radio"] {
    width: auto;
    margin-right: 5px;
}

/* Styles pour le groupe de champs numériques de vote (Nombre de votants, Pour, Contre, Abstention) */
.vote-fields-inline-group {
    display: flex; /* Conteneur flex pour les 4 champs numériques */
    flex-grow: 1; /* Prend l'espace restant dans vote-main-fields-group */
    gap: 10px; /* Espacement réduit entre les champs numériques */
    flex-wrap: wrap;
    align-items: flex-start; /* Labels au-dessus */
}
.vote-fields-inline-group .form-group {
    flex-grow: 0; /* Ne pas laisser grandir */
    flex-shrink: 0;
    flex-basis: 70px; /* Largeur fixe pour 4 caractères + padding */
    width: 70px; /* Largeur fixe pour les inputs numériques */
    min-width: 60px;
    max-width: 90px;
    margin-right: 0; /* Géré par le gap du parent */
}
.vote-fields-inline-group input[type="number"] {
    width: 100%;
    box-sizing: border-box;
}

/* Message d'erreur pour la somme des votes */
.vote-error-display {
    position: static;
    margin-top: 5px;
    display: block;
    clear: both;
}


/* Styles pour la section des filtres de pôles */
.pole-filters-section-wrapper {
    border: 2px solid #a7c0d8; /* Bordure plus visible et foncée */
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px; 
    background-color: #f0f7fb; /* Fond distinct légèrement plus foncé */
}
.pole-filters-section-wrapper h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3em;
    color: #00455E;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: none; 
    padding-bottom: 0;
}
.pole-filters-section-wrapper h3 .add-pole-small-btn {
    font-size: 0.8em;
    padding: 5px 10px;
}

.pole-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Largeur minimale légèrement augmentée */
    gap: 20px; /* Espace plus grand entre les éléments de la grille */
}
/* Chaque groupe de filtre de pôle (select + logique + bouton suppression) */
.pole-filter-group-wrapper {
    display: flex; /* Utilise flex pour aligner select et logique et bouton suppression */
    align-items: flex-end; /* Aligne les éléments en bas (labels en haut) */
    gap: 10px; /* Espacement entre le select, la logique et le bouton de suppression */
    flex-wrap: nowrap; /* Empêche le retour à la ligne des éléments du groupe de pôle */
    padding-bottom: 5px; /* Espace sous la ligne de pôle */
    background-color: #fcfcfc; /* Fond légèrement plus clair pour chaque ligne de pôle */
    border: 1px solid #e0e0e0; /* Bordure légère pour chaque ligne de pôle */
    border-radius: 5px;
    padding: 10px;
}
.pole-filter-group-wrapper .form-group {
    margin-bottom: 0; 
    flex-grow: 1;
    min-width: 180px; /* Largeur minimale pour le select de pôle */
}
.pole-filter-group-wrapper .pole-logic-group {
    flex-grow: 0; 
    flex-shrink: 0;
    width: 60px; /* Largeur fixe pour le select de logique (OU/ET) */
    min-width: 60px;
}
.pole-filter-group-wrapper .remove-pole-filter-btn {
    flex-shrink: 0; 
    padding: 8px 10px; 
    align-self: flex-end; 
}


/* --------------------------------------------------- */
/* SECTION 5: Styles des Tableaux                      */
/* --------------------------------------------------- */
.list-section {
    margin-bottom: 50px;
}
table { /* Style global pour TOUS les tableaux pour assurer border-collapse */
    border-collapse: collapse; /* Indispensable pour éviter les doubles bordures */
    width: 100%; /* S'adapte au conteneur */
    max-width: 1200px; /* Limite pour les grands écrans */
    margin: 20px auto; /* Centre le tableau et ajoute de la marge */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden; 
    font-size: 0.95em;
}
th, td {
    border: 1px solid #ddd; 
    padding: 10px 12px;
    text-align: left;
    vertical-align: top; /* Aligner le texte en haut pour le multiligne */
    text-overflow: ellipsis; 
}
th {
    background-color: #f2f2f2;
    color: #4a4a49;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
    white-space: nowrap; /* Conserver pour les en-têtes sauf si spécifié */
}
tr:nth-child(even) { 
    background-color: #f9f9f9;
}
tr:hover {
    background-color: #f0f0f0;
}

/* Classes pour le contrôle du retour à la ligne */
.wrap-text {
    white-space: normal;
    word-wrap: break-word;
}
.nowrap-text {
    white-space: nowrap;
}


/* Styles des boutons dans le tableau (icônes seules) */
.table-actions.icon-only {
    white-space: nowrap;
    text-align: center;
    padding: 8px; /* Réduire le padding pour les icônes seules */
}
.table-actions.icon-only .btn-sm {
    padding: 5px 6px; /* Ajuster la taille des boutons pour les icônes */
}
.table-actions.icon-only .btn-sm i {
    font-size: 1.1em; /* Taille de l'icône */
}
.table-actions.icon-only .custom-tooltip {
    white-space: nowrap; /* Assure que l'infobulle reste sur une ligne */
}


/* Cibler tous les tableaux responsive (y compris logs) */
table.responsive-table {
    table-layout: fixed; /* Pour assurer que les largeurs de colonnes s'appliquent */
}


/* Largeurs de colonnes spécifiques pour view_decisions.php */
th.col-actions-narrow, td.col-actions-narrow { width: 9%; min-width: 90px; text-align: center; } 
th.col-instance-header, td.col-instance-header { width: 16%; min-width: 150px; } 
th.col-title-header, td.col-title-header { width: 25%; min-width: 200px; } 
th.col-actions-wide, td.col-actions-wide { width: 12%; min-width: 100px; } 
th.col-date-limit, td.col-date-limit { width: 8%; min-width: 80px; white-space: nowrap; } 
th.col-poles-header, td.col-poles-header { width: 18%; min-width: 150px; } 
th.col-note-name, td.col-note-name { width: 7%; min-width: 70px; } 
th.col-vote-status-narrow, td.col-vote-status-narrow { width: 5%; min-width: 50px; text-align: center; white-space: nowrap; } 


.datetime-cell {
    font-size: 0.8em;
    color: #666;
    white-space: nowrap;
}

/* NOUVELLES Largeurs de colonnes spécifiques pour admin_users.php */
table.responsive-table .col-username { width: 13%; min-width: 100px; }
table.responsive-table .col-email { width: 17%; min-width: 150px; }
table.responsive-table .col-role { width: 9%; min-width: 70px; white-space: nowrap; }
table.responsive-table .col-status { width: 9%; min-width: 70px; white-space: nowrap; }
table.responsive-table .col-datetime { width: 10%; min-width: 90px; white-space: nowrap; }
table.responsive-table .col-actions-admin { width: 16%; min-width: 130px; text-align: center; white-space: nowrap; }


/* NOUVELLES Largeurs de colonnes spécifiques pour manage_instances.php */
table.responsive-table .col-view-details { width: 4%; min-width: 40px; text-align: center; padding-left: 5px; padding-right: 5px; white-space: nowrap; }
table.responsive-table .col-date-narrow { width: 8%; min-width: 70px; white-space: nowrap; }
table.responsive-table .col-instance-type { width: 12%; min-width: 100px; }
table.responsive-table .col-type-meeting { width: 7%; min-width: 60px; white-space: nowrap; }
table.responsive-table .col-participants-full { width: 22%; min-width: 160px; }
table.responsive-table .col-poles-full { width: 22%; min-width: 160px; }
table.responsive-table .col-sujets-count { width: 5%; min-width: 50px; text-align: center; white-space: nowrap; }
table.responsive-table .col-actions-manage { width: 20%; min-width: 150px; text-align: center; white-space: nowrap; }


/* NOUVELLES Largeurs de colonnes spécifiques pour manage_individus.php */
table.responsive-table .col-firstname-individu { width: 15%; min-width: 100px; }
table.responsive-table .col-lastname-individu { width: 15%; min-width: 100px; }
table.responsive-table .col-mandature-year { width: 10%; min-width: 80px; text-align: center; white-space: nowrap; }
table.responsive-table .col-role-instance { width: 10%; min-width: 80px; text-align: center; white-space: nowrap; }
table.responsive-table .col-actions-individu { width: 20%; min-width: 120px; text-align: center; white-space: nowrap; }


/* NOUVELLES Largeurs de colonnes spécifiques pour manage_structures.php */
table.responsive-table .col-structure-name { width: 30%; min-width: 200px; }
table.responsive-table .col-matricule { width: 15%; min-width: 100px; white-space: nowrap; }
table.responsive-table .col-description { width: 35%; min-width: 250px; }
table.responsive-table .col-actions-structure { width: 20%; min-width: 120px; text-align: center; white-space: nowrap; }


/* NOUVELLES Largeurs de colonnes spécifiques pour manage_themes_sujets.php */
table.responsive-table .col-theme-sujet-titre { width: 12%; min-width: 100px; }
table.responsive-table .col-sujet-complement { width: 20%; min-width: 160px; } /* Sujet + Complément */
table.responsive-table .col-synthese-themes { width: 15%; min-width: 120px; }
table.responsive-table .col-actions-date-limit { width: 15%; min-width: 120px; } /* Actions + Date limite */
table.responsive-table .col-poles-themes-manage { width: 12%; min-width: 100px; }
table.responsive-table .col-note-combined { width: 8%; min-width: 70px; } /* Note combinée */
table.responsive-table .col-vote-combined { width: 10%; min-width: 80px; } /* REDUCTION: Vote combiné */
table.responsive-table .col-actions-manage-themes-sujets { width: 8%; min-width: 75px; text-align: center; white-space: nowrap; } /* AUGMENTATION: 3 icônes */

/* Styles spécifiques pour le contenu de la cellule de vote combinée */
table.responsive-table td.col-vote-combined span {
    display: inline-block; /* Pour que les marges et paddings fonctionnent sur les spans colorés */
    font-size: 0.9em; /* Réduire la taille des textes "pour", "contre", "abst." */
}
table.responsive-table td.col-vote-combined span.pour-color { color: #a9cb56; font-weight: bold; } /* Vert */
table.responsive-table td.col-vote-combined span.contre-color { color: #e5605a; font-weight: bold; } /* Rouge */
table.responsive-table td.col-vote-combined span.abstention-color { color: #4a4a49; font-weight: bold; } /* Gris foncé */


/* NOUVELLES Largeurs de colonnes spécifiques pour view_instance_details.php */
table.responsive-table .view-instance-col-titre { width: 15%; min-width: 120px; }
table.responsive-table .view-instance-col-sujet-complement { width: 30%; min-width: 250px; }
table.responsive-table .view-instance-col-synthese { width: 25%; min-width: 200px; }
table.responsive-table .view-instance-col-poles { width: 15%; min-width: 120px; }
table.responsive-table .view-instance-col-vote-combined { width: 10%; min-width: 90px; }
table.responsive-table .view-instance-col-actions { width: 5%; min-width: 50px; text-align: center; white-space: nowrap; }


/* Nouvelle section pour les styles du tableau des logs */
table.logs-table {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 20px auto !important;
    table-layout: fixed !important;
}

/* Largeurs de colonnes spécifiques pour table.logs-table */
table.logs-table .col-log-id { width: 4%; min-width: 40px; text-align: center; }
table.logs-table .col-log-datetime { width: 10%; min-width: 120px; }
table.logs-table .col-log-type-logs { width: 7%; min-width: 70px; }
table.logs-table .col-log-message-logs { width: 25%; min-width: 200px; word-break: break-all; }
table.logs-table .col-log-user-logs { width: 10%; min-width: 90px; }
table.logs-table .col-log-ip-logs { width: 10%; min-width: 100px; }
table.logs-table .col-log-os-logs { width: 8%; min-width: 70px; }
table.logs-table .col-log-browser-logs { width: 8%; min-width: 70px; }
table.logs-table .col-log-entity-type-logs { width: 8%; min-width: 70px; }
table.logs-table .col-log-entity-id-logs { width: 4%; min-width: 40px; text-align: center; }


/* --------------------------------------------------- */
/* SECTION 6: Styles des Alertes messages              */
/* --------------------------------------------------- */
.alert {
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 1.05em;
}
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }


/* --------------------------------------------------- */
/* SECTION 7: Styles de la pagination                  */
/* --------------------------------------------------- */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.pagination-controls .limit-selector label {
    font-weight: normal;
    margin-right: 5px;
}
.pagination-controls .limit-selector select {
    width: auto;
    padding: 5px 8px;
    font-size: 0.9em;
    height: auto;
    min-width: 60px; /* Réduire la taille du sélecteur */
}
.pagination-pages {
    display: flex;
    gap: 5px;
    align-items: center;
}
.pagination-pages a, .pagination-pages span {
    padding: 6px 10px;
    border: 1px solid #ddd;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Rétablissement de la mise en forme de la pagination initiale */
.pagination-pages a:not(.btn-pagination-nav) {
    background-color: #00455E; /* Couleur foncée */
    color: white;
    border-color: #00455E;
}
.pagination-pages a:not(.btn-pagination-nav):hover {
    background-color: #002e3f; /* Couleur plus foncée au survol */
    color: white;
}
.pagination-pages .current-page {
    background-color: #00455E; /* Couleur foncée */
    color: #DFE7EC; /* Texte clair */
    border-color: #00455E;
    font-weight: bold;
}
.pagination-pages a.btn-pagination-nav {
    background-color: #D4CBC7; /* Couleur grise/claire */
    color: #00455E; /* Texte foncé */
    border-color: #D4CBC7;
}
.pagination-pages a.btn-pagination-nav:hover {
    background-color: #c0b8b5; /* Couleur plus foncée au survol */
    color: #00455E;
}
.pagination-pages .disabled {
    color: #ccc;
    pointer-events: none;
    background-color: #f8f8f8;
    border-color: #ddd;
}


/* --------------------------------------------------- */
/* SECTION 8: Styles des contrôles d'affichage divers  */
/* --------------------------------------------------- */
/* Classes pour le masquage / affichage d'éléments */
.hidden-form {
    display: none !important; /* FORCE le masquage */
}
.create-new-btn { /* Ancien style pour des boutons de création */
    margin-bottom: 20px;
    margin-top: 10px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* Styles pour les en-têtes de liste avec bouton et message (manage_themes_sujets.php) */
.list-header-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.no-records-message { /* Généralement pour les messages simples */
    font-size: 1.2em;
    font-weight: bold;
    color: #00455E;
    margin-left: 20px;
    flex-grow: 1;
    text-align: left;
}
.no-records-h2-style { /* Pour les messages d'absence d'enregistrements stylisés comme un h2 */
    font-size: 1.2em;
    font-weight: bold;
    color: #00455E;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
    flex-grow: 1;
}

/* Titre h2 des formulaires (ex: Ajouter un utilisateur, Modifier une instance) */
.form-title-h2 {
    font-size: 1.8em;
    color: #4a4a49;
    text-align: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 30px;
}


/* Styles pour l'encadré de vote */
.vote-section-container {
    border: 1px solid #ea5b0c;
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #fffaf7;
}
.vote-section-container.error-border {
    border-color: red;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Masquer le conteneur du logo sur l'affichage écran normal, mais le garder dans le DOM pour l'impression */
#printLogoContainer {
    position: absolute; /* Le retire du flux normal */
    width: 1px;         /* Dimensions minimales */
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;   /* Cache tout débordement */
    clip: rect(0, 0, 0, 0); /* Masque visuellement sans display:none */
    white-space: nowrap; /* Empêche le texte de s'enrouler */
    border: 0;          /* Pas de bordure */
    /* Assurez-vous qu'il ne soit pas visible du tout, mais toujours rendu par le navigateur */
    z-index: -9999; /* Place-le loin derrière tout le contenu */
}
/* Ajustement pour aligner les boutons dans list-header-controls de view_instance_details.php */
.list-header-controls .btn {
    margin-left: 10px; /* Ajoute un espacement à gauche pour tous les boutons sauf le premier */
}
.list-header-controls .btn:first-child {
    margin-left: 0; /* Annule la marge pour le premier bouton du groupe */
}

/* --------------------------------------------------- */
/* SECTION 9: Styles des Infobulles                    */
/* --------------------------------------------------- */
.info-icon {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
    color: #00455E;
    font-size: 1.3em;
    vertical-align: middle;
}
.info-tooltip {
    visibility: hidden;
    width: auto; /* Agrandit si nécessaire */
    max-width: 450px; /* Augmenté */
    background-color: #FBD6B9;
    color: #555554;
    text-align: center;
    border-radius: 6px;
    padding: 10px 12px;
    position: absolute;
    z-index: 1000; /* Augmenté */
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    font-size: 0.95em;
    line-height: 1.4;
    border: 1px solid #e0c2a2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: normal;
}
.info-tooltip::after {
    content: "";

    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #FBD6B9 transparent transparent transparent;
}
.info-icon:hover .info-tooltip {
    visibility: visible;
    opacity: 1;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
}

.custom-tooltip {
    visibility: hidden;
    width: auto;
    max-width: 450px; /* Augmenté */
    background-color: #FBD6B9;
    color: #00455E;
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    position: absolute;
    z-index: 1000; /* Augmenté */
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    font-size: 0.9em;
    line-height: 1.4;
    border: 1px solid #e0c2a2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: pre-line;
}

.tooltip-container:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}