:root {
    --primary-color: #5FB3BC;
    --white:#ffffff;
    --bleu:#4496d2;
    --bleu-azur:#83d0f5;
    --bleu-light: #63bbff;
    --vert: #2abcc9;
    --vert-azur: #8dd7b8;
    --gris: #efefef;
    --dark: #222;
    --warning: #ffc107;
}

/* Générique */
html, body { height: 100%; }
body { font-family: Poppins, sans-serif; font-size: 1rem; overflow-x: hidden; }
label:hover { cursor:pointer; }
.btn-primary {
    padding: 0.625rem 1.5rem; font-weight: 600;
    background: var(--bleu); color:var(--white); border-radius: 9999px;
    transition: color .25s ease, background-color .25s ease, transform .2s ease;
    border:none;
}
.btn-primary:hover { background: var(--bleu-azur); }
.bootstrap-maxlength  { position: relative; background-color: white; }

.btn-warning {
    padding: 0.625rem 1.5rem; font-weight: 600;
    background: var(--warning); color:var(--bleu); border-radius: 9999px;
    transition: color .25s ease, background-color .25s ease, transform .2s ease;
    border:none;
}

/* LOGIN */
#page_login.not-connected-container {  height: 100vh; background:var(--bleu-azur) !important; }
#page_login .login-container { }
#page_login h1.form-title { color:var(--white); font-size:2rem; font-weight:normal !important; border-bottom: 1px solid var(--white); padding:0 0 20px; width:70%; margin:0 auto; }
#page_login p { font-size:1.5rem; font-weight:600; margin:30px auto 10px; }
#page_login #login-form, #forget-password-form, #change-password-form { background:var(--white); padding:2rem; max-width: 500px; margin:0 auto; border-radius:20px; box-shadow:0 8px 24px rgba(15,19,32,.08); }
#page_login input { background: var(--gris) }
#page_login a { text-align:center; color:var(--bleu); transition: all 0.3s ease; }
#page_login a:hover { text-decoration:none; }
#page_login button { margin:20px auto 0; }
#page_login .not-connected-container { height: 100vh; }
#page_login .not-connected-image-container { background: #fff url('https://ekoh-energies.fr/wp-content/uploads/2023/10/Ekoh-Energies-Small-baseline.svg') center/75% no-repeat; height: 100%; }


/* Top Bar */
#main-navbar { background-color: var(--bleu); }
#main-navbar span { color:var(--white); font-weight: 400; }
#main-navbar button, #main-navbar button i { background: var(--white); color:var(--bleu); font-weight: 400; }

/* Nav */
#sidebar { min-height: 100vh; background-color: var(--white) !important; border-right: solid 2px var(--bleu); width: 250px; transition: transform 0.3s ease-in-out; }
#sidebar .nav-link { color: var(--bleu); display: block; justify-content: space-between; align-items: center; border-radius: 9999px; transition: color .25s ease, background-color .25s ease, transform .2s ease; margin:0 auto 5px; }
#sidebar .nav-link.active { background-color: var(--bleu); color: var(--white); }
#sidebar .nav-link:hover { background-color: var(--bleu-azur); color: var(--white); }
#sidebar .dropdown { position: absolute; top: 93vh; }
#sidebar .dropdown a { background: var(--vert); color: var(--bleu); padding: 0.625rem 1.5rem; width:100%; border-radius: 9999px; transition: color .25s ease, background-color .25s ease, transform .2s ease; margin:0 auto; }
#sidebar .dropdown a:hover { background:var(--bleu-azur) }
#sidebar .dropdown a i { margin:0 7px 0 0; }
#sidebar .arrow { transition: transform 0.3s ease; display: inline-block; }
#sidebar .nav-link[aria-expanded="true"] .arrow { transform: rotate(90deg); }
#sidebar .sidebar-close { display: none; }

/* Card */
.card { background: var(--white); border-radius:20px; box-shadow:0 8px 24px rgba(15,19,32,.08); padding:2rem; --bs-card-border-color: var(--gris); }
.card header { }
.card header input { background: var(--gris); border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; padding: .45rem 1rem; }
.card header .input-group span.input-group-append button { padding: .5em 1em; }
.card header .list-inline { margin-right:0 !important; }

/* Datatable */
table.dataTable { width:90%; border-radius:10px; border:none; margin:10px auto 0; }
table.dataTable thead th { padding:.5rem 1rem; background:rgba(99,187,255,.4) !important; color:var(--bleu); font-weight:500; text-transform:capitalize; }
table.dataTable thead th:first-of-type { border-top-left-radius:10px; }
table.dataTable thead th:last-of-type { border-top-right-radius:10px; }
table.dataTable tbody td { padding:.5rem 1rem; font-weight: 500; }
table.dataTable tbody td a.btn-icon i { color:var(--bleu) !important; transition: color .25s ease, background-color .25s ease, transform .2s ease; }
table.dataTable tbody td .btn-icon:hover i { color:var(--bleu-azur) !important }
.dt-paging-button.page-item.active button { background-color:var(--bleu) !important; border-color: var(--bleu); transition: color .25s ease, background-color .25s ease, transform .2s ease; }
.dt-paging-button.page-item.active button:hover { background-color:var(--bleu-azur) !important; border-color: var(--bleu-azur) }
.dt-info { position: relative; left: 10px; bottom: 11px; }
.dt-toolbar { position: relative; top: 10px; left: 10px; }
.dt-paging { position: relative; right: 10px; }

