@import url(https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap);
/* assets/styles/app.css */


/* =========================================
   1. CONFIGURATION & VARIABLES (CSS Custom Properties)
   Remplacement de map-get($theme-colors, "...") et lighten/darken
   ========================================= */
:root {
    /* Couleurs de base (À ajuster selon vos codes hex exacts si différents) */
    --dlp-red: #c42114;       /* Exemple pour "dlpred" (jaune/vert chartreuse selon votre logo) */
    --dlp-green: #ccd343;     /* Exemple pour "dlpgreen" */
    --dlp-grey: #929292;      /* Exemple pour "dlpgrey" */
    --dlp-grey-light: #f8f9fa;
    --dlp-black: #000000;

    /* Couleurs calculées dynamiquement (Remplacement de lighten/darken) */
    /* Syntaxe: color-mix(in srgb, couleur, blanc/noir %pourcentage) */
    --dlp-red-light: color-mix(in srgb, var(--dlp-red), white 20%);
    --dlp-red-lighter: color-mix(in srgb, var(--dlp-red), white 50%);
    --dlp-green-light: color-mix(in srgb, var(--dlp-green), white 20%);
    --dlp-green-lighter: color-mix(in srgb, var(--dlp-green), white 30%);
    --dlp-grey-lighter: color-mix(in srgb, var(--dlp-grey), white 30%);
    --dlp-grey-darker: color-mix(in srgb, var(--dlp-grey), black 30%);
    --dlp-green-darker: color-mix(in srgb, var(--dlp-green), black 20%);

    /* Configuration globale */
    --font-size-base: 0.8rem;
    --z-index-alert: 9999;
    --z-index-modal: 1035;
    --z-index-drag: 90;

    --header-bg-image: url(/build/images/dlp-header-bg.9738b357.jpg);

    /* Variables de configuration (à adapter à votre charte) */
    --lb-z-index: 9999;
    --lb-bg: black;
}

.bg-primary {
    background-color: var(--dlp-green) !important;
    border-color: var(--dlp-green) !important;
    color: var(--dlp-black) !important;
}
.bg-secondary {
    background-color: var(--dlp-grey) !important;
    color: var(--dlp-black) !important;
}
.bg-tertiary {
    background-color: var(--dlp-red) !important;
    color: var(--dlp-green-lighter) !important;
}

.btn-primary {
    background-color: var(--dlp-green) !important;
    border-color: var(--dlp-green) !important;
    color: white !important;
}
.btn-secondary {
    background-color: var(--dlp-grey) !important;
    border-color: var(--dlp-grey) !important;
    color: white !important;
}
.btn-tertiary {
    background-color: var(--dlp-red) !important;
    border-color: var(--dlp-red) !important;
    color: white !important;
}

.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--dlp-green) !important;
    color: var(--dlp-green) !important;
}
.btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--dlp-grey) !important;
    color: var(--dlp-grey) !important;
}
.btn-outline-tertiary {
    background-color: transparent !important;
    border-color: var(--dlp-red) !important;
    color: var(--dlp-red) !important;
}

.btn-xs{
    padding: .25rem .5rem;
    font-size: .75rem;
}


.text-small{
    font-size: 0.6em;
}

.text-primary{
    color: var(--dlp-red) !important;
}
.text-secondary {
    color: var(--dlp-green) !important;
}
.text-muted{
    color: var(--dlp-grey-darker) !important;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;

}

body {
    background-color: var(--dlp-black);
    color: var(--dlp-grey);
    font-family: 'Titillium Web', Helvetica, Arial, sans-serif;
    /* Si vous avez la classe .easyadmin sur le body, gardez cette sélecteur */
    &.easyadmin {
        background-color: #e3e7ed;
    }
}

button {
    background-color: transparent; /* 'none' n'est pas valide pour background-color */
}

a {
    color: var(--dlp-grey);
    text-decoration: none; /* Bonne pratique moderne */

    &:hover {
        color: var(--dlp-grey-lighter);
        text-decoration: underline;
    }
}

/* =========================================
   3. COMPOSANTS FORMULAIRES & SLIDERS
   ========================================= */
/* Slider personnalisé (Range) */
.custom-range-dlpred {
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: var(--dlp-red);
        cursor: pointer;
        border-radius: 50%; /* Ajout moderne pour la rondeur */

        &:active {
            background: var(--dlp-green-light);
        }
    }

    &::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: var(--dlp-red);
        cursor: pointer;
        border: none; /* Reset Firefox */
        border-radius: 50%;

        &:active {
            background: var(--dlp-green-light);
        }
    }
}

