/* ===== Google Font Import - Poppins ===== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');



*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

    transition: all 0.4s ease;;

}





/* ===== Colours ===== */

:root {
    --light: #f6f6f9;
    --primary: #1976D2;
    --light-primary: #CFE8FF;
    --grey: #eee;
    --dark-grey: #AAAAAA;
    --dark: #363949;
    --danger: #D32F2F;
    --light-danger: #FECDD3;
    --warning: #FBC02D;
    --light-warning: #FFF2C6;
    --success: #388E3C;
    --light-success: #BBF7D0;
    --body-color: #F2F2F2;
    --nav-color: #0950BF;
    --side-nav: #010718;
    --text-color: #FFF;
    --search-bar: #F2F2F2;
    --search-text: #010718;
}



body {
    height: 100vh;
    color: var(--dark);
    background-color: var(--light);
}



    body.dark {
        --light: #18191A;
        --nav-color: #242526;
        --text-color: #FFFAFA;
        --search-bar: #242526;
        --dark: #FFFFFF;
    }



nav{

    position: fixed;

    top: 0;

    left: 0;

    height: 70px;

    width: 100%;

    background-color: var(--nav-color);

    z-index: 100;

}



body.dark nav{

    border: 1px solid #393838;



}



nav .nav-bar{

    position: relative;
    height: 100%;
    max-width: 1000px;
    width: 100%;
    background-color: var(--nav-color);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}



nav .nav-bar .sidebarOpen{

    color: var(--text-color);

    font-size: 25px;

    padding: 5px;

    cursor: pointer;

    display: none;

}



nav .nav-bar .logo a{

    font-size: 25px;

    font-weight: 500;

    color: var(--text-color);

    text-decoration: none;

}



.menu .logo-toggle{

    display: none;

}



.nav-bar .nav-links{

    display: flex;

    align-items: center;

}



.nav-bar .nav-links li{

    margin: 0 5px;

    list-style: none;

}



.nav-links li a{

    position: relative;

    font-size: 17px;

    font-weight: 400;

    color: var(--text-color);

    text-decoration: none;

    padding: 10px;

}



.nav-links li a::before{

    content: '';

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    height: 6px;

    width: 6px;

    border-radius: 50%;

    background-color: var(--text-color);

    opacity: 0;

    transition: all 0.3s ease;

}


.boitePrincipale {
    color: var(--dark);
    
}

.nav-bar .darkLight-searchBox {
    display: flex;
    align-items: center;
}



.darkLight-searchBox .dark-light,

.darkLight-searchBox .searchToggle{

    height: 40px;

    width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 5px;

}



.dark-light i,

.searchToggle i{

    position: absolute;

    color: var(--text-color);

    font-size: 22px;

    cursor: pointer;

    transition: all 0.3s ease;

}



.dark-light i.sun{

    opacity: 0;

    pointer-events: none;

}



.dark-light.active i.sun{

    opacity: 1;

    pointer-events: auto;

}



.dark-light.active i.moon{

    opacity: 0;

    pointer-events: none;

}



.searchToggle i.cancel{

    opacity: 0;

    pointer-events: none;

}



.searchToggle.active i.cancel{

    opacity: 1;

    pointer-events: auto;

}



.searchToggle.active i.search{

    opacity: 0;

    pointer-events: none;

}



.searchBox{

    position: relative;

}



.searchBox .search-field{

    position: absolute;

    bottom: -85px;

    right: 5px;

    height: 50px;

    width: 300px;

    display: flex;

    align-items: center;

    background-color: var(--nav-color);

    padding: 3px;

    border-radius: 6px;

    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);

    opacity: 0;

    pointer-events: none;

    transition: all 0.3s ease;

}



.searchToggle.active ~ .search-field{

    bottom: -74px;

    opacity: 1;

    pointer-events: auto;

}



.search-field::before{

    content: '';

    position: absolute;

    right: 14px;

    top: -4px;

    height: 12px;

    width: 12px;

    background-color: var(--nav-color);

    transform: rotate(-45deg);

    z-index: -1;

}



.search-field input{

    height: 100%;

    width: 100%;

    padding: 0 45px 0 15px;

    outline: none;

    border: none;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 400;

    color: var(--search-text);

    background-color: var(--search-bar);

}



body.dark .search-field input{

    color: var(--text-color);

}



