@charset "UTF-8";
/*!
Theme Name: Design System Fusion
Theme URI: http://underscores.me/
Author: Chandra Josephus
Author URI: http://underscores.me/
Description: Un Design System et un thème pour SOUNDSLIKE 
Version: 1.2.0 / Rework

@date (dernières modifs): 24.03.25
@notes : Works -> 
    - again
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

0 / VARIABLES, mixins sass et Maquettage
    0.1 = Mixins
    0.2 = Variables 
    0.3 = Maquettage 

1 / Normalize et RESET
    1.1 = Normalize
    1.2 = Reset

2 / BASE (général)
    2.1 = Typo
    2.2 = Couleurs (charte graphique)
        # Colours #
        # Gradients #
        # Shades #
    - gradients
    2.3 = Eléments html
        # Generals #
        -- headings
        -- Listes
        -- Liens
        -- Images
        # Forms #

3 / NAVIGATION
    3.1 = Menus
    3.2 = Menu mobile


4 / ALIGNEMENT and GRIDS 
    4.1 = Grids
    4.2 = Flex 
    4.3 = Columns


5 / USEFULS and tools 
    5.1 = Usefuls
    5.2 = Widths and heights 
    5.3 = Spacing 
    5.4 = Text tools
    5.5 = Borders
    5.6 = Shapes (circle, triangles...)


6 / COMPONENTS (éléments modulaires)
    6.1 = # Boutons #
    6.2 = # Cards #
    6.3 = # Images (special) #
    6.4 = # Galleries #
    6.5 = # Player audio / video #
    6.6 = # Icons #
    6.7 = # Timeline #
    6.8 = # Carousels #
    6.9 = # DECORATION #     


7 - LIBRARIES 
    7.1 = Animate
    7.2 = Sal
    7.3 = Animations persos et autres
    7.4 = Prisms
    7.5 = Effects


8 - MODULES (plugins js / WP)
    8.0 = MODULES DIVERS (BS, etc)
    8.1 = Slick slider
    8.2 = WORDPRESS
    8.3 = AUTRES (Headroom,...)


9 - LAYOUT -> styles spécifiques au SITE
    9.0 = CUSTOM, DS LAYOUT et Theme switcher
    9.1 = All pages 
    9.2 = Pages 
    9.3 = Posts

10 - MEDIA QUERIES 

*/
/* ========= LET'S GO ! ========== */
/*
0 - VARIABLES, mixins and Maquettage
--------------------------------------------------------------*/
/* 0.1 = MIXINS */
/* MIXINS */
/* GRID Layout */
/* FLEXbox */
/* Bordure sur les liens */
/* 0.2 = VARIABLES */
/* VARIABLES SASS */
/* MEDIA QUERIES */
/* Theme switcher : dark -> light theme */
/* LIGHT theme */
.light-theme {
  --color-primary: #0060df;
  --color-secondary: #fff;
  --color-accent: #fd6f53;
  --font-color: var(--black);
  --font-color-light: var(--gray); /* lighter */
  --links-color: var(--color-3);
  --links-color-hover: var(--color-4);
  --border-color: var(--gray-xlight);
}

/* DARK theme */
.dark-theme {
  --color-primary: #17ed90;
  --color-secondary: #2a2c2d;
  --color-accent: #12cdea;
  --font-color: var(--white);
  --font-color-light: var(var(--light-white)); /* lighter */
  /*--links-color: var(--color-3);
  --links-color-hover: var(--color-4);*/ /* SAME AS LIGHT THEME */
  --border-color: var(--gray-light);
}

/* ROOT VARIABLES */
:root {
  /* COULEURS */
  /* Nuances de Gris */
  --black: rgba(0, 0, 0, 1);
  --gray: rgba(0, 0, 0, .75);
  --gray-medium: rgba(0, 0, 0, .5);
  --gray-light: rgba(0, 0, 0, .25);
  --gray-xlight: rgba(0, 0, 0, .1);
  --white: rgba(255, 255, 255, 1);
  --light-white: rgba(255, 255, 255, .75);
  /* LIENS */
  /* texte des boutons */
  --color-txt-btn: #fff;
  /* Couleurs -> Japp */
  --color-1: rgba(1, 25, 54, 1); /* Bleu Noir -> header, navbar ? */
  --color-2: rgba(249, 220, 92, 1); /* Jaune */
  --color-3: rgba(237, 37, 78, 1); /* Rouge Rose -> bouton survolé */
  --color-4: rgba(194, 31, 64, 1); /* Rouge "pourpre" -> bouton par défaut */
  --color-5: rgba(244, 255, 253, 1); /* Blanc "bleuté" -> fonds d'éléments ? */
  /* POLICES */
  --main-font: "PT Serif", serif; /* PT Serif pour le CORPS de texte */
  --headings-font: "Roboto", sans-serif; /* Roboto pour les TITRES */
  --custom-font: "Eurostile", sans-serif; /* Adobe Font */
  /* Test : Typo et RYTHME vertical */
  --rs-font-size: 16px;
  --rs-line-height: 1.5;
  /* OMBRAGES */
  /* GRIS */
  --small-shadow: 0 .25rem .375rem rgba(0,0,0,.09);
  --shadow-default: 0px 10px 30px -10px rgba(151, 163, 184, 0.5);
  --medium-shadow: 0 14px 28px rgba(0, 0, 0, 0.015), 0 10px 10px rgba(0, 0, 0, 0.035);
  --light-shadow: 0 .5rem 1rem rgba(0,0,0,.15); /* cf .shadow Bootstrap */
  --xlight-shadow: 0 .25rem .5rem rgba(0,0,0,.15);
  --green-shadow: 0 .5rem 1rem rgba(0, 204, 153, 0.2); /* sur la base de vertsiders */
  --yellow-shadow: 0 .5rem 1rem rgba(255, 144, 0, 0.25); /* sur la base de --color-6 */
  --red-shadow: 0 .5rem 1rem rgba(238, 89, 65, 0.25); /* sur la base de --color-7 */
  /* RED */
  --red-shadow--default: 0px 10px 30px -10px rgba(237, 37, 78, 0.5);
  --red-shadow--hover:
      0px 10px 0px -10px rgba(237, 37, 78, 0.5),
      0px 20px 10px -20px rgba(237, 37, 78, 0.5),
      0px 30px 20px -25px rgba(237, 37, 78, 0.5),
      0px 40px 30px -30px rgba(237, 37, 78, 0.5),
      0px 50px 50px -35px rgba(237, 37, 78, 0.5);
  /* YELLOW */
  --yellow-shadow--default: 0px 10px 30px -10px rgba(249, 220, 92, 0.5);
  --yellow-shadow--hover:
      0px 10px 0px -10px rgba(249, 220, 92, 0.5),
      0px 20px 10px -20px rgba(249, 220, 92, 0.5),
      0px 30px 20px -25px rgba(249, 220, 92, 0.5),
      0px 40px 30px -30px rgba(249, 220, 92, 0.5),
      0px 50px 50px -35px rgba(249, 220, 92, 0.5);
  /* DEGRADES */
  --gradient-red-yellow:
      linear-gradient(
          50deg,
          var(--color-4) 0%,
          var(--color-3) 51%,
          var(--color-2) 100%);
  --gradient-yellow-red:
      linear-gradient(
          50deg,
          var(--color-2) 0%,
          var(--color-3) 51%,
          var(--color-4) 100%);
  --gradient-to-blue:
      linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0),
          var(--color-1)
      );
  /* Tests */
  --gradient-purple-to-orange:
      linear-gradient(
          97deg,
          rgba(64,43,110,1) 0%,
          rgba(219,43,123,1) 57%,
          rgba(234,105,91,1) 100%
      );
  --gradient-deep-blue-to-orange:
      linear-gradient(
          97deg,
          rgba(11,118,151,1) 0%,
          rgba(219,43,123,1) 75%,
          rgba(234,105,91,1) 97%
      );
  --gradient-pink-to-orange:
      linear-gradient(
          to right,
          #D41D70,
          #EA695B
      );
  /* WHITE -> BLACK (radial) */
  --radial-black-gradient:
      radial-gradient(
          circle,
          rgba(255,255,255,0) 0%,
          rgba(0,0,0,.25) 70%,
          rgba(0,0,0,.55) 100%
      );
  /* Experimental */
  --gradient-blue-to-green:
      linear-gradient(
          45deg,
          rgba(0,132,193,1) 35%,
          rgba(2,190,138,1) 80%);
  --gradient-blue-to-orange:
      linear-gradient(
          45deg,
          rgba(102,205,170,1) 35%,
          rgba(253,130,29,1) 80%);
  --gradient-blue-to-red:
      linear-gradient(
          45deg,
          rgba(102,205,170,1) 35%,
          rgba(253,51,29,1) 80%);
  /* B, W et Gray */
  --gradient-to-black: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0),
          rgba(0, 0, 0, 1)
      ); /* background-image */
  --gradient-black-to-white: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1),
          rgba(255, 255, 255, 0)
      ); /* background-image */
  --gradient-to-white: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 1)
      ); /* background-image */
  --gradient-to-gray: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0) 50%,
          rgba(238, 238, 238, 1)
      ); /* background-image */
  --gradient-orange-red:
      linear-gradient(
          to right top,
          #ff9000,
          #fe811d,
          #fa732c,
          #f56637,
          #ee5941
      );
  --grid-cols: repeat(2,1fr);
  /* COLONNES */
  --grid-cols: repeat(2,1fr);
}

/* == MEDIA QUERIES == */
@media (min-width: 992px) {
  :root {
    /* Test : Typo et Rythme vertical */
    --rs-font-size: 18px;
    --rs-line-height: 1.75;
  }
}
/* 0.3 = MAQUETTAGE */
/* MAQUETTAGE */
/* Sur la page des COULEURS / Shadows, etc -> DS LAYOUT */
/* L'élément ul */
.colors-list,
.box-list {
  margin-top: 2rem;
  margin-bottom: 4rem;
  display: grid; /* contexte de grille (élément parent) */
  grid-template-columns: 1fr 1fr; /* 2 colonnes de largeurs identiques*/
  grid-gap: 1rem; /* une gouttière entre les éléments */
}

.box-list {
  grid-template-columns: 1fr; /* 1 colonne de largeurs identiques*/
}

/* L'élément <article> */
.box-item,
.color-item {
  margin-bottom: 1rem;
}

.box-item header,
.color-item header {
  padding: 0 1rem 1rem;
}

.color-item header {
  color: var(--gray-light);
}

.box-item h3,
.color-item h3 {
  font-size: 1.25rem;
}

