/* === COMPONENTS - Boutons, alertes, images, listes, badges, modales === */

/* === BOUTONS === */

.btn-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacement-sm);
    margin: var(--espacement-sm);
    flex-wrap: wrap;
}

/* Mobile: boutons empilés */
.btn-container a.btn,
.btn-container button.btn {
    flex: 1 1 100%;
    min-width: 120px;
}

/* Tablet+: boutons en ligne */
@media (min-width: 768px) {

    .btn-container a.btn,
    .btn-container button.btn {
        flex: 1;
        min-width: auto;
    }
}

.cadre,
.btn {
    border: none;
    border-radius: var(--rayon-sm);
    padding: var(--espacement-xs) var(--espacement-sm);
    font-weight: var(--poids-demi-gras);
    font-size: 80%;
    cursor: pointer;
    transition: background var(--transition-normale), opacity var(--transition-normale);
    color: #fff !important;
}

@media (max-width: 767px) {

    .cadre,
    .btn {
        font-size: 90%;
        padding: var(--espacement-xs) var(--espacement-xs);
    }
}

.ui-filterbar .btn {
    font-size: 100%;
    padding: var(--espacement-xs) var(--espacement-sm);
}

.btn a {
    color: inherit;
}

/* Bouton primaire */
.btn-primary {
    background-color: var(--couleur-primaire) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--couleur-primaire-fonce) !important;
}

/* Bouton secondaire */
.btn-secondary {
    background-color: var(--couleur-secondaire) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--couleur-secondaire-fonce) !important;
}

/* Bouton succès */
.btn-success {
    background-color: var(--couleur-succes-fonce) !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--couleur-succes) !important;
}

/* Bouton danger */
.btn-danger {
    background-color: var(--couleur-danger-fonce) !important;
    border-color: var(--couleur-danger-fonce) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--couleur-danger) !important;
    border-color: var(--couleur-danger) !important;
}

/* Bouton avertissement (warning) */
.btn-warning {
    background-color: var(--Orange1) !important;
    border-color: var(--Orange1) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--couleur-avertissement) !important;
    border-color: var(--couleur-avertissement) !important;
}

/* Bouton info */
.btn-info {
    background-color: var(--GrisBleu3) !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--GrisBleu5) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    border: var(--largeur-bordure-fine) solid currentColor;
    background-color: transparent !important;
}

.btn-outline-primary {
    color: var(--couleur-primaire-fonce) !important;
}

.btn-outline-secondary {
    color: var(--couleur-secondaire) !important;
}

.btn-outline-success {
    color: var(--couleur-succes) !important;
}

.btn-outline-danger {
    color: var(--couleur-danger) !important;
}

.btn-outline-warning {
    color: var(--couleur-avertissement-fonce) !important;
}

.btn-outline-info {
    color: var(--couleur-info) !important;
}

.btn-cadre {
    border: var(--largeur-bordure-fine) solid var(--couleur-primaire);
    background-color: var(--couleur-arriere-plan);
    color: var(--couleur-primaire) !important;
}

/* Hover pour les btn-cadre (boutons et liens uniquement) */
button.btn-cadre:hover,
a.btn-cadre:hover {
    color: var(--couleur-primaire-clair) !important;
}

/* Pas de hover sur les selects */
select.btn-cadre:hover {
    color: var(--couleur-primaire) !important;
}

.btn-cadre.active {
    border: var(--largeur-bordure-fine) solid var(--couleur-primaire);
    background-color: var(--couleur-primaire) !important;
    color: var(--couleur-primaire-clair) !important;
}

/* Bouton pour les gros menus */
.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
    max-width: 1500px;
}

.custom-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    border-radius: var(--rayon-md);
    color: var(--couleur-primaire) !important;
    cursor: pointer;
    transition: transform var(--transition-normale), box-shadow var(--transition-normale);
    box-shadow: var(--ombre-md);
    border: none;
    text-align: center;
}

