/* W3.CSS 2.75 by Jan Egil and Borge Refsnes */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0px}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior: smooth;}
html,body{margin:auto;background-color:#f8f7f7; ;font-size:13px;}
body{word-wrap: break-word;font-family: 'Source Sans Pro', sans-serif;margin: 0;padding: 0;background-color: #F0F2F5;color: #333333;line-height: 1.6;scroll-behavior: smooth;}
p{padding:0 0 12px 0}
h1, h2, h3, h4 {
            font-family: 'Inter', sans-serif;
            color: #042242; /* Bleu pour les titres */
            font-weight: 500;
            margin-bottom: 15px;
            margin-top:30px;
            text-align: center;
}
h4 {font-size: 18px;
    padding: 4px;
    background-color: #CCCCCC;
    border-collapse: collapse;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden; /* Pour les bords arrondis */
}
h5 {font-size: 18px;padding: 2px;}
h7{color:#f7f1a3; font-style:italic;}

hr{height:0;border:0;border-top:1px solid #eee;margin:10px 0;-moz-box-sizing:content-box;box-sizing:content-box;}

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 16px;
      background-image: -moz-linear-gradient(#a9afbd,#f1d299);
      background-image: -webkit-linear-gradient(#a9afbd,#f1d299);
      background-image: -o-linear-gradient(#a9afbd,#f1d299);
      background-image: linear-gradient(#a9afbd,#f1d299);
      border-bottom: 1px solid #ddd;
      flex-wrap: wrap;
    }

    .logo {
      font-weight: bold;
      font-size: 1.5em;
    }

    .user-icon {
      font-size: 1.8em;
      color: #333;
      cursor: pointer;
    }

    .nav-container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 10px;
    }

    .nav-menu {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .nav-menu a {
      text-decoration: none;
      color: #333;
      padding: 0px 8px;
      border-radius: 4px;
      transition: background 0.2s;
    }

    .nav-menu a:hover {
      background-color: #eee;
    }

    .search-container {
      margin-left: auto;
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .search-container button {
    background-color: #007BFF;
    border: none;
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    transition: background-color 0.3s ease;
    }
    .search-container input {
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 25px;
    }

    @media (min-width: 700px) {
      .nav-container {
        flex-wrap: nowrap;
        margin-top: 0;
      }

      .search-container {
        margin-top: 0;
        margin-left: auto;
      }
    }



img{border:0;vertical-align: middle;}
.img43{aspect-ratio: 4 / 3;margin:0 auto}
.img169{aspect-ratio: 16 / 9;margin:0 auto}
   .image-link {
      display: inline-block;
      text-decoration: underline;
      color: blue;
      cursor: pointer;
    }

    /* Superposition plein écran */
    .lightbox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .lightbox img {
      width:80%;
      aspect-ratio: 16 / 9;
      box-shadow: 0 0 20px black;
      cursor: pointer;
    }


svg:not(:root){overflow:hidden}
figure{margin:1em 40px;vertical-align:middle}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
a {color: #007BFF;text-decoration: none;transition: color 0.3s ease;}
a:hover {color: #0056b3;text-decoration: underline;}

@media print{html,body {margin-top:0 !important;}}
.w3-sidenav a,.w3-sidenav h4 {font-weight:bold}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
dfn{font-style:italic} mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}sub{bottom:-0.25em}
footer { background-color: #333; color: #fff; padding: 10px 0;padding:3%;}
footer a {text-decoration:none;color: #fff;}
footer a:hover {text-decoration:underline;}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}

input[type=checkbox],input[type=radio]{padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{box-sizing:content-box;appearance:textfield;-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}pre,textarea{overflow:auto}
pre { white-space: pre-wrap; } 
.w3-container:after,.w3-panel:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after
{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s12,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{width:99.99999%}
@media only screen and (min-width:601px){
.w3-col.m1{width:8.33333%}
.w3-col.m2{width:16.66666%}
.w3-col.m3,.w3-quarter{width:24.99999%}
.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}
.w3-col.m6,.w3-half{width:49.99999%}
.w3-col.m7{width:58.33333%}
.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}
.w3-col.m10{width:83.33333%}
.w3-col.m11{width:91.66666%}
.w3-col.m12{width:99.99999%}}
@media only screen and (min-width:993px){
.w3-col.l1{width:8.33333%}
.w3-col.l2{width:16.66666%}
.w3-col.l3,.w3-quarter{width:24.99999%}
.w3-col.l4,.w3-third{width:33.33333%}
.w3-col.l5{width:41.66666%}
.w3-col.l6,.w3-half{width:49.99999%}
.w3-col.l7{width:58.33333%}
.w3-col.l8,.w3-twothird{width:66.66666%}
.w3-col.l9,.w3-threequarter{width:74.99999%}
.w3-col.l10{width:83.33333%}
.w3-col.l11{width:91.66666%}
.w3-col.l12{width:99.99999%}}
.w3-content{width:100%;max-width:1280px;margin:auto}
.w3-rest{overflow:hidden}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}

.adslot_1 { display:inline-block; max-width: 160px; height: 600px; }
@media (max-width: 1350px) { .adslot_1 { display: none; } }


@media (max-width:600px){.w3-hide-small{display:none!important;width:100%}.ch{white-space:wrap;width:35%}}
@media (max-width:1992px) and (min-width:601px){.w3-hide-medium{display:none!important}.ch{width:25%;padding:3px}}
@media (max-width:760px){.main1{display:none!important}.main2{width:100%;vertical-align:top}}
@media screen and (max-width:720px){.satlist{display:none!important}}
@media screen and (min-width:721px){.satlist{display:block!important}}
@media screen and (max-width:1500px){.leftad,.rightad{display:none!important}}
@media screen and (min-width:1501px){.leftad,.rightad{display:block!important;position:fixed}}
@media (max-width:1992px) and (min-width:761px){.main1{display:block!important;max-width:409px}.main2{width:100%;vertical-align:top}.resp{display:none!important}}
@media (min-width:1993px){.w3-hide-large{display:none!important}.ch{width:25%}}
@media screen and (max-width:1992px){.w3-sidenav.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important;}}
@media screen and (min-width:1993px){.w3-sidenav.w3-collapse{display:block!important}}
.w3-top,.w3-bottom{position:fixed;width:inherit;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-left{float:left!important}.w3-right{float:right!important}

.w3-border-0{border:0!important}
.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-margin{margin:16px!important}.w3-margin-0{margin:0!important}
.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
.w3-section{margin-top:16px!important;margin-bottom:16px!important}
.w3-padding-tiny{padding:2px 4px!important}.w3-padding-small{padding:4px 8px!important}
.w3-padding-medium,.w3-padding,.w3-form{padding:4px 8px!important}
.w3-padding-large{padding:12px 24px!important}.w3-padding-xlarge{padding:16px 32px!important}
.w3-padding-xxlarge{padding:24px 48px!important}.w3-padding-jumbo{padding:32px 64px!important}
.w3-padding-4{padding-top:4px!important;padding-bottom:4px!important}
.w3-padding-8{padding-top:8px!important;padding-bottom:8px!important}
.w3-padding-12{padding-top:12px!important;padding-bottom:12px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}
.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}
.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.w3-padding-128{padding-top:128px!important;padding-bottom:128px!important}
.w3-padding-0{padding:0!important}
.w3-padding-top{padding-top:8px!important}.w3-padding-bottom{padding-bottom:8px!important}
.w3-padding-left{padding-left:16px!important}.w3-padding-right{padding-right:16px!important}
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}

.tuner {background-color:#ccc9f1;position:fixed;overflow:auto;left:0;top:60; width:60px;z-index:2;height:100%;}
.crypt {background: rgb(221, 208, 184)!important}
.opt{font-weight: 400;font-size: 13px;color: #ffffcc;text-decoration: none}
.section{background-color:#EEDDC9;padding:8px;display: inline-block;width:100%;margin-bottom: 25px;border-radius: 8px;}
.section_justin{background-color:#441111;padding: 5px; font-size:17px;color:white;}
.section_list{background-color:#441111;padding: 5px; font-size:17px;color:white;text-align:center}
.header_pos{background-color:#060622;padding: 0px;width:100%;font-size:15px;color:white;text-align:center;margin:40px 0 20px 0;}

.head a{text-decoration: none;}
.head a:hover{text-decoration: underline;}
.liste{table-layout: fixed;border:0px;padding:0px;width:100%;color: black;font-size:12px}
.frq{font-size: 11px;width: 100%;color: black;border-bottom: 0px}
.fl{font-size:12px;width:100%;color: black;font-family: "system-ui",sans-serif;background-color: #fdfdfb;border-spacing:1px;padding:0px;margin-bottom:20px;}
.feedblock{font-style:italic;width: 100%;padding:0px}
.leg{border-right: azure 2px outset; border-top: azure 2px outset;font-size: 10px;border-left: azure 2px outset; color: black;background-color:#999999;border-bottom: azure 2px outset}
.f{font-size: 10px;color: black;background-color:#F0F0E0;padding:0px!important;margin-top:3px}
.main{font-size: 12px;text-align:center;color: black;background-color:#F0F0E0;padding:0px!important;margin-top:3px;width:100%}
.nbc{font-size:8px;padding-right:5px}
.fbl{    FONT-SIZE: 13px;    TEXT-TRANSFORM: none;    COLOR: black;    TEXT-ALIGN: center;    TEXT-DECORATION: none}
.ft{BORDER-RIGHT: 0pt;    PADDING-RIGHT: 0px;    BORDER-TOP: 0pt;    PADDING-LEFT: 0px;    FONT-SIZE: 10px;    PADDING-BOTTOM: 0px;    MARGIN: 0px;    BORDER-LEFT: 0pt;    COLOR: black;    TEXT-INDENT: 0pt;    PADDING-TOP: 0px;
    BORDER-BOTTOM: 0pt;    TEXT-ALIGN: left}
.packlist{font-size:13px;max-width:600px;color: black;font-family: "system-ui",sans-serif;background-color: #999999;border-spacing:1px;padding:0px}
.l{FONT-SIZE: 13px;    COLOR: black;    TEXT-ALIGN: left}
.i{BORDER-RIGHT: silver thick ridge;    BORDER-TOP: silver thick ridge;    BORDER-LEFT: silver thick ridge;    BORDER-BOTTOM: silver thick ridge;    TEXT-DECORATION: none}
.n{FONT-SIZE: 13px;    COLOR: #ff0000;    FONT-FAMILY: "system-ui",sans-serif;    TEXT-ALIGN: left;    TEXT-DECORATION: none}
.bld{FONT-WEIGHT: bold;    FONT-SIZE: 13px;    COLOR: black;    TEXT-DECORATION: none}
.nbld{FONT-WEIGHT: bold;    FONT-SIZE: 13px;    COLOR: red;    TEXT-DECORATION: none}
.w{FONT-WEIGHT: normal;FONT-SIZE: 11px;color: grey;background-color:white}
.fb{BACKGROUND-COLOR: white}
.fc{BACKGROUND-COLOR: #e2ddc1}
.bldb{FONT-WEIGHT: bold;    FONT-SIZE: 13px;    COLOR: black;    TEXT-DECORATION: none}
.h{BACKGROUND-POSITION: center top;    BORDER-TOP: gray thin solid;    BACKGROUND-IMAGE: url(radio.jpg)}

.px3{width:2px!important}
.vrd{width:18px!important;}
.v{background-color:lawngreen;width:3px!important}
.r{background-color:violet;width:3px!important}
.d{background-color:lightsteelblue;width:3px!important}
.pays{width:100px}
.genre{width:100px}
.pack{width:100px}
.bq{width:120px;font-weight:normal;font-size: 13px; color: #005200;text-decoration: none}
.cr{width:120px;background-color: #DDD0B8;}
.cl{width:120px;background-color:white;}
.s{width:60px;font-weight: bold; font-size: 13px;color: #00005f;text-align: center;text-decoration: none}
.ns{width:60px;font-weight: bold;font-size: 13px;color: #ff0000;text-align: center;text-decoration: none}
.apid{width:70px;}
.pid{width:40px!important;text-align:center;white-space:nowrap;}
.maj{width:80px;white-space:nowrap;}
.upd{color: #c82333;}

.pos{text-align:center;font-size:12px;width:5%;background-color:#555555;color:yellow}

.dvbs{width:60px;background-color:rgb(179, 211, 238)}
.dvbs2{width:60px;background-color:rgb(255, 255, 170)}
.dvbs2x{width:60px;background-color:#99DD99}
.mpeg4{width:60px;background-color:rgb(221, 255, 221)}
.hevc{width:60px;background-color:#CCBBEE}
.h266{width:60px;background-color:#AF4AFF}

.fta{width:60px;background-color:white}
.dfeed{width:80px;text-align:center;border-left: black 1px outset;border-top: black 1px outset;border-color:#999999}
.wrap{white-space:nowrap;padding-left:10px;padding-top:7px}
.satlist{width:100%;margin-top:10px;color:black;text-align:center}
.table { width: 100%;font-size:10px;}

    
 .layout {
      display: flex;
      flex-direction: row;
      background-color: white;
    }

.main-content {
      max-width: 1170px;
      margin: 0 auto;
      width: 100%;
      background-color: whitesmoke;

    }

    /* Padding appliqué seulement si largeur écran ≥ 1000px */
@media (min-width: 1200px) {
      .main-content {
        padding: 15px;
      }
    }



    /* Styles généraux */

/* Conteneur principal des filtres */
.filter-display-container {
    background-color: #dddcdc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
}

/* En-tête des filtres */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.filter-header h2 {
    margin: 0;
    color: #0056b3; /* Bleu KingOfSat */
    font-size: 1.5em;
}

.toggle-button {
    background-color: #007bff; /* Bleu standard */
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95em;
    white-space: wrap;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.toggle-button .arrow {
    transition: transform 0.3s ease;
}

.toggle-button.active .arrow {
    transform: rotate(180deg);
}

/* Filtres principaux (toujours visibles) */
.main-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espace entre les groupes de filtres */
    justify-content: flex-start; /* Aligner les éléments au début */
}

.filter-group {
    flex: 1; /* Permet aux groupes de filtres de s'étirer */
    min-width: 180px; /* Largeur minimale pour éviter un trop grand rétrécissement */
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 0.9em;
}

.filter-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 1em;
    appearance: none; /* Supprime le style par défaut de la flèche sur certains navigateurs */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%20163.7l-123.9%20123.9c-4.1%204.1-9.3%206.1-14.5%206.1s-10.4-2-14.5-6.1l-123.9-123.9c-8.2-8.2-8.2-21.5%200-29.7s21.5-8.2%2029.7%200l109.2%20109.2%20109.2-109.2c8.2-8.2%2021.5-8.2%2029.7%200s8.2%2021.5%200%2029.7z%22%2F%3E%3C%2Fsvg%3E'); /* Icône de flèche personnalisée */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

.filter-select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Filtres avancés (initiallement cachés) */
.advanced-filters {
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    overflow: hidden;
    max-height: 0; /* Pour l'animation de masquage/affichage */
    opacity: 0;
}

.advanced-filters.hidden {
    max-height: 0;
    opacity: 0;
}

.advanced-filters.visible {
    max-height: 500px; /* Ou une valeur suffisante pour contenir le contenu */
    opacity: 1;
}

.advanced-filters h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #0056b3;
    font-size: 1.2em;
}

.filter-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px; /* Espacement vertical et horizontal */
    margin-bottom: 20px;
}

.filter-options-grid label {
    display: flex;
    align-items: center;
    font-weight: normal;
    color: #333;
    font-size: 1em;
    cursor: pointer;
}

.filter-options-grid input[type="checkbox"] {
    margin-right: 8px;
    max-width: 18px;
    height: 18px;
    accent-color: #007bff; /* Couleur de la coche */
}

/* Boutons d'action */
.action-buttons {
    display: flex;
    justify-content: flex-end; /* Aligner à droite */
    gap: 15px;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

.action-buttons button {
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.apply-button {
    background-color: #28a745; /* Vert pour appliquer */
    color: white;
}

.apply-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

.reset-button {
    background-color: #dc3545; /* Rouge pour réinitialiser */
    color: white;
}

.reset-button:hover {
    background-color: #c82333;
    transform: translateY(-2px);
}

/* Styles du tableau (très basiques, à compléter) */
.frequency-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden; /* Pour les bords arrondis */
}

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

.frequency-table th {
    background-color: #f2f2f2;
    color: #555;
    font-weight: bold;
    cursor: pointer; /* Indique que la colonne est triable */
    position: relative;
}

.frequency-table th:hover {
    background-color: #e6e6e6;
}

.frequency-table .sort-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #888;
}

.frequency-table tr:hover {
    background-color: #f9f9f9;
}

/* Responsive design */
@media (max-width: 368px) {
    .main-filters {
        flex-direction: column;
        gap: 15px;
    }

    .filter-group {
        width: 100%;
        min-width: unset;
    }

    .action-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .action-buttons button {
        width: 100%;
    }
}








/* --- Conteneur des tableaux --- */
/* Si les tableaux sont dans un conteneur principal, donnez-lui un style pour le faire ressortir */
/* Adaptez ce sélecteur si nécessaire (e.g., .main-content table) */
table {
    width: 100%; /* S'assure que le tableau prend toute la largeur disponible */
    border-collapse: collapse; /* Enlève l'espacement entre les cellules pour un look moderne */
    margin: 0; /* Marge autour du tableau pour le séparer du contenu */
    background-color: #ffffff; /* Fond blanc pour les tableaux */
    border-radius: 8px; /* Bords légèrement arrondis pour une touche moderne */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombre douce pour donner de la profondeur */
    overflow: hidden; /* Important pour que border-radius fonctionne avec les bordures internes */
}

/* --- En-têtes du tableau (<th>) --- */
table th {
    background-color: #e9ecef; /* Un gris très clair pour l'arrière-plan des en-têtes */
    color: #495057; /* Couleur de texte légèrement plus foncée pour les en-têtes */
    font-weight: 600; /* Un peu plus gras que la normale */
    padding: 5px 10px; /* Plus d'espace pour une meilleure aération */
    text-align: left; /* Alignement du texte à gauche */
    border-bottom: 2px solid #dee2e6; /* Bordure inférieure plus marquée pour séparer l'en-tête */
    position: relative; /* Nécessaire pour positionner les icônes de tri */
    cursor: pointer; /* Indique que les colonnes peuvent être triées */
    transition: background-color 0.2s ease; /* Transition douce au survol */
}

table th:hover {
    background-color: #dee2e6; /* Assombrir légèrement au survol */
}

/* Icônes de tri (si elles sont ajoutées par JS ou HTML existant) */
/* Supposons une icône de tri dans un span avec la classe .sort-icon */
table th .sort-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #888;
    transition: transform 0.2s ease;
}

/* Pour une icône de tri "active" (à implémenter en JS si possible) */
/* table th.sorted-asc .sort-icon { transform: translateY(-50%) rotate(0deg); } */
/* table th.sorted-desc .sort-icon { transform: translateY(-50%) rotate(180deg); } */


/* --- Cellules de données (<td>) --- */
table td {
    padding: 4px 1px; /* Moins de padding que l'en-tête, mais toujours aéré */
    border-bottom: 1px solid #e9ecef; /* Bordures plus fines entre les lignes */
    color: #495057; /* Couleur de texte cohérente */
}

/* Styles pour les lignes paires et impaires (pour une meilleure lisibilité) */
table tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Fond légèrement différent pour les lignes paires */
}

/* Effet de survol sur les lignes */
table tbody tr:hover {
    background-color: #e2f0fb; /* Un bleu très clair pour un effet de survol agréable */
    transition: background-color 0.2s ease;
}

/* --- Dernière ligne du tableau (pour enlever la bordure du bas) --- */
table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Style spécifique pour les liens dans les tableaux (si besoin) --- */
table td a {
    color: #007bff; /* Un bleu vif pour les liens */
    text-decoration: none; /* Pas de soulignement par défaut */
    transition: color 0.2s ease;
}

table td a:hover {
    color: #0056b3; /* Bleu plus foncé au survol */
    text-decoration: underline; /* Soulignement au survol */
}

/* Cette partie est cruciale pour la lisibilité sur mobile sans toucher au HTML */
@media screen and (max-width: 768px) {
    table th {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #e9ecef; /* Garde le fond pour le sticky */
    } 
}



/* --- Styles Généraux (restent les mêmes) --- */


        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 5px;
        }


        /* --- Styles pour les icônes d'action --- */
        .action-icons {
            display: flex;
            align-items: center;
            margin-left: 20px; /* Espace par rapport à la barre de recherche */
        }

        .action-icons a {
            font-size: 1.4em; /* Taille des icônes */
            color: #555555; /* Couleur des icônes, un gris neutre */
            margin-left: 18px; /* Espacement entre les icônes */
            transition: color 0.3s ease, transform 0.2s ease;
        }

        .action-icons a:hover {
            color: #007BFF; /* Couleur au survol */
            transform: scale(1.1); /* Petit effet de zoom au survol */
        }

        /* --- Hero Section (Styles restent les mêmes) --- */
        .kosnews {
            background: linear-gradient(135deg,#edbac5, #ee6b71);
            color: rgb(53, 53, 59);
            font-size: 1.6em;
            padding: 20px 5px;
            text-align: center;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        .hero {
            background: linear-gradient(135deg,#bad3ed, #1964ed);
            color: white;
            padding: 20px 5px;
            text-align: center;
            border-radius: 12px;
            margin-top: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        .hero h1 {
            color: rgb(78, 77, 77);
            font-size: 2.8em;
            margin-bottom: 10px;
        }

        .hero p {
            font-size: 1.5em;
            opacity: 0.9;
            margin-bottom: 10px;
        }

        .hero .btn {
            background-color: white;
            color: #007BFF;
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .hero .btn:hover {
            background-color: #E2F0FB;
            transform: translateY(-2px);
        }

        /* --- Main Content Grid (Styles restent les mêmes) --- */
        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .lists-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
            gap: 9px;
            margin-top: 30px;
        }

        .card {
            background-color: #f3e2d5;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 2px;
            font-size: 1em; /* Taille des icônes */
            font-weight: 500;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card h3 {
            margin-top: 0;
            color: #007BFF;
            border-bottom: 2px solid #E0E0E0;
            padding-bottom: 10px;
            margin-bottom: 20px;
            background-color: wheat;
        }

        .card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .card ul li {
            padding: 8px 0;
            border-bottom: 1px solid #F0F2F5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card ul li:last-child {
            border-bottom: none;
        }

        .card .btn-more {
            display: block;
            text-align: center;
            margin-top: 20px;
            padding: 10px 15px;
            color: #F0F2F5;
            border-radius: 8px;
            background-color: #007BFF;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .card .btn-more:hover {
            background-color: #E2F0FB;
        }

@media (max-width: 768px) {
    .search-bar {
        width: 100%;
        margin-left: 0;
        margin-bottom: 15px;
    }
}

        /* --- Responsive Design (Styles modifiés) --- */
        @media (max-width: 348px) {

            .action-icons {
                width: 100%;
                justify-content: flex-start; /* Aligner les icônes à gauche sur mobile */
                margin-left: 0;
            }
            .action-icons a {
                margin-left: 0;
                margin-right: 18px; /* Espacement entre les icônes sur mobile */
            }

            .content-grid {
                grid-template-columns: 1fr;
            }

            .hero {
                padding: 40px 15px;
            }

            .hero h1 {
                font-size: 2em;
            }

            .hero p {
                font-size: 1em;
            }

            .footer .footer-nav li {
                margin: 5px 10px;
            }
        }





.frequencies-table tbody tr:hover {
    background-color: #F0F8FF; /* Surbrillance au survol */
    cursor: pointer; /* Indique que la ligne est cliquable */
}

/* --- Styles spécifiques au menu contextuel --- */
.context-menu {
    display: none; /* Masqué par défaut */
    position: fixed; /* Reste à l'écran même en scrollant */
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Assure qu'il est au-dessus des autres éléments */
    padding: 10px 0;
    min-width: 200px;
    list-style: none; /* Pour enlever les puces si on utilise ul/li */
}

.context-menu a {
    display: flex; /* Pour aligner icône et texte */
    align-items: center;
    padding: 10px 15px;
    color: #333333;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.context-menu a i {
    margin-right: 10px; /* Espace entre l'icône et le texte */
    color: #007BFF; /* Couleur des icônes dans le menu */
}

.context-menu a:hover {
    background-color: #E2F0FB; /* Fond bleu clair au survol */
    color: #0056b3;
}