.search-field i{

    position: absolute;

    color: var(--nav-color);

    right: 15px;

    font-size: 22px;

    cursor: pointer;

}



body.dark .search-field i{

    color: var(--text-color);

}





















.bx{

    font-size: 1.7rem;

}



a{

    text-decoration: none;

}



li{

    list-style: none;

}



html{

    overflow-x: hidden;

}











.sidebar::-webkit-scrollbar{

    display: none;

}



.sidebar.close{

    width: 60px;

}



.sidebar .logo{

    font-size: 24px;

    font-weight: 700;

    height: 56px;

    display: flex;

    align-items: center;

    color: var(--primary);

    z-index: 500;

    padding-bottom: 20px;

    box-sizing: content-box;

}



.sidebar .logo .logo-name span{

    color: var(--dark);

}



.sidebar .logo .bx{

    min-width: 60px;

    display: flex;

    justify-content: center;

    font-size: 2.2rem;

}



.sidebar .side-menu{

    width: 100%;

    margin-top: 48px;

}



.sidebar .side-menu li{

    height: 48px;

    background: transparent;

    margin-left: 6px;

    border-radius: 48px 0 0 48px;

    padding: 4px;

}



.sidebar .side-menu li.active{

    background: var(--grey);

    position: relative;

}



.sidebar .side-menu li.active::before{

    content: "";

    position: absolute;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    top: -40px;

    right: 0;

    box-shadow: 20px 20px 0 var(--grey);

    z-index: -1;

}



.sidebar .side-menu li.active::after{

    content: "";

    position: absolute;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    bottom: -40px;

    right: 0;

    box-shadow: 20px -20px 0 var(--grey);

    z-index: -1;

}



.sidebar .side-menu li a{

    width: 100%;

    height: 100%;

    background: var(--light);

    display: flex;

    align-items: center;

    border-radius: 48px;

    font-size: 16px;

    color: var(--dark);

    white-space: nowrap;

    overflow-x: hidden;

    transition: all 0.3s ease;

}



.sidebar .side-menu li.active a{

    color: var(--success);

}



.sidebar.close .side-menu li a{

    width: calc(48px - (4px * 2));

    transition: all 0.3s ease;

}



.sidebar .side-menu li a .bx{

    min-width: calc(60px - ((4px + 6px) * 2));

    display: flex;

    font-size: 1.6rem;

    justify-content: center;

}



.sidebar .side-menu li a.logout{

    color: var(--danger);

}



.content {
    position: relative;
    align-content: center;
    width: calc(100% - 200px);
    background-color: var(--light);
    color: var(--dark);
}



.sidebar.close~.content{

    width: calc(100% - 60px);

    left: 60px;

}



.content nav{

    height: 56px;

    background: var(--light);

    padding: 0 24px 0 0;

    display: flex;

    align-items: center;

    grid-gap: 30px;

    position: relative;

    top: 0;

    left: 0;

    z-index: 1000;

}







.content nav a{

    color: var(--dark);

}



.content nav .bx.bx-menu{

    cursor: pointer;

    color: var(--dark);

}



.content nav form{

    max-width: 400px;

    width: 100%;

    margin-right: auto;

}



.content nav form .form-input{

    display: flex;

    align-items: center;

    height: 36px;

}



.content nav form .form-input input{

    flex-grow: 1;

    padding: 0 16px;

    height: 100%;

    border: none;

    background: var(--grey);

    border-radius: 36px 0 0 36px;

    outline: none;

    width: 100%;

    color: var(--dark);

}



.content nav form .form-input button{

    width: 80px;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--primary);

    color: var(--light);

    font-size: 18px;

    border: none;

    outline: none;

    border-radius: 0 36px 36px 0;

    cursor: pointer;

}



.content nav .notif{

    font-size: 20px;

    position: relative;

}



.content nav .notif .count{

    position: absolute;

    top: -6px;

    right: -6px;

    width: 20px;

    height: 20px;

    background: var(--danger);

    border-radius: 50%;

    color: var(--light);

    border: 2px solid var(--light);

    font-weight: 700;

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.content nav .profile img{

    width: 36px;

    height: 36px;

    object-fit: cover;

    border-radius: 50%;

}



.content nav .theme-toggle{

    display: block;

    min-width: 50px;

    height: 25px;

    background: var(--grey);

    cursor: pointer;

    position: relative;

    border-radius: 25px;

}



.content nav .theme-toggle::before{

    content: "";

    position: absolute;

    top: 2px;

    left: 2px;

    bottom: 2px;

    width: calc(25px - 4px);

    background: var(--primary);

    border-radius: 50%;

    transition: all 0.3s ease;

}



.content nav #theme-toggle:checked+.theme-toggle::before{

    left: calc(100% - (25px - 4px) - 2px);

}



