// VARIABLES
// typography - most used fonts
  $mainFont: Lato, Sans-serif;
  $titleFont: Syne, Sans-serif;
// typography - utilité fonts
  @mixin publique-font {
    font-family: PlayfairDisplay, serif;
    font-style: italic;
  }
  @mixin sociale-font {
    font-family: ManifontGrotesk, sans-serif;
    font-weight: bold;
    font-style: italic;
  }
  @mixin culturelle-font {
    font-family: Avara, serif;
    font-weight: bold;
    font-style: italic;
  }
// typography - index fonts
  @mixin figures-libres-font {
    font-family: Syne, sans-serif;
    font-weight: bold;
  }
  @mixin logiciels-libres-font {
    font-family: Rumeur, sans-serif;
    font-weight: bold;
  }
  @mixin commanditaires-font {
    font-family: Moche, sans-serif;
    font-weight: bold;
  }
  @mixin projets-font {
    font-family: Redaction50, serif;
    font-weight: bold;
  }

// typography - general sizes
  $currentSize: 1.2em;
  $smallSize: 0.95em;
  $tinySize: 0.75em;
  $currentLineHeight: 1.25em;
  $titleLineHeight: 1.1em;
// typography - sizes mobile
  $titleFontSizeMobile: 1.8em;
  $bigFontSizeMobile: 2.2em;
// typography - sizes desktop
  $bigFontSizeDesktop: 2.9em;
// typography - pictograms
  $pictoInlineWidth: 12px;
  $pictoInlineHeight: 10px;
  $pictoSmallWidth: 25px;
  $pictoSmallHeight: 23px;
  $pictoLargeWidth: 45px;
  $pictoLargeHeight: 37px;
  $pictoExtraLargeWidth: 60px;
  $pictoExtraLargeHeight: 54px;

// colors - theme colors
  $mainColor: #0e1229;
  $mainColorSoft: #1f2429;
  $bgColor: #f5f5f5;
// colors - gradient
  $bgGradientToBottom: linear-gradient(to bottom, #{$bgColor}, #{$bgColor}00);
  $bgGradientToLeft: linear-gradient(to left, #{$bgColor}, #{$bgColor}00);
// colors - opacity
  $transparency: 0.4;
// layout - general
  $navHeight: 7vh;
  $sectionSpacing: 30px;
// layout - mobile
  $bodyMarginMobile: 3vw;
  $navGradientHeightMobile: 4vh;
  $footerHeightMobile: 7vh;
// layout - desktop
  $navGradientHeightDesktop: 2vh;
  $bodyWidth: 65vw;
  $maxBodyWidth: 1300px;
  $footerHeightDesktop: 5vh;
  $marginTopShortContent: 7vh;
  $footerHeightDesktop: 4vh;

// transition
  @mixin transition-ease-out($transitions...) {
    $unfoldedTransitions: ();
    @each $transition in $transitions {
      $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
    }
    transition: $unfoldedTransitions;
  }
  @function unfoldTransition ($transition) {
    $property: all;
    $duration: .4s;
    $defaultProperties: ($property, $duration, ease-out);

    $unfoldedTransition: ();
    @for $i from 1 through length($defaultProperties) {
      $p: null;
      @if $i <= length($transition) {
        $p: nth($transition, $i)
      } @else {
        $p: nth($defaultProperties, $i)
      }
      $unfoldedTransition: append($unfoldedTransition, $p);
    }

    @return $unfoldedTransition;
  }
// animation
  @keyframes arrowIndex {
    30% { transform: translateY(0px); }
    50% { transform: translateY(20px); }
    70% { transform: translateY(0px); }
  }
// media queries - tablet
  $minScreenWidthS: 576px;
// media queries - small desktop
  $minScreenWidthM: 996px;
// media queries - large desktop
  $minScreenWidthL: 1500px;