.box-item p,
.color-item p {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Boite pour afficher les couleurs */
.box,
.color-box {
  border-radius: 0.5rem;
  min-height: 20vh;
  margin-bottom: 1rem;
  box-shadow: var(--small-shadow);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  text-align: center;
  font-size: 1.25rem;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center; /* horizontalement */
  align-items: center; /* verticalement */
}

/* Boite pour afficher shadows et gradients */
.box,
.color-box:hover {
  box-shadow: var(--shadow-default); /* Ombrage material */
}

.color-box-title {
  padding: 0.5rem;
  background: #fff;
  color: #000;
  width: 100%;
}

/*
1 - Normalize et RESET
--------------------------------------------------------------*/
/* 1.1 = NORMALIZE */
/* 1.2 = RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
2 -  BASE (général)
--------------------------------------------------------------*/
/* 2.1 = TYPO */
/* FONTS */
/*
@font-face {
  font-family: "Oswald";
  src:  url("../fonts/Oswald-Bold.ttf")  format("truetype"),
		url("../fonts/Oswald-Light.ttf")  format("truetype"),
		url("../fonts/Oswald-Regular.ttf")  format("truetype");
}
*/
/* ECHELLE TYPOGRAPHIQUE et ENTETES */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .h6, h6 {
  font-family: var(--headings-font); /* Roboto */
  /* margin-bottom: 1rem; */
  font-weight: 500;
  margin: 3rem 0 1.38rem;
  line-height: 1.3;
}

h1, .h1 {
  /*font-size: 2.5rem; */
  /* 40px */
  font-weight: 700;
  margin-top: 0;
  font-size: 1.802rem;
}

h2, .h2 {
  /*font-size: 2.25rem;*/
  /* 36px */
  /*font-weight: 700;*/
  font-size: 1.602rem;
}

h3, .h3 {
  /* font-size: 2rem; */
  /* 32px */
  font-size: 1.424rem;
}

h4, .h4 {
  /* font-size: 1.75rem; */
  /* 28px */
  font-size: 1.266rem;
}

h5, .h5 {
  /*font-size: 1.5rem; */
  /* 24px */
  font-size: 1rem;
}

h6, .h6 {
  font-size: 1.25rem;
  /* 20px */
}

/* Polices */
.custom-font {
  font-family: var(--custom-font); /* Eurostile */
}

.headings-font {
  font-family: var(--headings-font); /* Roboto */
}

.main-font {
  font-family: var(--main-font); /* PT Serif */
}

/* GRAISSES */
.is-light {
  font-weight: 300 !important;
}

.is-regular {
  font-weight: 400 !important;
}

.is-bold {
  font-weight: 700 !important;
}

.is-fat {
  font-weight: 900 !important;
}

/* Tailles */
small, .text_small {
  font-size: 0.889rem;
}

/* MEDIA QUERIES */
@media screen and (min-width: 768px) {
  .is-big-x5 {
    font-size: 5vmin;
  }
}
/* 2.2 = COULEURS (Charte graphique) */
/* # COLORS # */
/* CHARTE GRAPHIQUE  */
/* -> Couleurs de FONDS */
.color-1 {
  background-color: var(--color-1);
}

.color-2 {
  background-color: var(--color-2);
}

.color-3 {
  background-color: var(--color-3);
}

.color-4 {
  background-color: var(--color-4);
}

.color-5 {
  background-color: var(--color-5);
}

.color-6 {
  background-color: var(--color-6);
}

.color-7 {
  background-color: var(--color-7);
}

/* B, W and Gray */
.has-bg-black {
  background-color: var(--black) !important;
}

.has-bg-gray {
  background-color: var(--gray) !important;
}

.has-bg-gray-medium {
  background-color: var(--gray-medium) !important;
}

.has-bg-gray-light {
  background-color: var(--gray-light) !important;
}

.has-bg-gray-xlight {
  background-color: var(--gray-xlight) !important;
}

.has-bg-white {
  background-color: var(--white) !important;
}

/* -> Couleurs de POLICES */
.txt-color-1 {
  color: var(--color-1);
}

.txt-color-2 {
  color: var(--color-2);
}

.txt-color-3 {
  color: var(--color-3);
}

.txt-color-4 {
  color: var(--color-4);
}

.txt-color-5 {
  color: var(--color-5);
}

.txt-color-6 {
  color: var(--color-6);
}

.txt-color-7 {
  color: var(--color-7);
}

/* B to W */
.txt-black {
  color: var(--black) !important;
}

.txt-gray {
  color: var(--gray) !important;
}

.txt-gray-medium {
  color: var(--gray-medium) !important;
}

.txt-gray-light {
  color: var(--gray-light) !important;
}

.txt-gray-xlight {
  color: var(--gray-xlight) !important;
}

.txt-white {
  color: var(--white) !important;
}

/* # GRADIENTS # */
/* GRADIENTS */
.has-gradient-red-yellow {
  background-image: var(--gradient-red-yellow);
}

.has-gradient-yellow-red {
  background-image: var(--gradient-yellow-red);
}

.has-gradient-to-blue {
  background: var(--gradient-to-blue);
}

.has-gradient-blue-to-green {
  background: var(--gradient-blue-to-green);
}

.has-gradient-blue-to-orange {
  background: var(--gradient-blue-to-orange);
}

.has-gradient-blue-to-red {
  background: var(--gradient-blue-to-red);
}

.has-gradient-to-black {
  background: var(--gradient-to-black);
}

.has-gradient-to-white {
  background: var(--gradient-to-white);
}

.has-gradient-orange-red {
  background: var(--gradient-orange-red);
}

.has-gradient-purple-to-orange {
  background: var(--gradient-purple-to-orange);
}

.has-gradient-deep-blue-to-orange {
  background: var(--gradient-deep-blue-to-orange);
}

.has-gradient-pink-to-orange {
  background: var(--gradient-pink-to-orange);
}

/* Sommets de boites */
.has-gradient-black-top {
  position: relative;
}

.has-gradient-black-top::before {
  position: absolute;
  top: -25vh;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 25vh;
  background-image: var(--gradient-to-black);
}

/* Annuler les dégradés de fond sur (cf .image-banner--header) */
.has-no-gradient {
  background-image: none !important;
}

/* # SHADES # */
/* OMBRAGES */
.xlight-shadow {
  box-shadow: var(--xlight-shadow) !important;
}

.green-shadow {
  box-shadow: var(--green-shadow) !important;
}

.yellow-shadow {
  box-shadow: var(--yellow-shadow) !important;
}

/* Gris */
.has-small-shadow {
  box-shadow: var(--small-shadow);
}

.has-shadow-default {
  box-shadow: var(--shadow-default);
}

.has-medium-shadow {
  box-shadow: var(--medium-shadow);
}

.has-xlight-shadow {
  box-shadow: var(--xlight-shadow);
}

.has-light-shadow {
  box-shadow: var(--light-shadow);
}

/* Yellow */
.yellow-shadow {
  box-shadow: var(--yellow-shadow--default);
  transition: box-shadow 0.25s;
}

.yellow-shadow--hover,
.yellow-shadow:hover {
  box-shadow: var(--yellow-shadow--hover);
  transition: box-shadow 0.25s;
}

/* Red */
.red-shadow {
  box-shadow: var(--red-shadow--default);
  transition: box-shadow 0.25s;
}

.red-shadow--hover,
.red-shadow:hover {
  box-shadow: var(--red-shadow--hover);
  transition: box-shadow 0.25s;
}

/* OMBRAGES : suite */
.z-depth-top {
  box-shadow: 0 -20px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
}

.z-depth {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
}

/* 2.3 = # BOUTONS # */
/* BOUTONS */
/* Apparence PAR DEFAUT */
.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  background-color: var(--color-3); /* couleur du bouton : idem liens */
  color: var(--color-txt-btn); /* blanc */
  text-decoration: none;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1.5rem;
  outline: 0 none !important;
  border: none;
  overflow: hidden;
  transition: 0.25s;
}

/* Bouton AU SURVOL */
.btn:hover {
  /* background-color: var(--color-4)!important; /* couleur des liens survolés */
  color: var(--color-txt-btn); /* blanc */
  /* opacity: .85; */
  transition: 0.25s;
}

/* Bouton circulaire */
.is-circular-xs {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  font-size: 1.5rem;
  border-radius: 50%;
  text-align: center;
}

/* Icônes .fa dans les boutons circulaires */
.is-circular-xs .fa,
.is-circular-xs .fas {
  font-size: 1.25rem;
}

/* Arrondi  */
.is-rounded {
  border-radius: 2.5rem; /* Arrondi ? */
}

/* Bouton "Fat" */
.is-large {
  width: 150px; /* Empirique */
}

/* Bouton "Outline" */
.is-outline {
  background-color: transparent;
  border: 1px solid var(--color-3);
  color: var(--color-3);
  transition: 0.25s;
}

/* Bouton "Outline" White */
.is-outline-white {
  background-color: transparent;
  border: 1px solid var(--color-txt-btn);
  color: var(--color-txt-btn);
  transition: 0.25s;
}

.is-outline:hover,
.is-outline-white:hover {
  background-color: var(--color-4);
  border-color: var(--color-4);
  opacity: 1;
  transition: 0.25s;
}

/* Bouton "Call-to-Action" */
.is-cta {
  background: var(--gradient-yellow-red);
  box-shadow: var(--red-shadow);
  transition: 0.25s;
}

.is-cta::before {
  background: var(--gradient-yellow-red);
}

.is-cta:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0); /* transparent  */
  box-shadow: var(--yellow-shadow);
  transition: 0.25s;
}

/* Ascenseur */
.to-top {
  position: absolute;
  right: 25px;
  bottom: 25px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 2rem;
  border: 1px solid var(--color-4);
  color: var(--color-4);
  transition: 0.25s;
}

.to-top:hover {
  background-color: var(--color-5);
  transition: 0.25s;
}

/* 2.4 = Eléments html */
/* # GENERALS # */
/* ----------------------------
        STYLES GENERAUX
------------------------------ */
* {
  scroll-behavior: smooth;
}

/* CORPS */
body {
  font-family: var(--main-font); /* PT Serif */
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  width: 100%;
  overflow-x: hidden;
}

hr {
  margin: 2rem 0;
  color: var(--border-color);
}

/* LISTES */
ol,
ul {
  padding-left: 0;
}

li {
  list-style-type: none;
}

/* textes */
p {
  padding-bottom: 1rem;
  margin-bottom: 0; /*cf BTSP */
}

/* IMAGES et médias */
figure {
  margin: 0;
}

img,
video,
iframe,
audio {
  display: block;
  width: 100%;
}

/* CODE */
pre {
  width: 100%;
  overflow: hidden;
}

pre code {
  scrollbar-color: #666 #201c29;
  background: 0 0;
  /*padding: 15px 20px 12px 22px;*/
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  display: block;
  overflow-x: scroll;
  max-width: 100%;
  min-width: 100px;
  font-size: 16px;
  line-height: 1.75;
}

code:not([class*=language-]) {
  /* In Bootstrap */
  /*font-size: .875em;
  color: #d63384;
  word-wrap: break-word;*/
  background: var(--color-5);
  border: 0.5px solid var(--color-4);
  padding: 0.025rem 0.25rem;
  border-radius: 0.25rem;
}

/* BLOCKQUOTE */
blockquote {
  font-size: 5vmin;
  padding: 2rem;
  border-left: 5px solid var(--color-1);
  margin: 2rem 1rem;
}

.blockquote-author {
  font-size: 2.5vmin;
  color: var(--gray-light);
}

/* # FORMS # */
/* FORMULAIRES */
/* Balise <form> */
input:not([type=submit]),
input:not([type=range]),
textarea,
select {
  position: relative;
  display: block;
  width: 100%;
  font-family: var(--main-font);
  font-size: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 2.5rem;
  color: var(--color-1);
  border: 0;
  border-bottom: 1px solid var(--color-3);
  /* background-color: transparent; /* par défaut */
  background: transparent url("icon-set/edit.svg") 5px center no-repeat; /* Une image par défaut */
  transition: 0.25s;
}

input[type=submit] {
  font-size: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  text-align: center;
  outline: 0;
  border: 0;
}

input[type=submit]:hover {
  cursor: pointer;
}

textarea {
  background-image: url("icon-set/message.svg");
  background-position: 5px 0.5rem;
  min-height: 20vh;
}

input:focus,
textarea:focus,
select:focus {
  background-color: var(--color-3);
  background-color: #fafafa;
  box-shadow: var(--xlight-shadow);
  border-color: var(--color-5);
  transition: 0.25s;
}

input[type=tel] {
  background-image: url("icon-set/call.svg");
}

input[type=email] {
  background-image: url("icon-set/email.svg");
}

input[type=date] {
  background-image: url("icon-set/calendar.svg");
}

input[type=search] {
  background-image: url("icon-set/search.svg");
}

select {
  background-image: url("icon-set/map-marker.svg");
}

/* MISE EN FORME */
/* effet de bordure */
.input-border::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--color-5);
  /* background-color: red; */
  z-index: 10; /* ? */
}

.input-border:focus::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 100%;
  /* background-color: red; */
  z-index: 10; /* ? */
}

/* Une boite (div) autour de <label> et <input> */
.input-box {
  position: relative; /* pour superposer label et input */
  /* background: var(--color-3); */
}

/* UNIQUEMENT les <label> à l'intérieur de <form> (pas .nav-mob...) */
.form-label {
  display: inline-block;
  padding: 0.5rem 0;
  transition: 0.25s;
}

/* Une image d'utilisateur */
#name-input {
  background-image: url("icon-set/user.svg");
}

/*
3 / NAVIGATION
--------------------------------------------------------------*/
/* 3.1 = MENUS */
/* LIENS */
/* Liens par défaut */
a {
  position: relative;
  color: var(--links-color);
  text-decoration: none;
  transition: 0.25s;
}

a:hover {
  color: var(--color-4);
}

/* Les liens par défaut avec une bordure 
a,
a:link,
a:visited {
    position: relative;
	color: var(--color-3);
	text-decoration: none;    
    cursor: pointer;
	box-shadow: var(--color-3) 0px -1px 0px inset;
	transition: box-shadow 0.3s ease-in-out 0s;
}

a:hover {
	box-shadow: var(--color-3) 0px -6px 0px inset;
}
*/
/* MENU MOBILE css 

@note : fonctionne avec la police d'icônes "Font Awesome"

*/
/* Le bouton : "Toggle"  */
.toggle,
.close-toggle {
  position: absolute;
  top: 2.5px; /* empirique */
  left: 10px;
  min-width: 50px;
  min-height: 50px;
  padding: 0;
  line-height: 50px;
  text-align: center;
  color: var(--color-3);
  font-size: 2.5rem; /* régler en fonction du design de l'icône */
}

.toggle {
  /* color: var(--color-2);*/
  z-index: 1000;
}

.close-toggle {
  z-index: 1001; /* au dessus de .toggle */
}

.toggle-bottom {
  left: 50%;
  top: inherit;
  bottom: 1rem;
  transform: translateX(-50%);
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
  background-color: aquamarine;
  background-color: var(--color-5);
  font-size: 1.75rem;
}

.toggle:hover,
.close-toggle:hover {
  cursor: pointer;
}