.content main {
    width: 100%;
    padding: 36px 24px;
    max-height: calc(100vh - 56px);
    
}




.content main .header{

    display: flex;

    align-items: center;

    justify-content: space-between;

    grid-gap: 16px;

    flex-wrap: wrap;

}



.content main .header .left h1{

    font-size: 36px;

    font-weight: 600;

    margin-bottom: 10px;

    margin-top:50px;

    color: var(--dark);

}



.content main .header .left .breadcrumb{

    display: flex;

    align-items: center;

    grid-gap: 16px;

}



.content main .header .left .breadcrumb li{

    color: var(--dark);

}



.content main .header .left .breadcrumb li a{

    color: var(--dark-grey);

    pointer-events: none;

}



.content main .header .left .breadcrumb li a.active{

    color: var(--primary);

    pointer-events: none;

}



.content main .header .report{

    height: 36px;

    padding: 0 16px;

    border-radius: 36px;

    background: var(--primary);

    color: var(--light);

    display: flex;

    align-items: center;

    justify-content: center;

    grid-gap: 10px;

    font-weight: 500;

}



.content main .insights{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    grid-gap: 24px;

    margin-top: 36px;

}



.content main .insights2{

    display: grid;

    grid-gap: 10px;

    margin-top: 36px;

}



.content main .insights li{

    padding: 24px;

    background: var(--light);

    border-radius: 20px;

    display: flex;

    align-items: center;

    grid-gap: 24px;

    cursor: pointer;

}