@media (min-width: 1000px) {

    .button-container {
        gap: 25px;
        padding: var(--espacement-xl);
    }

    .custom-button {
        flex-basis: 150px;
        height: 150px;
        margin: var(--espacement-sm);
        font-size: 20px;
    }

    .custom-button i {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .button-container a,
    .button-container button {
        min-width: 200px;
    }
}

@media (max-width: 1000px) {
    .button-container {
        gap: var(--espacement-lg);
        padding: var(--espacement-sm);
    }

    .custom-button {
        flex-basis: 75px;
        height: 75px;
        margin: 2px;
        font-size: 15px;
    }

    .custom-button i {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .button-container a,
    .button-container button {
        min-width: 100px;
    }
}

.button-container a,
.button-container button {
    text-decoration: none;
    flex-grow: 1;
}

.custom-button:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre-lg);
}

/* === ALERTES === */

/* Base commune pour tous les alerts */
.alert {
    padding: var(--espacement-md) var(--espacement-lg);
    margin-bottom: var(--espacement-lg);
    border: var(--largeur-bordure-normale) solid;
    border-radius: var(--rayon-md);
    font-size: var(--taille-base);
    line-height: var(--hauteur-ligne-normale);
    position: relative;
    box-shadow: var(--ombre-sm);
}

.alert strong {
    font-weight: var(--poids-demi-gras);
}

.alert a {
    font-weight: var(--poids-demi-gras);
    text-decoration: underline;
}

/* Bouton de fermeture (si utilisé) */
.alert .btn-close,
.alert .close {
    position: absolute;
    top: var(--espacement-sm);
    right: var(--espacement-sm);
    padding: 0;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
}

.alert .btn-close:hover,
.alert .close:hover {
    opacity: 1;
}

/* SUCCESS - Vert forêt */
.alert-success {
    background-color: rgba(11, 102, 35, 0.08);
    border-color: var(--couleur-succes);
    color: var(--VertForet1);
}

.alert-success a {
    color: var(--VertForet2);
}

.alert-success a:hover {
    color: var(--VertForet4);
}

.alert-success::before {
    content: "✓ ";
    font-weight: var(--poids-gras);
    font-size: 1.2rem;
    color: var(--couleur-succes);
    margin-right: var(--espacement-sm);
}

/* ERROR - Orange (avertissement modéré) */
.alert-error {
    background-color: rgba(255, 149, 1, 0.08);
    border-color: var(--couleur-avertissement-fonce);
    color: var(--couleur-secondaire);
}

.alert-error a {
    color: var(--Orange1);
}

.alert-error a:hover {
    color: var(--couleur-avertissement);
}

.alert-error::before {
    content: "⚠ ";
    font-weight: var(--poids-gras);
    font-size: 1.2rem;
    color: var(--couleur-avertissement-fonce);
    margin-right: var(--espacement-sm);
}

/* DANGER - Rouge (critique) */
.alert-danger {
    background-color: rgba(184, 0, 0, 0.06);
    border-color: var(--couleur-danger);
    color: var(--couleur-danger-fonce);
}

.alert-danger a {
    color: var(--Rouge2);
}

.alert-danger a:hover {
    color: var(--Rouge4);
}

.alert-danger::before {
    content: "✗ ";
    font-weight: var(--poids-gras);
    font-size: 1.2rem;
    color: var(--couleur-danger);
    margin-right: var(--espacement-sm);
}

/* WARNING - Jaune (attention légère) */
.alert-warning {
    background-color: rgba(255, 235, 59, 0.12);
    border-color: var(--Jaune2);
    color: var(--couleur-secondaire);
}

.alert-warning a {
    color: var(--couleur-primaire);
}

.alert-warning a:hover {
    color: var(--couleur-primaire-clair);
}

.alert-warning::before {
    content: "⚡ ";
    font-weight: var(--poids-gras);
    font-size: 1.2rem;
    color: var(--couleur-primaire-fonce);
    margin-right: var(--espacement-sm);
}

/* INFO - Bleu */
.alert-info {
    background-color: rgba(0, 76, 131, 0.05);
    border-color: var(--couleur-info);
    color: var(--Bleu1);
}

.alert-info a {
    color: var(--couleur-info);
}

.alert-info a:hover {
    color: var(--Bleu5);
}

