/*************************************
** UTILITIES - Classes utilitaires pour remplacer les styles inline
*************************************/

/* =============================================================================
   CLASSES DE POSITIONNEMENT ET LAYOUT
   ============================================================================= */

/* Position utilities */
.position-unset {
    position: unset !important;
}

.right-0 {
    right: 0 !important;
}

/* Height utilities */
.h-100vh {
    height: 100vh !important;
}

.h-100 {
    height: 100% !important;
}

.min-h-fullscreen {
    min-height: calc(100vh - 90px) !important;
}

.min-h-content {
    min-height: calc(100vh - 90px) !important;
}

/* Width utilities */
.w-50 {
    width: 50% !important;
}

.w-5em {
    width: 5em !important;
}

.w-45 {
    width: 45% !important;
}

.w-80vw {
    width: 80vw !important;
}

.w-125 {
    width: 125% !important;
}

/* =============================================================================
   CLASSES DE COULEURS
   ============================================================================= */

/* Text colors */
.text-white {
    color: #FFFFFF !important;
}

.text-inherit {
    color: inherit !important;
}

.text-lightgrey {
    color: lightgrey !important;
}

.text-darkgrey {
    color: darkgrey !important;
}

.text-orange-primary {
    color: #F4711A !important;
}

/* Background colors */
.bg-grey-light {
    background-color: #e6e6e6 !important;
}

.bg-grey-medium {
    background-color: #cecece !important;
}

.bg-grey-dark {
    background-color: #595959 !important;
}

.bg-black {
    background-color: #000 !important;
}

/* Dynamic background colors (for Twig variables) */
.bg-dynamic {
    /* This class will be used with inline styles for dynamic colors from Twig */
    background-color: transparent;
}

.bg-dynamic-opacity {
    /* For colors with opacity like {{ color }}33 */
    background-color: transparent;
}

/* =============================================================================
   CLASSES DE TYPOGRAPHIE
   ============================================================================= */

.font-size-smaller {
    font-size: smaller !important;
}

.font-size-larger {
    font-size: larger !important;
}

.font-size-xxx-large {
    font-size: xxx-large !important;
}

.font-size-12px {
    font-size: 12px !important;
}

.font-weight-normal {
    font-weight: normal !important;
}

/* =============================================================================
   CLASSES DE SPACING
   ============================================================================= */

/* Margin utilities */
.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.ml-10em {
    margin-left: 10em !important;
}

.mr-10em {
    margin-right: 10em !important;
}

.ml-20-percent {
    margin-left: 20% !important;
}

/* Padding utilities */
.pt-25vh {
    padding-top: 25vh !important;
}

.pl-10vh {
    padding-left: 10vh !important;
}

.pt-5-percent {
    padding-top: 5% !important;
}

/* =============================================================================
   CLASSES SPÉCIFIQUES AUX COMPOSANTS
   ============================================================================= */

/* Header/Navigation */
.navbar-nav-absolute-right {
    position: absolute;
    right: 0;
}

/* Tables */
.table-white {
    color: #FFFFFF !important;
}

.table-cell-width-100 {
    width: 100px !important;
}

/* Images */
.img-opacity-80 {
    opacity: 80% !important;
}

.img-width-50 {
    width: 50% !important;
}

.img-width-45 {
    width: 45% !important;
}

.img-width-125 {
    width: 125% !important;
}

/* Sections et conteneurs */
.section-fullheight {
    height: 100vh !important;
}

.section-fullheight-bg-black {
    height: 100vh !important;
    background-color: #000 !important;
}

/* Positioning pour les éléments superposés */
.object-fit-cover {
    object-fit: cover !important;
}

.object-fit-contain {
    object-fit: contain !important;
}

.object-position-center {
    object-position: center !important;
}

/* Position absolute utilities */
.position-absolute-bottom-left {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* =============================================================================
   CLASSES POUR FLEXBOX ET CENTERING
   ============================================================================= */

.d-flex-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Éléments circulaires pour les indicateurs */
.circle-indicator {
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.circle-red {
    width: 50px;
    height: 50px;
    background-color: #c30000;
}

.circle-white {
    width: 33px;
    height: 33px;
    background-color: white;
}

.circle-blue {
    width: 16px;
    height: 16px;
    background-color: #1863b5;
}

/* =============================================================================
   CLASSES POUR LES BLOCS SPÉCIAUX
   ============================================================================= */

/* Blocs de couleur pour les produits */
/*.bloc-color-concept {*/
/*    top: 15%;*/
/*    height: 70%;*/
/*}*/

/* Alignement de texte */
.text-align-end {
    text-align: end !important;
}

/* Décoration de liens */
.text-decoration-none {
    text-decoration: none !important;
}

/* =============================================================================
   CLASSES POUR LES VARIATIONS DYNAMIQUES DE COULEUR
   ============================================================================= */

/* Ces classes seront utilisées avec des styles inline pour les couleurs dynamiques */
.dynamic-color {
    /* Utilisé avec style="color: {{ variable }}" */
    color: inherit;
}

.dynamic-bg-color {
    /* Utilisé avec style="background-color: {{ variable }}" */
    background-color: transparent;
}

.dynamic-bg-gradient {
    /* Pour les gradients webkit */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}