.content main .insights li .bx{

    width: 80px;

    height: 80px;

    border-radius: 10px;

    font-size: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.content main .insights li:nth-child(1) .bx{

    background: var(--light-primary);

    color: var(--primary);

}



.content main .insights li:nth-child(2) .bx{

    background: var(--light-warning);

    color: var(--warning);

}



.content main .insights li:nth-child(3) .bx{

    background: var(--light-success);

    color: var(--success);

}



.content main .insights li:nth-child(4) .bx{

    background: var(--light-danger);

    color: var(--danger);

}



.content main .insights li .info h3{

    font-size: 24px;

    font-weight: 600;

    color: var(--dark);

}



.content main .insights li .info p{

    color: var(--dark);

}



.content main .bottom-data{

    display: flex;

    flex-wrap: wrap;

    grid-gap: 24px;

    margin-top: 24px;

    width: 100%;

    color: var(--dark);

}



.content main .bottom-data>div{

    border-radius: 20px;

    background: var(--light);

    padding: 24px;

    overflow-x: auto;

}



.content main .bottom-data .header{

    display: flex;

    align-items: center;

    grid-gap: 16px;

    margin-bottom: 24px;

}



.content main .bottom-data .header h3{

    margin-right: auto;

    font-size: 24px;

    font-weight: 600;

}



.content main .bottom-data .header .bx{

    cursor: pointer;

}



.content main .bottom-data .orders{

    flex-grow: 1;

    flex-basis: 500px;

    

}



.content main .bottom-data .orders table{

    width: 100%;

    border-collapse: collapse;

}



.content main .bottom-data .orders table th{

    padding-bottom: 12px;

    font-size: 13px;

    text-align: left;

    border-bottom: 1px solid var(--grey);

    

}



.content main .bottom-data .orders table td{

    padding: 16px 0;

}



.content main .bottom-data .orders table tr td:first-child{

    display: flex;

    align-items: center;

    grid-gap: 12px;

    padding-left: 6px;

}



.content main .bottom-data .orders table td img{

    width: 36px;

    height: 36px;

    border-radius: 50%;

    object-fit: cover;

}



.content main .bottom-data .orders table tbody tr{

    cursor: pointer;

    transition: all 0.3s ease;

}



.content main .bottom-data .orders table tbody tr:hover{

    background: var(--grey);

}



.content main .bottom-data .orders table tr td .status{

    font-size: 10px;

    padding: 6px 16px;

    color: var(--light);

    border-radius: 20px;

    font-weight: 700;

}



.content main .bottom-data .orders table tr td .status.completed{

    background: var(--success);

}



.content main .bottom-data .orders table tr td .status.process{

    background: var(--primary);

}



.content main .bottom-data .orders table tr td .status.pending{

    background: var(--warning);

}



.content main .bottom-data .reminders{

    flex-grow: 1;

    flex-basis: 300px;

}



.content main .bottom-data .reminders .task-list{

    width: 100%;

}



.content main .bottom-data .reminders .task-list li{

    width: 100%;

    margin-bottom: 16px;

    background: var(--grey);

    padding: 14px 10px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.content main .bottom-data .reminders .task-list li .task-title{

    display: flex;

    align-items: center;

}



.content main .bottom-data .reminders .task-list li .task-title p{

    margin-left: 6px;

}



.content main .bottom-data .reminders .task-list li .bx{

  cursor: pointer;  

}



.content main .bottom-data .reminders .task-list li.completed{

    border-left: 10px solid var(--success);

}



.content main .bottom-data .reminders .task-list li.not-completed{

    border-left: 10px solid var(--danger);

}



.content main .bottom-data .reminders .task-list li:last-child{

   margin-bottom: 0;

}





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

    

    .content nav form .form-input input{

        display: none;

    }



    .content nav form .form-input button{

        width: auto;

        height: auto;

        background: transparent;

        color: var(--dark);

        border-radius: none;

    }



    .content nav form.show .form-input input{

        display: block;

        width: 100%;

    }



    .content nav form.show .form-input button{

        width: 36px;

        height: 100%;

        color: var(--light);

        background: var(--danger);

        border-radius: 0 36px 36px 0;

    }



    .content nav form.show~.notif, .content nav form.show~.profile{

        display: none;

    }



    .content main .insights {

        grid-template-columns: 1fr;

    }



    .content main .bottom-data .header{

        min-width: 340px;

    }



    .content main .bottom-data .orders table{

        min-width: 340px;

    }



    .content main .bottom-data .reminders .task-list{

        min-width: 340px;

    }

    

      .menuP {

    flex-direction: column;

  }



    .vertical-line{

        border-top: 2px solid #000606;

        

    }



    .boiteIns {

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 300px 10px 400px;

        margin-top: 130px;

        grid-gap: 15px;

        grid-template-areas: "message" "barre" "formulaire";

    }

    .boiteInsMess {

       grid-area: message;

    

    }



    .boiteInsLign {

        grid-area: barre;

    }

    .boiteInsForm {

        grid-area: formulaire;  

    }

    



}



.flex-wrapper {

  display: flex;

  flex-flow: row nowrap;

}



.single-chart {

  width: 33%;

  justify-content: space-around ;

}



.circular-chart {

  display: block;

  margin: 10px auto;

  max-width: 80%;

  max-height: 250px;

}



.circle-bg {

  fill: none;

  stroke: #eee;

  stroke-width: 3.8;

}



.circle {

  fill: none;

  stroke-width: 2.8;

  stroke-linecap: round;

  animation: progress 1s ease-out forwards;

}



@keyframes progress {

  0% {

    stroke-dasharray: 0 100;

  }

}



.circular-chart.orange .circle {

  stroke: #ff9f00;

}



.circular-chart.green .circle {

  stroke: #4CC790;

}



.circular-chart.blue .circle {

  stroke: #3c9ee5;

}



.percentage {

  fill: #666;

  font-family: sans-serif;

  font-size: 0.5em;

  text-anchor: middle;

}



.nvtable{

    margin-top: 1.3rem;

}



.nvtable h2{

    margin-bottom: 0.8rem;

}



.nvtable table{

    background-color: var(--color-white);

    width: 100%;

    padding: var(--card-padding);

    text-align: center;

    box-shadow: var(--box-shadow);

    border-radius: var(--card-border-radius);

    transition: all 0.3s ease;

}



.nvtable table:hover{

    box-shadow: none;

}



table tbody td{

    height: 2.8rem;

    border-bottom: 1px solid var(--color-light);

    color: var(--color-dark-variant);

}



table tbody tr:last-child td{

    border: none;

}



 .nvtable a{

    text-align: center;

    display: block;

    margin: 1rem auto;

    color: var(--color-primary);

}



.img-border-radius{

    display: flex;

    margin: auto;

    width: 200px;

    height: 200px;

  clip-path:ellipse(50% 50%);

}



.smallText{

    margin: auto;

    font-size: small;

    color: var(--dark);

}



.itemInsight{

    align-items: center;

}

.textTableauAnnale{
    font-size: medium;
    margin: auto;
    text-align: center;

}

.niveautable{
    font-size: 13px;
    padding: 6px 6px;
    color: var(--light);
    border-radius: 20px;
    font-weight: 700;
    margin:auto;

}



.barNavig{
    display:block; 
}

.barNavig a:hover {
  background: #5089f0;
}



.navElement > a {
  padding: 12px 25px;
}

.navElement:hover > ul {
  display: flex;
}



.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}



