/* ==========================================
   CONTAINER PRINCIPAL
========================================== */

.modcontainer{
    background:#A1CDF2FF;
    display:flex;
    justify-content:center;
    padding:40px 20px;
}

.mod-container{
    width:65%;
    background:#D9E2E9FF;
    padding:25px;
    border-radius:16px;
    box-shadow:0 0 20px rgba(0,0,0,.4);

    display:flex;
    gap:25px;
    align-items:flex-start;
}

/* ==========================================
   MENU DOCUMENTATION
========================================== */

.menumodcontainer{
    width:20%;
    flex-shrink:0;

    background:#10213FFF;
    color:white;

    border-radius:10px;
    padding:20px;

    position:sticky;
    top:20px;

    max-height:85vh;
    overflow-y:auto;
}

iframe {
    width: 100% !important;
    border: 0;
}

.categorie{
    margin-bottom:25px;
}

.cat-title{
    margin-bottom:12px;
    font-size:24px;
    cursor:pointer;
}

.categorie ul{
    padding-left:20px !important;
}

.categorie li{
    font-size:20px !important;
    margin-bottom:10px;
}

.doc-link{
    color:white;
    text-decoration:none;
    transition:.2s;
}

.doc-link:hover{
    opacity:.8;
}

/* ==========================================
   CONTENU DOCUMENTATION
========================================== */

.contenumodcontainer{
    flex:1;
    min-width:0;
}

/* ==========================================
   TITRES
========================================== */

.title{
    display:flex;
    justify-content:center;
}

.h2cgu{
    color:#3F3F3FFF;
    text-transform:uppercase;
    padding:5px;
}

.text{
    font-size:16px;
    line-height:1.7;
}

/* ==========================================
   LISTES
========================================== */

.modcontainer ul{
    list-style-type:disc !important;
    padding-left:40px !important;
    margin-bottom:15px;
}

.modcontainer ol{
    list-style-type:decimal !important;
    padding-left:40px !important;
    margin-bottom:15px;
}

.modcontainer li{
    margin-bottom:8px;
    font-size:18px;
}

/* ==========================================
   IMAGES
========================================== */

.contenumodcontainer img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;

    display:block;
    margin:20px auto;
    border-radius:10px;
}

/* ==========================================
   TABLEAUX
========================================== */

.contenumodcontainer table{
    width:100% !important;
    table-layout:fixed;
    border-collapse:collapse;
}

.contenumodcontainer td,
.contenumodcontainer th{
    width:auto;
    min-width:unset;
    word-break:break-word;
    overflow-wrap:break-word;
    padding:8px;
    font-size:13px;
}

.contenumodcontainer table img{
    max-width:128px !important;
    width:auto !important;
    height:auto !important;
}

/* ==========================================
   CODE
========================================== */

pre{
    overflow-x:auto;
    max-width:100%;
}

/* ==========================================
   GRAND ECRAN
========================================== */

@media screen and (min-width:1800px){

    .mod-container{
        width:70%;
    }

    .h2cgu{
        font-size:34px;
    }

    .text{
        font-size:22px;
    }

    .modcontainer li{
        font-size:20px;
    }

    iframe {
    width: 100% !important;
    border: 0;
}
}

/* ==========================================
   ECRAN LARGE
========================================== */

@media screen and (min-width:1600px) and (max-width:2047px){

    .mod-container{
        width:75%;
    }

    .h2cgu{
        font-size:30px;
    }

    .text{
        font-size:18px;
    }

    iframe {
    width: 100% !important;
    border: 0;
}
}

/* ==========================================
   TABLETTE
========================================== */

@media screen and (max-width:1024px){

    .modcontainer{
        padding:30px 15px;
    }

    .mod-container{
        width:95%;
        padding:20px;
    }

    .menumodcontainer{
        width:220px;
    }

    .h2cgu{
        font-size:24px;
    }

    .text{
        font-size:16px;
    }

    .modcontainer li{
        font-size:17px;
    }

    iframe {
    width: 100% !important;
    border: 0;
}
}

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

@media screen and (max-width:768px){

        .contenumodcontainer td,
    .contenumodcontainer th{
        font-size:11px;
        padding:4px;
    }

    .contenumodcontainer table img{
        max-width:40px !important;
    }

    .modcontainer{
        padding:15px;
    }

    .mod-container{
        width:100%;
        flex-direction:column;
        gap:15px;
        padding:15px;
    }

    /* Menu en accordéon */

    .menumodcontainer{
        width:100%;
        position:relative;
        top:auto;
        max-height:none;
        overflow:visible;
        padding:15px;
    }

    .categorie{
        margin-bottom:10px;
        background:rgba(255,255,255,.05);
        border-radius:8px;
        overflow:hidden;
    }

    .cat-title{
        margin:0;
        padding:15px;
        font-size:16px;
    }

    .categorie ul{
        display:none;
        padding:15px !important;
    }

    .categorie.open ul{
        display:block;
        margin-left: 5%;
    }

    .contenumodcontainer{
        width:100%;
    }

    .contenumodcontainer h1{
        font-size:28px;
    }

    .contenumodcontainer h2{
        font-size:24px;
    }

    .contenumodcontainer h3{
        font-size:20px;
    }

    .text,
    .contenumodcontainer p{
        font-size:15px;
        line-height:1.7;
    }

    .modcontainer li{
        font-size:16px;
    }

    iframe {
    width: 100% !important;
    border: 0;
}
}

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

@media screen and (max-width:480px){

    .modcontainer{
        padding:10px;
    }

    .mod-container{
        padding:12px;
        border-radius:10px;
    }

    .menumodcontainer{
        padding:12px;
    }

    .cat-title{
        font-size:15px;
        padding:12px;
    }

    .doc-link{
        font-size:14px;
    }

    .contenumodcontainer h1{
        font-size:24px;
    }

    .contenumodcontainer h2{
        font-size:20px;
    }

    .contenumodcontainer h3{
        font-size:18px;
    }

    .text,
    .contenumodcontainer p{
        font-size:14px;
    }

    .modcontainer li{
        font-size:15px;
    }

    table{
        font-size:13px;
    }

    iframe {
    width: 100% !important;
    border: 0;
}
}

/* Images cliquables */
.contenumodcontainer img{
    cursor:zoom-in;
}

/* Lightbox */
#imageZoom{
    display:none;
    position:fixed;
    z-index:99999;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:rgba(0,0,0,0.9);

    justify-content:center;
    align-items:center;

    padding:20px;
    box-sizing:border-box;
}

#imageZoom.active{
    display:flex;
}

#imageZoom img{
    max-width:95%;
    max-height:95%;
    width:auto;
    height:auto;
    border-radius:10px;
    box-shadow:0 0 30px rgba(0,0,0,.6);
    cursor:zoom-out;
}

#imageZoomClose{
    position:absolute;
    top:20px;
    right:30px;
    color:white;
    font-size:40px;
    cursor:pointer;
    user-select:none;
}