/***************************************************************************************************************/
/* Control Data CSS library    utility-first
/* 2018-2025 Jean de La Taille
/***************************************************************************************************************/

/***************************************************************************************************************/
/* variables globales CSS  */
/***************************************************************************************************************/

/* mesures Responsive */
/*
    Tailles d'écran (Bootstrap 4) :
    sm 	0 - 575px 	    Mobiles, Small tablets
    md 	576 - 991px     Tablets
    lg 	992px -  	    Desktops 
*/

/* Tailles d'écran mobiles, tablettes */
@media (max-width: 575px) and (orientation: landscape), (orientation: portrait) {
    :root {
        /* Dimensions pour les margin, padding, border, radius */
        --xs: 4px;
        --sm: 8px;
        --md: 15px;
        --lg: 20px;
        --xl: 30px;

        /* Font sizes */
        --xxxs-font: 0.5rem; /* (8px) */
        --xxs-font: 0.563rem; /* (9px) */
        --xs-font: 0.65rem; /* (10px) */
        --sm-font: 0.75rem; /* (12px) */
        --md-font: 0.875rem; /* (14px) */
        --lg-font: 1rem; /* (16px) */
        --xl-font: 1.125rem; /* (18px) */
        --xxl-font: 1.25rem; /* (20px) */
        --xxxl-font: 1.5rem; 
        --xxxxl-font: 2rem; 
    }
}

/* Tailles d'écran tablettes */ 
@media (min-width: 576px) and (max-width: 991px) {
    :root {
        /* Dimensions pour les margin, padding, border, radius */
        --xs: 4px;
        --sm: 10px;
        --md: 18px;
        --lg: 25px;
        --xl: 38px;

        /* Font sizes */
        --xxxs-font: 0.5rem; /* (8px) */
        --xxs-font: 0.562rem; /* (9px) */
        --xs-font: 0.7rem; /* (11px) */
        --sm-font: 0.8rem; /* (13px) */
        --md-font: 0.9375rem; /* (15px) */
        --lg-font: 1.0625rem; /* (17px) */
        --xl-font: 1.1875rem; /* (19px) */
        --xxl-font: 1.4rem;  /* (22px) */
        --xxxl-font: 1.8rem; /* (28px) */
        --xxxxl-font: 2.5rem; /* (40px) */
    }
}

/* Tailles d'écran desktops */
@media (min-width: 992px) {
    :root {
        /* Dimensions pour les margin, padding, border, radius */
        --xs: 5px;
        --sm: 10px;
        --md: 20px;
        --lg: 30px;
        --xl: 45px;

        /* Font sizes */
        --xxxs-font: 0.562rem; /* (8px) */
        --xxs-font: 0.625rem; /* (10px) */
        --xs-font: 0.75rem; /* (12px) */
        --sm-font: 0.875rem; /* (14px) */
        --md-font: 1rem; /* (16px, base) */
        --lg-font: 1.125rem; /* (18px) */
        --xl-font: 1.25rem; /* (20px) */
        --xxl-font: 1.5rem; /* (24px) */
        --xxxl-font: 2rem; /* (32px) */
        --xxxxl-font: 3rem; /* (48px) */
    }
}

:root {
    --size8: 8px;
    --size10: 10px;
    --size12: 12px;
    --size14: 14px;
    --size16: 16px;
    --size18: 18px;
    --size20: 20px;
    --size22: 22px;
    --size24: 24px;
    --size28: 28px;
    --size32: 32px;
    --size40: 40px;
    --size48: 48px;
}


/***************************************************************************************************************/
/* General layout */
/***************************************************************************************************************/

* {
    box-sizing:  border-box !important;
    /*margin: 0;
    padding: 0;*/
}

html {
    height: 100%;
    width: 100%;
}

html, body {
    min-height: 100%;
    min-width: 100%;
}

/***************************************************************************************************************/
/* Conteneurs (Page width) */
/***************************************************************************************************************/

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--md);
}

/* Container Responsive - sm (mobiles) */
@media (max-width: 575px) {
    .container {
        max-width: 100%;
    }
    .sm-container {
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--sm);
        max-width: 540px;
    }
}

/* Container Responsive - md (tablettes) */
@media (min-width: 576px) and (max-width: 991px) {
    .container {
        max-width: 540px;
    }
    .md-container {
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--md);
        max-width: 720px;
    }
}

/* Container Responsive - lg (desktops) */
@media (min-width: 992px) {
    .container {
        max-width: 1200px;
    }
    .lg-container {
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--lg);
        max-width: 1200px;
    }
}

/***************************************************************************************************************/
/* Font Size */
/***************************************************************************************************************/

html { font-size: var(--md-font);  }

.h1             { font-size: var(--xxxxl-font); }
.h2             { font-size: var(--xxxl-font); }
.h3             { font-size: var(--xxl-font); }
.h4             { font-size: var(--xl-font); }
.h5             { font-size: var(--lg-font); }

.xxxxlarge      { font-size: var(--xxxxl-font); }
.xxxlarge       { font-size: var(--xxxl-font); }
.xxlarge        { font-size: var(--xxl-font); }
.xlarge         { font-size: var(--xl-font); }
.large          { font-size: var(--lg-font); }
.medium         { font-size: var(--md-font); }
.small          { font-size: var(--sm-font); }
.xsmall         { font-size: var(--xs-font); }
.xxsmall        { font-size: var(--xxs-font); }
.xxxsmall       { font-size: var(--xxxs-font); }

