/*Importation de la police Shantell Sans depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/*Importation de la police Ribeye Marrow depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Ribeye+Marrow&display=swap');

/* Style global */
* {
  box-sizing: border-box;
}

/* Style du corps de la page */
body {
  margin: 0;
  font-family: 'Shantell Sans', cursive;
  font-size: 24px;
  line-height: 28px;
    --dot-bg: var(--flexoki-paper);
    --dot-color: var(--flexoki-200);
    --dot-size: 2px;
    --dot-space: 28px;
        background:
            linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
            linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
            var(--dot-color);
}

/* Style des onglets sur le côté gauche */
.onglets {
  height: 100%;
  width: --taille-onglets;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--flexoki-green-600);
  overflow-x: hidden;
}

/* Liens de navigation des onglets */
.onglets a {
  color: var(--flexoki-paper);
  padding: 16px;
  text-decoration: none;
  display: block;
}

/* Changer la couleur au survol */
.onglets a:hover {
  background-color: var(--flexoki-paper);
  color: var(--flexoki-black);
  /* ajouter du INFM au survol */
  font-family: "Shantell Sans", cursive;
    font-variation-settings:
        "BNCE" 0,
        "INFM" 1,
        "SPAC" 0;
}

/* Style de la section principale */
.principale {
  margin-left: --taille-onglets;
  padding-top: 16px;
  padding-left: 200px; /* les onglets mangent sur la section principale si le nom d'un onglet est trop long, donc j'ai mis un plus gros padding. Je sais pas si c'est la bonne façon de faire */
  padding-right: 100px;
}

/* Code copié de Google Fonts pour Shantell Sans */
.shantell-sans-regular {
  font-family: "Shantell Sans", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BNCE" 0,
    "INFM" 0,
    "SPAC" 0;
}

/* Version italique */
.shantell-sans-italic {
  font-family: "Shantell Sans", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings:
    "BNCE" 0,
    "INFM" 0,
    "SPAC" 0;
}

/* Faire que en gras il y ait du bounce */
strong {
  font-family: "Shantell Sans", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "BNCE" 0.67,
    "INFM" 0,
    "SPAC" 0;
}

/* Code copié de Google Fonts pour Ribeye Marrow */
.ribeye-marrow-regular {
  font-family: "Ribeye Marrow", serif;
  font-weight: 400;
  font-style: normal;
}

/* Utilisation de Ribeye Marrow pour les titres h1 */
h1 {
  font-family: "Ribeye Marrow", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--flexoki-orange-800);
}