/* Form */
input.form-control, textarea.form-control { background:var(--gris) }
.form-check-input:checked { background-color: var(--bleu) !important; border-color: var(--bleu) !important; }

/* Modal */
.modal h1 { font-size:2rem; border-bottom:1px solid var(--gris); padding:0 0 10px; }
.modal h1 + p { font-size:1.25rem;  border-bottom:1px solid var(--gris); padding:10px 0 10px 10px; }
.modal form { margin:20px 0 0; }
.modal button { padding: 0.625rem 1.5rem !important; }
.modal form .input-group a.btn-outline-secondary { background:var(--bleu); border:1px solid var(--bleu); color:var(--white); transition: color .25s ease, background-color .25s ease, transform .2s ease; }
.modal form .input-group a.btn-outline-secondary:hover { background:var(--bleu-azur); border:1px solid var(--bleu-azur); color:var(--white); }
.modal form .input-group label.btn-outline-secondary { margin:0 0 0 1px; padding: 7px 12px 7px 12px; background:var(--vert); border:1px solid var(--vert); color:var(--white); border-top-left-radius:0; border-bottom-left-radius:0; transition: color .25s ease, background-color .25s ease, transform .2s ease; }
.modal form .input-group label.btn-outline-secondary:hover { background:var(--vert-azur); border:1px solid var(--vert-azur); color:var(--white); }
.modal form .card { padding: 1rem; box-shadow: 0 8px 24px rgba(15,19,32,.2); margin:0 auto 20px !important; }
.modal form span.select2-container--default { width:100% !important; }
.modal form .select2-container .select2-selection--single { height:40px; }
.modal form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; }
.modal form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.modal form .select2-container--default .select2-selection--single .select2-selection__clear { height: 40px; margin-right: 10px; }

/* Intervention */
#eeInterventionform { font-size: .9rem; margin:30px 0 0; }
#eeInterventionform label.form-label { padding-top:7px; }
#eeInterventionform .select2-container .select2-selection--single { height:40px; }
#eeInterventionform .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 35px; }
#eeInterventionform .select2-container--default .select2-selection--single .select2-selection__arrow { height: 35px; }
#eeInterventionform .select2-container--default .select2-selection--single .select2-selection__clear { height: 35px; }
#eeInterventionform .accordion { --bs-accordion-border-width: 0; }
#eeInterventionform h2.accordion-header { border:none; }
#eeInterventionform h2.accordion-header + div { margin: 0 0 10px; }
#eeInterventionform .accordion-button::after { font-family: "Font Awesome 6 Free", sans-serif; font-weight: 900; content: "\f078"; display: inline-block; margin-left: auto; background-image: none !important; }
#eeInterventionform .accordion-body { padding: 0 1rem; }
#eeInterventionform button.accordion-button.level-1 { background-color: var(--bleu) !important; color: var(--white) !important; border-radius:20px !important; margin:0 0 10px; border:none; }
#eeInterventionform button.accordion-button.level-2 { background-color: var(--vert) !important; color: var(--white) !important; border-radius:20px !important; margin:0 0 10px; border:none; }
#eeInterventionform button.btn-secondary { --bs-btn-padding-x: 0.5rem; --bs-btn-padding-y: 0.1rem; background:var(--bleu); color:var(--white); border-color:var(--bleu); transition: color .25s ease, background-color .25s ease, transform .2s ease; }
#eeInterventionform button.btn-secondary:hover { background:var(--bleu-azur); border-color:var(--bleu-azur) }
#eeInterventionform button.btn-light { margin-top:3px; --bs-btn-padding-x: 0.5rem; --bs-btn-padding-y: 0.1rem; background:var(--vert); color:var(--white); border-color:var(--vert); transition: color .25s ease, background-color .25s ease, transform .2s ease; }
#eeInterventionform button.btn-light:hover { background:var(--vert-azur); border-color:var(--vert-azur) }
#eeInterventionform button.btn-secondary, #eeInterventionform button.btn-light { min-width:35px; }
#eeInterventionform ul.list-group .list-group-item { padding-top: 10px; }
#eeInterventionform button#submiteeInterventionform { padding: 0.625rem 1.5rem !important; }


/* Panel TOC */
#tocSave  { position: fixed; right: 16px; top: 120px; z-index: 10;  }
#tocSave.btn-primary {
    background-color: var(--vert) !important;
}