.font-8px       { font-size: var(--size8); }
.font-10px      { font-size: var(--size10); }
.font-12px      { font-size: var(--size12); }
.font-14px      { font-size: var(--size14); }
.font-16px      { font-size: var(--size16); }
.font-18px      { font-size: var(--size18); }
.font-20px      { font-size: var(--size20); }
.font-22px      { font-size: var(--size22); }
.font-24px      { font-size: var(--size24); }
.font-28px      { font-size: var(--size28); }
.font-32px      { font-size: var(--size32); }
.font-40px      { font-size: var(--size40); }
.font-48px      { font-size: var(--size48); }

/***************************************************************************************************************/
/* Text utils */
/***************************************************************************************************************/

.bold { font-weight: 600; }
.italic { font-style: italic; }
.smallCaps { font-variant: small-caps; }

.textCenter { text-align: center; }
.textJustify { text-align: justify; text-justify: distribute; }
.textRight { text-align: right; }
.textLeft   { text-align: left; }

.textTop    { vertical-align: top; }
.textBottom { vertical-align: bottom; }
.textMiddle { vertical-align: middle; }

.textSub    { vertical-align: sub; }
.textSuper  { vertical-align: super; }

/* Limitation nb de lignes et ajout de points de suspension */
.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.ellipsis-2 {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    display: -webkit-box;
}
.ellipsis-3 {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/***************************************************************************************************************/
/* Présentation */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Setup */
/***************************************************************************************************************/

table.inline    { display: inline-table; } /* Cas particulier pour les tables */

.inline         { display: inline-block; }
.block          { display: block; }
.fixed          { position: fixed; }
.relative       { position: relative; }
.absolute       { position: absolute; }

.floatLeft      { float: left; }
.floatRight     { float: right; }

.overflowHidden { overflow: hidden; }
.overflowAuto   { overflow: auto; }
.overflowScroll { overflow: scroll; }

.opaque         { opacity: 100%; transition: opacity 0.4s; }
.transparent    { opacity: 0; transition: opacity 0.4s; }

/* Setup Responsive - sm (mobiles) */
@media (max-width: 575px) {
    .sm-inline          { display: inline-block; }
    .sm-block           { display: block; }
    .sm-fixed           { position: fixed; }
    .sm-relative        { position: relative; }
    .sm-absolute        { position: absolute; }
    
    .sm-floatLeft       { float: left; }
    .sm-floatRight      { float: right; }
    
    .sm-overflowHidden  { overflow: hidden; }
    .sm-overflowAuto    { overflow: auto; }
    .sm-overflowScroll  { overflow: scroll; }
    
    .sm-opaque          { opacity: 100%; transition: opacity 0.4s; }
    .sm-transparent     { opacity: 0; transition: opacity 0.4s; }
}

/* Setup Responsive - md (tablettes) */
@media (min-width: 576px) and (max-width: 991px) {
    .md-inline          { display: inline-block; }
    .md-block           { display: block; }
    .md-fixed           { position: fixed; }
    .md-relative        { position: relative; }
    .md-absolute        { position: absolute; }
    
    .md-floatLeft       { float: left; }
    .md-floatRight      { float: right; }
    
    .md-overflowHidden  { overflow: hidden; }
    .md-overflowAuto    { overflow: auto; }
    .md-overflowScroll  { overflow: scroll; }
    
    .md-opaque          { opacity: 100%; transition: opacity 0.4s; }
    .md-transparent     { opacity: 0; transition: opacity 0.4s; }
}

/* Setup Responsive - lg (desktops) */
@media (min-width: 992px) {
    .lg-inline          { display: inline-block; }
    .lg-block           { display: block; }
    .lg-fixed           { position: fixed; }
    .lg-relative        { position: relative; }
    .lg-absolute        { position: absolute; }
    
    .lg-floatLeft       { float: left; }
    .lg-floatRight      { float: right; }
    
    .lg-overflowHidden  { overflow: hidden; }
    .lg-overflowAuto    { overflow: auto; }
    .lg-overflowScroll  { overflow: scroll; }
    
    .lg-opaque          { opacity: 100%; transition: opacity 0.4s; }
    .lg-transparent     { opacity: 0; transition: opacity 0.4s; }
}

/***************************************************************************************************************/
/* Visibility */
/***************************************************************************************************************/

.visible  { display: initial; }
.hidden   { display: none; }

/* Visibility responsive */
/* sm */
@media (max-width: 575px) {
  .sm-hidden   { display: none !important; }
  .sm-visible  { display: initial; }
}
/* md */
@media (min-width: 576px) and (max-width: 991px) {
  .md-hidden   { display: none !important; }
  .md-visible  { display: initial; }
}
/* lg */
@media (min-width: 992px) {
  .lg-hidden   { display: none !important; }
  .lg-visible  { display: initial; }
}

/***************************************************************************************************************/
/* dimensions */
/***************************************************************************************************************/

.fill { height: 100%; width: 100%; }
.wide { width: 100%; }
.huge { height: 100%; }
.halfHeight { height: 50%; }
.halfWidth { width: 50%; }

/* Cas particulier images */
img.wide { height: auto; }
img.huge { width: auto; }

/* dimensions Responsive */
@media (max-width: 575px) {
    .sm-fill    { height: 100%; width: 100%; }
    .sm-wide    { width: 100%; }
    .sm-huge    { height: 100%; }
    img.sm-wide { height: auto; }
    img.sm-huge { width: auto; }
}
@media (min-width: 576px) and (max-width: 991px) {
    .md-fill    { height: 100%; width: 100%; }
    .md-wide    { width: 100%; }
    .md-huge    { height: 100%; }
    img.md-wide { height: auto; }
    img.md-huge { width: auto; }
}
@media (min-width: 992px) {
    .lg-fill    { height: 100%; width: 100%; }
    .lg-wide    { width: 100%; }
    .lg-huge    { height: 100%; }
    img.lg-wide { height: auto; }
    img.lg-huge { width: auto; }
}

/***************************************************************************************************************/
/* Flex */
/***************************************************************************************************************/

.flex                               { display: flex; }
.flex.inline, .flex-inline          { display: inline-flex; }
.flex.vertical, .flex-vertical      { flex-direction: column; }
.flexWrap                           { flex-wrap: wrap; }

.flexLeft               { margin-right: auto; }
.flexCenter             { margin-right: auto; margin-left: auto; }
.flexRight              { margin-left:  auto; }
.flexTop                { margin-bottom: auto; }
.flexMiddle             { margin-top:  auto; margin-bottom: auto; }
.flexBottom             { margin-top:  auto; }

.flexGrow               { flex-grow: 1; }
.flexFix                { flex-grow: 0; }

.flexJustifyCenter      { justify-content: center; }
.flexJustifyRight       { justify-content: right;  }

.gap-sm                 { gap: var(--sm); }
.gap-md                 { gap: var(--md); }
.gap-lg                 { gap: var(--lg); }

/* Flex Responsive - sm (mobiles) */
@media (max-width: 575px) {
    .sm-flex                   { display: flex; }
    .sm-flex.inline, .sm-flex-inline          { display: inline-flex; }
    .sm-flex.vertical, .sm-flex-vertical      { flex-direction: column; }
    .sm-vertical               { flex-direction: column; }
    
    .sm-flexLeft               { margin-right: auto; }
    .sm-flexCenter             { margin-right: auto; margin-left: auto; }
    .sm-flexRight              { margin-left: auto; }
    .sm-flexTop                { margin-bottom: auto; }
    .sm-flexMiddle             { margin-top: auto; margin-bottom: auto; }
    .sm-flexBottom             { margin-top: auto; }
    
    .sm-flexGrow               { flex-grow: 1; }
    .sm-flexFix                { flex-grow: 0; }
    
    .sm-flexJustifyCenter      { justify-content: center; }
    .sm-flexJustifyRight       { justify-content: right; }
}

/* Flex Responsive - md (tablettes) */
@media (min-width: 576px) and (max-width: 991px) {
    .md-flex                   { display: flex; }
    .md-flex.inline, .md-flex-inline          { display: inline-flex; }
    .md-flex.vertical, .md-flex-vertical      { flex-direction: column; }
    .md-vertical               { flex-direction: column; }
    
    .md-flexLeft               { margin-right: auto; }
    .md-flexCenter             { margin-right: auto; margin-left: auto; }
    .md-flexRight              { margin-left: auto; }
    .md-flexTop                { margin-bottom: auto; }
    .md-flexMiddle             { margin-top: auto; margin-bottom: auto; }
    .md-flexBottom             { margin-top: auto; }
    
    .md-flexGrow               { flex-grow: 1; }
    .md-flexFix                { flex-grow: 0; }
    
    .md-flexJustifyCenter      { justify-content: center; }
    .md-flexJustifyRight       { justify-content: right; }
}

/* Flex Responsive - lg (desktops) */
@media (min-width: 992px) {
    .lg-flex                   { display: flex; }
    .lg-flex.inline, .lg-flex-inline          { display: inline-flex; }
    .lg-flex.vertical, .lg-flex-vertical      { flex-direction: column; }
    .lg-vertical               { flex-direction: column; }
    
    .lg-flexLeft               { margin-right: auto; }
    .lg-flexCenter             { margin-right: auto; margin-left: auto; }
    .lg-flexRight              { margin-left: auto; }
    .lg-flexTop                { margin-bottom: auto; }
    .lg-flexMiddle             { margin-top: auto; margin-bottom: auto; }
    .lg-flexBottom             { margin-top: auto; }
    
    .lg-flexGrow               { flex-grow: 1; }
    .lg-flexFix                { flex-grow: 0; }
    
    .lg-flexJustifyCenter      { justify-content: center; }
    .lg-flexJustifyRight       { justify-content: right; }
}

/***************************************************************************************************************/
/* Position  */
/***************************************************************************************************************/

/* Left */
.left           { left: 0; }
.left-xs        { left: var(--xs); }
.left-sm        { left: var(--sm); }
.left-md        { left: var(--md); }
.left-lg        { left: var(--lg); }
.left-xl        { left: var(--xl); }

/* Right */
.right          { right: 0; }
.right-xs       { right: var(--xs); }
.right-sm       { right: var(--sm); }
.right-md       { right: var(--md); }
.right-lg       { right: var(--lg); }
.right-xl       { right: var(--xl); }

/* Top */
.top            { top: 0; }
.top-xs         { top: var(--xs); }
.top-sm         { top: var(--sm); }
.top-md         { top: var(--md); }
.top-lg         { top: var(--lg); }
.top-xl         { top: var(--xl); }

/* Bottom */
.bottom         { bottom: 0; }
.bottom-xs      { bottom: var(--xs); }
.bottom-sm      { bottom: var(--sm); }
.bottom-md      { bottom: var(--md); }
.bottom-lg      { bottom: var(--lg); }
.bottom-xl      { bottom: var(--xl); }

/* Position Responsive - sm (mobiles) */
@media (max-width: 575px) {
    /* Left */
    .sm-left            { left: 0; }
    .sm-left-xs         { left: var(--xs); }
    .sm-left-sm         { left: var(--sm); }
    .sm-left-md         { left: var(--md); }
    .sm-left-lg         { left: var(--lg); }
    .sm-left-xl         { left: var(--xl); }
    
    /* Right */
    .sm-right           { right: 0; }
    .sm-right-xs        { right: var(--xs); }
    .sm-right-sm        { right: var(--sm); }
    .sm-right-md        { right: var(--md); }
    .sm-right-lg        { right: var(--lg); }
    .sm-right-xl        { right: var(--xl); }
    
    /* Top */
    .sm-top             { top: 0; }
    .sm-top-xs          { top: var(--xs); }
    .sm-top-sm          { top: var(--sm); }
    .sm-top-md          { top: var(--md); }
    .sm-top-lg          { top: var(--lg); }
    .sm-top-xl          { top: var(--xl); }
    
    /* Bottom */
    .sm-bottom          { bottom: 0; }
    .sm-bottom-xs       { bottom: var(--xs); }
    .sm-bottom-sm       { bottom: var(--sm); }
    .sm-bottom-md       { bottom: var(--md); }
    .sm-bottom-lg       { bottom: var(--lg); }
    .sm-bottom-xl       { bottom: var(--xl); }
}

/* Position Responsive - md (tablettes) */
@media (min-width: 576px) and (max-width: 991px) {
    /* Left */
    .md-left            { left: 0; }
    .md-left-xs         { left: var(--xs); }
    .md-left-sm         { left: var(--sm); }
    .md-left-md         { left: var(--md); }
    .md-left-lg         { left: var(--lg); }
    .md-left-xl         { left: var(--xl); }
    
    /* Right */
    .md-right           { right: 0; }
    .md-right-xs        { right: var(--xs); }
    .md-right-sm        { right: var(--sm); }
    .md-right-md        { right: var(--md); }
    .md-right-lg        { right: var(--lg); }
    .md-right-xl        { right: var(--xl); }
    
    /* Top */
    .md-top             { top: 0; }
    .md-top-xs          { top: var(--xs); }
    .md-top-sm          { top: var(--sm); }
    .md-top-md          { top: var(--md); }
    .md-top-lg          { top: var(--lg); }
    .md-top-xl          { top: var(--xl); }
    
    /* Bottom */
    .md-bottom          { bottom: 0; }
    .md-bottom-xs       { bottom: var(--xs); }
    .md-bottom-sm       { bottom: var(--sm); }
    .md-bottom-md       { bottom: var(--md); }
    .md-bottom-lg       { bottom: var(--lg); }
    .md-bottom-xl       { bottom: var(--xl); }
}

/* Position Responsive - lg (desktops) */
@media (min-width: 992px) {
    /* Left */
    .lg-left            { left: 0; }
    .lg-left-xs         { left: var(--xs); }
    .lg-left-sm         { left: var(--sm); }
    .lg-left-md         { left: var(--md); }
    .lg-left-lg         { left: var(--lg); }
    .lg-left-xl         { left: var(--xl); }
    
    /* Right */
    .lg-right           { right: 0; }
    .lg-right-xs        { right: var(--xs); }
    .lg-right-sm        { right: var(--sm); }
    .lg-right-md        { right: var(--md); }
    .lg-right-lg        { right: var(--lg); }
    .lg-right-xl        { right: var(--xl); }
    
    /* Top */
    .lg-top             { top: 0; }
    .lg-top-xs          { top: var(--xs); }
    .lg-top-sm          { top: var(--sm); }
    .lg-top-md          { top: var(--md); }
    .lg-top-lg          { top: var(--lg); }
    .lg-top-xl          { top: var(--xl); }
    
    /* Bottom */
    .lg-bottom          { bottom: 0; }
    .lg-bottom-xs       { bottom: var(--xs); }
    .lg-bottom-sm       { bottom: var(--sm); }
    .lg-bottom-md       { bottom: var(--md); }
    .lg-bottom-lg       { bottom: var(--lg); }
    .lg-bottom-xl       { bottom: var(--xl); }
}

/***************************************************************************************************************/
/* Marges */
/***************************************************************************************************************/

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

.marginLeft       { margin-left: var(--md); }
.marginLeft-xs    { margin-left: var(--xs); }
.marginLeft-sm    { margin-left: var(--sm); }
.marginLeft-md    { margin-left: var(--md); }
.marginLeft-lg    { margin-left: var(--lg); }
.marginLeft-xl    { margin-left: var(--xl); }

.marginRight      { margin-right: var(--md); }
.marginRight-xs   { margin-right: var(--xs); }
.marginRight-sm   { margin-right: var(--sm); }
.marginRight-md   { margin-right: var(--md); }
.marginRight-lg   { margin-right: var(--lg); }
.marginRight-xl   { margin-right: var(--xl); }

.marginTop        { margin-top: var(--md); }
.marginTop-xs     { margin-top: var(--xs); }
.marginTop-sm     { margin-top: var(--sm); }
.marginTop-md     { margin-top: var(--md); }
.marginTop-lg     { margin-top: var(--lg); }
.marginTop-xl     { margin-top: var(--xl); }

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

/* Margins Responsive - sm (mobiles) */
@media (max-width: 575px) {
    .sm-margin         { margin: var(--md); }
    .sm-margin-xs      { margin: var(--xs); }
    .sm-margin-sm      { margin: var(--sm); }
    .sm-margin-md      { margin: var(--md); }
    .sm-margin-lg      { margin: var(--lg); }
    .sm-margin-xl      { margin: var(--xl); }
    
    .sm-marginLeft     { margin-left: var(--md); }
    .sm-marginLeft-xs  { margin-left: var(--xs); }
    .sm-marginLeft-sm  { margin-left: var(--sm); }
    .sm-marginLeft-md  { margin-left: var(--md); }
    .sm-marginLeft-lg  { margin-left: var(--lg); }
    .sm-marginLeft-xl  { margin-left: var(--xl); }
    
    .sm-marginRight    { margin-right: var(--md); }
    .sm-marginRight-xs { margin-right: var(--xs); }
    .sm-marginRight-sm { margin-right: var(--sm); }
    .sm-marginRight-md { margin-right: var(--md); }
    .sm-marginRight-lg { margin-right: var(--lg); }
    .sm-marginRight-xl { margin-right: var(--xl); }
    
    .sm-marginTop      { margin-top: var(--md); }
    .sm-marginTop-xs   { margin-top: var(--xs); }
    .sm-marginTop-sm   { margin-top: var(--sm); }
    .sm-marginTop-md   { margin-top: var(--md); }
    .sm-marginTop-lg   { margin-top: var(--lg); }
    .sm-marginTop-xl   { margin-top: var(--xl); }
    
    .sm-marginBottom   { margin-bottom: var(--md); }
    .sm-marginBottom-xs { margin-bottom: var(--xs); }
    .sm-marginBottom-sm { margin-bottom: var(--sm); }
    .sm-marginBottom-md { margin-bottom: var(--md); }
    .sm-marginBottom-lg { margin-bottom: var(--lg); }
    .sm-marginBottom-xl { margin-bottom: var(--xl); }
}

/* Margins Responsive - md (tablettes) */
@media (min-width: 576px) and (max-width: 991px) {
    .md-margin         { margin: var(--md); }
    .md-margin-xs      { margin: var(--xs); }
    .md-margin-sm      { margin: var(--sm); }
    .md-margin-md      { margin: var(--md); }
    .md-margin-lg      { margin: var(--lg); }
    .md-margin-xl      { margin: var(--xl); }
    
    .md-marginLeft     { margin-left: var(--md); }
    .md-marginLeft-xs  { margin-left: var(--xs); }
    .md-marginLeft-sm  { margin-left: var(--sm); }
    .md-marginLeft-md  { margin-left: var(--md); }
    .md-marginLeft-lg  { margin-left: var(--lg); }
    .md-marginLeft-xl  { margin-left: var(--xl); }
    
    .md-marginRight    { margin-right: var(--md); }
    .md-marginRight-xs { margin-right: var(--xs); }
    .md-marginRight-sm { margin-right: var(--sm); }
    .md-marginRight-md { margin-right: var(--md); }
    .md-marginRight-lg { margin-right: var(--lg); }
    .md-marginRight-xl { margin-right: var(--xl); }
    
    .md-marginTop      { margin-top: var(--md); }
    .md-marginTop-xs   { margin-top: var(--xs); }
    .md-marginTop-sm   { margin-top: var(--sm); }
    .md-marginTop-md   { margin-top: var(--md); }
    .md-marginTop-lg   { margin-top: var(--lg); }
    .md-marginTop-xl   { margin-top: var(--xl); }
    
    .md-marginBottom   { margin-bottom: var(--md); }
    .md-marginBottom-xs { margin-bottom: var(--xs); }
    .md-marginBottom-sm { margin-bottom: var(--sm); }
    .md-marginBottom-md { margin-bottom: var(--md); }
    .md-marginBottom-lg { margin-bottom: var(--lg); }
    .md-marginBottom-xl { margin-bottom: var(--xl); }
}

/* Margins Responsive - lg (desktops) */
@media (min-width: 992px) {
    .lg-margin         { margin: var(--md); }
    .lg-margin-xs      { margin: var(--xs); }
    .lg-margin-sm      { margin: var(--sm); }
    .lg-margin-md      { margin: var(--md); }
    .lg-margin-lg      { margin: var(--lg); }
    .lg-margin-xl      { margin: var(--xl); }
    
    .lg-marginLeft     { margin-left: var(--md); }
    .lg-marginLeft-xs  { margin-left: var(--xs); }
    .lg-marginLeft-sm  { margin-left: var(--sm); }
    .lg-marginLeft-md  { margin-left: var(--md); }
    .lg-marginLeft-lg  { margin-left: var(--lg); }
    .lg-marginLeft-xl  { margin-left: var(--xl); }
    
    .lg-marginRight    { margin-right: var(--md); }
    .lg-marginRight-xs { margin-right: var(--xs); }
    .lg-marginRight-sm { margin-right: var(--sm); }
    .lg-marginRight-md { margin-right: var(--md); }
    .lg-marginRight-lg { margin-right: var(--lg); }
    .lg-marginRight-xl { margin-right: var(--xl); }
    
    .lg-marginTop      { margin-top: var(--md); }
    .lg-marginTop-xs   { margin-top: var(--xs); }
    .lg-marginTop-sm   { margin-top: var(--sm); }
    .lg-marginTop-md   { margin-top: var(--md); }
    .lg-marginTop-lg   { margin-top: var(--lg); }
    .lg-marginTop-xl   { margin-top: var(--xl); }
    
    .lg-marginBottom   { margin-bottom: var(--md); }
    .lg-marginBottom-xs { margin-bottom: var(--xs); }
    .lg-marginBottom-sm { margin-bottom: var(--sm); }
    .lg-marginBottom-md { margin-bottom: var(--md); }
    .lg-marginBottom-lg { margin-bottom: var(--lg); }
    .lg-marginBottom-xl { margin-bottom: var(--xl); }
}

/***************************************************************************************************************/
/* Padding */
/***************************************************************************************************************/

.padding          { padding: var(--md) !important; }
.padding-xs       { padding: var(--xs) !important; }
.padding-sm       { padding: var(--sm) !important; }
.padding-md       { padding: var(--md) !important; }
.padding-lg       { padding: var(--lg) !important; }
.padding-xl       { padding: var(--xl) !important; }

.paddingLeft      { padding-left: var(--md) !important; }
.paddingLeft-xs   { padding-left: var(--xs) !important; }
.paddingLeft-sm   { padding-left: var(--sm) !important; }
.paddingLeft-md   { padding-left: var(--md) !important; }
.paddingLeft-lg   { padding-left: var(--lg) !important; }
.paddingLeft-xl   { padding-left: var(--xl) !important; }

.paddingRight     { padding-right: var(--md) !important; }
.paddingRight-xs  { padding-right: var(--xs) !important; }
.paddingRight-sm  { padding-right: var(--sm) !important; }
.paddingRight-md  { padding-right: var(--md) !important; }
.paddingRight-lg  { padding-right: var(--lg) !important; }
.paddingRight-xl  { padding-right: var(--xl) !important; }

.paddingTop       { padding-top: var(--md) !important; }
.paddingTop-xs    { padding-top: var(--xs) !important; }
.paddingTop-sm    { padding-top: var(--sm) !important; }
.paddingTop-md    { padding-top: var(--md) !important; }
.paddingTop-lg    { padding-top: var(--lg) !important; }
.paddingTop-xl    { padding-top: var(--xl) !important; }

.paddingBottom    { padding-bottom: var(--md) !important; }
.paddingBottom-xs { padding-bottom: var(--xs) !important; }
.paddingBottom-sm { padding-bottom: var(--sm) !important; }
.paddingBottom-md { padding-bottom: var(--md) !important; }
.paddingBottom-lg { padding-bottom: var(--lg) !important; }
.paddingBottom-xl { padding-bottom: var(--xl) !important; }


/* Padding Responsive - sm (mobiles) */
@media (max-width: 575px) {
    .sm-padding        { padding: var(--md) !important; }
    .sm-padding-xs     { padding: var(--xs) !important; }
    .sm-padding-sm     { padding: var(--sm) !important; }
    .sm-padding-md     { padding: var(--md) !important; }
    .sm-padding-lg     { padding: var(--lg) !important; }
    .sm-padding-xl     { padding: var(--xl) !important; }
    
    .sm-paddingLeft    { padding-left: var(--md) !important; }
    .sm-paddingLeft-xs { padding-left: var(--xs) !important; }
    .sm-paddingLeft-sm { padding-left: var(--sm) !important; }
    .sm-paddingLeft-md { padding-left: var(--md) !important; }
    .sm-paddingLeft-lg { padding-left: var(--lg) !important; }
    .sm-paddingLeft-xl { padding-left: var(--xl) !important; }
    
    .sm-paddingRight   { padding-right: var(--md) !important; }
    .sm-paddingRight-xs { padding-right: var(--xs) !important; }
    .sm-paddingRight-sm { padding-right: var(--sm) !important; }
    .sm-paddingRight-md { padding-right: var(--md) !important; }
    .sm-paddingRight-lg { padding-right: var(--lg) !important; }
    .sm-paddingRight-xl { padding-right: var(--xl) !important; }
    
    .sm-paddingTop     { padding-top: var(--md) !important; }
    .sm-paddingTop-xs  { padding-top: var(--xs) !important; }
    .sm-paddingTop-sm  { padding-top: var(--sm) !important; }
    .sm-paddingTop-md  { padding-top: var(--md) !important; }
    .sm-paddingTop-lg  { padding-top: var(--lg) !important; }
    .sm-paddingTop-xl  { padding-top: var(--xl) !important; }
    
    .sm-paddingBottom  { padding-bottom: var(--md) !important; }
    .sm-paddingBottom-xs { padding-bottom: var(--xs) !important; }
    .sm-paddingBottom-sm { padding-bottom: var(--sm) !important; }
    .sm-paddingBottom-md { padding-bottom: var(--md) !important; }
    .sm-paddingBottom-lg { padding-bottom: var(--lg) !important; }
    .sm-paddingBottom-xl { padding-bottom: var(--xl) !important; }
}

/* Padding Responsive - md (tablettes) */
@media (min-width: 576px) and (max-width: 991px) {
    .md-padding        { padding: var(--md) !important; }
    .md-padding-xs     { padding: var(--xs) !important; }
    .md-padding-sm     { padding: var(--sm) !important; }
    .md-padding-md     { padding: var(--md) !important; }
    .md-padding-lg     { padding: var(--lg) !important; }
    .md-padding-xl     { padding: var(--xl) !important; }
    
    .md-paddingLeft    { padding-left: var(--md) !important; }
    .md-paddingLeft-xs { padding-left: var(--xs) !important; }
    .md-paddingLeft-sm { padding-left: var(--sm) !important; }
    .md-paddingLeft-md { padding-left: var(--md) !important; }
    .md-paddingLeft-lg { padding-left: var(--lg) !important; }
    .md-paddingLeft-xl { padding-left: var(--xl) !important; }
    
    .md-paddingRight   { padding-right: var(--md) !important; }
    .md-paddingRight-xs { padding-right: var(--xs) !important; }
    .md-paddingRight-sm { padding-right: var(--sm) !important; }
    .md-paddingRight-md { padding-right: var(--md) !important; }
    .md-paddingRight-lg { padding-right: var(--lg) !important; }
    .md-paddingRight-xl { padding-right: var(--xl) !important; }
    
    .md-paddingTop     { padding-top: var(--md) !important; }
    .md-paddingTop-xs  { padding-top: var(--xs) !important; }
    .md-paddingTop-sm  { padding-top: var(--sm) !important; }
    .md-paddingTop-md  { padding-top: var(--md) !important; }
    .md-paddingTop-lg  { padding-top: var(--lg) !important; }
    .md-paddingTop-xl  { padding-top: var(--xl) !important; }
    
    .md-paddingBottom  { padding-bottom: var(--md) !important; }
    .md-paddingBottom-xs { padding-bottom: var(--xs) !important; }
    .md-paddingBottom-sm { padding-bottom: var(--sm) !important; }
    .md-paddingBottom-md { padding-bottom: var(--md) !important; }
    .md-paddingBottom-lg { padding-bottom: var(--lg) !important; }
    .md-paddingBottom-xl { padding-bottom: var(--xl) !important; }
}

/* Padding Responsive - lg (desktops) */
@media (min-width: 992px) {
    .lg-padding        { padding: var(--md) !important; }
    .lg-padding-xs     { padding: var(--xs) !important; }
    .lg-padding-sm     { padding: var(--sm) !important; }
    .lg-padding-md     { padding: var(--md) !important; }
    .lg-padding-lg     { padding: var(--lg) !important; }
    .lg-padding-xl     { padding: var(--xl) !important; }
    
    .lg-paddingLeft    { padding-left: var(--md) !important; }
    .lg-paddingLeft-xs { padding-left: var(--xs) !important; }
    .lg-paddingLeft-sm { padding-left: var(--sm) !important; }
    .lg-paddingLeft-md { padding-left: var(--md) !important; }
    .lg-paddingLeft-lg { padding-left: var(--lg) !important; }
    .lg-paddingLeft-xl { padding-left: var(--xl) !important; }
    
    .lg-paddingRight   { padding-right: var(--md) !important; }
    .lg-paddingRight-xs { padding-right: var(--xs) !important; }
    .lg-paddingRight-sm { padding-right: var(--sm) !important; }
    .lg-paddingRight-md { padding-right: var(--md) !important; }
    .lg-paddingRight-lg { padding-right: var(--lg) !important; }
    .lg-paddingRight-xl { padding-right: var(--xl) !important; }
    
    .lg-paddingTop     { padding-top: var(--md) !important; }
    .lg-paddingTop-xs  { padding-top: var(--xs) !important; }
    .lg-paddingTop-sm  { padding-top: var(--sm) !important; }
    .lg-paddingTop-md  { padding-top: var(--md) !important; }
    .lg-paddingTop-lg  { padding-top: var(--lg) !important; }
    .lg-paddingTop-xl  { padding-top: var(--xl) !important; }
    
    .lg-paddingBottom  { padding-bottom: var(--md) !important; }
    .lg-paddingBottom-xs { padding-bottom: var(--xs) !important; }
    .lg-paddingBottom-sm { padding-bottom: var(--sm) !important; }
    .lg-paddingBottom-md { padding-bottom: var(--md) !important; }
    .lg-paddingBottom-lg { padding-bottom: var(--lg) !important; }
    .lg-paddingBottom-xl { padding-bottom: var(--xl) !important; }
}

/***************************************************************************************************************/
/* Borders  */
/***************************************************************************************************************/

.border-sm { border: var(--border-width-sm) solid var(--color-border); }
.border-md { border: var(--border-width-md) solid var(--color-border); }
.border-lg { border: var(--border-width-lg) solid var(--color-border); }

.borderLeft-sm { border-left: var(--border-width-sm) solid var(--color-border); }
.borderLeft-md { border-left: var(--border-width-md) solid var(--color-border); }   
.borderLeft-lg { border-left: var(--border-width-lg) solid var(--color-border); }

.borderRight-sm {  border-right: var(--border-width-sm) solid var(--color-border); }
.borderRight-md { border-right: var(--border-width-md) solid var(--color-border); }
.borderRight-lg { border-right: var(--border-width-lg) solid var(--color-border); }

.borderTop-sm { border-top: var(--border-width-sm) solid var(--color-border); }
.borderTop-md { border-top: var(--border-width-md) solid var(--color-border); }
.borderTop-lg { border-top: var(--border-width-lg) solid var(--color-border); }

.borderBottom-sm { border-bottom: var(--border-width-sm) solid var(--color-border); }
.borderBottom-md { border-bottom: var(--border-width-md) solid var(--color-border); }
.borderBottom-lg { border-bottom: var(--border-width-lg) solid var(--color-border); }

/***************************************************************************************************************/
/* Designs */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Round corner */
/***************************************************************************************************************/
.round-xs        { border-radius: var(--sm); }
.round-sm        { border-radius: var(--sm); }
.round-md        { border-radius: var(--md); }
.round-lg        { border-radius: var(--lg); }
.round-xl        { border-radius: var(--xl); }

.roundLeft-xs   { border-top-left-radius: var(--sm); border-bottom-left-radius: var(--sm); }
.roundLeft-sm   { border-top-left-radius: var(--sm); border-bottom-left-radius: var(--sm); }
.roundLeft-md   { border-top-left-radius: var(--md); border-bottom-left-radius: var(--md); }
.roundLeft-lg   { border-top-left-radius: var(--lg); border-bottom-left-radius: var(--lg); }
.roundLeft-xl   { border-top-left-radius: var(--xl); border-bottom-left-radius: var(--xl); }

.roundRight-xs   { border-top-right-radius: var(--sm); border-bottom-right-radius: var(--sm); }
.roundRight-sm   { border-top-right-radius: var(--sm); border-bottom-right-radius: var(--sm); }
.roundRight-md   { border-top-right-radius: var(--md); border-bottom-right-radius: var(--md); }
.roundRight-lg   { border-top-right-radius: var(--lg); border-bottom-right-radius: var(--lg); }
.roundRight-xl   { border-top-right-radius: var(--xl); border-bottom-right-radius: var(--xl); }

.roundTop-xs    { border-top-left-radius: var(--sm); border-top-right-radius: var(--sm); }
.roundTop-sm    { border-top-left-radius: var(--sm); border-top-right-radius: var(--sm); }
.roundTop-md    { border-top-left-radius: var(--md); border-top-right-radius: var(--md); }
.roundTop-lg    { border-top-left-radius: var(--lg); border-top-right-radius: var(--lg); }
.roundTop-xl    { border-top-left-radius: var(--xl); border-top-right-radius: var(--xl); }

.roundBottom-xs { border-bottom-left-radius: var(--sm); border-bottom-right-radius: var(--sm); }
.roundBottom-sm { border-bottom-left-radius: var(--sm); border-bottom-right-radius: var(--sm); }
.roundBottom-md { border-bottom-left-radius: var(--md); border-bottom-right-radius: var(--md); }
.roundBottom-lg { border-bottom-left-radius: var(--lg); border-bottom-right-radius: var(--lg); }
.roundBottom-xl { border-bottom-left-radius: var(--xl); border-bottom-right-radius: var(--xl); }

/***************************************************************************************************************/
/* Classes utilitaires - Ombres */
/***************************************************************************************************************/

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/***************************************************************************************************************/
/* Classes utilitaires - Bordures */
/***************************************************************************************************************/

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-light { border-color: var(--color-light); }
.border-dark { border-color: var(--color-dark); }
.border-red { border-color: var(--color-red); }
.border-green { border-color: var(--color-green); }
.border-yellow { border-color: var(--color-yellow); }
.border-blue { border-color: var(--color-blue); }

/***************************************************************************************************************/
/* Classes utilitaires - Couleurs de fond */
/***************************************************************************************************************/

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-light { background-color: var(--color-light); }
.bg-dark { background-color: var(--color-dark); }
.bg-red { background-color: var(--color-red); }
.bg-green { background-color: var(--color-green); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-blue { background-color: var(--color-blue); }

/***************************************************************************************************************/
/* Classes utilitaires - Couleurs de texte */
/***************************************************************************************************************/

.text-default { color: var(--color-text); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-light { color: var(--color-light); }
.text-dark { color: var(--color-dark); }
.text-red { color: var(--color-red); }
.text-green { color: var(--color-green); }
.text-yellow { color: var(--color-yellow); }
.text-blue { color: var(--color-blue); }

/***************************************************************************************************************/
/* Classes utilitaires - Transitions */
/***************************************************************************************************************/

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