.alert-info::before {
    content: "ℹ ";
    font-weight: var(--poids-gras);
    font-size: 1.2rem;
    color: var(--couleur-info);
    margin-right: var(--espacement-sm);
}

/* DEBUG - Gris (rare, utilisé uniquement en développement) */
.alert-debug {
    background-color: rgba(51, 51, 51, 0.05);
    border-color: var(--Gris3);
    color: var(--couleur-texte);
}

.alert-debug a {
    color: var(--Gris2);
}

.alert-debug a:hover {
    color: var(--Gris4);
}

.alert-debug::before {
    content: "⚙ ";
    font-weight: var(--poids-gras);
    font-size: 1.2rem;
    color: var(--Gris3);
    margin-right: var(--espacement-sm);
}

/* Style pour messages avec tag "safe" (HTML autorisé) */
.alert.safe a {
    color: inherit;
}

/* Animation d'apparition */
.alert {
    animation: slideDown var(--transition-normale) ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation de fermeture */
.alert.fade-out {
    animation: fadeOut var(--transition-normale) ease-out forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .alert {
        padding: var(--espacement-sm) var(--espacement-md);
        font-size: var(--taille-sm);
    }

    .alert::before {
        font-size: 1rem;
    }
}

/* Liste dans les alerts */
.alert ul {
    margin-bottom: 0;
    padding-left: var(--espacement-lg);
}

.alert ul li {
    margin: var(--espacement-xs) 0;
}

/* Titre dans les alerts */
.alert .alert-heading {
    font-size: var(--taille-lg);
    font-weight: var(--poids-demi-gras);
    margin-bottom: var(--espacement-sm);
    color: inherit;
}

/* Alert dismissible avec Bootstrap */
.alert-dismissible {
    padding-right: 3rem;
}

/* === IMAGES et ILLUSTRATIONS === */

.logo6 {
    height: 6rem;
}

.illustration {
    margin: 20px 0;
    width: 100%;
    clear: both;
    position: relative;
}

.image-wrapper {
    position: relative;
}

.illustration.left {
    float: left;
    margin-right: 15px;
}

.illustration.right {
    float: right;
    margin-left: 15px;
}

.illustration.centre {
    text-align: center;
    margin: 0 auto;
    clear: both;
}

.illustration.full {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    clear: both;
}

.illustration img {
    width: 100%;
    border-radius: 5px;
    display: block;
}

.illustration .legende {
    font-size: 0.85rem;
    text-align: center;
    color: #666;
    margin-top: 5px;
}

.credit {
    position: absolute;
    font-size: 0.7rem;
    opacity: 0.6;
    color: #aaa;
    padding: 2px 5px;
    border-radius: 3px;
}

:not(.zoom-info) .credit {
    bottom: 2px;
}

.illustration:hover .credit {
    background: rgba(255, 255, 255, 0.8);
    color: #666;
}

.credit.left {
    left: 10px;
}

.credit.right {
    right: 10px;
}

/* Styles par défaut pour les petits écrans */
.illustration.left,
.illustration.right,
.illustration.centre {
    width: 45%;
}

/* Styles pour les écrans larges */
@media (min-width: 1000px) {

    .illustration.left,
    .illustration.right,
    .illustration.centre {
        width: 33%;
    }
}

.illustration.small .legende,
.illustration.small .credit {
    display: none;
}

/* === MODAL ZOOM === */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.modal img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    cursor: pointer;
}

/* Modal centré et contenu en colonne */
#imageModal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Image responsive */
#imageModal img#imgZoom {
    max-width: 90%;
    max-height: 80vh;
    margin: auto;
}

/* Légende et crédit sous l'image */
#imageModal .zoom-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
}

#imageModal .zoom-info .legende {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.25rem;
}

#imageModal .zoom-info .credit {
    font-size: 0.75rem;
    color: #aaa;
    opacity: 0.8;
    bottom: auto;
}

/* === BADGES et TAGS === */

.badge {
    display: inline-block;
    padding: var(--espacement-xs) var(--espacement-sm);
    border-radius: var(--rayon-plein);
    font-size: var(--taille-sm);
    font-weight: var(--poids-demi-gras);
    background-color: var(--couleur-primaire);
    color: #fff;
}