/* Copié-collé de la palette de couleur Flexoki faite par Stephan Gönz (https://stephango.com/flexoki) sous license MIT*/
:root {
  --flexoki-paper:           #FFFCF0;
  --flexoki-50:              #F2F0E5;
  --flexoki-100:             #E6E4D9;
  --flexoki-150:             #DAD8CE;
  --flexoki-200:             #CECDC3;
  --flexoki-300:             #B7B5AC;
  --flexoki-400:             #9F9D96;
  --flexoki-500:             #878580;
  --flexoki-600:             #6F6E69;
  --flexoki-700:             #575653;
  --flexoki-800:             #403E3C;
  --flexoki-850:             #343331;
  --flexoki-900:             #282726;
  --flexoki-950:             #1C1B1A;
  --flexoki-black:           #100F0F;

  --flexoki-red-50:          #FFE1D5;
  --flexoki-red-100:         #FFCABB;
  --flexoki-red-150:         #FDB2A2;
  --flexoki-red-200:         #F89A8A;
  --flexoki-red-300:         #E8705F;
  --flexoki-red-400:         #D14D41;
  --flexoki-red-500:         #C03E35;
  --flexoki-red-600:         #AF3029;
  --flexoki-red-700:         #942822;
  --flexoki-red-800:         #6C201C;
  --flexoki-red-850:         #551B18;
  --flexoki-red-900:         #3E1715;
  --flexoki-red-950:         #261312;

  --flexoki-orange-50:       #FFE7CE;
  --flexoki-orange-100:      #FED3AF;
  --flexoki-orange-150:      #FCC192;
  --flexoki-orange-200:      #F9AE77;
  --flexoki-orange-300:      #EC8B49;
  --flexoki-orange-400:      #DA702C;
  --flexoki-orange-500:      #CB6120;
  --flexoki-orange-600:      #BC5215;
  --flexoki-orange-700:      #9D4310;
  --flexoki-orange-800:      #71320D;
  --flexoki-orange-850:      #59290D;
  --flexoki-orange-900:      #40200D;
  --flexoki-orange-950:      #27180E;

  --flexoki-yellow-50:       #FAEEC6;
  --flexoki-yellow-100:      #F6E2A0;
  --flexoki-yellow-150:      #F1D67E;
  --flexoki-yellow-200:      #ECCB60;
  --flexoki-yellow-300:      #DFB431;
  --flexoki-yellow-400:      #D0A215;
  --flexoki-yellow-500:      #BE9207;
  --flexoki-yellow-600:      #AD8301;
  --flexoki-yellow-700:      #8E6B01;
  --flexoki-yellow-800:      #664D01;
  --flexoki-yellow-850:      #503D02;
  --flexoki-yellow-900:      #3A2D04;
  --flexoki-yellow-950:      #241E08;

  --flexoki-green-50:        #EDEECF;
  --flexoki-green-100:       #DDE2B2;
  --flexoki-green-150:       #CDD597;
  --flexoki-green-200:       #BEC97E;
  --flexoki-green-300:       #A0AF54;
  --flexoki-green-400:       #879A39;
  --flexoki-green-500:       #768D21;
  --flexoki-green-600:       #66800B;
  --flexoki-green-700:       #536907;
  --flexoki-green-800:       #3D4C07;
  --flexoki-green-850:       #313D07;
  --flexoki-green-900:       #252D09;
  --flexoki-green-950:       #1A1E0C;

  --flexoki-cyan-50:         #DDF1E4;
  --flexoki-cyan-100:        #BFE8D9;
  --flexoki-cyan-150:        #A2DECE;
  --flexoki-cyan-200:        #87D3C3;
  --flexoki-cyan-300:        #5ABDAC;
  --flexoki-cyan-400:        #3AA99F;
  --flexoki-cyan-500:        #2F968D;
  --flexoki-cyan-600:        #24837B;
  --flexoki-cyan-700:        #1C6C66;
  --flexoki-cyan-800:        #164F4A;
  --flexoki-cyan-850:        #143F3C;
  --flexoki-cyan-900:        #122F2C;
  --flexoki-cyan-950:        #101F1D;

  --flexoki-blue-50:         #E1ECEB;
  --flexoki-blue-100:        #C6DDE8;
  --flexoki-blue-150:        #ABCFE2;
  --flexoki-blue-200:        #92BFDB;
  --flexoki-blue-300:        #66A0C8;
  --flexoki-blue-400:        #4385BE;
  --flexoki-blue-500:        #3171B2;
  --flexoki-blue-600:        #205EA6;
  --flexoki-blue-700:        #1A4F8C;
  --flexoki-blue-800:        #163B66;
  --flexoki-blue-850:        #133051;
  --flexoki-blue-900:        #12253B;
  --flexoki-blue-950:        #101A24;

  --flexoki-purple-50:       #F0EAEC;
  --flexoki-purple-100:      #E2D9E9;
  --flexoki-purple-150:      #D3CAE6;
  --flexoki-purple-200:      #C4B9E0;
  --flexoki-purple-300:      #A699D0;
  --flexoki-purple-400:      #8B7EC8;
  --flexoki-purple-500:      #735EB5;
  --flexoki-purple-600:      #5E409D;
  --flexoki-purple-700:      #4F3685;
  --flexoki-purple-800:      #3C2A62;
  --flexoki-purple-850:      #31234E;
  --flexoki-purple-900:      #261C39;
  --flexoki-purple-950:      #1A1623;

  --flexoki-magenta-50:      #FEE4E5;
  --flexoki-magenta-100:     #FCCFDA;
  --flexoki-magenta-150:     #F9B9CF;
  --flexoki-magenta-200:     #F4A4C2;
  --flexoki-magenta-300:     #E47DA8;
  --flexoki-magenta-400:     #CE5D97;
  --flexoki-magenta-500:     #B74583;
  --flexoki-magenta-600:     #A02F6F;
  --flexoki-magenta-700:     #87285E;
  --flexoki-magenta-800:     #641F46;
  --flexoki-magenta-850:     #4F1B39;
  --flexoki-magenta-900:     #39172B;
  --flexoki-magenta-950:     #24131D;
  /* Taille de la partie onglets (c'est pas copié-collé cette partie, je veux juste essayer de faire une variable moi-même)*/
  --taille-onglets: 400px;
}

/* Utilisation de la palette de couleur Flexoki */
/* Liens dans la section principale*/
.principale a:link {
    color: var(--flexoki-blue-600);
}

.principale a:visited {
    color: var(--flexoki-purple-600);
}

.principale a:hover {
    color: var(--flexoki-blue-800);
}

.principale a:active {
    color: var(--flexoki-blue-200);
}