/* ============================================
   CLASSES UTILITAIRES - Ma France
   ============================================

   Description :
   Classes CSS atomiques réutilisables (style Tailwind/Bootstrap).
   Ce fichier doit être chargé APRÈS variables.css.

   Contenu :
   - Display (none, block, flex, grid, inline...)
   - Flexbox (direction, justify, align, wrap...)
   - Spacing (padding, margin - xs à 3xl)
   - Colors (text, background)
   - Typography (tailles, poids, alignement)
   - Borders (width, color, radius, sides)
   - Shadows (xs à 2xl)
   - Position (static, relative, absolute, fixed, sticky)
   - Layout (overflow, z-index, cursor...)
   - Responsive (classes avec breakpoints sm, md, lg, xl)

   Usage :
   <div class="d-flex justify-center align-center p-lg bg-white rounded shadow-md">
       Contenu centré avec padding, fond blanc, coins arrondis et ombre
   </div>

   Version : 2.0
   Date : Harmonisation CSS Phase 1-5
   ============================================ */

/* === DISPLAY === */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }

/* === VISIBILITY === */
.hidden { display: none !important; }
.visible { display: block !important; }
.invisible { visibility: hidden !important; }

/* === FLEXBOX DIRECTION === */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* === FLEXBOX JUSTIFY CONTENT === */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* === FLEXBOX ALIGN ITEMS === */
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

/* === FLEX GROW/SHRINK === */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* === SPACING - PADDING === */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

/* Padding directionnel */
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }

.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }

.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }

/* === SPACING - MARGIN === */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }
.m-auto { margin: auto; }

/* Margin directionnel */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }

.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }

/* Margin horizontal/vertical */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* === WIDTH === */
.w-auto { width: auto; }
.w-100 { width: 100%; }
.w-fit { width: fit-content; }
.w-full { width: 100%; }
.min-w-140 { min-width: 140px; }
.max-w-100 { max-width: 100%; }

/* === HEIGHT === */
.h-auto { height: auto; }
.h-100 { height: 100%; }
.h-full { height: 100%; }
.min-h-50 { min-height: 50px; }

/* === TEXT ALIGNMENT === */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* === TEXT TRANSFORM === */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* === TEXT DECORATION === */
.text-underline { text-decoration: underline; }
.text-no-underline { text-decoration: none; }

/* === FONT WEIGHT === */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* === TEXT COLORS === */
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-secondary { color: var(--color-secondary); }
.text-secondary-dark { color: var(--color-secondary-dark); }
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-white { color: #ffffff; }
.text-black { color: #000000; }

/* === BACKGROUND COLORS === */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: var(--bg-card); }
.bg-body { background-color: var(--bg-body); }
.bg-muted { background-color: var(--bg-muted); }
.bg-section { background-color: var(--bg-section); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-success { background-color: var(--color-success); }
.bg-danger { background-color: var(--color-danger); }
.bg-warning { background-color: var(--color-warning); }
.bg-info { background-color: var(--color-info); }
.bg-highlight { background-color: var(--bg-highlight); }

/* === BORDERS === */
.border { border: var(--border-width) solid var(--border-color); }
.border-0 { border: none !important; }
.border-top { border-top: var(--border-width) solid var(--border-color); }
.border-bottom { border-bottom: var(--border-width) solid var(--border-color); }
.border-left { border-left: var(--border-width) solid var(--border-color); }
.border-right { border-right: var(--border-width) solid var(--border-color); }

/* === BORDER RADIUS === */
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-circle { border-radius: var(--radius-circle); }
.rounded-full { border-radius: var(--radius-full); }

/* === SHADOWS === */
.shadow-none { box-shadow: none !important; }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* === CURSOR === */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* === POINTER EVENTS === */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* === OVERFLOW === */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* === POSITION === */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* === TOP/RIGHT/BOTTOM/LEFT === */
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* === TRANSITIONS === */
.transition-none { transition: none !important; }
.transition-fast { transition: all var(--transition-fast); }
.transition { transition: all var(--transition-base); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }
.transition-smooth { transition: all var(--transition-smooth); }

/* === OBJECT FIT === */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }

/* === LIST STYLE === */
.list-none { list-style: none; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }

/* === GAP (pour Flexbox et Grid) === */
.gap-xs { gap: var(--gap-xs); }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }
.gap-xl { gap: var(--gap-xl); }

/* === USER SELECT === */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* === OPACITY === */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* === Z-INDEX === */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-modal { z-index: var(--z-modal); }

/* ============================================
   CLASSES UTILITAIRES RESPONSIVE
   Breakpoints: sm(576px), md(768px), lg(1024px), xl(1200px)
   ============================================ */

