/* =========================================================
   assets/css/dns-checker.css - Style pour l'outil DNS Lookup
   ========================================================= */

.dns-checker-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.dns-checker-section h2 {
    font-family: var(--font-terminal);
    color: var(--color-text-grey);
    text-align: center;
    margin-bottom: 30px;
}

/* --- Formulaire --- */
.lookup-form {
    max-width: 600px;
    margin: 0 auto 40px auto;
    background-color: #1a1a1a;
    padding: 30px;
    border: 1px dashed var(--color-accent);
    text-align: center;
}

.lookup-form .form-group {
    margin-bottom: 20px;
}

.lookup-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-light);
    font-family: var(--font-terminal);
}

.lookup-form input[type="text"] {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    background-color: var(--color-darker, #0c0c0c);
    border: 1px solid var(--color-secondary);
    color: var(--color-text-light);
    font-family: var(--font-terminal);
}

.lookup-form button {
    margin-top: 10px;
}

/* --- Résultats --- */
.results-container {
    margin-top: 40px;
    background-color: #111;
    padding: 20px;
    border: 1px solid var(--color-secondary);
}

.results-container h3 {
    color: var(--color-secondary);
    margin-bottom: 25px;
    text-align: center;
}

.record-type-block {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #1a1a1a;
    border-left: 3px solid var(--color-accent);
}

.record-type-block h4 {
    font-family: var(--font-terminal);
    color: var(--color-accent);
    margin-bottom: 15px;
    font-size: 1.2em;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    font-family: var(--font-monospace, monospace);
}

thead th {
    background-color: var(--color-secondary-dark, #008888);
    color: var(--color-text-light);
    padding: 8px 10px;
    text-align: left;
    border-bottom: 2px solid var(--color-secondary);
}

tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #333;
    color: var(--color-text-grey);
    vertical-align: top;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody td:first-child {
    color: var(--color-text-light); /* Met en évidence la valeur principale */
}

/* Style pour les longs enregistrements TXT */
.txt-record {
    word-break: break-all; /* Permet au texte de passer à la ligne */
    white-space: pre-wrap; /* Conserve les espaces et les retours à la ligne */
    max-width: 500px; /* Limite la largeur pour éviter l'étirement excessif */
}

/* Responsive */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block; /* Transforme le tableau en blocs */
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px; /* Cache les en-têtes */
    }
    tr { border: 1px solid var(--color-secondary); margin-bottom: 10px; }
    td {
        border: none;
        border-bottom: 1px solid #333;
        position: relative;
        padding-left: 50%; /* Espace pour le label */
        text-align: right;
    }
    td:before {
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: var(--color-accent);
        font-family: var(--font-terminal);
        /* Injecte le label de l'en-tête */
        content: attr(data-label);
    }
    /* Ajout des data-label dynamiquement si besoin via JS ou manuellement */
    /* Exemple manuel pour A Record */
    table td:nth-of-type(1):before { content: "IP (v4)"; }
    table td:nth-of-type(2):before { content: "TTL"; }
    /* ... ajouter les autres types ... */

    .txt-record {
        max-width: 100%;
        text-align: left; /* Pour une meilleure lecture */
        padding-left: 6px;
    }
     .txt-record:before { content: "TXT"; } /* Label pour TXT */
}
/* ... (Styles .dns-checker-section, .lookup-form, .results-container inchangés) ... */

.record-type-block {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #1a1a1a;
    border-left: 3px solid var(--color-accent);
    overflow-x: auto; /* Permet le scroll horizontal si la table est trop large */
}

/* ... (Style h4 inchangé) ... */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em; /* Légèrement plus petit pour plus de colonnes */
    font-family: var(--font-monospace, monospace);
    white-space: nowrap; /* Empêche le retour à la ligne dans les cellules */
}

thead th {
    background-color: var(--color-secondary-dark, #008888);
    color: var(--color-text-light);
    padding: 8px 12px; /* Ajuster padding */
    text-align: left;
    border-bottom: 2px solid var(--color-secondary);
}

tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #333;
    color: var(--color-text-grey);
    vertical-align: top;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* Met en évidence IP ou Cible */
tbody td:first-child {
    color: var(--color-text-light);
    font-weight: bold;
}

/* Style pour les longs enregistrements TXT */
.txt-record {
    white-space: normal; /* Permet au TXT de passer à la ligne */
    word-break: break-all;
    max-width: 400px; /* Limite la largeur du TXT */
}

.disclaimer {
    font-size: 0.8em;
    color: var(--color-text-grey);
    margin-top: 15px;
    text-align: right;
    font-style: italic;
}

/* --- Responsive (Amélioré) --- */
@media (max-width: 992px) { /* Point de rupture plus large pour le tableau */
     .record-type-block {
        overflow-x: auto; /* Force le scroll horizontal sur tablette */
    }
     table {
        white-space: normal; /* Permet le retour à la ligne sur mobile */
    }
     thead {
         display: none; /* Cache les en-têtes */
     }
     tr { display: block; margin-bottom: 15px; border: 1px solid var(--color-secondary); }
     td {
         display: block;
         text-align: right; /* Aligne la valeur à droite */
         padding-left: 50%; /* Espace pour le label */
         position: relative;
         border-bottom: 1px dotted #444; /* Séparateur plus léger */
         white-space: normal;
     }
     td:last-child { border-bottom: none; }
     td:before {
         content: attr(data-label); /* Utilise l'attribut data-label */
         position: absolute;
         left: 10px;
         width: 45%;
         padding-right: 10px;
         white-space: nowrap;
         text-align: left;
         font-weight: bold;
         color: var(--color-accent);
         font-family: var(--font-terminal);
     }
}