body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f6f8fa;
    margin: 0;
    padding: 0;
}
h1 {
    color: #222;
    margin: 30px 0 20px 0;
    text-align: center;
}
.container {
    max-width: 1200px; /* Augmenté de 900px à 1200px */
    margin: 30px auto 30px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 30px 40px 40px 40px;
    text-align: center; /* Center content for passcode page */
}
ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
ul li {
    margin-bottom: 7px;
    color: #444;
}
.actions {
    margin: 20px 0 30px 0;
}
.btn {
    display: inline-block; /* Assure que les boutons sont rendus comme des éléments cliquables */
    padding: 8px 16px; /* Réduit la taille des boutons */
    background: linear-gradient(90deg, #003968 60%, #003968 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem; /* Réduit la taille de la police */
    margin-right: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background 0.2s;
    position: relative; /* Assure que les boutons sont au-dessus des autres éléments */
    z-index: 1; /* Priorité d'interaction */
}
.btn:hover {
    background: linear-gradient(90deg, #005fa3 60%, #0077cc 100%);
}
.btn-edit {
    padding: 6px 12px;
    background-color: #007bff; /* Blue */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-edit:hover {
    background-color: #0056b3; /* Darker blue */
}
.btn-save {
    padding: 6px 12px;
    background-color: #28a745; /* Vert */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-save:hover {
    background-color: #218838; /* Darker green */
}
table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    margin: 30px auto;
}
th, td {
    border-bottom: 1px solid #eee;
    padding: 8px; /* Réduit le padding */
    text-align: left;
}
th {
    background: #f0f4f8;
    color: #333;
    font-weight: 600;
}
tr:last-child td {
    border-bottom: none;
}
td a {
    color: #003968;
    text-decoration: none;
}
td a:hover {
    text-decoration: underline;
}
.modal, .overlay {
    transition: all 0.2s;
}
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 320px;
    max-width: 600px; /* Adjust modal width for programming date */
    max-height: 70vh; /* Réduit la hauteur maximale de la modale */
    overflow-y: auto; /* Ajoute un scroll vertical si le contenu dépasse */
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    padding: 20px; /* Réduit le padding */
    z-index: 10;
}
.modal.active {
    display: block;
}
.overlay {
    display: none;
    position: fixed;
    top:0; left:0; width:100vw; height:100vh;
    background:rgba(0,0,0,0.18);
    z-index: 5;
}
.overlay.active {
    display: block;
}
.modal h3 {
    margin-top: 0;
    color: #003968;
}
.modal label {
    display: block;
    margin-bottom: 10px;
    color: #333;
}
.modal input, .modal select {
    width: 100%;
    padding: 7px 8px;
    margin-top: 2px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}
.modal .btn {
    width: auto;
    margin-right: 8px;
}

/* Button for programming date */
.actions .btn {
    margin-top: 20px;
}

.success-message {
    background-color: #d4edda; /* Vert clair */
    color: #155724; /* Vert foncé */
    padding: 10px 15px;
    border: 1px solid #c3e6cb; /* Bordure verte */
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 1rem;
    text-align: center; /* Centrer le texte */
}
.error-message {
    background-color: #f8d7da; /* Rouge clair */
    color: #721c24; /* Rouge foncé */
    padding: 10px 15px;
    border: 1px solid #f5c6cb; /* Bordure rouge */
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 1rem;
    text-align: center; /* Centrer le texte */
}
/* Style des champs du tableau */
table input[type="text"],
table input[type="url"],
table input[type="number"],
table input[type="date"],
table select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    text-align: center;
    font-size: 0.9rem;
    box-sizing: border-box;
}

table input[type="text"]:disabled,
table input[type="url"]:disabled,
table input[type="number"]:disabled,
table input[type="date"]:disabled,
table select:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/* Style général du tableau */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table tr {
    background-color: #fff; /* Fond blanc uniforme */
}

table tr:hover {
    background-color: #f1f1f1; /* Fond légèrement gris au survol */
}

/* Style des cellules du tableau */
table td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.9rem;
}

/* Style des en-têtes du tableau */
table th {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem;
    border-bottom: 2px solid #ddd;
}

/* Style pour les lignes avec le statut actif */
.row-actif {
    background-color: #c9edd2; /* Vert clair */
    color: #92c79d; 
}

/* Style pour les lignes avec le statut programmé */
.row-programme {
    background-color: #ddc9f1; /* Violet clair */
    color: #9377a7; 
}