/* "Menu" */
.toggle span,
.close-toggle span {
  display: none;
}

/* l'input (checkbox) */
.menu-toggle {
  display: none !important;
}

/* Le MENU ! */
.nav-mob {
  position: absolute;
  top: 0;
  left: -100%; /* à gauche par défaut */
  padding: 0.5rem 0;
  z-index: 1000;
  width: 100%;
  /* transitions css 3*/
  transition: transform 0.2s linear;
}

/* Position du menu AVANT LE "CLIC" */
#menu-toggle ~ .nav-mob {
  height: inherit;
  min-height: 100vh;
  /* Transformations */
  transform: translate3d(0, 0, 0);
  /* Transitions */
  transition: transform 0.2s ease-in-out;
}

/*  Position APRES LE "CLIC" */
#menu-toggle:checked ~ .nav-mob {
  /*transformations */
  transform: translate3d(100%, 0, 0);
  /* transitions*/
  transition: transform 0.2s ease-in-out;
  transition-delay: 0.25s;
}

#menu-toggle:checked ~ .bottom-nav {
  /* Transformations */
  transform: translateY(0);
}

/* MISE EN FORME du menu .nav-mob */
/*
.nav-mob li,
.bottom-nav li {  
    border-left: 5px solid var(--color-5);
}
   */
.nav-mob a,
.bottom-nav a {
  display: inline-block;
  padding: 0 0.5rem;
  transition: 0.25s;
}

.nav-mob a:hover,
.bottom-nav a:hover {
  color: var(--color-5);
  /* background-color: var(--color-5); */
}

/* BONUS : ANIMATION sur le menu */
#menu-toggle:checked ~ .nav-mob .animated,
#menu-toggle:checked ~ .nav-mob .animated li,
#menu-toggle:checked ~ .bottom-nav .animated,
#menu-toggle:checked ~ .bottom-nav .animated li {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-delay: 0.25s;
  opacity: 1;
}

#menu-toggle:checked ~ .nav-mob .animated li:nth-of-type(2),
#menu-toggle:checked ~ .bottom-nav .animated li:nth-of-type(2) {
  animation-delay: 0.35s;
}

#menu-toggle:checked ~ .nav-mob .animated li:nth-of-type(3) {
  animation-delay: 0.45s;
}

#menu-toggle:checked ~ .nav-mob .animated li:nth-of-type(4) {
  animation-delay: 0.55s;
}

/* 3.2 = MENU MOBILE */
/*
4 / ALIGNEMENT, GRIDS and COLUMNS
--------------------------------------------------------------*/
/* 4.1 = Grids */
/* GRID LAYOUT */
/* Display */
.grid-layout {
  display: grid;
}

/* GRILLES */
.grid-half {
  grid-template-columns: repeat(2, 1fr);
}

.grid-1-2-xl {
  display: grid;
  /* grid-gap: 1rem; */
  grid-template-columns: 1fr;
}

.grid-2-3-4-5 {
  grid-template-columns: var(--grid-cols);
}

.grid-2-3-4 {
  display: grid;
  /* grid-gap: 1rem; */
  grid-template-columns: repeat(2, 1fr);
}

/* Colonnes : 
 * Medium -> 3
 * Large -> 6
 * Xlarge -> 9
 */