/* Custom Controls (Checkboxes/Radios Bootstrap 4 legacy) */
/* Note: Bootstrap 5 utilise .form-check. Si vous migrez完全, adaptez les classes.
   Ici on garde vos classes pour le résultat identique. */
.form-check-input:checked {
    background-color: var(--dlp-green) !important;
    color: var(--dlp-green) !important;
    border-color: var(--dlp-green) !important;
}

.form-check-input:checked:active {
    background-color: var(--dlp-green-light) !important;
    color: var(--dlp-green-light) !important;
    border-color: var(--dlp-green-light) !important;
}

.form-check-input:not(:checked) {
    background-color: var(--dlp-red) !important;
    color: var(--dlp-red) !important;
    border-color: var(--dlp-red) !important;
}

.form-check-input:not(:checked):active {
    background-color: var(--dlp-red-light) !important;
    color: var(--dlp-red-light) !important;
    border-color: var(--dlp-red-light) !important;
}

.form-check-input:not(:checked):focus {
    background-color: var(--dlp-red-lighter) !important;
    color: var(--dlp-red-lighter) !important;
    border-color: var(--dlp-red-lighter) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23B86D67FF%27/%3e%3c/svg%3e");
}

/* =========================================
   4. NAVIGATION & LAYOUT
   ========================================= */
.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

.navbar-light .navbar-nav {
    .active > .nav-link,
    .nav-link.active,
    .nav-link.show,
    .show > .nav-link {
        &:active {
            border-color: transparent;
        }
    }
}

#breadcrumb {
    --bs-breadcrumb-divider: '>';
    opacity: 0.8;
    ol.breadcrumb {
        background-color: transparent;
        border-radius: 0;

        li.breadcrumb-item {
            a {
                color: var(--dlp-green);
            }
        }
        li.breadcrumb-item::before {
            color: var(--dlp-green-lighter);
        }
    }
}

.nav-tabs{
    .nav-item{
        &:not(:first-child){
            margin-left: 3px;
        }
        .nav-link{
            border-color: var(--dlp-grey);
            background-color: var(--dlp-grey-darker);
            color: var(--dlp-green-darker);
            &:hover {
                border-color: var(--dlp-green-darker);
            }
            &.active{
                border-color: var(--dlp-grey-darker);
                background-color: var(--dlp-grey);
                color: var(--dlp-green-lighter);
            }
        }
    }
}

/* Header / Jumbotron modernisé mais visuellement identique */
header {
    background-image: var(--header-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0;
    padding: 1rem 1rem;
    will-change: background-position;
}

/* =========================================
   5. COMPOSANTS SPÉCIFIQUES (Visio, Cards, Alerts)
   ========================================= */
a.visio-link {
    position: relative;
    display: inline-block; /* Sécurité pour le positionnement */

    .img-thumbnail {
        cursor: pointer;
    }

    .comment-count {
        position: absolute;
        top: -0.3rem;
        right: -0.3rem;
        opacity: 0.9;
        transition: opacity 0.2s ease;
    }

    .photo-date {
        position: absolute;
        bottom: 1rem;
        left: 0;
        display: block;
        width: 100%;
        text-align: center;
        /* Fallback + Moderne */
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
        color: white;
    }

    &:hover {
        .comment-count {
            opacity: 1;
        }
    }
}

.dlp-card > .list-group {
    border-top: initial;
    border-bottom: initial;
}

/* Alertes fixes en haut */
.alert-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-index-alert);

    .alert {
        border-radius: 0;
        margin-bottom: 0; /* Reset Bootstrap */
    }
}

.badge-xs {
    font-size: 45%;
    vertical-align: middle;
}