.col-xl,

.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg,

.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md,

.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm,

.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col,

.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {

  position: relative;

  width: 100%;

  padding-right: 1.5rem;

  padding-left: 1.5rem;

}



.ml-auto,

.mx-auto {

  margin-left: auto !important;

}



.mr-auto,

.mx-auto {

  margin-right: auto !important;

}



.lead {

  font-size: 1.25rem;

  font-weight: 300;

}



article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {

  display: block;

}



.formIns{

    border-radius: 2%;

    padding: 10px;

 

    

}



.form-control{

  display: block;

  width: 100%;

  height: calc(1.5em + 1rem);

  padding: 0.375rem 0.75rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #495057;

  background-color: #fff;

 

  border: 0.125rem solid #ced4da;

  border-radius: 0.5rem;

  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}





.btn {

    display: inline-block;

    font-weight: 400;

    color: #212529;

    text-align: center;

    vertical-align: middle;

    cursor: pointer;

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;

    background-color: transparent;

    border: 0.125rem solid transparent;

    padding: 0.375rem 0.75rem;

    font-size: 1rem;

    line-height: 1.5;

    margin-top: 10 px;

    border-radius: 0.5rem;

    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  }

  @media (prefers-reduced-motion: reduce) {

    .btn {

      transition: none;

    }

  }

  .btn:hover {

    color: #212529;

    text-decoration: none;

  }

  .btn:focus, .btn.focus {

    outline: 0;

    box-shadow: 0 0 0 0.2rem rgba(26, 188, 156, 0.25);

  }

  .btn.disabled, .btn:disabled {

    opacity: 0.65;

  }

  a.btn.disabled,

  fieldset:disabled a.btn {

    pointer-events: none;

  }



.btn-primary {

    color: #fff;
    background-color: #2546a1;
    border-color: #2546a1;

  }

  .btn-primary:hover {

    color: #fff;

    background-color: #2546a1;

    border-color: #2546a1;

  }

  .btn-primary:focus, .btn-primary.focus {

    color: #fff;

    background-color: #2546a1;

    border-color: #2546a1;

    box-shadow: 0 0 0 0.2rem rgba(60, 198, 171, 0.5);

  }

  .btn-primary.disabled, .btn-primary:disabled {

    color: #fff;

    background-color: #2546a1;

    border-color: #2546a1;

  }

  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {

    color: #fff;

    background-color: #2546a1;

    border-color: #2546a1;

  }

  .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {

    box-shadow: 0 0 0 0.2rem rgba(60, 198, 171, 0.5);

  }

  

  .vertical-line{

    border-left: 2px solid #04070c;

    display: inline-block;

    height:  300px;

    margin: auto



  }



.btnCons{

 

 width: 120px;

  border-radius: 36px;

  background: var(--primary);

  color: var(--light);

  display: flex;

  align-items: center;

  justify-content: center;

  grid-gap: 10px;

  font-weight: 500;

}



.boiteContenuEpreuve {

        width :100%;
        display: grid;

        grid-template-rows: 10% 90%;

        grid-template-columns: 30% 70%;

        margin-top: 130px;

        grid-gap: 15px;

        color: var(--dark);
       

        grid-template-areas: "vide entete"

                              "filtre resultat";

       

    }





.boiteVide {
    grid-area: resultat;
    margin-left: 9px;
    margin-right: 100px;
}



.boiteEntete {

grid-area: entete;

margin:auto;

}



.boitefiltre {

    grid-area: filtre;
    margin:auto;

    border-radius: 2%;
    
}

