/***************************************************************************************************************/
/* Akwa CSS Position
/* 2018-2022 Jean de La Taille
/***************************************************************************************************************/

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

/* mesures Responsive */
@media (max-width: 18cm) and (orientation: landscape), (orientation: portrait) {
    :root {
        --small: 5px;
        --medium: 12px;
        --large: 30px;
    }
}
@media (min-width: 18cm) and (orientation: landscape) {
    :root {
        --small: 5px;
        --medium: 15px;
        --large: 40px;
    }
}

: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;
}
@media (max-width: 18cm) and (orientation: landscape), (orientation: portrait) {
    :root {
        --size8: 8px;
        --size10: 10px;
        --size12: 12px;
        --size14: 14px;
        --size16: 15px;
        --size18: 16px;
        --size20: 18px;
        --size22: 20px;
        --size24: 22px;
        --size28: 24px;
        --size32: 26px;
        --size40: 28px;
        --size48: 32px;
    }
}

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

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

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

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

/***************************************************************************************************************/
/* Texte */
/***************************************************************************************************************/

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

html { font-size: var(--size14);  } 
/*@media (max-width: 29cm) and (orientation: landscape) {
  html { font-size: 0.45cm; }
}
@media (max-width: 15cm) and (orientation: landscape), (orientation: portrait) {
  html { font-size: 0.4cm; }
}*/

h1, .h1         { font-size: var(--size32); }
h2, .h2         { font-size: var(--size28); }
h3, .h3         { font-size: var(--size22); }
h4, .h4         { font-size: var(--size20); }
h5, .h5         { font-size: var(--size18); }

xxlarge, .xxlarge { font-size: var(--size32); }
xlarge, .xlarge   { font-size: var(--size24); }
large, .large     { font-size: var(--size20); }
normal, .normal   { font-size: var(--size18); }
medium, .medium   { font-size: var(--size14); }
small, .small     { font-size: var(--size12); }
xsmall, .xsmall   { font-size: var(--size10); }

.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; }

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

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

/* Visibility responsive */
@media (max-width: 18cm) and (orientation: landscape), (orientation: portrait) {
  .s-hidden   { display: none !important; }
  .l-visible  { display: none !important; }
}
@media (min-width: 18cm) and (orientation: landscape) {
  .l-hidden   { display: none !important; }
  .s-visible  { display: none !important; }
}

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

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

/* dimensions Responsive */
@media (max-width: 18cm) and (orientation: landscape), (orientation: portrait) {
  .s-wide    { width: 100%; }
  .s-huge    { height: 100%; }
  img.s-wide { height: auto; }
  img.s-huge { width: auto; }
}
@media (min-width: 18cm) and (orientation: landscape) {
  .l-wide    { width: 100%; }
  .l-huge    { height: 100%; }
  img.l-wide { height: auto; }
  img.l-huge { width: auto; }
}

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

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

.left           { margin-right: auto; }
.center         { margin-right: auto; margin-left: auto; }
.right          { margin-left:  auto; }
.top            { margin-bottom: auto; }
.middle         { margin-top:  auto; margin-bottom: auto; }
.bottom         { margin-top:  auto; }

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

.flexCenter     { justify-content: center; }
.flexRight      { justify-content: right;  }

/* Flex Responsive */
@media (max-width: 18cm) and (orientation: landscape), (orientation: portrait) {
  .s-flex           { display: flex; }
  .s-vertical       { flex-direction: column; }
}
@media (min-width: 18cm) and (orientation: landscape) {
  .l-flex           { display: flex; }
  .l-vertical       { flex-direction: column; }
}

/***************************************************************************************************************/
/* Position  */
.left           { left: 0; }
.left-s         { left: var(--small); }
.left-m         { left: var(--medium); }
.left-l         { left: var(--large); }
.right          { right: 0; }
.right-s        { right: var(--small); }
.right-m        { right: var(--medium); }
.right-l        { right: var(--large); }
.top            { top: 0; }
.top-s          { top: var(--small); }
.top-m          { top: var(--medium); }
.top-l          { top: var(--large); }
.bottom         { bottom: 0; }
.bottom-s       { bottom: var(--small); }
.bottom-m       { bottom: var(--medium); }
.bottom-l       { bottom: var(--large); }

/* Marges */
.margin-s       { margin:               var(--small); }
.marginLeft-s   { margin-left:          var(--small); }
.marginRight-s  { margin-right:         var(--small); }
.marginTop-s    { margin-top:           var(--small); }
.marginBottom-s { margin-bottom:        var(--small); }
.margin-m       { margin:               var(--medium); }
.marginLeft-m   { margin-left:          var(--medium); }
.marginRight-m  { margin-right:         var(--medium); }
.marginTop-m    { margin-top:           var(--medium); }
.marginBottom-m { margin-bottom:        var(--medium); }
.margin-l       { margin:               var(--large); }
.marginLeft-l   { margin-left:          var(--large); }
.marginRight-l  { margin-right:         var(--large); }
.marginTop-l    { margin-top:           var(--large); }
.marginBottom-l { margin-bottom:        var(--large); }

/* padding */
.padding-s       { padding:               var(--small) !important; }
.paddingLeft-s   { padding-left:          var(--small) !important; }
.paddingRight-s  { padding-right:         var(--small) !important; }
.paddingTop-s    { padding-top:           var(--small) !important; }
.paddingBottom-s { padding-bottom:        var(--small) !important; }
.padding-m       { padding:               var(--medium) !important; }
.paddingLeft-m   { padding-left:          var(--medium) !important; }
.paddingRight-m  { padding-right:         var(--medium) !important; }
.paddingTop-m    { padding-top:           var(--medium) !important; }
.paddingBottom-m { padding-bottom:        var(--medium) !important; }
.padding-l       { padding:               var(--large) !important; }
.paddingLeft-l   { padding-left:          var(--large) !important; }
.paddingRight-l  { padding-right:         var(--large) !important; }
.paddingTop-l    { padding-top:           var(--large) !important; }
.paddingBottom-l { padding-bottom:        var(--large) !important; }

/* Round corner */
.round-s        { border-radius: 5px; }
.round-m        { border-radius: 10px; }
.round-l        { border-radius: 15px; }

/* Margins Responsive */
@media (max-width: 18cm) and (orientation: landscape), (orientation: portrait) {
    /* Marges */
    .s-margin-s       { margin:               var(--small); }
    .s-margin-m       { margin:               var(--medium); }
    .s-margin-l       { margin:               var(--large); }

    /* padding */
    .s-padding-s       { padding:              var(--small) !important; }
    .s-padding-m       { padding:              var(--medium) !important; }
    .s-padding-l       { padding:              var(--large) !important; }
}
@media (min-width: 18cm) and (orientation: landscape) {
    /* Marges */
    .l-margin-s       { margin:               var(--small); }
    .l-margin-m       { margin:               var(--medium); }
    .l-margin-l       { margin:               var(--large); }

    /* padding */
    .l-padding-s       { padding:              var(--small) !important; }
    .l-padding-m       { padding:              var(--medium) !important; }
    .l-padding-l       { padding:              var(--large) !important; }
}