/* === DISPLAY RESPONSIVE === */
/* SM - Mobile (576px) */
@media (max-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-grid { display: grid !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
}

/* MD - Tablet (768px) */
@media (max-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-grid { display: grid !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
}

/* LG - Desktop (1024px) */
@media (max-width: 1024px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-grid { display: grid !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
}

/* XL - Large Desktop (1200px) */
@media (max-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-grid { display: grid !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
}

/* === FLEXBOX RESPONSIVE === */
/* SM - Mobile */
@media (max-width: 576px) {
    .flex-sm-row { flex-direction: row !important; }
    .flex-sm-column { flex-direction: column !important; }
    .justify-sm-start { justify-content: flex-start !important; }
    .justify-sm-center { justify-content: center !important; }
    .justify-sm-end { justify-content: flex-end !important; }
    .align-sm-start { align-items: flex-start !important; }
    .align-sm-center { align-items: center !important; }
    .align-sm-end { align-items: flex-end !important; }
}

/* MD - Tablet */
@media (max-width: 768px) {
    .flex-md-row { flex-direction: row !important; }
    .flex-md-column { flex-direction: column !important; }
    .justify-md-start { justify-content: flex-start !important; }
    .justify-md-center { justify-content: center !important; }
    .justify-md-end { justify-content: flex-end !important; }
    .align-md-start { align-items: flex-start !important; }
    .align-md-center { align-items: center !important; }
    .align-md-end { align-items: flex-end !important; }
}

/* LG - Desktop */
@media (max-width: 1024px) {
    .flex-lg-row { flex-direction: row !important; }
    .flex-lg-column { flex-direction: column !important; }
    .justify-lg-start { justify-content: flex-start !important; }
    .justify-lg-center { justify-content: center !important; }
    .justify-lg-end { justify-content: flex-end !important; }
    .align-lg-start { align-items: flex-start !important; }
    .align-lg-center { align-items: center !important; }
    .align-lg-end { align-items: flex-end !important; }
}

/* === TEXT ALIGN RESPONSIVE === */
@media (max-width: 576px) {
    .text-sm-left { text-align: left !important; }
    .text-sm-center { text-align: center !important; }
    .text-sm-right { text-align: right !important; }
}

@media (max-width: 768px) {
    .text-md-left { text-align: left !important; }
    .text-md-center { text-align: center !important; }
    .text-md-right { text-align: right !important; }
}

@media (max-width: 1024px) {
    .text-lg-left { text-align: left !important; }
    .text-lg-center { text-align: center !important; }
    .text-lg-right { text-align: right !important; }
}

/* === SPACING RESPONSIVE === */
@media (max-width: 576px) {
    .p-sm-0 { padding: 0 !important; }
    .p-sm-xs { padding: var(--spacing-xs) !important; }
    .p-sm-sm { padding: var(--spacing-sm) !important; }
    .p-sm-md { padding: var(--spacing-md) !important; }
    .p-sm-lg { padding: var(--spacing-lg) !important; }

    .m-sm-0 { margin: 0 !important; }
    .m-sm-auto { margin: auto !important; }
    .m-sm-xs { margin: var(--spacing-xs) !important; }
    .m-sm-sm { margin: var(--spacing-sm) !important; }
    .m-sm-md { margin: var(--spacing-md) !important; }
    .m-sm-lg { margin: var(--spacing-lg) !important; }
}

@media (max-width: 768px) {
    .p-md-0 { padding: 0 !important; }
    .p-md-xs { padding: var(--spacing-xs) !important; }
    .p-md-sm { padding: var(--spacing-sm) !important; }
    .p-md-md { padding: var(--spacing-md) !important; }
    .p-md-lg { padding: var(--spacing-lg) !important; }

    .m-md-0 { margin: 0 !important; }
    .m-md-auto { margin: auto !important; }
    .m-md-xs { margin: var(--spacing-xs) !important; }
    .m-md-sm { margin: var(--spacing-sm) !important; }
    .m-md-md { margin: var(--spacing-md) !important; }
    .m-md-lg { margin: var(--spacing-lg) !important; }
}

/* === WIDTH RESPONSIVE === */
@media (max-width: 576px) {
    .w-sm-25 { width: 25% !important; }
    .w-sm-50 { width: 50% !important; }
    .w-sm-75 { width: 75% !important; }
    .w-sm-100 { width: 100% !important; }
    .w-sm-auto { width: auto !important; }
}

@media (max-width: 768px) {
    .w-md-25 { width: 25% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-100 { width: 100% !important; }
    .w-md-auto { width: auto !important; }
}

/* === CLASSES SPÉCIFIQUES AU PROJET === */

/* Highlighted (utilisé dans main.js) */
.highlighted {
    background-color: var(--bg-highlight);
    border: var(--border-width) solid var(--color-primary);
}

/* Selected button state */
.selected {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    color: #ffffff;
}

/* No transition (pour carrousel) */
.no-transition {
    transition: none !important;
}

/* Collapsed state (pour accordéon) */
.collapsed {
    /* Peut être étendu selon les besoins */
}

/* Vertical align */
.vertical-align-middle {
    vertical-align: middle;
}