/* Style des badges */
.badge {
    display: inline-block;
    padding: 3px 8px; /* Réduit la taille des badges */
    border-radius: 12px;
    font-size: 0.8rem; 
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.badge-high {
    background-color: #87dd9b; 
}

.badge-medium {
    background-color: #dfc285; 
}

.badge-low {
    background-color: #db6e6e; 
}

.badge-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
    box-sizing: border-box;
}

.btn {
    display: inline-block;
    cursor: pointer; 
    pointer-events: auto; 
    position: relative; 
    z-index: 1; 
}


.btn:hover {
    background: linear-gradient(90deg, #005fa3 60%, #0077cc 100%);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

table th, table td {
    max-width: 80px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap; 
    font-size: 0.8rem; 
    padding: 8px; 
}

table td:hover {
    overflow: visible; 
    white-space: normal; 
    background-color: #f9f9f9; 
    position: relative; 
    z-index: 2; 
}

table td:hover::after {
    content: attr(data-value); 
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); 
    top: 100%; 
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    white-space: normal;
    z-index: 3;
    max-width: 300px; 
    word-wrap: break-word; 
    text-align: left; 
}

.table-container {
    overflow-x: hidden; 
    margin-bottom: 20px; 
}

table {
    width: 100%; 
    min-width: 800px; 
    max-width: 1400px;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

table th:last-child,
table td:last-child {
    width: 120px; 
    text-align: center; 
}

table td:last-child .btn {
    display: inline-block;
    width: auto; 
    margin: 0 auto;
}

@media (max-width: 900px) {
    .container { padding: 15px 5vw 20px 5vw; }
}
@media (max-width: 800px) {
    table, thead, tbody, th, td, tr { display: block; }
    th { display: none; }
    td { border: none; position: relative; padding-left: 50%; }
    td:before {
        position: absolute;
        left: 10px;
        top: 12px;
        white-space: nowrap;
        font-weight: bold;
        color: #888;
    }
    td:nth-of-type(1):before { content: "Nom du site"; }
    td:nth-of-type(2):before { content: "Catégorie"; }
    td:nth-of-type(3):before { content: "Sujet"; }
    td:nth-of-type(4):before { content: "URL"; }
    td:nth-of-type(5):before { content: "Ancre"; }
    td:nth-of-type(6):before { content: "RD"; }
    td:nth-of-type(7):before { content: "AS"; }
    td:nth-of-type(8):before { content: "TF"; }
    td:nth-of-type(9):before { content: "CF"; }
    td:nth-of-type(10):before { content: "Lien Article"; }
    td:nth-of-type(11):before { content: "Mois"; }
    td:nth-of-type(12):before { content: "Date Publication"; }
    td:nth-of-type(13):before { content: "Statut"; }
}
@media (max-width: 600px) {
    .container { padding: 5px 2vw 10px 2vw; }
    /* Table netlinkings */
    table, thead, tbody, th, td, tr { display: block; }
    th { display: none; }
    td { border: none; position: relative; padding-left: 50%; }
    td:before {
        position: absolute;
        left: 10px;
        top: 12px;
        white-space: nowrap;
        font-weight: bold;
        color: #888;
    }
    td:nth-of-type(1):before { content: "Sujet"; }
    td:nth-of-type(2):before { content: "URL"; }
    td:nth-of-type(3):before { content: "Ancre"; }
    td:nth-of-type(4):before { content: "Lien Article"; }
    td:nth-of-type(5):before { content: "Date Programmation"; }
    td:nth-of-type(6):before { content: "Date Réalisation"; }
    td:nth-of-type(7):before { content: "Statut"; }
    td:nth-of-type(8):before { content: "Commentaire"; }
    td:nth-of-type(9):before { content: "Actions"; }
    }


table textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 0.9rem;
    box-sizing: border-box;
    resize: none; 
}

table textarea:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/* Styles for the passcode input form */
form {
    margin-top: 20px;
}

form label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #333;
}

form input[type="password"] {
    width: 100%;
    max-width: 200px;
    padding: 10px;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Keypad styles */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 200px;
    margin: 20px auto;
}

.keypad-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}

.keypad-btn:hover {
    background: #ddd;
}

.keypad-btn.submit-btn {
    background: #28a745;
    color: #fff;
}

.keypad-btn.submit-btn:hover {
    background: #218838;
}

.keypad-btn:active {
    background: #ccc;
}