/* ==========================================================================
   ECOPHOT - UTILITAIRES D'AFFICHAGE
   Classes pour display, position, overflow, etc.
   ========================================================================== */

/* ==========================================================================
   DISPLAY
   ========================================================================== */

.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }

/* ==========================================================================
   FLEXBOX UTILITIES
   ========================================================================== */

/* Direction */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex wrap */
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justify content */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

/* Raccourcis justify */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Align items */
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

/* Raccourcis align */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

/* Align content */
.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

/* Align self */
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

/* Flex grow/shrink */
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.row-gap-0 { row-gap: 0 !important; }
.row-gap-1 { row-gap: 0.25rem !important; }
.row-gap-2 { row-gap: 0.5rem !important; }
.row-gap-3 { row-gap: 1rem !important; }
.row-gap-4 { row-gap: 1.5rem !important; }
.row-gap-5 { row-gap: 3rem !important; }

.column-gap-0 { column-gap: 0 !important; }
.column-gap-1 { column-gap: 0.25rem !important; }
.column-gap-2 { column-gap: 0.5rem !important; }
.column-gap-3 { column-gap: 1rem !important; }
.column-gap-4 { column-gap: 1.5rem !important; }
.column-gap-5 { column-gap: 3rem !important; }

/* ==========================================================================
   GRID UTILITIES
   ========================================================================== */

/* Grid template columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
.grid-cols-none { grid-template-columns: none !important; }

/* Grid template rows */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
.grid-rows-none { grid-template-rows: none !important; }

/* Grid column span */
.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-5 { grid-column: span 5 / span 5 !important; }
.col-span-6 { grid-column: span 6 / span 6 !important; }
.col-span-full { grid-column: 1 / -1 !important; }

/* Grid row span */
.row-span-1 { grid-row: span 1 / span 1 !important; }
.row-span-2 { grid-row: span 2 / span 2 !important; }
.row-span-3 { grid-row: span 3 / span 3 !important; }
.row-span-4 { grid-row: span 4 / span 4 !important; }
.row-span-5 { grid-row: span 5 / span 5 !important; }
.row-span-6 { grid-row: span 6 / span 6 !important; }
.row-span-full { grid-row: 1 / -1 !important; }

/* ==========================================================================
   POSITION
   ========================================================================== */

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Raccourcis */
.static { position: static !important; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* Position values */
.top-0 { top: 0 !important; }
.top-auto { top: auto !important; }
.right-0 { right: 0 !important; }
.right-auto { right: auto !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-auto { bottom: auto !important; }
.left-0 { left: 0 !important; }
.left-auto { left: auto !important; }

.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.inset-auto { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }

/* ==========================================================================
   Z-INDEX
   ========================================================================== */

.z-index-0 { z-index: 0 !important; }
.z-index-1 { z-index: 1 !important; }
.z-index-2 { z-index: 2 !important; }
.z-index-3 { z-index: 3 !important; }
.z-index-10 { z-index: 10 !important; }
.z-index-20 { z-index: 20 !important; }
.z-index-30 { z-index: 30 !important; }
.z-index-40 { z-index: 40 !important; }
.z-index-50 { z-index: 50 !important; }
.z-index-100 { z-index: 100 !important; }
.z-index-999 { z-index: 999 !important; }
.z-index-9999 { z-index: 9999 !important; }

/* Raccourcis */
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-100 { z-index: 100 !important; }
.z-999 { z-index: 999 !important; }
.z-9999 { z-index: 9999 !important; }

/* ==========================================================================
   OVERFLOW
   ========================================================================== */

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* ==========================================================================
   VISIBILITY
   ========================================================================== */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ==========================================================================
   OPACITY
   ========================================================================== */

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ==========================================================================
   FLOAT
   ========================================================================== */

.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }

.clearfix::after {
    display: block !important;
    clear: both !important;
    content: "" !important;
}

/* ==========================================================================
   CURSOR
   ========================================================================== */

.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-help { cursor: help !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }

/* ==========================================================================
   POINTER EVENTS
   ========================================================================== */

.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ==========================================================================
   RESIZE
   ========================================================================== */

.resize-none { resize: none !important; }
.resize-both { resize: both !important; }
.resize-horizontal { resize: horizontal !important; }
.resize-vertical { resize: vertical !important; }

/* ==========================================================================
   USER SELECT
   ========================================================================== */

.select-none { 
    -webkit-user-select: none !important; 
    -moz-user-select: none !important; 
    -ms-user-select: none !important; 
    user-select: none !important; 
}

.select-text { 
    -webkit-user-select: text !important; 
    -moz-user-select: text !important; 
    -ms-user-select: text !important; 
    user-select: text !important; 
}

.select-all { 
    -webkit-user-select: all !important; 
    -moz-user-select: all !important; 
    -ms-user-select: all !important; 
    user-select: all !important; 
}

.select-auto { 
    -webkit-user-select: auto !important; 
    -moz-user-select: auto !important; 
    -ms-user-select: auto !important; 
    user-select: auto !important; 
}

/* ==========================================================================
   RESPONSIVE DISPLAY
   ========================================================================== */

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

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

/* Desktop (992px and up) */
@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
    .d-lg-grid { display: grid !important; }
}

/* Large desktop (1200px and up) */
@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-inline-flex { display: inline-flex !important; }
    .d-xl-grid { display: grid !important; }
}

/* ==========================================================================
   OBJECT FIT
   ========================================================================== */

.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-none { object-fit: none !important; }
.object-scale-down { object-fit: scale-down !important; }

/* Object position */
.object-center { object-position: center !important; }
.object-top { object-position: top !important; }
.object-right { object-position: right !important; }
.object-bottom { object-position: bottom !important; }
.object-left { object-position: left !important; }

/* ==========================================================================
   ASPECT RATIO
   ========================================================================== */

.aspect-auto { aspect-ratio: auto !important; }
.aspect-square { aspect-ratio: 1 / 1 !important; }
.aspect-video { aspect-ratio: 16 / 9 !important; }
.aspect-1-1 { aspect-ratio: 1 / 1 !important; }
.aspect-4-3 { aspect-ratio: 4 / 3 !important; }
.aspect-16-9 { aspect-ratio: 16 / 9 !important; }

/* ==========================================================================
   BOX SIZING
   ========================================================================== */

.box-border { box-sizing: border-box !important; }
.box-content { box-sizing: content-box !important; }