.badge-success {
    background-color: var(--couleur-succes);
}

.badge-danger {
    background-color: var(--couleur-danger);
}

.badge-warning {
    background-color: var(--couleur-avertissement);
}

.badge-info {
    background-color: var(--couleur-info);
}

/* Badge pill - badge arrondi */
.badge-pill {
    border-radius: 999px;
    padding: var(--espacement-xs) var(--espacement-sm);
    font-size: var(--taille-sm);
    display: inline-block;
    background-color: var(--couleur-primaire);
    color: #fff;
}

/* === BREADCRUMBS === */

.breadcrumb {
    background-color: var(--couleur-background-clair);
    border-radius: var(--rayon-sm);
    padding: var(--espacement-md);
    border-left: 4px solid var(--couleur-primaire);
    margin-bottom: var(--espacement-md);
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--couleur-texte-clair);
}

.breadcrumb-item.active {
    color: var(--couleur-primaire-fonce);
    font-weight: var(--poids-demi-gras);
}

/* === PAGINATION === */

.pagination {
    display: flex;
    justify-content: center;
    gap: var(--espacement-xs);
    margin: var(--espacement-lg) 0;
    flex-wrap: wrap;
}

/* Mobile: pagination compacte */
@media (max-width: 767px) {
    .pagination {
        gap: 4px;
        margin: var(--espacement-md) 0;
    }
}

.page-link {
    padding: var(--espacement-xs) var(--espacement-sm);
    border: var(--largeur-bordure-fine) solid var(--couleur-primaire);
    border-radius: var(--rayon-sm);
    color: var(--couleur-primaire);
    text-decoration: none;
    transition: background var(--transition-normale), color var(--transition-normale);
    font-size: var(--taille-base);
}

/* Mobile: boutons pagination plus petits */
@media (max-width: 767px) {
    .page-link {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

.page-link:hover {
    background-color: var(--couleur-primaire);
    color: #fff;
}

.page-link.active {
    background-color: var(--couleur-primaire);
    color: #fff;
    border-color: var(--couleur-primaire);
}

.page-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-item.active .page-link {
    background-color: var(--couleur-primaire);
    border-color: var(--couleur-primaire-clair);
}

/* === LISTES === */

/* Conteneur principal */
.list-container {
    display: flex;
    flex-direction: column;
}

/* Élément de liste */
.list-item {
    padding: var(--espacement-md);
    border-bottom: var(--largeur-bordure-fine) solid #e0e0e0;
    transition: background-color var(--transition-rapide);
}

.list-item:hover {
    background-color: var(--couleur-secondaire-clair);
}

/* Wrapper principal - flexbox row */
.list-item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--espacement-sm);
}

/* Mobile: layout en colonne avec actions en bas */
@media (max-width: 767px) {
    .list-item-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--espacement-xs);
    }
}

/* Contenu - image + infos */
.list-item-content {
    min-width: 0;
    flex: 1;
}

/* En-tête - nom + email/subtitle */
.list-item-header {
    display: flex;
    align-items: center;
    gap: var(--espacement-xs);
    min-width: 0;
}

/* Métadonnées - badges, dates, etc. */
.list-item-meta {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--espacement-xs);
    flex-wrap: wrap;
}

/* Mobile: badges empilés */
@media (max-width: 767px) {
    /*.list-item-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--espacement-xs);
    }

    /* Cacher description en mobile pour économiser l'espace * /
    .list-item-description {
        display: none;
    }*/
}

/* Description - intro texte */
.list-item-description {
    margin-top: var(--espacement-sm);
    font-size: var(--taille-sm);
    opacity: 0.85;
}

/* Actions - boutons à droite */
.list-item-actions {
    display: flex;
    gap: var(--espacement-xs);
    flex-shrink: 0;
}

/* Mobile: actions empilés verticalement */
@media (max-width: 767px) {
    .list-item-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--espacement-xs);
    }

    .list-item-actions .btn {
        width: 100%;
        text-align: center;
    }
}

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

/* Avatar standard - grande image */
.list-item-image {
    width: 48px;
    height: 48px;
    border-radius: var(--rayon-sm);
    object-fit: cover;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .list-item-image {
        width: 36px;
        height: 36px;
    }
}

