/* Pages Télésurveillance Daitem / Atral Services - nov. 2026 */

.tls-nav { margin: 1.5ex 0 0 0; text-align: center; }
.tls-nav a {
 display: inline-block; margin: 2px; padding: 6px 12px;
 background-color: #C1D3FB; color: #1b3a5c; text-decoration: none;
 border: 1px solid #4B81AF; border-radius: 4px; font-size: 90%; font-weight: bold;
}
.tls-nav a:hover { background-color: #4B81AF; color: #ffffff; }
.tls-nav a.actif { background-color: #4B81AF; color: #ffffff; }

.tls-hero {
 margin-top: 2ex; padding: 18px 20px; border-radius: 8px; color: #ffffff;
 background-color: #12407a;
 background-image: linear-gradient(120deg, #0b1f3a 0%, #12407a 60%, #4B81AF 100%);
}
.tls-hero h1 { color: #ffffff; text-align: left; font-size: 150%; margin: 0 0 6px 0; }
.tls-hero p { margin: 4px 0; line-height: 1.5; color: #e3ecfb; }
.tls-hero .tls-prix { color: #ffffff; }
.tls-prix { font-size: 220%; font-weight: bold; color: #800000; line-height: 1.1; }
.tls-prix small { font-size: 40%; font-weight: normal; }
.tls-hero-table { width: 100%; border-collapse: collapse; }
.tls-hero-table td { vertical-align: middle; }
.tls-badge {
 display: inline-block; background-color: #ffffff; color: #12407a; font-weight: bold;
 border-radius: 14px; padding: 3px 10px; margin: 6px 4px 0 0; font-size: 85%;
}

.tls-btn {
 display: inline-block; background-color: #800000; color: #ffffff !important; font-weight: bold;
 text-decoration: none; padding: 9px 18px; border-radius: 20px; margin: 6px 4px;
}
.tls-btn:hover { background-color: #a31515; }
.tls-btn-clair { background-color: #ffffff; color: #12407a !important; }
.tls-btn-clair:hover { background-color: #C1D3FB; }

.tls-chiffres { display: flex; flex-wrap: wrap; justify-content: space-around; text-align: center; margin: 1ex 0; }
.tls-chiffres div { margin: 8px 12px; min-width: 120px; }
.tls-chiffres strong { display: block; font-size: 200%; color: #4B81AF; }

.tls-cols { display: flex; flex-wrap: wrap; justify-content: space-between; }
.tls-col { flex: 1 1 260px; margin: 0 8px; }
.tls-col img, .tls-img { max-width: 100%; height: auto; border-radius: 6px; }

.tls-raisons { display: flex; flex-wrap: wrap; justify-content: space-between; }
.tls-raisons div {
 flex: 1 1 170px; margin: 6px; padding: 10px; background-color: #F2F6FE;
 border-top: 4px solid #4B81AF; border-radius: 4px; font-size: 95%;
}
.tls-raisons strong { color: #800000; display: block; margin-bottom: 4px; }

.tls-offres { display: flex; flex-wrap: wrap; justify-content: center; }
.tls-offre {
 flex: 1 1 230px; max-width: 330px; margin: 8px; padding: 12px 14px 16px 14px; text-align: center;
 border: 2px solid #4B81AF; border-radius: 8px; background-color: #ffffff;
}
.tls-offre h3 { text-align: center; }
.tls-offre ul { text-align: left; padding-left: 18px; }
.tls-offre-star { border-color: #800000; background-color: #FFF8F5; }

table.tls-table { width: 100%; border-collapse: collapse; margin: 1ex 0; font-size: 95%; }
table.tls-table th { background-color: #4B81AF; color: #ffffff; padding: 6px; text-align: left; }
table.tls-table td { border-bottom: 1px solid #D5D7E1; padding: 5px 6px; vertical-align: top; }
table.tls-table tr:nth-child(even) td { background-color: #F2F6FE; }
table.tls-table td.prix { text-align: right; white-space: nowrap; font-weight: bold; color: #1b3a5c; }
table.tls-table td.ok { text-align: center; color: #1a7f37; font-weight: bold; }
table.tls-table td.non { text-align: center; color: #999999; }

.tls-note { font-size: 80%; color: #555555; line-height: 1.4; }
.tls-encart {
 margin: 2ex 0; padding: 12px 16px; background-color: #FFF8E1; border-left: 6px solid #F2B705; border-radius: 4px;
}

.tls-faq details { border: 1px solid #C1D3FB; border-radius: 4px; margin: 6px 0; background-color: #ffffff; }
.tls-faq summary { cursor: pointer; padding: 8px 10px; font-weight: bold; color: #1b3a5c; background-color: #F2F6FE; }
.tls-faq details[open] summary { background-color: #C1D3FB; }
.tls-faq details p, .tls-faq details ul { margin: 8px 12px; line-height: 1.5; }

.tls-cta { text-align: center; margin: 2ex 0 1ex 0; padding: 14px; background-color: #F2F6FE; border-radius: 8px; }

/* Neutralise les styles généraux des tableaux de steelblue.css */
.tls-hero-table, .tls-hero-table td { border: none; background-color: transparent; text-align: left; padding: 4px; }
table.tls-table { border: none; }
table.tls-table th { border: none; }
table.tls-table td { border: none; border-bottom: 1px solid #D5D7E1; text-align: left; background-color: #ffffff; }