/* Homepage Container */
.dlp-card {
    border: 3px solid white;
    border-radius: 0;

    .list-group {
        .updatedate {
            background-color: #999;
            font-weight: bold;
            color: white;
        }

        .list-group-item {
            background-color: transparent; /* 'none' remplacé par transparent */
            padding: 0.25rem 1.25rem;

            &.list-group-item-dlpgrey {
                background-color: rgba(0, 0, 0, 0);
                color: white;
            }

            &:last-child {
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        &:last-child {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    .card-header {
        font-weight: bolder;
        font-size: 1.2rem;
        color: white;
    }
}

.photo-column{
    a.dlp-card{
        img.card-img-top{
            border: solid 1px var(--dlp-black) !important;
            border-radius: 3px;
        }
    }
}

.footer-help-link {
    color: var(--dlp-green-lighter);
    opacity: 0.5;
    transition: opacity 0.2s ease, color 0.2s ease;

    &:hover {
        opacity: 1;
        color: var(--dlp-green);
        text-decoration: none;
    }
}

/* Google Slides Container (Aspect Ratio Box) */
.google-slides-container {
    position: relative;
    width: 100%;
    /* Moderne : aspect-ratio remplace le padding-top hack */
    aspect-ratio: 10 / 6;
    overflow: hidden;

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
}

/* =========================================
   6. GESTION DES FACES & COORDONNÉES
   ========================================= */
.square-face {
    position: relative;
    text-align: center;
    min-height: 30px;

    ul {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        text-align: center;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
        color: white;
    }
}

.face-link.active, .visio-link.active {
    .img-thumbnail {
        border: 3px solid var(--dlp-green); /* Ou dlpred selon le contexte */
    }
}
/* Correction spécifique pour .visio-link.active si couleur différente */
.visio-link.active .img-thumbnail {
    border-color: var(--dlp-red);
}

/* Le conteneur principal qui prend tout l'écran */
#lightbox-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: var(--lb-z-index);
    background-color: var(--lb-bg);
    display: none; /* Caché par défaut */
    flex-direction: column;
    overflow: hidden;
}

/* Quand la lightbox est active (ajouté via JS) */
#lightbox-wrapper.active {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

/* Animation d'apparition */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Zone centrale de l'image */
.lb-content-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lb-content-image img {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Barre d'outils en haut */
.lb-toolbar {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Boutons de navigation (Flèches) */
.lb-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 20px 10px;
    cursor: pointer;
    opacity: 0.3; /* Caché par défaut */
    transition: opacity 0.3s;
    z-index: 100;
    width: 50%;
    height: 33%;
    i{
        display: block;
    }
}

.lb-nav-btn:hover {
    opacity: 1 !important; /* Visible au survol */
}

.lb-prev { left: 10px; }
.lb-next { right: 10px; }

/* Panneaux latéraux (Infos/Commentaires) */
.lb-panel {
    position: absolute;
    top: 60px; /* Hauteur de la toolbar */
    bottom: 0;
    width: 350px;
    background: rgba(30, 30, 30, 0.95);
    color: white;
    overflow-y: auto;
    padding: 20px;
    display: none; /* Caché par défaut */
    border-left: 1px solid rgba(255,255,255,0.1);
}

.lb-panel.active {
    display: block;
    animation: slideIn 0.3s ease-out;
}

.lb-panel.left { left: 0; border-left: none; border-right: 1px solid rgba(255,255,255,0.1); }
.lb-panel.right { right: 0; }

@keyframes slideIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Face Coord Board */
.facecoord-board-frame {
    position: relative;
}

.faceplace {
    position: absolute;
    z-index: var(--z-index-drag);
    cursor: grab;

    &.draggiefp {
        cursor: move;
    }
}

.newfaceplace {
    border: 1px solid var(--dlp-red);
    background-color: rgba(0, 0, 0, 0.3); /* Approximation de la couleur foncée transparente */
}

.existfaceplace {
    border: 1px solid var(--dlp-grey-lighter);
    background-color: rgba(255, 255, 255, 0.3);
}

.faceplace-delete {
    color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 2px;
    right: 5px;
    cursor: pointer;
    transition: color 0.2s;

    &:hover {
        color: var(--dlp-red);
    }
}

.facenom {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 2px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--dlp-grey-lighter);
    color: var(--dlp-grey-lighter);
    font-size: 0.8em;
}

.facecoord-board-active {
    cursor: crosshair;
}

#face-list {
    li {
        cursor: pointer;
        &:hover {
            color: var(--dlp-green);
        }
    }
}

.displayed-face {
    position: absolute;
    border: 1px solid var(--dlp-grey-lighter);
    background-color: rgba(255, 255, 255, 0.3);

    span {
        color: var(--dlp-grey-lighter);
        position: absolute;
        top: 1%;
        right: 1%;
    }
}

.facecoord-board {
    max-height: 800px;
}

#mySubjectsTabContent{
    i:before{
        display: block;
        width: 100%;
        height: 100%;
    }
}

#map {
    display: none;
}

/* =========================================
   7. MODALS & PAGINATION
   ========================================= */