/* Avatar petit - pour utilisateurs */
.list-item-image--small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

@media (max-width: 767px) {
    .list-item-image--small {
        width: 20px;
        height: 20px;
    }
}

/* Avatar rond - pour avatars spécifiques */
.list-item-image--round {
    border-radius: 50%;
}

/* Icône par défaut */
.list-item-icon {
    font-size: var(--taille-2xl);
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .list-item-icon {
        font-size: var(--taille-lg);
    }
}

.list-item-icon--small {
    font-size: var(--taille-lg);
}

/* === TEXTE === */

/* Nom principal */
.list-item-title {
    font-weight: var(--poids-demi-gras);
    font-size: var(--taille-base);
}

.list-item-title--small {
    font-size: var(--taille-sm);
}

/* Sous-titre */
.list-item-subtitle {
    font-size: var(--taille-sm);
    opacity: 0.8;
}

/* Lien dans liste */
.list-item-link {
    color: var(--couleur-primaire);
    text-decoration: none;
    font-weight: var(--poids-demi-gras);
}

.list-item-link:hover {
    color: var(--couleur-primaire-clair);
}

/* === TASK LIST - Formulaires et Inputs === */

/* Selects et inputs dans les tâches */
.task-form-select,
.task-status,
.task-title,
.task-commentaire,
.form-control {
    width: 100%;
    max-width: 100%;
}

.task-form-select {
    font-size: 0.85rem;
}

/* === FORM SURFACE - Champs avec bordure type search bar === */

.ui-form-surface input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-form-surface select,
.ui-form-surface textarea {
    width: 100%;
    max-width: 100%;
    background: var(--Beige);
    border: 1px solid var(--couleur-primaire);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.95rem;
    outline: none;
    transition: box-shadow .2s, border-color .2s, background .2s;
}

.ui-form-surface input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.ui-form-surface select:focus,
.ui-form-surface textarea:focus {
    border-color: var(--couleur-primaire-fonce);
    box-shadow: 0 0 0 3px rgba(200, 134, 10, 0.18);
    background: var(--couleur-corps);
}

.ui-form-surface textarea {
    min-height: 96px;
    resize: vertical;
}

.ui-form-surface .form-group {
    margin-bottom: 1rem;
}

.ui-form-surface .form-group>label,
.ui-form-surface .form-check-label {
    font-weight: 600;
    color: var(--couleur-texte-clair);
    margin-bottom: 0.35rem;
}

.ui-form-autocomplete {
    display: none;
    position: absolute;
    width: 100%;
    background: var(--couleur-corps);
    border: 1px solid var(--couleur-primaire);
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: var(--ombre-legere);
}

.ui-form-autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(122, 74, 16, 0.15);
    font-size: 14px;
}

.ui-form-autocomplete-item:last-child {
    border-bottom: 0;
}

/* Espace minimal par défaut après une icône Font Awesome solide */
.fa-solid:not(.me-1):not(.me-2):not(.me-3):not(.me-4):not(.mr-1):not(.mr-2):not(.mr-3):not(.mr-4) {
    margin-right: 2px;
}

/* Mobile: inputs et selects adapté */
@media (max-width: 767px) {

    .task-form-select,
    .task-status {
        max-width: 100%;
        width: 100%;
    }

    .ui-form-surface input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .ui-form-surface select,
    .ui-form-surface textarea {
        font-size: 1rem;
        padding: 0.55rem 0.75rem;
    }

    /* Inputs de tags - inline */
    .existing-task-tag-input,
    #new-task-tag-input {
        flex: 1;
        min-width: 0;
    }

    /* Boutons "+" pour tags - réduit */
    .add-existing-tag-btn,
    #add-new-tag-btn {
        padding: var(--espacement-xs) var(--espacement-xs) !important;
        font-size: 0.85rem;
    }

    /* Flex layout pour tag input + button */
    .d-flex.align-items-center {
        gap: var(--espacement-xs);
    }

    /* ml-2 sur mobile = pas besoin, margin auto géré par gap */
    .ml-2 {
        margin-left: 0;
    }
}