.boiteResultat1 {

    grid-area: vide;
    margin:auto;
    width:100%

}



    

    .elmentForm{

       padding: 10px 30px 0 0; 

    }



    /*!

 * Start Bootstrap - Shop Homepage (http://startbootstrap.com/)

 * Copyright 2013-2016 Start Bootstrap

 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)

 */





.slide-image {

    width: 100%;

}



.carousel-holder {

    margin-bottom: 30px;

}



.carousel-control,

.item {

    border-radius: 4px;

}



.caption {

    height: 160px;

    overflow: hidden;

}



.caption h4 {

    white-space: nowrap;

}



.thumbnail img {
    width: 100%;
}



.ratings {
    padding-right: 10px;
    padding-left: 10px;
    color: #d17581;
}



.thumbnail {
    padding: 0;
}


.thumbnail .caption-full {
    padding: 9px;
    color: #333;
}



footer {
    margin: 50px 0;
}

.boiteTableauVide{
    margin-left: 0px;
    margin-top: 0px;
    text-align: center;
    
    width: 100%;
}

.dataTables_filter input {
    color: var(--dark);
}

.dataTables_filter label {
    color: var(--dark);
}

div.dataTables_length select {
    color: var(--dark) !important;
    background-color: var(--light) !important;
  }

div.dataTables_length label {
    color: var(--dark);
  }

div.dataTables_info {
    color: var(--dark) !important;
   
  }

  .boiteContenuEpreuveVisu{

    display: grid;
        width:100%;
        grid-template-rows: 15% 60% 20%;
        grid-template-columns:  15% 70%;
        
        margin:auto;
        margin-top: 200px;
        margin-left: 20%;
        grid-template-areas: "titre titre" "utilisateur epreuve" "fin fin";

}


.boiteEpreuve{
    margin: auto;
    width: 100%;
    height: 100%;
    grid-area: epreuve;

}
.boiteEpreuve embed{
    width: 100%;
    grid-area: epreuve;

}

.boiteInfoUti{
    margin: auto;
    grid-area: utilisateur;

}



@media (max-width: 790px) {

    .tabloPerso thead {
        display: none;
        }

        .boiteEpreuve iframe{
            width:80%;
        }

    .boiteVide {
        margin-left: 20px;
        margin-right: 10px;
    }

        .tabloPerso tr{

        display: grid;
        grid-template-rows: 10% 10% 50% 10%;
        grid-template-columns:  auto;
        grid-gap:10px;
        margin:auto;
        border-radius: 10px;
        margin-bottom: 20px;
        border: 2px solid #09bf7c;
        grid-template-areas: "etab" "matiere"
        "niveau" "lien";

        }

        .content{
            width:80%;
            margin:auto;
        }



    .tabloPerso tr::nth-child(-n + 1) {
        display: flex;
        margin: auto;
        grid-area: etab;
        height: 100%;
        width: 80%;
    }



    .tabloPerso tr::nth-child(-n + 2) {
        display: flex;
        margin: auto;
        grid-area: matiere;
        height: 100%;
        width: 80%;
    }



    .tabloPerso tr::nth-child(-n + 3) {
        display: flex;
        margin: auto;
        grid-area: niveau;
        height: 100%;
        width: 80%;
    }



    .tabloPerso tr::nth-child(-n + 4) {
        display: flex;
        margin: auto;
        grid-area: lien;
        height: 100%;
        width: 80%;
    }        



    .boiteContenuEpreuve {

        margin-left: 2px;

        width:100%;

        grid-template-rows: auto auto auto auto;

        grid-template-columns: auto;

        grid-template-areas: "entete" "vide"

                              "filtre" "resultat";

       

    }



    .boiteVide{



        margin-left: 0px;

        width: auto;

    }

    .boiteEntete {

        width: 100%;

    }

    

    .boitefiltre {
        width: 100%;


    }

    .boiteResultat1 {

        width: 100%;

    }

    nav .nav-bar .sidebarOpen{

        display: block;

    }



    .menu{

        position: fixed;

        height: 100%;

        width: 320px;

        left: -100%;

        top: 0;

        padding: 20px;

        background-color: var(--side-nav);

        z-index: 100;

        transition: all 0.4s ease;

    }



    nav.active .menu{

        left: -0%;

    }



    nav.active .nav-bar .navLogo a{

        opacity: 0;

        transition: all 0.3s ease;

    }



    .menu .logo-toggle{

        display: block;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }



    .logo-toggle .siderbarClose{

        color: var(--text-color);

        font-size: 24px;

        cursor: pointer;

    }



    .nav-bar .nav-links{

        flex-direction: column;

        padding-top: 30px;

    }



    .nav-links li a{

        display: block;

        margin-top: 20px;

    }



   

}