.event-list-item {
    a.event-title.text-dlpgreen {
        &:hover {
            text-decoration: none;
            color: var(--dlp-red) !important;
        }
    }

    a.event-title.text-dlpgreen.border-dlpgreen {
        &:hover {
            border-color: var(--dlp-red) !important;
        }
    }
}

/* Ajustement Modal Close (Legacy Bootstrap 4 fix) */
.modal-body {
    position: relative;
    padding: 0;
}
.close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

.archive-years, .bootstrap-select .dropdown-menu {
    z-index: 1100;
}

/* Dropdowns personnalisés */
.dropdown, .dropleft {
    .dropdown-menu {
        .dropdown-item {
            &.active {
                background-color: var(--dlp-red);
                color: var(--dlp-grey-lighter);
            }
            &:active {
                background-color: var(--dlp-red-lighter);
                color: var(--dlp-grey-darker);
            }
        }
    }
}

/* Pagination */
.page-item {
    color: var(--dlp-green);

    .page-link {
        background-color: var(--dlp-grey);
        border-color: var(--dlp-grey-darker);
        color: var(--dlp-green);
    }

    &.active {
        .page-link {
            background-color: var(--dlp-red);
            border-color: var(--dlp-red);
            color: var(--dlp-green);
        }
    }

    &.disabled {
        .page-link {
            background-color: var(--dlp-grey-lighter);
            border-color: var(--dlp-grey-lighter);
        }
    }
}

/* =========================================
   8. VIDÉO & ZIP
   ========================================= */
.zip-thumb {
    position: relative;

    .remove-from-zip {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

.video-link {
    &:hover {
        text-decoration: none;

        .seconds-to-time {
            visibility: visible;
        }
    }

    .seconds-to-time {
        visibility: hidden;
        color: var(--dlp-grey);
    }
}

.total-video-time {
    cursor: pointer;
}

.video-embed-frame {
    border: 1px solid var(--dlp-grey-darker);
    width: 100%;
    height: 100%;
}

/* Tooltips personnalisés */
.tooltip {
    .tooltip-inner {
        color: var(--dlp-grey-darker);
        background-color: var(--dlp-green);
    }

    /* Flèches (Compatibilité Bootstrap 4/5) */
    &.bs-tooltip-auto[x-placement^="top"] .arrow::before,
    &.bs-tooltip-top .arrow::before {
        border-top-color: var(--dlp-green);
    }

    &.bs-tooltip-auto[x-placement^="right"] .arrow::before,
    &.bs-tooltip-right .arrow::before {
        border-right-color: var(--dlp-green);
    }

    &.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
    &.bs-tooltip-bottom .arrow::before {
        border-bottom-color: var(--dlp-green);
    }

    &.bs-tooltip-auto[x-placement^="left"] .arrow::before,
    &.bs-tooltip-left .arrow::before {
        border-left-color: var(--dlp-green);
    }
}

/* =========================================
   9. RESPONSIVE (Media Queries)
   Utilisation de clamp() pourrait être fait, mais on garde la structure exacte demandée
   ========================================= */

/* Extra Small devices (vertical phones, < 576px) */
@media (max-width: 575.98px) {
    html {
        font-size: 1rem;
    }
    header {
        padding: 2rem 2rem 0 2rem;
        h1 {
            font-size: 1.3rem;
            text-shadow: 0 3px 4px #FFFFFF;
        }
    }
}

/* Small devices (landscape phones, >= 576px) */
@media (min-width: 576px) {
    html {
        font-size: 0.80rem;
    }
    header {
        padding: 2rem 2rem 0 2rem;
        h1 {
            font-size: 1.3rem;
            text-shadow: 0 3px 4px #FFFFFF;
        }
    }
}

/* Medium devices (tablets, >= 768px) */
@media (min-width: 768px) {
    html {
        font-size: 0.80rem;
    }
    header {
        padding: 5rem 2rem 0 2rem;
        h1 {
            font-size: 1.3rem;
        }
    }
}

/* Large devices (desktops, >= 992px) */
@media (min-width: 992px) {
    html {
        font-size: 0.90rem;
    }
    header {
        padding: 7rem 2rem 0.5rem 2rem;
        h1 {
            font-size: 1.5rem;
        }
    }
}

/* Extra large devices (large desktops, >= 1200px) */
@media (min-width: 1200px) {
    html {
        font-size: 1.00rem;
    }
    header {
        padding: 8rem 2rem 0.5rem 2rem;
        h1 {
            font-size: 2.1rem;
        }
    }
}