/* === UTILS - Classes utilitaires et helpers === */

/* === CENTRAGE === */

.centered-content {
    text-align: center;
    margin: 0 auto;
}

.centered-height {
    display: flex;
    align-items: center;
    justify-content: center;
}

.centered-width {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* === GRILLES et COLONNES === */

.ColDivEgale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacement-md);
}

/* Mobile: 1 colonne */
.ColDivEgale>* {
    flex: 1 1 100%;
}

/* Tablet: 2 colonnes (768px+) */
@media (min-width: 768px) {
    .ColDivEgale>* {
        flex: 1 1 calc(50% - var(--espacement-sm));
    }
}

/* Desktop: 3 colonnes (1000px+) */
@media (min-width: 1000px) {
    .ColDivEgale>* {
        flex: 1 1 calc(33% - var(--espacement-sm));
    }
}

/* === LIMITES de PAGE === */

.LimitePage {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--espacement-sm);
}

@media (min-width: 768px) {
    .LimitePage {
        padding: 0 var(--espacement-md);
    }
}

@media (min-width: 1000px) {
    .LimitePage {
        max-width: 1200px;
        padding: 0 var(--espacement-md);
    }
}

.LimitePage.narrow {
    max-width: 100%;
}

@media (min-width: 1000px) {
    .LimitePage.narrow {
        max-width: 900px;
    }
}

.LimitePage.wide {
    max-width: 100%;
}

@media (min-width: 1000px) {
    .LimitePage.wide {
        max-width: 1400px;
    }
}

/* === VISIBILITÉ === */

.cacher-sur-mobile {
    display: none;
}

@media (min-width: 769px) {
    .cacher-sur-mobile {
        display: block;
    }
}

.cacher-sur-ordi {
    display: block;
}

@media (min-width: 769px) {
    .cacher-sur-ordi {
        display: none;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* === ESPACEMENTS === */

.m-0 {
    margin: 0 !important;
}

.m-xs {
    margin: var(--espacement-xs) !important;
}

.m-sm {
    margin: var(--espacement-sm) !important;
}

.m-md {
    margin: var(--espacement-md) !important;
}

.m-lg {
    margin: var(--espacement-lg) !important;
}

.m-xl {
    margin: var(--espacement-xl) !important;
}

.p-0 {
    padding: 0 !important;
}

.p-xs {
    padding: var(--espacement-xs) !important;
}

.p-sm {
    padding: var(--espacement-sm) !important;
}

.p-md {
    padding: var(--espacement-md) !important;
}

.p-lg {
    padding: var(--espacement-lg) !important;
}

.p-xl {
    padding: var(--espacement-xl) !important;
}

/* === TEXTE === */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.text-bold {
    font-weight: var(--poids-gras);
}

.text-semi-bold {
    font-weight: var(--poids-demi-gras);
}

.text-italic {
    font-style: italic;
}

.text-muted {
    opacity: 0.7;
}

.text-small {
    font-size: var(--taille-sm);
}

.text-large {
    font-size: var(--taille-lg);
}

/* === FLOATS === */

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-none {
    float: none;
}

.clear-both {
    clear: both;
}

/* === FLEX UTILITIES === */

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.gap-xs {
    gap: var(--espacement-xs);
}

.gap-sm {
    gap: var(--espacement-sm);
}

.gap-md {
    gap: var(--espacement-md);
}

.gap-lg {
    gap: var(--espacement-lg);
}

/* === VISIBILITY === */

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === ÉLÉMENTS FLOTTANTS === */

.card {
    border: var(--largeur-bordure-fine) solid #e0e0e0;
    border-radius: var(--rayon-md);
    padding: var(--espacement-md);
    background: #fff;
    box-shadow: var(--ombre-sm);
    transition: box-shadow var(--transition-normale);
}

.card:hover {
    box-shadow: var(--ombre-md);
}

.card-header {
    padding: var(--espacement-md) var(--espacement-md);
    margin: -var(--espacement-md) -var(--espacement-md) var(--espacement-md) -var(--espacement-md);
    border-bottom: var(--largeur-bordure-fine) solid #e0e0e0;
}

.card-title {
    font-size: var(--taille-lg);
    font-weight: var(--poids-demi-gras);
    margin: 0;
}

.card-body {
    padding: 0;
}

.card-footer {
    padding: var(--espacement-md) 0 0;
    margin: var(--espacement-md) -var(--espacement-md) -var(--espacement-md) -var(--espacement-md);
    border-top: var(--largeur-bordure-fine) solid #e0e0e0;
}

/* === BOITES === */

.box {
    border: var(--largeur-bordure-fine) solid var(--couleur-primaire);
    border-radius: var(--rayon-md);
    padding: var(--espacement-md);
    background: var(--couleur-secondaire-clair);
}

.box-alt {
    border: var(--largeur-bordure-fine) solid var(--couleur-secondaire);
    border-radius: var(--rayon-md);
    padding: var(--espacement-md);
    background: #f0f0f0;
}

/* === LISTES === */

.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.list-inline {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacement-sm);
}

.list-inline li {
    display: inline-block;
}

/* === DIVIDERS === */

.divider {
    border-top: var(--largeur-bordure-normale) solid #e0e0e0;
    margin: var(--espacement-md) 0;
}

.divider-dashed {
    border-top: var(--largeur-bordure-fine) dashed #e0e0e0;
    margin: var(--espacement-md) 0;
}

/* === IMAGES === */

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-thumbnail {
    padding: var(--espacement-xs);
    border: var(--largeur-bordure-fine) solid #e0e0e0;
    border-radius: var(--rayon-sm);
}

/* Rond - pour avatars et images circulaires */
.cercle {
    border-radius: 50% !important;
}

/* === CLEARFIX === */

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* === TRANSITIONS === */

.transition-fast {
    transition: all var(--transition-rapide);
}

.transition-normal {
    transition: all var(--transition-normale);
}

.transition-slow {
    transition: all var(--transition-lente);
}

/* === OPACITY === */

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

/* === PSEUDO CLASSES === */

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.user-select-none {
    user-select: none;
}

.user-select-all {
    user-select: all;
}

/* === TASK STATES / STATUS COLORS === */

/*.status-bg[data-status="todo"] {
    background-color: rgba(0, 76, 131, 0.15);
}*/

.status-bg[data-status="in_progress"] {
    background-color: var(--Beige);
}

.status-bg[data-status="done"] {
    background-color: var(--VertForet3);
}

.status-bg[data-status="abandoned"] {
    background-color: var(--Orange3);
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
    .ColDivEgale>* {
        flex: 1 1 100%;
    }

    .LimitePage {
        padding: 0 var(--espacement-sm);
    }
}