/* Bootstrap override pour les form-control en mobile */
@media (max-width: 767px) {
    .form-control {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
    }

    .form-control-sm {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
    }

    /* Textarea des commentaires - responsive */
    .task-commentaire {
        width: 100%;
        resize: vertical;
    }
}

/* === BOUTONS DE FERMETURE (MODALES) === */
.btn-close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--couleur-primaire);
    cursor: pointer;
    padding: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-normale);
}

.btn-close-modal:hover {
    opacity: 0.7;
    background-color: none;
    border: none;
    color: var(--couleur-primaire-clair);
}

/* === MODALES PARTAGÉES (basées sur style notifications) === */
.modal-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(500px, min(40vw, 80vw));
    background: #fff;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    z-index: 10000;
    padding: .5rem;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: .25rem;
    margin-bottom: .25rem;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    flex: 1;
}

.modal-tabs {
    display: flex;
    gap: .25rem;
    padding: .5rem 0 .25rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: .5rem;
    overflow-x: auto;
}

.modal-tab {
    background: transparent;
    border: 1px solid #ddd;
    padding: .25rem .5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .85rem;
    transition: all .2s;
    white-space: nowrap;
}

.modal-tab:hover {
    background: #f5f5f5;
}

.modal-tab.active {
    background: var(--Or1, #b88900);
    color: white;
    border-color: var(--Or1, #b88900);
}

.modal-content {
    max-height: 300px;
    overflow: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #eee;
    margin-top: .5rem;
    flex-wrap: wrap;
}

.modal-footer>* {
    margin: 0 !important;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
}

.modal-body {
    flex: 1;
}

/* === RESPONSIVE MODALES === */
@media (max-width: 767px) {
    .modal-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        transform: none;
        border-radius: 0;
        padding: 0;
        max-height: none;
    }

    .modal-header {
        padding: var(--espacement-sm);
        padding-bottom: var(--espacement-xs);
    }

    .modal-header h2,
    .modal-header strong {
        font-size: 1.1rem;
    }

    .modal-tabs {
        padding: 0 var(--espacement-sm);
        margin-bottom: var(--espacement-xs);
    }

    .modal-tab {
        padding: var(--espacement-xs) var(--espacement-sm);
        font-size: 0.8rem;
    }

    .modal-content {
        padding: 0 var(--espacement-sm);
        max-height: calc(100vh - 280px);
    }

    .modal-footer {
        padding: var(--espacement-sm);
        gap: var(--espacement-xs);
    }

    .modal-footer .btn,
    .modal-footer button {
        flex: 1 1 calc(50% - var(--espacement-xs));
        font-size: 0.75rem;
        padding: var(--espacement-xs);
    }
}

/* === RESPONSIVE MODALES - HAUTEUR FAIBLE (contrainte par hauteur de la page) === */
@media (max-height: 600px) {
    .modal-menu {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .modal-content {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    .modal-header {
        padding: var(--espacement-xs);
    }

    .modal-header h2,
    .modal-header strong {
        font-size: 1rem;
    }

    .modal-tabs {
        padding: 0 var(--espacement-xs);
        gap: 0.1rem;
    }

    .modal-tab {
        padding: var(--espacement-xs);
        font-size: 0.7rem;
    }

    .modal-footer {
        padding: var(--espacement-xs);
    }

    .modal-footer .btn,
    .modal-footer button {
        padding: var(--espacement-xs) 0.25rem;
        font-size: 0.7rem;
    }
}

/* === DEBUG BUTTON === */
.debug-btn {
    border: 3px solid;
    transition: border-color var(--transition-normale), box-shadow var(--transition-normale);
}

.debug-btn.debug-on {
    border-color: var(--couleur-succes-fonce);
    box-shadow: 0 0 10px rgba(34, 139, 34, 0.3);
}

.debug-btn.debug-off {
    border-color: var(--couleur-danger-fonce);
    box-shadow: 0 0 10px rgba(220, 20, 60, 0.3);
}

.debug-btn.debug-on:hover {
    box-shadow: 0 0 15px rgba(34, 139, 34, 0.6);
}

.debug-btn.debug-off:hover {
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.6);
}