.grid-3-6-9 {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.grid-4-6-8-12 {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}

/* USEFULS */
/* Marges */
.has-gutter {
  grid-gap: 1rem;
}

.has-gutter-2x {
  grid-gap: 2rem;
}

/* Annuler les marges */
.unguttered {
  grid-gap: 0 !important;
}

/* Etalement */
.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

/* Elements de grille (défaut) */
.grid-element {
  grid-auto-flow: row;
}

/* == MEDIA QUERIES == */
/* 1 : pour les SMARTPHONES en dessous de 600px */
/* 2 : pour les TABLETTES (MEDIUM) à partir de 768px */
@media screen and (min-width: 768px) {
  .grid-half-m {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  }
  .grid-third-m {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  }
  .grid-quarter-m {
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
  }
  .grid-1-3-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-2-3-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-3-6-9 {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid-4-6-8-12 {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* pour les LARGE SCREENS à partir de 1025px; */
@media screen and (min-width: 992px) {
  .grid-2-3-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-3-6-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid-4-6-8-12 {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid-half-l {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  }
  .grid-third-l {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  }
  .grid-quarter-l {
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
  }
}
/* XLARGE SCREENS à partir de 1280px */
@media screen and (min-width: 1200px) {
  .grid-1-2-xl {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-4-6-8-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid-half-xl {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  }
  .grid-third-xl {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  }
  .grid-quarter-xl {
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
  }
}
/* XXLARGE SCREENS à partir de 1441px */
@media screen and (min-width: 1441px) {
  .grid-1-3-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-half-xxl {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  }
  .grid-third-xxl {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  }
  .grid-quarter-xxl {
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
  }
}
/* 4.2 = Flex */
/* FLEXBOX */
.flex-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.centered-y {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.is-column-reverse {
  flex-direction: column-reverse;
}

.justify-end {
  justify-content: flex-end;
}

/* 4.3 = Columns */
/* 
 * Colonnes
 */
/**
*  => MISE EN PLACE ---
---------------------------- */
.simple-grid,
.double-grid,
.half,
.half-s,
.half-m,
.half-l,
.half-xl,
.half-xxl,
.third,
.third-s,
.third-m,
.third-l,
.third-xl,
.third-xxl,
.two-third,
.two-third-s,
.two-third-m,
.two-third-l,
.two-third-xl,
.two-third-xxl,
.quarter,
.quarter-s,
.quarter-m,
.quarter-l,
.quarter-xl,
.quarter-xxl,
.three-quarter,
.three-quarter-s,
.three-quarter-m,
.three-quarter-l,
.three-quarter-xxl,
.fifth,
.fifth-s,
.fifth-m,
.fifth-l,
.fifth-xl,
.sixth,
.sixth-s,
.sixth-m,
.sixth-l,
.sixth-xl {
  /* float: left; /* pour la compabilité avec .float-grid */
  /* position: relative; */ /* ? */
  width: 100%; /* par défaut ? */
}

/* SIXIEME */
.sixth,
.sixth-s {
  width: 16.6666667%; /* Sixième par défaut */
}

/* CINQUIEME */
.fifth,
.fifth-s {
  width: 20%;
}

/* QUART */
.quarter,
.quarter-s {
  width: 25%; /* Quart par défaut */
}

/* TIERS */
.third,
.third-s {
  width: 33.33%; /* Tiers par défaut */
}

/* MOITIE D'ECRAN */
.half,
.half-s,
.double-grid > * {
  width: 50%; /* moitié par défaut */
}

/* DEUX TIERS */
.two-third,
.two-third-s {
  width: 66.66%; /* Deux tiers par défaut */
}

/* TROIS-QUART */
.three-quarter,
.three-quarter-s {
  width: 75%; /* Trois-quart */
}

/* == MEDIA QUERIES == */
/* 1 : pour les SMARTPHONES en dessous de 600px */
@media screen and (max-width: 576px) {
  /* = ELEMENTS = */
  .half-s {
    width: 50%;
  }
  /* une classe pour faire flotter un élémentà un tiers de la largeur */
  .third-s {
    width: 33.33%;
  }
  .two-third-s {
    width: 66.66%;
  }
}
/* 2 : pour les TABLETTES (MEDIUM) à partir de 601px */
@media screen and (min-width: 768px) {
  .three-quarter-m {
    width: 75%; /* Trois-quart */
  }
  .half-m {
    width: 50%; /*moitié */
  }
  .quarter-m {
    width: 25%; /*  quart */
  }
  .third-m {
    width: 33.33%; /*  tiers */
  }
  .two-third-m {
    width: 66.66%; /*  deux tiers */
  }
  .sixth-m {
    width: 16.6666667%; /*  sixième */
  }
}
/* pour les LARGE SCREENS à partir de 1025px; */
@media screen and (min-width: 992px) {
  /* Une classe pour un affichage "fullscreen" ? */
  .fullscreen-l {
    width: 100%;
    height: 100vh;
  }
  .three-quarter-l {
    width: 75%; /* Trois-quart */
  }
  .half-l {
    width: 50%; /* moitié */
  }
  .quarter-l {
    width: 25%; /* quart */
  }
  .third-l {
    width: 33.33%; /* tiers */
  }
  .two-third-l {
    width: 66.66%; /* deux tiers */
  }
  .sixth-l {
    width: 16.6666667%; /* sixième */
  }
}
/* XLARGE SCREENS à partir de 1280px */
@media screen and (min-width: 1200px) {
  /* = GRILLES = */
  .three-quarter-xl {
    width: 75%; /* Trois-quart */
  }
  .half-xl {
    width: 50%; /* défaut */
  }
  .quarter-xl {
    width: 25%; /* 25% */
  }
  .third-xl {
    width: 33.33%;
  }
  .two-third-xl {
    width: 66.66%;
  }
  .sixth-xl {
    width: 16.6666667%; /* sixième */
  }
}
/* XXLARGE SCREENS à partir de 1441px */
@media screen and (min-width: 1441px) {
  .quarter-xxl {
    width: 25%;
  }
  .third-xxl {
    width: 33.3333333333%;
  }
  .half-xxl {
    width: 50%;
  }
  .two-third-xxl {
    width: 66.6666666667%;
  }
  .seventy-xxl {
    width: 70%;
  }
  .three-quarter-xxl {
    width: 75%;
  }
}
/*
5 / USEFULS and tools 
--------------------------------------------------------------*/
/* 5.1 = USEFULS */
/* CLEAR AND CLEARFIXES */
.clear { /* une classe pour gérer les clear */
  clear: both;
}

/* FLOAT */
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

/* POSITIONNEMENT  */
.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* Absolu et fixed */
.top-0 {
  top: 0;
}

.top-1 {
  top: 1rem;
}

.left-0 {
  left: 0;
}

.left-1 {
  left: 1rem;
}

.right-0 {
  right: 0;
}

.right-1 {
  right: 1rem;
}

.bottom-0 {
  bottom: 0;
}

.bottom-1 {
  bottom: 1rem;
}

/* DISPLAY */
.dsp-block {
  display: block !important;
}

/* une classe pour ne pas afficher */
.dsp-none {
  display: none !important;
}

/* VISIBILITE */
/* une classe pour CACHER l'affichage des éléments */
.is-hidden {
  visibility: hidden;
}

/* Une classe pour afficher uniquement à partir de Medium ou Large */
.show-on-medium {
  display: none; /* invisible par défaut */
}

.show-on-large {
  display: none; /* invisible par défaut */
}

.show-on-xlarge {
  display: none; /* invisible par défaut */
}

.show-on-xxlarge {
  display: none; /* invisible par défaut */
}

.over-h {
  overflow: hidden;
}

/* Z INDEX  */
.z-1 {
  z-index: 1;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.z-100 {
  z-index: 100;
}

.z-1000 {
  z-index: 1000;
}

/* Annuler les BACKGROUNDS */
.has-no-background {
  background: 0 none !important;
}

/* MEDIA QUERIES */
/* S : Small */
@media screen and (min-width: 576px) {
  /* = VISIBILITE = */
  .hide-on-small {
    display: none !important;
  }
}
/* M : Tablettes */
@media screen and (min-width: 768px) {
  /* == Display == */
  .show-on-medium {
    display: inherit !important; /* visible */
  }
}
/* L : LARGE Screens  */
@media screen and (min-width: 992px) {
  /* = Display = */
  .show-on-large {
    display: inherit !important; /* visible ! */
  }
  .hide-on-large {
    display: none !important;
  }
}
/* XL : LARGE Screens  */
@media screen and (min-width: 1200px) {
  /* = Display = */
  .show-on-xlarge {
    display: inherit !important; /* visible ! */
  }
}
/* XXL : LARGE Screens  */
/* 5.2 = WIDTHS - HEIGHTS */
/* LARGEURS : Widths */
.w10 {
  width: 10%;
}

.w20 {
  width: 20%;
}

.w30 {
  width: 30%;
}

.w33 {
  width: 33.33%;
}

.w40 {
  width: 40%;
}

.w50 {
  width: 50%;
}

.w60 {
  width: 60%;
}

.w66 {
  width: 66.66%;
}

.w70 {
  width: 70%;
}

.w75 {
  width: 75%;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

/* Une classe pour garder la largeur de 100% */
.w100 {
  width: 100%;
}

/* Limiter la largeur */
.mw-75 {
  max-width: 75%;
  max-width: 75vw;
}

/* HEIGHTS : fixer des hauteurs  ? */
.h10 {
  min-height: 10vh;
}

.h15 {
  min-height: 15vh;
}

.h20 {
  min-height: 20vh;
}

.h25 {
  min-height: 25vh;
}

.h30 {
  min-height: 30vh;
}

.h33 {
  min-height: 33.33vh;
}

.h35 {
  min-height: 35vh;
}

.h40 {
  min-height: 40vh;
}

.h45 {
  min-height: 45vh;
}

.h50 {
  min-height: 50vh;
}

.h55 {
  min-height: 55vh;
}

.h60 {
  min-height: 60vh;
}

.h65 {
  min-height: 65vh;
}

.h70 {
  min-height: 70vh;
}

.h75 {
  min-height: 75vh;
}

.h80 {
  min-height: 80vh;
}

.h85 {
  min-height: 85vh;
}

.h90 {
  min-height: 90vh;
}

.h95 {
  min-height: 95vh;
}

.h100 {
  min-height: 100vh;
}

/* Halfscreen */
.is-halfscreen {
  height: 50vh !important;
}

/* Fullscreen */
.is-fullscreen {
  height: 100vh !important;
}

/* Une classe pour CENTRER au milieu de la PAGE (cf .container de Bootstrap) */
.conteneur {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Une classe pour CENTRER au milieu de la PAGE (cf .container de Bootstrap) */
.conteneur,
.conteneur-xs,
.conteneur-xxs {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* MEDIA QUERIES */
/* M : Tablettes */
@media screen and (min-width: 768px) {
  .conteneur,
  .conteneur-xs,
  .conteneur-xxs {
    max-width: 90%;
  }
}
/* L : LARGE Screens  */
@media screen and (min-width: 992px) {
  .conteneur {
    max-width: 80%;
  }
  .conteneur-xs,
  .conteneur-xxs {
    max-width: 75%;
  }
}
/* XL : LARGE Screens  */
@media screen and (min-width: 1200px) {
  .conteneur {
    max-width: 80%;
  }
  .conteneur-xs,
  .conteneur-xxs {
    max-width: 65%;
  }
  .fullwidth-xl {
    width: 100%;
  }
}
/* XXL : LARGE Screens  */
@media screen and (min-width: 1441px) {
  .conteneur {
    max-width: 70%;
  }
  .conteneur-xs {
    max-width: 55%;
  }
  .conteneur-xxs {
    max-width: 50%;
  }
}
/* 5.3 = SPACING */
/* marges EXTERIEURES (margin) */
.spacer-y {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.spacer-y-2x {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.spacer-y-4x {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.spacer-top {
  margin-top: 1rem;
}

.spacer-top-2x {
  margin-top: 2rem;
}

.spacer-top-3x {
  margin-top: 3rem;
}

.spacer-top-4x {
  margin-top: 4rem;
}

.spacer-top-5x {
  margin-top: 5rem;
}

.spacer-bottom {
  margin-bottom: 1rem;
}

.spacer-bottom-2x {
  margin-bottom: 2rem;
}

.spacer-bottom-4x {
  margin-bottom: 4rem;
}

.spacer-x-small {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.spacer-x {
  margin-left: 1rem;
  margin-right: 1rem;
}

.spacer-left {
  margin-left: 1rem;
}

.spacer-left-s {
  margin-left: 0.5rem;
}

.spacer-left-xs {
  margin-left: 0.25rem;
}

.spacer-right-xs {
  margin-right: 0.25rem;
}

.spacer-right-s {
  margin-right: 0.5rem;
}

.spacer-right {
  margin-right: 1rem;
}

/* marges INTERIEURES (padding) */
/* TOUS les côtés */
.padded {
  padding: 1rem;
}

.padded-2x {
  padding: 2rem;
}

.padded-4x {
  padding: 4rem;
}

.inner-space-xl {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.inner-space-xxl {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

/* de l'espace intérieur HORIZONTALEMENT */
/* à GAUCHE */
.inner-left-space {
  padding-left: 1rem;
}

/* à DROITE */
.inner-right-space {
  padding-right: 1rem;
}

/* DROITE et GAUCHE */
.inner-x-space {
  padding-left: 1rem;
  padding-right: 1rem;
}

.inner-x-space-2x {
  padding-left: 2rem;
  padding-right: 2rem;
}

.inner-x-space-4x {
  padding-left: 4rem;
  padding-right: 4rem;
}

/* de l'espace intérieur VERTICALEMENT */
.inner-y-space,
.inner-y-space-2x-xl {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.inner-y-space-2x {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.inner-y-space-4x {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* en HAUT */
.inner-top-space {
  padding-top: 1rem;
}

.inner-top-space-2x {
  padding-top: 2rem !important;
}

/* en BAS */
.inner-bottom-space {
  padding-bottom: 1rem;
}

.inner-bottom-space-2x {
  padding-bottom: 2rem;
}

.inner-bottom-space-4x {
  padding-bottom: 4rem;
}

.inner-bottom-space-5x {
  padding-bottom: 5rem;
}

.inner-bottom-space-6x {
  padding-bottom: 6rem;
}

.inner-bottom-space-xl {
  padding-bottom: 10rem;
}

/* des classes pour ANNULER les marges */
.unpadded {
  padding: 0 !important;
}

.no-margins {
  margin: 0;
}

/* MEDIA QUERIES */
/* S : Small */
/* M : Tablettes */
@media screen and (min-width: 768px) {
  .padded-left-m {
    padding-left: 1rem;
  }
  .inner-x-space-m {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .inner-x-space-2x-m {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
/* L : LARGE Screens  */
@media screen and (min-width: 992px) {
  .spacer-right-xs-1-2x {
    margin-right: 2rem;
  }
  .padded-left-l {
    padding-left: 2rem;
  }
  .padded-2x-l {
    padding: 2rem !important;
  }
  .inner-x-space-l {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .inner-x-space-2x-l {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
/* XL : LARGE Screens  */
/* XXL : LARGE Screens  */
@media screen and (min-width: 1441px) {
  .inner-x-space-xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .inner-x-space-2x-xl {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .inner-y-space-2x-xl {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .padded-2x-xl {
    padding: 2rem !important;
  }
  .padded-4x-xl {
    padding: 4rem !important;
  }
}
/* 5.4 = TEXT-TOOLS */
/* ALIGNEMENT DE TEXTE */
.txt-left {
  text-align: left;
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}

.txt-justify {
  text-align: justify;
}

/* 5.5 = BORDERS */
/* BORDURES */
.border-top {
  border-top: 1px solid var(--gray-medium);
}

.border-top-dashed {
  border-top: 1px dashed var(--gray-medium);
}

.border-bottom {
  border-bottom: 1px solid var(--gray-medium);
}

.border-bottom-dashed {
  border-bottom: 1px dashed var(--gray-medium);
}

.border-bottom-left-s::after {
  display: block;
  content: "";
  width: 50px; /* ? */
  height: 2px;
  background-color: var(--white);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.border-left-s {
  border-left: 1px solid var(--black);
  padding-left: 1rem;
}

.border-left-sm {
  border-left: 3px solid var(--black);
  padding-left: 1rem;
}

.border-left-m {
  border-left: 5px solid var(--black);
  padding-left: 1rem;
}

.border-right-sm {
  border-right: 3px solid var(--black);
}

.border-right-m {
  border-right: 5px solid var(--black);
}

.border-grey {
  border-color: var(--gray-medium) !important;
}

.border-light-grey {
  border-color: var(--gray-light) !important;
}

.border-color-1 {
  border-color: var(--color-1) !important;
}

.border-color-2 {
  border-color: var(--color-2) !important;
}

.border-color-3 {
  border-color: var(--color-3) !important;
}

.border-color-4 {
  border-color: var(--color-4) !important;
}

.border-color-5 {
  border-color: var(--color-5) !important;
}

.no-border {
  border: 0 none !important;
}

.border-left-dashed {
  border-left-style: dashed;
}

/* Annuler les bordures de liens */
.no-border-link {
  box-shadow: none !important;
}

.no-border-link::after {
  display: none !important;
}

/* BORDER RADIUS */
.border-radius-xs {
  border-radius: 0.25rem;
}

.border-radius-s {
  border-radius: 0.5rem;
}

.border-radius-m {
  border-radius: 1rem;
}

/* 5.6 = SHAPES (circle, triangles...) */
/*SHAPES : circles, etc. */
/* COURBES */
.curved {
  position: relative;
}

.curved::before {
  position: absolute;
  left: -5%;
  top: -2.5vh;
  display: block;
  content: "";
  height: 5vh;
  width: 110%;
  border-radius: 50%;
  background: inherit;
}

/* CERCLES */
.circle-xs,
.circle-outline-xs,
.circle-outline-white-xs,
.circle-s,
.circle-outline-s,
.circle-outline-white-s {
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 100%;
  text-align: center;
  color: var(--color-1);
}

.circle-s,
.circle-outline-s,
.circle-outline-white-s {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

.circle-outline-xs,
.circle-outline-s {
  border: 1px solid var(--color-1);
}

.circle-outline-white-xs,
.circle-outline-white-s {
  color: var(--color-4); /* blanc */
  border: 1px solid var(--color-4);
}

/* DECORATION : Soleil et lune pourpre: un PSEUDO-ELEMENT */
.circle-shape {
  position: relative;
  z-index: 2;
}

.circle-shape::before {
  position: absolute;
  top: -100px; /* en haut et gauche par défaut ? */
  left: -100px;
  display: block;
  content: "";
  width: 200px; /* taille par défaut */
  height: 200px;
  border-radius: 50%; /* cercle par défaut */
  z-index: 0;
  background: var(--color-4);
}

/* Big circle */
.circle-shape.is-big-shape::before {
  top: -150px;
  left: -150px;
  width: 300px;
  height: 300px;
}

/* Position */
.circle-shape.is-top-right::before {
  right: -100px;
  left: auto;
}

/* Couleurs */
.circle-shape.is-light-grey::before {
  background-color: var(--gray-light);
}

.circle-shape.is-grey::before {
  background-color: var(--gray-medium);
}

.circle-shape.is-black::before {
  background-color: var(--black);
}

/* 5.7 = Code */
/* Code */
/* dans le texte (en dehors de <pre>) */
.inline-code {
  display: inline-block;
  background-color: #eaeaea;
  padding: 0 0.25rem;
}

/*
6 / ÉLEMENTS MODULAIRES et DECORATION
--------------------------------------------------------------*/
/* 6.1 = # CARDS # */
/* Product cards */
/* La carte est VERTICALE par défaut */
.product-card,
.picture-card {
  position: relative;
  /* height: 100%; */
  border-radius: 0.25rem;
  transition: 0.25s;
  z-index: 10;
  overflow: hidden;
  /* display: flex;
  flex-direction: column-reverse;*/
  box-shadow: var(--small-shadow);
}

.product-card.white-bg {
  background-color: var(--white);
}

/* HORIZONTALE */
.h-card-half {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.h-card-third {
  display: grid;
  grid-template-columns: 40% 60%; /* 40 - 60 */
}

.h-card-quarter {
  display: grid;
  grid-template-columns: 20% 60% 20%; /* 20 - 60 - 20 */
}

/* Dans un contexte de grille -> la card prend toute la hauteur de sa cellule */
.grid-layout .product-card {
  height: 100%;
}

/* Survol de toute la carte */
.product-card:hover,
.picture-card:hover {
  background-color: rgb(255, 255, 255);
  box-shadow: var(--shadow-default);
  transition: 0.25s;
}

/* Le HEADER */
.product-card--header {
  /* position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*z-index: 20 */
}

/* Le TITRE */
.product-card--title {
  margin-top: 0.5rem;
  /* color: var(--gray-medium); */
  z-index: 1;
}

/* CATEGORIES (Wp) */
.product-card--category {
  margin-top: 0;
}

.product-card--category a {
  color: var(--gray-light);
}

.product-card--category a:hover {
  color: var(--color-3);
}

/*.product-card--category li::after {
	display: inline-flex;
	content: ".";
	width: 1rem;
	text-align: center;
	font-weight: 700;
	font-size: 2rem;
	line-height: 0;
	position: relative;
	bottom: .75rem;
	margin-left: .5rem;
	color: var(--gray-xlight);
}

.product-card--category li:last-of-type::after {
    display: none
}
*/
/* Le CONTENU */
.product-card--content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-card--excerpt {
  color: var(--gray-medium);
}

/* "Pousser" le contenu vers le bas */
.product-card-bottom {
  /* from Flexboxgrid-6.3.1 */
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto; /* ? */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* L'IMAGE */
/* Un élément picture ou figure */
.product-card--picture,
.picture-card--picture {
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: 0.25s;
}

/* Effet de "Zoom" */
.product-card:hover .product-card--picture img,
.picture-card:hover .picture-card--picture img {
  transform: scale(1.015);
  transition: 0.25s;
}

/* "Calque" au-dessus de l'image */
.product-card--picture::after,
.picture-card--picture::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--radial-black-gradient);
  z-index: 10;
}

/* L'élément img */
.product-card--picture img,
.picture-card--picture img {
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.25s;
}

/* Si la carte est horizontale */
.is-horizontal .product-card--picture img {
  height: 100%;
}

/* LIENS */
/* Pas de bordure sous les liens  */
.product-card--main-link {
  font-family: var(--headings-font);
}

.product-card a::after {
  display: none;
}

/* BOUTON */
.product-card .btn:not(.btn-outline-white) {
  background-color: transparent;
  background-color: rgba(255, 255, 255, 0);
  color: var(--black) !important;
  border: 1px solid var(--black);
}

.product-card .btn:hover {
  background-color: var(--color-3);
  color: var(--white) !important;
  border-color: transparent !important;
}

/* La carte IMAGE */
/* == MEDIA QUERIES == */
/* 1 : pour les SMARTPHONES en dessous de 600px */
/* 2 : pour les TABLETTES (MEDIUM) à partir de 601px */
@media screen and (min-width: 768px) {
  .product-card--link.half-m .product-cards-title {
    position: static;
  }
  .product-card-link.half-m .product-cards-title a {
    top: auto;
    bottom: 0;
    width: 48%;
  }
  .h-card-half-m {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .h-card-third-m {
    display: grid;
    grid-template-columns: 40% 60%; /* 40 - 60 */
  }
}
/* pour les LARGE SCREENS à partir de 1025px; */
@media screen and (min-width: 992px) {
  .h-card-half-l {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .h-card-third-l {
    display: grid;
    grid-template-columns: 40% 60%; /* 40 - 60 */
  }
}
/* XLARGE SCREENS à partir de 1280px */
@media screen and (min-width: 1200px) {
  .h-card-half-l {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .h-card-third-l {
    display: grid;
    grid-template-columns: 40% 60%; /* 40 - 60 */
  }
}
/* XXLARGE SCREENS à partir de 1441px */
@media screen and (min-width: 1441px) {
  .h-card-half-xxl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .h-card-third-xxl {
    display: grid;
    grid-template-columns: 40% 60%; /* 40 - 60 */
  }
}
/* Square cards */
/* -- SQUARE CARD   -- 
* -> ex : affichage des albums
*/
.square-card {
  position: relative;
}

/* L'image */
.square-card-thumbnail {
  position: relative;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: var(--small-shadow);
  transition: box-shadow 0.25s, opacity 0.3s;
}

.square-card-thumbnail:hover {
  opacity: 0.85;
  box-shadow: var(--shadow-default);
  transition: box-shadow 0.25s, opacity 0.3s;
}

.square-card-thumbnail > img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.15s;
}

.square-card-thumbnail:hover > img {
  transform: scale(1.02);
  transition: transform 0.15s;
}

/* le header */
.square-card-header a {
  color: var(--color-1);
  opacity: 0.75;
  text-decoration: none;
}

.square-card-header a:hover {
  text-decoration: underline;
}

.square-card-header--subtitle,
.square-card-header--infos {
  font-size: var(--small-text);
  font-weight: 400;
  opacity: 0.6;
}

/* Bouton "Play" */
.square-card-btn {
  position: absolute;
  width: 36px;
  height: 36px;
  bottom: 0.75rem;
  left: 0.75rem;
  border-radius: 50%;
  line-height: 36px; /* ? */
  text-align: center;
  background: white;
  box-shadow: var(--shadow-default);
  transition: transform 0.25s ease-in-out;
}

.square-card-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--soft-shadow);
  transition: transform 0.15s ease-in-out;
}

.square-card-header--title {
  font-weight: 400;
  font-size: 0.85rem;
}

/* Special Cards */
.slide-container {
  /* margin: auto;
   width: 600px; */
  text-align: center;
}

.wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
}
.wrapper:focus {
  outline: 0;
}

.clash-card {
  background: white;
  width: 300px;
  display: inline-block;
  margin: auto;
  border-radius: 19px;
  position: relative;
  text-align: center;
  box-shadow: -1px 15px 30px -12px black;
  box-shadow: var(--shadow-default);
  z-index: 9999;
}

.clash-card__image {
  position: relative;
  height: 230px;
  margin-bottom: 35px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.clash-card__image--barbarian {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian-bg.jpg");
}
.clash-card__image--barbarian img {
  width: 400px;
  position: absolute;
  top: -65px;
  left: -70px;
}

.clash-card__image--archer {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/archer-bg.jpg");
}
.clash-card__image--archer img {
  width: 400px;
  position: absolute;
  top: -34px;
  left: -37px;
}

.clash-card__image--giant {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/giant-bg.jpg");
}
.clash-card__image--giant img {
  width: 340px;
  position: absolute;
  top: -30px;
  left: -25px;
}

.clash-card__image--goblin {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/goblin-bg.jpg");
}
.clash-card__image--goblin img {
  width: 370px;
  position: absolute;
  top: -21px;
  left: -37px;
}

.clash-card__image--wizard {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/wizard-bg.jpg");
}
.clash-card__image--wizard img {
  width: 345px;
  position: absolute;
  top: -28px;
  left: -10px;
}

.clash-card__level {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}

.clash-card__level--barbarian {
  color: #EC9B3B;
}

.clash-card__level--archer {
  color: #EE5487;
}

.clash-card__level--giant {
  color: #F6901A;
}

.clash-card__level--goblin {
  color: #82BB30;
}

.clash-card__level--wizard {
  color: #4FACFF;
}

.clash-card__unit-name {
  font-size: 26px;
  color: black;
  font-weight: 900;
  margin-bottom: 5px;
}

.clash-card__unit-description {
  padding: 20px;
  margin-bottom: 10px;
}

.clash-card__unit-stats--barbarian {
  background: #EC9B3B;
}
.clash-card__unit-stats--barbarian .one-third {
  border-right: 1px solid #BD7C2F;
}

.clash-card__unit-stats--archer {
  background: #EE5487;
}
.clash-card__unit-stats--archer .one-third {
  border-right: 1px solid #D04976;
}

.clash-card__unit-stats--giant {
  background: #F6901A;
}
.clash-card__unit-stats--giant .one-third {
  border-right: 1px solid #de7b09;
}

.clash-card__unit-stats--goblin {
  background: #82BB30;
}
.clash-card__unit-stats--goblin .one-third {
  border-right: 1px solid #71a32a;
}

.clash-card__unit-stats--wizard {
  background: #4FACFF;
}
.clash-card__unit-stats--wizard .one-third {
  border-right: 1px solid #309eff;
}

.clash-card__unit-stats {
  color: white;
  font-weight: 700;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.clash-card__unit-stats .one-third {
  width: 33%;
  float: left;
  padding: 20px 15px;
}
.clash-card__unit-stats sup {
  position: absolute;
  bottom: 4px;
  font-size: 45%;
  margin-left: 2px;
}
.clash-card__unit-stats .stat {
  position: relative;
  font-size: 24px;
  margin-bottom: 10px;
}
.clash-card__unit-stats .stat-value {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 12px;
}
.clash-card__unit-stats .no-border {
  border-right: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.slick-prev {
  left: 100px;
  z-index: 999;
}

.slick-next {
  right: 100px;
  z-index: 999;
}

/* Picture Cards */
/* -- PICTIURES CARDS   -- 
* -> Des cartes "images"
*/
/*
.picture-card {
    position: relative;    
}
*/
.picture-card--content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 1rem;
  z-index: 12;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--gray-xlight);
}

.picture-card--title {
  font-family: var(--main-font);
  color: var(--white);
  margin: 0;
  padding-right: 1rem;
  word-break: break-all;
}

.picture-card--category a {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--headings-font);
  font-size: 0.889rem;
  font-weight: 300;
}

.picture-card--main-link {
  font-family: var(--headings-font);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 1rem;
}

/* 6.2 = # IMAGES (Specials) # */
/* IMAGES HEADERS / BANNER */
/* La "boite" conteneur */
.image-banner {
  position: relative;
  overflow: hidden;
}

/* Le header */
.image-banner--header {
  position: absolute;
  padding: 2rem;
  width: 100%;
  height: 50%;
  bottom: 0;
  background-image: var(--gradient-to-black); /* dégradé ? */
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
}

/* Sur le Light theme -> gradient-to-white */
.light-theme .image-banner--header {
  background-image: var(--gradient-to-white);
}

/* L'image */
.image-banner--img,
.image-banner--picture > img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.image-banner--header.is-fullscreen {
  height: 100% !important;
}

.image-banner--header > * {
  padding-bottom: 2rem;
  color: var(--color-txt-btn); /* blanc */
}

.image-header-btn {
  font-size: 1.5rem;
}

/* AUDIO */
.audio {
  background-color: var(--color-1);
}

/* fractionner ? */
/* 6.3 = # GALLERIES # */
/* Galeries type "ALBUMS" */
.gallery-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}

/* MEDIA QUERIES */
@media (min-width: 992px) {
  .gallery-list {
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 2rem;
  }
}
/* 6.4 = # PLAYERS (Audio / Video) # */
/* Audio player (test) */
/* Amplittude Player */
/* 6.5 = # ICONS # */
/* Icônes*/
.icons {
  display: inline-block;
  width: 50px; /* taille par défaut = medium */
  height: 50px;
  background: transparent url("icon-set/plus-1512.svg") center center no-repeat;
  background-size: 25%; /* empirique */
}

/* FLECHES */
.arrow-down {
  background-image: url("icon-set/arrow-down.svg");
}

.arrow-down-white {
  background-image: url("icon-set/arrow-down-white.svg");
}

/* Dimensions */
/* Xsmall */
.icon-xs {
  width: 20px;
  height: 20px;
}

/* Small */
.icon-s {
  width: 25px;
  height: 25px;
}

/* large */
.icon-l {
  width: 75px;
  height: 75px;
}

/* Small */
.icon-xl {
  width: 100px;
  height: 100px;
}

/* 6.6 = # TIMELINE # */
/* TIMELINE */
/* ul
.timeline--container {
    border-left: 5px dashed var(--gray-light);
} 
*/
/* li */
.timeline--event {
  position: relative;
  padding-bottom: 2rem;
}

.timeline--event:not(:last-of-type) {
  border-left: 5px dashed var(--gray-light);
}

/* Un pseudo-élément pour créer de l'espace et ajouter une bordure avec tirets */
/*.timeline--event::after {
    position: relative;
    left: -5px;
    background-color: transparent;
    display: block;
    content: "";
    width: 100%;
    height: 1rem; 
}
*/
/* Les cercles */
.timeline--badge {
  position: absolute;
  left: -27.5px;
  color: var(--color-5); /* blanc */
  font-weight: 700;
  transition: 0.25s;
}

.timeline--badge:hover {
  transform: scale(1.05);
  transition: 0.25s;
}

.timeline--event:last-of-type .timeline--badge {
  left: -22.5px;
}

.timeline--title {
  margin-top: 0;
  position: relative;
  top: -0.5rem;
  margin-bottom: 1rem;
}

/* "Boite" pour les sous-éléments de timeline--event */
.timeline--box {
  /* Variable pour la largeur de la marge G (cf responsive) */
  --timeline-l-space: 2rem;
  padding-left: var(--timeline-l-space);
}

/*  MEDIA QUERIES */
/* SMALL devices (landscape phones, 576px and up)
@media (min-width: $mq-small) {


}
 */
/* MEDIUM devices (tablets, 768px and up) 
@media (min-width: $mq-medium) {


}
*/
/* LARGE devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .timeline--event {
    padding-bottom: 3rem;
  }
}
/* EXTRA LARGE devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .timeline--event {
    padding-bottom: 4rem;
  }
}
/* EXTRA XLARGE devices (large desktops, 1400px and up) */
@media (min-width: 1441px) {
  .timeline--box {
    --timeline-l-space: 3rem;
  }
}
/* 6.7 = # CALENDAR # */
/* Un CALENDRIER HEBDO */
/* l'icône */
.calendar-input {
  background-image: url("css/material-icons/calendar.svg") !important;
}

.hebdo-calendar {
  padding-left: 48px; /*? */
  background: transparent url("css/material-icons/calendar.svg") 10px 12.5px no-repeat;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.hebdo-calendar-day {
  flex: 1;
  margin-right: 0.5rem;
  margin-bottom: 1rem;
  transition: 0.25s;
  /* border-radius: .5rem; */
}

.hebdo-calendar-day:last-of-type {
  margin-right: 0;
}

.hebdo-calendar-day input + label {
  cursor: pointer;
  display: block;
  padding: 0;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border: 1px solid var(--color-3);
  border-radius: 100%;
  transition: 0.25s ease-in-out;
  animation-name: zoomOut;
  animation-duration: 0.5s;
}

.hebdo-calendar-day:nth-of-type(even) input + label {
  background-color: var(--color-3);
}

.hebdo-calendar-day input:checked + label {
  border-radius: 100%;
  background-color: var(--color-6);
  color: var(--color-4);
  box-shadow: var(--xlight-shadow);
  animation-name: bounce;
  animation-duration: 0.5s;
  transition: 0.25s ease-in-out;
}

/* 6.8 = # DECORATION # */
/* DECORATION */
/* Des TITRES "emphatiques" */
.fat-box {
  min-height: 40vh;
  max-width: 100%;
  overflow: hidden;
  padding: 1rem;
  background-color: var(--color-secondary);
  /* Centrer verticalement */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fat-box-title {
  color: var(--font-color);
}

.fat-box-subtitle {
  color: var(--font-color);
  font-size: 1.125rem !important;
  padding: 1rem 1rem 1rem 0.25rem;
}

.fat-box + .inner-content {
  position: relative;
  z-index: 1;
  background-color: #fff;
}

/* BIG */
.is-big {
  font-size: 10vmin !important;
}

.is-bigger {
  font-size: 12.5vmin !important; /* empirique */
}

.is-real-big {
  font-size: 15vmin !important;
}

/* Décaler */
.is-bigger.is-bottomed {
  position: relative;
  bottom: -12.5vmin; /* empirique */
}

.big-title {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/*
7 - LIBRARIES
--------------------------------------------------------------*/
/* 7.1 = ANIMATE */
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 * Notes : version allégée (19.03.2025)
 */
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  animation-name: pulse;
}
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}
.heartBeat {
  animation-name: heartBeat;
  animation-duration: 1.3s;
  animation-timing-function: ease-in-out;
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  animation-duration: 0.75s;
  animation-name: bounceIn;
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInDown {
  animation-name: bounceInDown;
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInLeft {
  animation-name: bounceInLeft;
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInRight {
  animation-name: bounceInRight;
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  animation-name: bounceInUp;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownBig {
  animation-name: fadeInDownBig;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  animation-name: fadeInLeft;
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRightBig {
  animation-name: fadeInRightBig;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpBig {
  animation-name: fadeInUpBig;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  animation-name: fadeOutDown;
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  animation-name: fadeOutLeft;
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  animation-name: fadeOutRight;
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  animation-name: fadeOutUp;
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}
@keyframes flip {
  from {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
  to {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
}
@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
}
@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateIn {
  animation-name: rotateIn;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}
@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  animation-name: slideInDown;
}
@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  animation-name: slideInLeft;
}
@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  animation-name: slideInRight;
}
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  animation-name: slideInUp;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

.animated.fast {
  animation-duration: 800ms;
}

.animated.faster {
  animation-duration: 500ms;
}

.animated.slow {
  animation-duration: 2s;
}

.animated.slower {
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion) {
  .animated {
    animation: unset !important;
    transition: none !important;
  }
}
/* 7.2 = SAL */
[data-sal] {
  transition-delay: 0s;
}

[data-sal], [data-sal][data-sal-duration="200"] {
  transition-duration: 0.2s;
}

[data-sal][data-sal-duration="250"] {
  transition-duration: 0.25s;
}

[data-sal][data-sal-duration="300"] {
  transition-duration: 0.3s;
}

[data-sal][data-sal-duration="350"] {
  transition-duration: 0.35s;
}

[data-sal][data-sal-duration="400"] {
  transition-duration: 0.4s;
}

[data-sal][data-sal-duration="450"] {
  transition-duration: 0.45s;
}

[data-sal][data-sal-duration="500"] {
  transition-duration: 0.5s;
}

[data-sal][data-sal-duration="550"] {
  transition-duration: 0.55s;
}

[data-sal][data-sal-duration="600"] {
  transition-duration: 0.6s;
}

[data-sal][data-sal-duration="650"] {
  transition-duration: 0.65s;
}

[data-sal][data-sal-duration="700"] {
  transition-duration: 0.7s;
}

[data-sal][data-sal-duration="750"] {
  transition-duration: 0.75s;
}

[data-sal][data-sal-duration="800"] {
  transition-duration: 0.8s;
}

[data-sal][data-sal-duration="850"] {
  transition-duration: 0.85s;
}

[data-sal][data-sal-duration="900"] {
  transition-duration: 0.9s;
}

[data-sal][data-sal-duration="950"] {
  transition-duration: 0.95s;
}

[data-sal][data-sal-duration="1000"] {
  transition-duration: 1s;
}

[data-sal][data-sal-duration="1050"] {
  transition-duration: 1.05s;
}

[data-sal][data-sal-duration="1100"] {
  transition-duration: 1.1s;
}

[data-sal][data-sal-duration="1150"] {
  transition-duration: 1.15s;
}

[data-sal][data-sal-duration="1200"] {
  transition-duration: 1.2s;
}

[data-sal][data-sal-duration="1250"] {
  transition-duration: 1.25s;
}

[data-sal][data-sal-duration="1300"] {
  transition-duration: 1.3s;
}

[data-sal][data-sal-duration="1350"] {
  transition-duration: 1.35s;
}

[data-sal][data-sal-duration="1400"] {
  transition-duration: 1.4s;
}

[data-sal][data-sal-duration="1450"] {
  transition-duration: 1.45s;
}

[data-sal][data-sal-duration="1500"] {
  transition-duration: 1.5s;
}

[data-sal][data-sal-duration="1550"] {
  transition-duration: 1.55s;
}

[data-sal][data-sal-duration="1600"] {
  transition-duration: 1.6s;
}

[data-sal][data-sal-duration="1650"] {
  transition-duration: 1.65s;
}

[data-sal][data-sal-duration="1700"] {
  transition-duration: 1.7s;
}

[data-sal][data-sal-duration="1750"] {
  transition-duration: 1.75s;
}

[data-sal][data-sal-duration="1800"] {
  transition-duration: 1.8s;
}

[data-sal][data-sal-duration="1850"] {
  transition-duration: 1.85s;
}

[data-sal][data-sal-duration="1900"] {
  transition-duration: 1.9s;
}

[data-sal][data-sal-duration="1950"] {
  transition-duration: 1.95s;
}

[data-sal][data-sal-duration="2000"] {
  transition-duration: 2s;
}

[data-sal][data-sal-delay="50"] {
  transition-delay: 0.05s;
}

[data-sal][data-sal-delay="100"] {
  transition-delay: 0.1s;
}

[data-sal][data-sal-delay="150"] {
  transition-delay: 0.15s;
}

[data-sal][data-sal-delay="200"] {
  transition-delay: 0.2s;
}

[data-sal][data-sal-delay="250"] {
  transition-delay: 0.25s;
}

[data-sal][data-sal-delay="300"] {
  transition-delay: 0.3s;
}

[data-sal][data-sal-delay="350"] {
  transition-delay: 0.35s;
}

[data-sal][data-sal-delay="400"] {
  transition-delay: 0.4s;
}

[data-sal][data-sal-delay="450"] {
  transition-delay: 0.45s;
}

[data-sal][data-sal-delay="500"] {
  transition-delay: 0.5s;
}

[data-sal][data-sal-delay="550"] {
  transition-delay: 0.55s;
}

[data-sal][data-sal-delay="600"] {
  transition-delay: 0.6s;
}

[data-sal][data-sal-delay="650"] {
  transition-delay: 0.65s;
}

[data-sal][data-sal-delay="700"] {
  transition-delay: 0.7s;
}

[data-sal][data-sal-delay="750"] {
  transition-delay: 0.75s;
}

[data-sal][data-sal-delay="800"] {
  transition-delay: 0.8s;
}

[data-sal][data-sal-delay="850"] {
  transition-delay: 0.85s;
}

[data-sal][data-sal-delay="900"] {
  transition-delay: 0.9s;
}

[data-sal][data-sal-delay="950"] {
  transition-delay: 0.95s;
}

[data-sal][data-sal-delay="1000"] {
  transition-delay: 1s;
}

[data-sal][data-sal-easing=linear] {
  transition-timing-function: linear;
}

[data-sal][data-sal-easing=ease] {
  transition-timing-function: ease;
}

[data-sal][data-sal-easing=ease-in] {
  transition-timing-function: ease-in;
}

[data-sal][data-sal-easing=ease-out] {
  transition-timing-function: ease-out;
}

[data-sal][data-sal-easing=ease-in-out] {
  transition-timing-function: ease-in-out;
}

[data-sal][data-sal-easing=ease-in-cubic] {
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

[data-sal][data-sal-easing=ease-out-cubic] {
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

[data-sal][data-sal-easing=ease-in-out-cubic] {
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

[data-sal][data-sal-easing=ease-in-circ] {
  transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
}

[data-sal][data-sal-easing=ease-out-circ] {
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

[data-sal][data-sal-easing=ease-in-out-circ] {
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

[data-sal][data-sal-easing=ease-in-expo] {
  transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}

[data-sal][data-sal-easing=ease-out-expo] {
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

[data-sal][data-sal-easing=ease-in-out-expo] {
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}

[data-sal][data-sal-easing=ease-in-quad] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-sal][data-sal-easing=ease-out-quad] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-sal][data-sal-easing=ease-in-out-quad] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-sal][data-sal-easing=ease-in-quart] {
  transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

[data-sal][data-sal-easing=ease-out-quart] {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-sal][data-sal-easing=ease-in-out-quart] {
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

[data-sal][data-sal-easing=ease-in-quint] {
  transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

[data-sal][data-sal-easing=ease-out-quint] {
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

[data-sal][data-sal-easing=ease-in-out-quint] {
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

[data-sal][data-sal-easing=ease-in-sine] {
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

[data-sal][data-sal-easing=ease-out-sine] {
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

[data-sal][data-sal-easing=ease-in-out-sine] {
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

[data-sal][data-sal-easing=ease-in-back] {
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[data-sal][data-sal-easing=ease-out-back] {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-sal][data-sal-easing=ease-in-out-back] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-sal|=fade] {
  opacity: 0;
  transition-property: opacity;
}

[data-sal|=fade].sal-animate, body.sal-disabled [data-sal|=fade] {
  opacity: 1;
}

[data-sal|=slide] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-sal=slide-up] {
  transform: translateY(20%);
}

[data-sal=slide-down] {
  transform: translateY(-20%);
}

[data-sal=slide-left] {
  transform: translateX(20%);
}

[data-sal=slide-right] {
  transform: translateX(-20%);
}

[data-sal|=slide].sal-animate, body.sal-disabled [data-sal|=slide] {
  opacity: 1;
  transform: none;
}

[data-sal|=zoom] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-sal=zoom-in] {
  transform: scale(0.5);
}

[data-sal=zoom-out] {
  transform: scale(1.1);
}

[data-sal|=zoom].sal-animate, body.sal-disabled [data-sal|=zoom] {
  opacity: 1;
  transform: none;
}

[data-sal|=flip] {
  backface-visibility: hidden;
  transition-property: transform;
}

[data-sal=flip-left] {
  transform: perspective(2000px) rotateY(-91deg);
}

[data-sal=flip-right] {
  transform: perspective(2000px) rotateY(91deg);
}

[data-sal=flip-up] {
  transform: perspective(2000px) rotateX(-91deg);
}

[data-sal=flip-down] {
  transform: perspective(2000px) rotateX(91deg);
}

[data-sal|=flip].sal-animate, body.sal-disabled [data-sal|=flip] {
  transform: none;
}


/* 7.3 = Animations PERSOS et autres */
/* ANIMATIONS cf animate.css */
/* Durée */
.anim-1250 {
  animation-duration: 1.25s;
}

.anim-1500 {
  animation-duration: 1.5s;
}

.anim-1750 {
  animation-duration: 1.75s;
}

.anim-2000 {
  animation-duration: 2s;
}

/* Délais */
.delay-25s {
  animation-delay: 0.25s;
}

.delay-30s {
  animation-delay: 0.3s;
}

.delay-35s {
  animation-delay: 0.35s;
}

.delay-40s {
  animation-delay: 0.4s;
}

.delay-45s {
  animation-delay: 0.45s;
}

.delay-50s {
  animation-delay: 0.5s;
}

.delay-55s {
  animation-delay: 0.55s;
}

.delay-60s {
  animation-delay: 0.55s;
}

.delay-65s {
  animation-delay: 0.55s;
}

.delay-70s {
  animation-delay: 0.55s;
}

/* AUTRES ANIMATIONS */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Rotate left */
@keyframes rotate-left {
  to {
    transform: rotate(-360deg);
  }
}
/* Rotate Right */
@keyframes rotate-right {
  to {
    transform: rotate(1turn);
  }
}
/* Animation : To Right */
@keyframes to-right {
  to {
    transform: translateX(16px);
  }
}
/* Animation sur les ICÖNES des BOUTONS */
.is-moving i {
  transition: transform 0.3s;
  padding-left: 0 !important;
}

.is-moving:hover i {
  transition: transform 0.3s;
}

.is-moving.bounce:hover i,
.is-moving.rotate:hover i,
.is-moving.rotating:hover i {
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}

.is-moving.bounce:hover i {
  animation-name: bounce;
}

/* 360° */
.is-moving.rotate:hover i {
  animation-name: rotate(360deg);
}

/* 90° */
.is-moving.rotating:hover i {
  transform: rotate(90deg);
}

.is-moving.to-right:hover i {
  transform: translateX(8px);
}

/* TEST : scaler */
.scaler {
  animation-name: scaler;
  animation-duration: 1.25s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes scaler {
  0% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
/* 7.4 = PRISM = code highlighting */
/* PrismJS 1.22.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+css-extras+markup-templating+php+scss&plugins=line-highlight+show-language+previewers+unescaped-markup+toolbar+copy-to-clipboard+download-button */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */
code[class*=language-],
pre[class*=language-] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*=language-] {
  padding: 0 1rem;
  /* margin: .5em 0; */
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: #272822;
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #8292a2;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.regex,
.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}

.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em; /* Same as .prism’s padding-top */
  background: hsla(24, 20%, 50%, 0.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

.line-highlight:before,
.line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: 0.4em;
  left: 0.6em;
  min-width: 1em;
  padding: 0 0.5em;
  background-color: hsla(24, 20%, 50%, 0.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: 0.3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

.line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: 0.4em;
}

.line-numbers .line-highlight:before,
.line-numbers .line-highlight:after {
  content: none;
}

pre[id].linkable-line-numbers span.line-numbers-rows {
  pointer-events: all;
}

pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
  cursor: pointer;
}

pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
  background-color: rgba(128, 128, 128, 0.2);
}

div.code-toolbar {
  position: relative;
}

div.code-toolbar > .toolbar {
  position: absolute;
  top: 0.3em;
  right: 0.2em;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

div.code-toolbar:hover > .toolbar {
  opacity: 1;
}

/* Separate line b/c rules are thrown out if selector is invalid.
   IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item {
  display: inline-block;
}

div.code-toolbar > .toolbar a {
  cursor: pointer;
}

div.code-toolbar > .toolbar button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none; /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
  color: #bbb;
  font-size: 0.8em;
  padding: 0 0.5em;
  background: #f5f2f0;
  background: rgba(224, 224, 224, 0.2);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
  color: inherit;
  text-decoration: none;
}

.prism-previewer,
.prism-previewer:before,
.prism-previewer:after {
  position: absolute;
  pointer-events: none;
}

.prism-previewer,
.prism-previewer:after {
  left: 50%;
}

.prism-previewer {
  margin-top: -48px;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  opacity: 0;
  transition: opacity 0.25s;
}

.prism-previewer.flipped {
  margin-top: 0;
  margin-bottom: -48px;
}

.prism-previewer:before,
.prism-previewer:after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.prism-previewer:before {
  top: -5px;
  right: -5px;
  left: -5px;
  bottom: -5px;
  border-radius: 10px;
  border: 5px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
}

.prism-previewer:after {
  top: 100%;
  width: 0;
  height: 0;
  margin: 5px 0 0 -7px;
  border: 7px solid transparent;
  border-color: rgba(255, 0, 0, 0);
  border-top-color: #fff;
}

.prism-previewer.flipped:after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 5px;
  border-top-color: rgba(255, 0, 0, 0);
  border-bottom-color: #fff;
}

.prism-previewer.active {
  opacity: 1;
}

.prism-previewer-angle:before {
  border-radius: 50%;
  background: #fff;
}

.prism-previewer-angle:after {
  margin-top: 4px;
}

.prism-previewer-angle svg {
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
}

.prism-previewer-angle[data-negative] svg {
  transform: scaleX(-1) rotate(-90deg);
}

.prism-previewer-angle circle {
  fill: transparent;
  stroke: hsl(200, 10%, 20%);
  stroke-opacity: 0.9;
  stroke-width: 32;
  stroke-dasharray: 0, 500;
}

.prism-previewer-gradient {
  background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  width: 64px;
  margin-left: -32px;
}

.prism-previewer-gradient:before {
  content: none;
}

.prism-previewer-gradient div {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 10px;
  border: 5px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
}

.prism-previewer-color {
  background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.prism-previewer-color:before {
  background-color: inherit;
  background-clip: padding-box;
}

.prism-previewer-easing {
  margin-top: -76px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background: #333;
}

.prism-previewer-easing.flipped {
  margin-bottom: -116px;
}

.prism-previewer-easing svg {
  width: 60px;
  height: 60px;
}

.prism-previewer-easing circle {
  fill: hsl(200, 10%, 20%);
  stroke: white;
}

.prism-previewer-easing path {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-width: 4;
}

.prism-previewer-easing line {
  stroke: white;
  stroke-opacity: 0.5;
  stroke-width: 2;
}
@keyframes prism-previewer-time {
  0% {
    stroke-dasharray: 0, 500;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100, 500;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 0, 500;
    stroke-dashoffset: -100;
  }
}
.prism-previewer-time:before {
  border-radius: 50%;
  background: #fff;
}

.prism-previewer-time:after {
  margin-top: 4px;
}

.prism-previewer-time svg {
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
}

.prism-previewer-time circle {
  fill: transparent;
  stroke: hsl(200, 10%, 20%);
  stroke-opacity: 0.9;
  stroke-width: 32;
  stroke-dasharray: 0, 500;
  stroke-dashoffset: 0;
  animation: prism-previewer-time linear infinite 3s;
}

/* Fallback, in case JS does not run, to ensure the code is at least visible */
[class*=lang-] script[type="text/plain"],
[class*=language-] script[type="text/plain"],
script[type="text/plain"][class*=lang-],
script[type="text/plain"][class*=language-] {
  display: block;
  font: 100% Consolas, Monaco, monospace;
  white-space: pre;
  overflow: auto;
}

/* 7.5 = Effets */
/* == EFFECTS == */
/* BLEND Modes */
/* Multiply */
.blend-multiply {
  mix-blend-mode: multiply;
}

/* Screen */
.blend-screen {
  mix-blend-mode: screen;
}

/* DOUBLE EXPOSITION fx */
.double-xposure {
  position: relative;
}

/* Using a pseudo-element */
.double-xposure::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: url("double-xposure/bw-thinking-man.jpg"), url("double-xposure/bg-snow-and-tree.jpg");
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: screen; /* css magic ! */
}

/* HALFTONE fx */
.halftone-mask {
  position: relative;
}

.halftone-mask::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent url("double-xposure/halftone-dotted-radial-pattern.jpg") center center no-repeat !important;
  background-size: cover;
}

/* SINGLETONE, DUOTONE effect (cf https://codepen.io/SirExotic/pen/xzgbxW )*/
.singletone1,
.singletone2,
.singletone3,
.duotone1,
.duotone2 {
  position: relative;
  z-index: 5; /* Empirique */
}

.singletone1::before,
.singletone2::before,
.singletone3::before,
.duotone1::before,
.duotone1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
}

/* Effet 1 */
.singletone1::before,
.singletone3::before,
.duotone1::before {
  background-color: rgb(240, 14, 46);
  /* background-color: var(--color-2); */
  mix-blend-mode: darken;
}

.singletone2::before,
.duotone1::after {
  background-color: var(--color-1);
  mix-blend-mode: lighten;
}

.singletone2::before {
  mix-blend-mode: hard-light;
}

.singletone3::before {
  background-color: var(--color-2);
}

/* FILTRES (images) */
.is-black-and-white {
  filter: contrast(125%) grayscale(100%);
}

.is-fit-to-content {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.has-full-contrast {
  filter: contrast(200%);
}

/* VARIABLES */
:root {
  /* COULEURS pour l'effet */
  /* --color-1: #0f4c81; /* Classic Blue Pantone 2020 */
  --color-7: #fff6a9; /* Yellow */
  --color-8: #fccaff; /* Light Pink */
  /* NEON FX (text-shadow) */
  --yellow-neon: 0 0 5px #ffa500,
      0 0 15px #ffa500,
      0 0 20px #ffa500,
      0 0 40px #ffa500,
      0 0 60px #ff0000,
      0 0 10px #ff8d00,
      0 0 98px #ff0000;
  --yellow-neon--text: var(--color-7);
  --violet-neon: 0 0 5px #f562ff,
      0 0 15px #f562ff,
      0 0 25px #f562ff,
      0 0 20px #f562ff,
      0 0 30px #890092,
      0 0 80px #890092,
      0 0 80px #890092;
  --violet-neon--text: var(--color-8);
}

/* EFFETS */
/* Neon */
.neon {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff, 0 0 90px #0ff, 0 0 100px #0ff, 0 0 150px #0ff;
}

/* Blink */
.is-blinking {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff, 0 0 90px #0ff, 0 0 100px #0ff, 0 0 150px #0ff;
  animation: neon-blink 10s infinite;
}

/* Violet */
.is-blinking--violet {
  text-shadow: var(--yellow-neon);
  color: var(--yellow-neon--text);
  animation: violet-blink 7s infinite;
}

/* Yellow */
.is-blinking--yellow {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fff6a9;
  animation: yellow-blink 5s infinite;
}

@keyframes neon-blink {
  20%, 24%, 55% {
    color: transparent;
    text-shadow: none;
  }
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    color: var(--white);
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff, 0 0 90px #0ff, 0 0 100px #0ff, 0 0 150px #0ff;
  }
}
@keyframes violet-blink {
  20%, 24%, 55% {
    color: #111;
    text-shadow: none;
  }
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    color: var(--violet-neon--text);
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff, 0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  }
}
@keyframes yellow-blink {
  20%, 24%, 55% {
    color: #111;
    text-shadow: none;
  }
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: var(--yellow-neon);
    color: var(--yellow-neon--text);
  }
}
/* Effet sur le TEXTE */
.is-gradient-red-yellow {
  background: var(--gradient-red-yellow);
  /* background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#e52e71)); */
  /* background: linear-gradient(90deg, #ff8a00, #e52e71); */
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
}

/*
8 - MODULES (plugins js / WP)
--------------------------------------------------------------*/
/* 8.0 = MODULES DIVERS (BS, etc) */
/* MODULES DIVERS */
/* Boostrap Tabs */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  border-color: #fff #fff var(--color-3); /* couleur des liens */
  margin-bottom: -2px;
  border-width: 2px;
}

.nav-tabs .nav-link {
  border-width: 2px;
  color: var(--gray-light);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: var(--gray-medium);
}

/* 8.1 = SLICK SLIDER */
/* 8.2 = Autres */
/* HEADROOM */
.headroom--unpinned {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  width: auto;
  animation-name: fadeInDown;
  animation-duration: 0.25s;
  transition: 0.25s;
}

/*
.headroom--pinned {
    position: fixed;
    z-index: 1; 
    animation-name: fadeInDown;
    animation-duration: .25s;
    width: 100%;
}
*/
/* from Rocksiders */
.headroom--pinned.headroom--not-top {
  position: fixed;
  transform: translateY(0);
  animation-name: fadeInDown;
  animation-duration: 0.25s;
  /* padding: .5rem .5rem .75rem; */
  box-shadow: var(--small-shadow);
  transition: 0.25s;
}

/*
9 - LAYOUT -> styles spécifiques au SITE
--------------------------------------------------------------*/
/* 9.0 = CUSTOM, DS LAYOUT et Theme Switcher */
/* ==  CUSTOM LAYOUTS == */
/* 
* 1 / Sidebar Layout :
* header et nav dans une sidebar à gauche
*
* 2 / Top header sidebar Layout :
* header sur toute la largeur en haut et nav à gauche
*
* 3 / Full header sidebar layout
* header pleine page et sidebar 
*
* 4 / Header no sidebar layout
* un header pleine page et pas de sidebar
* (le menu doit être rangé dans nav-mob ?) 
*/
.sidebar-layout,
.top-header-sidebar-layout,
.full-header-sidebar-layout,
.header-no-sidebar-layout {
  display: grid; /* contexte de grille */
}

/* 4 => header no sidebar */
.header-no-sidebar-layout {
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto auto;
  grid-template-areas: "header" "main" "footer";
}

/* LAYOUTS -> MEDIA QUERIES */
/* SMALL devices (landscape phones, 576px and up)
@media (min-width: $mq-small) {


}
 */
/* MEDIUM devices (tablets, 768px and up) */
/* LARGE devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* 1 => Sidebar Layout */
  .sidebar-layout {
    grid-template-rows: 60px 1fr 10vh;
    grid-template-columns: 25% 1fr; /* 2 colonnes */
    /* Définir des "zones" nommées */
    grid-template-areas: "header main" "sidebar main" "footer footer";
  }
  /* affecter les élements aux zones */
  .header {
    grid-area: header;
    height: 60px;
    color: var(--font-color);
    border-right: 1px solid var(--border-color);
  }
  .light-theme .sidebar-layout .header {
    background-color: var(--color-secondary);
  }
  .sidebar {
    grid-area: sidebar;
    border-right: 1px solid var(--border-color);
  }
  .main-content {
    grid-area: main;
  }
  .footer {
    grid-area: footer;
  }
  /* 2 => top header sidebar layout */
  .top-header-sidebar-layout {
    grid-template-rows: 60px 1fr 10vh;
    grid-template-columns: 25% 1fr; /* 2 colonnes */
    grid-template-areas: "header header" "sidebar main" "footer footer";
  }
  /* 2 => Full header sidebar layout */
}
/* EXTRA LARGE devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* LAYOUT */
  .sidebar-layout,
  .top-header-sidebar-layout {
    grid-template-columns: 15% 1fr; /* 2 colonnes */
  }
}
/* EXTRA XLARGE devices (large desktops, 1400px and up) 
@media (min-width: $mq-xxlarge) {



}
*/
/* 
 * 1 / LAYOUT de la page entière avec une SIDEBAR
 *
 */
/*
.sidebar-layout {
    display: grid; 
}
*/
/* Light theme / .top-header-sidebar-layout */
.light-theme .top-header-sidebar-layout .header {
  border-right: none;
  border-bottom: 1px solid var(--border-color);
}

/* Sidebar */
.sidebar-menu {
  display: none; /* sur les écrans smartphone et tablette */
  padding: 1rem;
}

.side-menu--list {
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  width: 100%;
  color: var(--font-color); /* theme switcher */
  /* border-top: 1px solid var(--color-4); */
}

.side-menu--list > .menu-item {
  /* margin-bottom: 1rem; */
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color); /* theme switcher */
}

.side-menu--list > .menu-item > a:first-of-type {
  display: inline-block;
  font-size: 1.125rem;
  font-family: var(--headings-font);
  text-indent: 2rem; /* icone à gauche */
  color: var(--font-color) !important;
  margin-bottom: 0.25rem; /* ... */
  /* font-weight: 600;
  background: transparent url("css/material-icons/eyeview-white.svg") left center no-repeat; */
  background-position: left center;
  background-repeat: no-repeat;
}

/* ICONES */
/* Overview */
.menu-item-107 > a {
  background-image: url("css/material-icons/eyeview-white.svg");
}

.light-theme .menu-item-107 > a {
  background-image: url("css/material-icons/eyeview-dark.svg");
}

/* Styles */
.menu-item-22 > a {
  background-image: url("css/material-icons/style-white.svg");
}

.light-theme .menu-item-22 > a {
  background-image: url("css/material-icons/style-dark.svg");
}

/* Components */
.menu-item-19 > a {
  background-image: url("css/material-icons/components-white.svg");
}

.light-theme .menu-item-19 > a {
  background-image: url("css/material-icons/components-dark.svg");
}

/* Layout */
.menu-item-20 > a {
  background-image: url("css/material-icons/layout-white.svg");
}

.light-theme .menu-item-20 > a {
  background-image: url("css/material-icons/layout-dark.svg");
}

/* Blog */
.menu-item-265 > a {
  background-image: url("css/material-icons/newspaper-white.svg");
}

.light-theme .menu-item-265 > a {
  background-image: url("css/material-icons/newspaper-dark.svg");
}

/* */
.side-menu--list .menu-item a {
  color: var(--font-color-light); /* theme switcher -> atténuer le contraste */
  transition: color 0.25s;
  text-decoration: none;
}

.side-menu--list .menu-item a:hover {
  color: var(--links-color);
  transition: color 0.25s;
}

.side-menu--list .menu-item:last-of-type {
  border-bottom: none;
}

.sub-menu .menu-item {
  margin-left: 1rem;
}

/* Sur le lien <a> */
.sub-menu .menu-item a {
  display: inline-block;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* décaler les icônes */
.side-menu-item .fa,
.side-menu-item .fas {
  margin-right: 0.5rem;
}

/* DESIGN SYSTEM STYLES (interface) */
/* En tête de section (dans .main-content) */
.section-header {
  padding: 2rem 1rem;
}

.section-header--title {
  margin-top: 0;
}

.section-header--title > b {
  color: var(--gray-xlight);
}

.subsection-header {
  color: var(--gray-medium);
}

/* TABS  dans DS Layout */
.tab-pane > header > h3 {
  margin-top: 1rem;
}

/* TABS (cf Bootstrap) */
.nav-link {
  font-family: var(--headings-font);
}

.nav-link:hover {
  color: var(--links-color);
}

/* Hauteur des "tabs" quand elles sont vides... */
.tab-content {
  min-height: 40vh;
}

/* MEDIA QUERIES */
/* SMALL devices (landscape phones, 576px and up)
@media (min-width: $mq-small) {


}
 */
/* MEDIUM devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .inner-menu {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* LARGE devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Theme switcher button */
  .sidebar-layout .switch {
    right: 2rem;
    top: 24px;
  }
  .sidebar-menu {
    display: block; /* Faire réapparaitre le menu */
  }
  .side-menu--list {
    border-top: none;
  }
  .inner-menu {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* EXTRA LARGE devices (large desktops, 1200px and up) */
/* EXTRA XLARGE devices (large desktops, 1400px and up) 
@media (min-width: $mq-xxlarge) {



}
*/
/* Theme switcher */
.switch-button {
  color: var(--font-color);
  background: var(--color-primary);
  padding: 10px 20px;
  border: 0;
  border-radius: 5px;
}

/* The switch - the box around the slider */
.switch {
  position: absolute;
  right: 10px;
  top: 12.5px;
  display: inline-block;
  width: 60px;
  height: 32px;
  z-index: 1001; /* au-dessus de .nav-mob */
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eaeaea;
  background-color: var(--color-1); /* Dark blue */
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 32px;
  width: 32px;
  left: 0px;
  bottom: 4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  transition: 0.4s;
  box-shadow: 0 0px 15px rgba(32, 32, 32, 0.2392156863);
  background: white url("https://i.ibb.co/FxzBYR9/night.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

input:checked + .slider {
  background-color: #2196f3;
  background-color: var(--color-5); /* Light Blue */
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  transform: translateX(24px);
  background: white url("https://i.ibb.co/7JfqXxB/sunny.png");
  background-repeat: no-repeat;
  background-position: center;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* 9.1 = ALL PAGES */
/* 
* LAYOUT
*/
/* HEADER */
.header {
  background-color: var(--color-secondary); /* theme switcher */
  padding: 0.5rem 1rem; /* Changer pour les écrans large ? */
  z-index: 15;
  width: 100%;
}

/* NAVBAR / TOP BAR */
.top-bar {
  background-color: auto; /* couleurs avec classes */
  top: 0;
  left: 0;
  width: 100%;
  height: 8vh; /* empirique */
  line-height: 8vh;
  height: 64px;
  line-height: 64px;
  z-index: 10;
}

.top-bar.fixed + * {
  margin-top: 64px;
}

/* TITRE navbar */
.navbar-brand,
.logo {
  font-family: var(--headings-font);
  font-weight: 700;
  color: var(--font-color) !important; /* theme switcher */
  margin-left: 55px;
  z-index: 1002;
}

/* MENU mobile */
.nav-mob {
  background-color: var(--color-secondary);
}

/* MAIN */
.main-content {
  width: 100%;
  overflow: hidden;
}

/* SIDEBAR */
.sidebar {
  background-color: var(--color-secondary); /* theme switcher */
}

/* FOOTER */
.footer {
  color: var(--font-color);
  background-color: var(--color-secondary);
  border-top: 1px solid var(--border-color);
}

/* 9.2 = PAGES */
/* 9.3 = POSTS & CATEGORIES */
/* = ARTICLE = */
/* CONTENU */
.entry-content {
  padding: 4rem;
}

.entry-date {
  color: var(--gray-light);
}

/* TEST (20.03.2025) */
/* Marges Responsive (padding top) */
.inner-content {
  padding-top: clamp(0.25rem, 32px, 4rem);
}

.inner-content {
  max-width: 75ch; /* ? */
}

/* 1 : par défaut */
.post-content > :not(.conteneur):not(.conteneur-xs):not(.conteneur-xxs):not(.size-full):not(.size-large),
.post-content--inner {
  /*padding-bottom: 2rem;*/
  padding: 1rem 1rem 2rem 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* 2 : pour les TABLETTES (MEDIUM) à partir de $mq-medium */
@media screen and (min-width: 768px) {
  .post-content > :not(.conteneur):not(.conteneur-xs):not(.conteneur-xxs):not(.size-full):not(.size-large),
  .post-content--inner {
    max-width: 75%;
  }
}
/* 3 : pour les écrans LARGE (LARGE) à partir de $mq-large */
@media screen and (min-width: 992px) {
  .post-content > :not(.conteneur):not(.conteneur-xs):not(.conteneur-xxs):not(.size-full):not(.size-large),
  .post-content--inner {
    max-width: 55%;
  }
}
/* 4 : pour les écrans XXLARGE (XXLARGE) à partir de $mq-xxlarge */
@media screen and (min-width: 1441px) {
  .post-content > :not(.conteneur):not(.conteneur-xs):not(.conteneur-xxs):not(.size-full):not(.size-large),
  .post-content--inner {
    max-width: 35%;
  }
}
/* WORDPRESS */
/* CATEGORIES */
.post-categories {
  text-transform: uppercase;
  color: var(--links-color);
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
}

.post-categories li:not(:last-of-type) {
  padding-right: 0.5rem;
}

/* Articles */
.entry-date {
  color: var(--gray-light);
}

/* POST Navigation (in WP) */
@media (min-width: 768px) {
  .nav-links {
    padding: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
  }
}
.nav-previous,
.nav-next {
  background-color: var(--color-5);
  border: 1px solid var(--gray-light);
  border-radius: 0.25rem;
  box-shadow: var(--small-shadow);
  transition: 0.25s;
  margin-bottom: 0.5rem;
}

.nav-previous:hover,
.nav-next:hover {
  box-shadow: var(--medium-default);
  transition: 0.25s;
}

.nav-previous a,
.nav-next a {
  color: var(--gray-medium);
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--headings-font);
  color: var(--gray);
  transition: 0.25s;
}

.nav-title:hover {
  color: var(--color-3);
  transition: 0.25s;
}

/*
10 - MEDIA QUERIES 
--------------------------------------------------------------*/
/*
-------------------------------
* 1 : SMARTPHONES : > 576px
* 2 : TABLETTES : > 768px
* 3 : TABLETTES Only : 768 > 991px
* 4 : LARGE : > 992px
* 5 : XLARGE : > 1200px
* 6 : XXLARGE : > 1441px
-------------------------------
*/
/* Extra small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap */
/* SMALL devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /*.conteneur,*/
  .image-header-centered {
    max-width: 540px;
  }
}
/* MEDIUM devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /*.conteneur,*/
  .image-header-centered {
    max-width: 720px;
  }
  /* LAYOUT : Page Couleurs  */
  .colors-list {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, 1fr); /* 2 colonnes de largeurs identiques */
  }
  .box-list {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes de largeurs identiques */
  }
  .color-test {
    grid-template-columns: repeat(3, 1fr);
  }
  /* ARTICLES */
  .entry-content {
    padding: 4rem;
  }
}
/* LARGE devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /*.conteneur,*/
  .image-header-centered {
    max-width: 960px;
  }
  /* LAYOUT : décaler le titre */
  .navbar-brand,
  .logo {
    margin-left: 1rem;
  }
  /* Afficher / Masquer le menu responsive */
  .nav-mob,
  .toggle,
  .close-toggle {
    display: none;
  }
  .color-test {
    grid-template-columns: repeat(4, 1fr);
  }
  .contact-form {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-form > *:nth-of-type(3),
  .contact-form > *:nth-of-type(4) {
    grid-column: 1/3;
  }
  .hide-from-large {
    display: none;
  }
  .entry-main {
    grid-template-columns: repeat(2, 1fr);
  }
  .entry-container {
    grid-column: 1/3;
  }
  /* le Contenu (texte, titres...) */
  .entry-content {
    max-width: 70%;
    margin: 4rem auto;
  }
  .entry-content > * {
    padding: 1rem;
  }
  .entry-content > p {
    padding-bottom: 4rem;
  }
  /* DECORATION */
  .fat-box {
    padding: 2rem 1rem;
  }
}
/* EXTRA LARGE devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* .conteneur, */
  .image-header-centered {
    max-width: 1140px;
  }
  .colors-list {
    grid-template-columns: repeat(5, 1fr); /* 5 colonnes de largeurs identiques*/
  }
  .box-list {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes de largeurs identiques */
  }
  /* DECORATION */
  .is-bigger {
    font-size: 17.5vh !important; /* empirique */
  }
  /* Essai */
  .is-bigger.is-bottomed {
    bottom: -17.5vh; /* empirique */
  }
  .main-content {
    grid-template-columns: 1fr 1fr;
  }
  .color-test {
    grid-template-columns: repeat(5, 1fr);
  }
  .inner-menu {
    grid-template-columns: repeat(8, 1fr);
  }
  .hide-on-xlarge {
    display: none;
  }
}
/* EXTRA XLARGE devices (large desktops, 1400px and up) */
@media (min-width: 1441px) {
  /*.conteneur,*/
  .image-header-centered {
    max-width: 1340px;
  }
  .hide-on-xxlarge {
    display: none;
  }
}/*# sourceMappingURL=style.css.map */