.filter-box {
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

    .filter-box[open] {
        background-color: #f8f9fa;
    }

.filter-title {
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}

.filter-options {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding-left: 5px;
}

.form-check {
    margin-bottom: 6px;
}
/* ===== Layout entre NAV (fixed) et FOOTER ===== */
:root {
    --nav-h: 70px;
}
/* ta nav fait 70px dans ton CSS */

html, body {
    min-height: 100%;
    height: auto;
}



    /* Cible le wrapper principal que tu as déjà dans epreuves.php */
    body > .content {
        /* occupe toute la hauteur visible - hauteur nav */
        min-height: calc(100dvh - var(--nav-h));
        /* évite que le contenu passe sous la nav */
        padding-top: calc(var(--nav-h) + 24px);
        /* petit coussin au-dessus du footer */
        padding-bottom: 40px;
        /* 👉 fond unique de la zone entre nav et foot */

    }

    /* Dark mode : même fond mais version sombre (si ta var est déjà sombre, ça suffit) */


/* Supprime les marges qui créent un “trou” sous le footer */
footer, .site-footer, #footer {
    margin: 0;
}

/* Au cas où un dernier bloc aurait une grosse marge basse */
body > :last-child {
    margin-bottom: 0;
}

/* Évite des décalages parasites au sommet des sections */
.boiteContenuEpreuve,
.boiteContenuEpreuveVisu {
    margin-top: 0 !important;
}
/* ===== Full-bleed pour la zone entre NAV et FOOT ===== */
body > .content {
  width: 100% !important;   /* au lieu de calc(100% - 200px) */
  max-width: none !important;
  margin: 0 !important;
}/* === PATCH MOBILE: centrage des "cartes" + marge pour la recherche === */@media (max-width: 790px) {  /* Gouttières globales dans la zone contenu */  .content main { padding-left: 16px; padding-right: 16px; }  /* Centrer les "cartes" (lignes transformées en blocs) et limiter la largeur */  table.tabloPerso { width: 100%; border-collapse: separate; border-spacing: 0; }  .tabloPerso tbody tr {    width: 100%;    max-width: 640px;        /* largeur max d’une carte */    margin: 0 auto 16px;     /* centrage + espace vertical */    padding-left: 12px;      /* un peu d’air à l’intérieur */    padding-right: 12px;  }  .tabloPerso tbody td { width: 100%; } /* chaque cellule prend toute la ligne */  /* La zone résultat et le bloc vide gardent aussi des gouttières */  .boiteResultat1, .boiteVide { padding-left: 12px; padding-right: 12px; margin-left:auto; margin-right:auto; }  /* Espace sous le champ de recherche DataTables + gouttières */  .dataTables_wrapper .dataTables_filter {    margin: 0 12px 16px;    padding: 0 0; /* tu peux mettre 0 12px si tu veux l’aligner aux cartes */  }  /* Petit espace entre label et input si besoin */  .dataTables_wrapper .dataTables_filter label { gap: 8px; display: inline-flex; align-items: center; }}/* === PATCH MOBILE : centrer le lien "Consulter" dans chaque carte === */@media (max-width: 790px) {  /* Si le lien est dans la dernière cellule de la "carte" (ligne transformée en bloc) */  .tabloPerso tbody tr td:last-child {    text-align: center;              /* centre le contenu de la cellule */  }  /* Le lien lui-même : le rendre compact et centré */  .tabloPerso tbody tr td:last-child a,  .tabloPerso tbody tr a.btn,        /* si tu utilises .btn pour le lien */  .tabloPerso tbody tr a.button {    /* ou .button */    display: inline-block;    margin: 10px auto 0;             /* espace au-dessus + centrage */  }  /* Si tu as une colonne "actions" dédiée, dé-commente:  .tabloPerso tbody tr td.actions { text-align:center; }  .tabloPerso tbody tr td.actions a { display:inline-block; margin:10px auto 0; }  */}