#tocToggle { position: fixed; right: 16px; top: 70px; z-index: 10; }
#tocPanel, #interventionPanel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 320px; background: var(--white); box-shadow: -6px 0 16px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .25s ease; z-index: 1000; display: none; flex-direction: column;
}
#tocPanel.open, #interventionPanel.open { transform: translateX(0); display: flex;}
#tocPanel header, #interventionPanel header { padding: 14px 16px; border-bottom: 1px solid #eee; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
#tocPanel header button, #interventionPanel button { padding: 4px 8px; }
#tocPanel header span { font-size: 1.2rem; }
#tocPanel .toc-body { overflow: auto; padding: 8px 0 16px; }
#tocPanel .toc-list{ list-style: none; margin: 0; padding: 0 8px 16px 8px; }
#tocPanel .toc-list li{ margin: 0; }
#tocPanel .toc-list a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--dark); transition: background-color .2s ease; font-size: .85rem; line-height: 1.2; }
#tocPanel .toc-list a:hover{ background: var(--bleu-azur); color:var(--white) }
#tocPanel .toc-list a.level-2{ padding-left: 28px; font-size: .9rem; }
#tocPanel footer{ margin-top: auto; padding: 10px 12px; border-top: 1px solid #eee; }

/* Overlay */
#overlay { position: fixed; top: 0; left: 0; z-index: 8888; width: 100%; height:100%; display: none; background: rgba(0,0,0,0.6); }
.cv-spinner { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; }
.spinner { width: 40px; height: 40px; border: 4px #ddd solid; border-top: 4px #088E08 solid; border-radius: 50%; animation: sp-anime 0.8s infinite linear; }
@keyframes sp-anime { 100% { transform: rotate(360deg); } }
.is-hide{ display:none; }

/* Responsive */
@media (max-width: 768px) {
    #sidebar { position: fixed; top: 0; left: 0; transform: translateX(-100%); z-index: 1050; }
    #sidebar.show { transform: translateX(0); }
    #sidebar .sidebar-close { display: block; text-align: right; }
    #eeInterventionform .accordion-body { padding: 0; }
    #eeInterventionform ul.list-group li.list-group-item > .row > div:nth-child(1) { margin:0 0 10px; }
}
@media (max-width: 390px) {
    #page_login #login-form { padding: 2rem .5rem; }
    /*#tocToggle { top: 110px; }*/
    #main-navbar span { margin:0; }
    #main-navbar + .container { width:100vw; }
    .card { padding: 1rem; }
    .dropdown.dropleft { width:100%; text-align: right; }
}


/* UPLOAD D'IMAGES */
.upload-box {
    width: 300px;
    /*min-height: 200px;*/
    border: 2px dashed #888;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    text-align: center;
    transition: background 0.2s, border-color 0.2s;
    padding: 10px;
}
.upload-box.dragover {
    border-color: #333;
    background-color: #f8f8f8;
}
.message {
    margin-top: 10px;
    font-size: 14px;
}
.message.success {
    color: green;
}
.message.error {
    color: red;
}

.message {
    margin-top: 10px;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.8s ease; /* transition douce */
}

.message.hidden {
    opacity: 0;
}

.preview-gallery {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.preview-item {
    position: relative;
    display: inline-block;
}
.preview-item img {
    min-width: 110px;
    max-width: 120px;
    border-radius: 8px;
}
.remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(231, 76, 60, 0.9);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 7px;
}


.grid-bloc-clone { display: none; }

.grid-bloc-rename-button { color: var(--bleu); margin-left: -25px;}

.grid-bloc-clone-button i { color: var(--bleu); font-size: 25px;}

.form-switch-xl .form-check-input {
    transform: scale(1.6);
    margin-left: -2.5rem; /* ajuste l’alignement */
    cursor: pointer;
}

.form-switch-xl .form-check-label {
    padding-left: 0.5rem;
    font-size: 1.1rem;
}

.form-switch-danger .form-check-input:checked {
    background-color: red !important;
    border-color: red !important;
}

/* WARNING */
.form-switch-warning .form-check-input:checked {
    background-color: orange !important;
    border-color: orange !important;
}

/* Optionnel : meilleure visibilité du bouton */
.form-switch-danger .form-check-input,
.form-switch-warning .form-check-input {
    cursor: pointer;
}
/* ==========================================================================
Mode Hors ligne
========================================================================== */
body.offline #resources-dropdown-button {
    display: none;
}

body.offline #main-navbar {
    background-color: var(--warning);
}

body.offline #tocSave, body.offline #submiteeInterventionform {
    background-color: var(--warning) !important;
}

body #offlineSwitchLabel {
    font-weight: normal;
}

body.offline #offlineSwitchLabel {
    font-weight: bold !important;
}

/*.grid-bloc-clone-button {*/
/*    position: absolute;*/
/*    right: 38px;*/
/*    z-index: 2;*/
/*    top: 75px;*/
/*}*/