/* ==========================
   BASE
========================== */

body{
    font-family:Arial,sans-serif;
    background:#fff;
    margin:0;
    padding:0;
}

.wrapper_liste_plage,
.table-container{
    width:100%;
    margin:0;
    padding:0;
    background:#fff;
}

/* table */

#table-plages{
    width:100% !important;
    table-layout:fixed;
}

#table-plages td{
    vertical-align:middle;
}

/* lien plage */

.plage-link{
    color:#0066cc;
    text-decoration:none;
    font-weight:600;
    display:block;
    line-height:1.1;
    white-space:normal !important;
    word-break:break-word;
}

.plage-link:hover{
    text-decoration:underline;
}

/* ville sous plage */

.plage-ville{
    font-size:12px;
    color:#928989;
    line-height:1.05;
    margin-top:1px;
}

/* pictos */

.flag-img{
    height:14px;
    max-width:18px;
    width:auto;
    display:block;
    margin:auto;
}

.meduse-img{
    height:14px;
    max-width:18px;
    width:auto;
    display:block;
    margin:auto;
}

.thead-meduse{
    height:12px;
    display:block;
    margin:auto;
}

.temp{
    font-weight:700;
    color:#0077b6;
    font-size:14px;
}

/* lignes */

.flag-green{
    background:rgba(0,180,70,.03);
}

.flag-yellow{
    background:rgba(255,215,0,.04);
}

.flag-orange{
    background:rgba(255,140,0,.04);
}

.flag-red{
    background:rgba(220,53,69,.03);
}

/* ==========================
   HEADERS
========================== */

#table-plages thead th{

    padding:4px 3px !important;
    vertical-align:middle;
    text-align:center;

    font-size:10px;
    line-height:1;
}

/* cellules */

#table-plages tbody td{
    padding:4px 3px !important;
    line-height:1.1;
}

/* ==========================
   LARGEURS FORCÉES
========================== */

/* 1 hidden */
/* 2 plage */

#table-plages th:nth-child(2),
#table-plages td:nth-child(2){

    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;

    white-space:normal !important;
    word-break:break-word;
}

/* 3 ville cachée */

/* 4 drapeau */

#table-plages th:nth-child(4),
#table-plages td:nth-child(4){

    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;

    text-align:center;
}

/* 5 température */

#table-plages th:nth-child(5),
#table-plages td:nth-child(5){

    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    text-align:center;
}

/* 6 méduses */

#table-plages th:nth-child(6),
#table-plages td:nth-child(6){

    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;

    text-align:center;
}

/* 7 danger */

#table-plages th:nth-child(7),
#table-plages td:nth-child(7){

    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;

    white-space:normal !important;
    word-break:break-word;
    overflow-wrap:break-word;

    font-size:10px;
    line-height:1.15;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    body{
        overflow-x:hidden;
    }

    div.dt-container{
        margin:0 !important;
        padding:0 !important;
    }

    div.dt-scroll-body{

    overflow-x:auto !important;
    overflow-y:visible !important;

    -webkit-overflow-scrolling:touch;

    /* horizontal + vertical */
    touch-action:pan-x pan-y !important;
}

    #table-plages{
        min-width:380px;
    }

    #table-plages thead th{

        font-size:8px;
        padding:2px 1px !important;
    }

    .flag-img{
      /*  height:12px;*/
    }

    .meduse-img{
    /*    height:12px;*/
    }

    .temp{
        font-size:12px;
    }

    .table-container::after{
        content:"← glisser →";
        display:block;
        text-align:center;
        font-size:9px;
        color:#888;
        padding:2px;
    }
}