@charset "UTF-8";
/**
 * @author Gabriel Caron <gabriel.caron@gmail.com>
 */
/****** Librairies ******/
/** Normalize **/
/*! normalize.sass v8.0.1 | MIT License | github.com/necolas/normalize.sass */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on medias inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/**** UTILITAIRES ****/
/*
* Variables globales
* @author Gabriel Caron <gabriel.caron@gmail.com>
* @version 1.1
*/
/** Palette de couleurs **/
/* Couleurs de base AAA */
/* Polices */
/** Points de rupture **/
/** Transitions **/
/*
* Mixins de la grille et d'accessibilité
* @author Gabriel Caron <gabriel.caron@gmail.com>
*/
.visuallyhidden,
.screen-reader-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus,
.screen-reader-only.focusable:active,
.screen-reader-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.sauter-contenu {
  display: block;
  padding: 0 3rem;
  line-height: 5rem;
  color: #000;
  background-color: #ffe100;
  text-align: center;
}

/****** BASE ******/
/*
* Styles des balises racine
* @author Gabriel Caron <gabriel.caron@gmail.com>
* @version 1.1
*/
/* Base décimale */
html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
}
@media screen and (prefers-color-scheme: dark) {
  body {
    background-color: #0d0d0d;
  }
}

a {
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  outline-offset: 1rem;
}
a:hover {
  text-decoration-thickness: 0.35rem;
  text-underline-offset: 0.3rem;
  text-underline-position: from-font;
}
@media screen and (prefers-color-scheme: dark) {
  a:hover {
    text-decoration-thickness: 0.4rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  a {
    color: #64b9ff;
  }
  a:visited {
    color: #b487ff;
  }
}

@media screen and (prefers-color-scheme: dark) {
  li,
  figcaption {
    color: #e6e6e6;
  }
}
abbr[title] {
  text-decoration-style: dotted;
}

img {
  vertical-align: bottom;
  max-width: 100%;
}

/*
* Polices de base
* @author Gabriel Caron <gabriel.caron@gmail.com>
* @version 5.1
*/
/* Polices */
@font-face {
  font-family: Roboto-Regular;
  src: url(../../liaisons/polices/roboto-regular.woff2) format("woff2"), url(../../liaisons/polices/roboto-regular.woff) format("woff"), url(../../liaisons/polices/roboto-regular.ttf) format("truetype");
}
@font-face {
  font-family: Roboto-Italic;
  src: url(../../liaisons/polices/roboto-italic.woff2) format("woff2"), url(../../liaisons/polices/roboto-italic.woff) format("woff"), url(../../liaisons/polices/roboto-italic.ttf) format("truetype");
}
@font-face {
  font-family: Roboto-Medium;
  src: url(../../liaisons/polices/roboto-medium.woff2) format("woff2"), url(../../liaisons/polices/roboto-medium.woff) format("woff"), url(../../liaisons/polices/roboto-medium.ttf) format("truetype");
}
@font-face {
  font-family: Roboto-MediumItalic;
  src: url(../../liaisons/polices/roboto-mediumItalic.woff2) format("woff2"), url(../../liaisons/polices/roboto-mediumItalic.woff) format("woff"), url(../../liaisons/polices/roboto-mediumItalic.ttf) format("truetype");
}
@font-face {
  font-family: Roboto-Bold;
  src: url(../../liaisons/polices/roboto-bold.woff2) format("woff2"), url(../../liaisons/polices/roboto-bold.woff) format("woff"), url(../../liaisons/polices/roboto-bold.ttf) format("truetype");
}
@font-face {
  font-family: Roboto-BoldItalic;
  src: url(../../liaisons/polices/roboto-boldItalic.woff2) format("woff2"), url(../../liaisons/polices/roboto-boldItalic.woff) format("woff"), url(../../liaisons/polices/roboto-boldItalic.ttf) format("truetype");
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Roboto-Medium, Arial, sans serif;
  font-weight: normal;
  line-height: 100%;
  letter-spacing: 0.05rem;
  text-wrap: balance;
}
@media screen and (prefers-color-scheme: dark) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #e6e6e6;
  }
}

h1 {
  font-size: 4.5rem;
  text-align: center;
  padding: 2rem 0 5rem 0;
}
@media screen and (min-width: 600px) {
  h1 {
    font-size: 7rem;
    padding: 7.7rem 0;
  }
}

.contenu.secondaire h1 {
  font-size: 5.5rem;
  text-align: left;
  padding: 2rem 0 0 0;
  margin: 3rem 0 0 0;
}
@media screen and (min-width: 600px) {
  .contenu.secondaire h1 {
    font-size: 7rem;
  }
}

h2 {
  font-size: 4rem;
  font-family: Roboto-Medium, Arial, sans serif;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 600px) {
  h2 {
    font-size: 5rem;
  }
}

h3 {
  font-size: 3.5rem;
  font-family: Roboto-Medium, Arial, sans serif;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 600px) {
  h3 {
    font-size: 4rem;
  }
}

h4 {
  font-size: 3rem;
  font-family: Roboto-Bold, Arial, sans serif;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 600px) {
  h4 {
    font-size: 3rem;
  }
}

h5 {
  font-size: 2.5rem;
  font-family: Roboto-Bold, Arial, sans serif;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 600px) {
  h5 {
    font-size: 2.5rem;
  }
}

h6 {
  font-size: 2rem;
  font-family: Roboto-Bold, Arial, sans serif;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 600px) {
  h6 {
    font-size: 2rem;
  }
}

@media screen and (prefers-color-scheme: dark) {
  p {
    color: #e6e6e6;
  }
}
body {
  font-family: Roboto-Regular, Arial, sans serif;
  font-size: 2rem;
  line-height: 1.5;
}

/*
* Grille de développement
* @author Gabriel Caron <gabriel.caron@gmail.com>
* @version 1.0
*/
/*** DEV seulement - Classe conteneur pour le centrage du bloc parent avec CSS Grid ***/
.conteneur {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (min-width: 1000px) {
  .conteneur {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (min-width: 1930px) {
  .conteneur {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 600px) {
  .conteneur {
    display: grid;
    grid-template-columns: minmax(auto, 1400px);
    justify-content: center;
  }
}

/*** DEV seulement - Classe conteneur pour le positionnement de la rangée enfant en Grid ***/
.rangeeGrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
}

/*** DEV seulement - Classe conteneur pour le positionnement de la rangée enfant en flexbox ***/
@media (min-width: 600px) {
  .rangeeFlex {
    display: flex;
    justify-content: space-between;
  }
}
/*
* Mixins des boutons
* @author Gabriel Caron <gabriel.caron@gmail.com>
* @version 2.2
*/
/* Styles pour l'état actif */
/* Styles pour la page courante */
/****** MODULES ******/
/*
* En-tête
* @author Gabriel Caron <gabriel.caron@gmail.com>
*/
.entete {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (min-width: 1000px) {
  .entete {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (min-width: 1930px) {
  .entete {
    padding-left: 0;
    padding-right: 0;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .entete {
      display: grid;
      grid-template-columns: minmax(auto, 1400px);
      justify-content: center;
    }
  }
}
@supports not (grid-template-columns: minmax(auto, 1400px)) {
  .entete {
    max-width: 1400px;
  }
}
@media screen and (min-width: 600px) {
  .entete {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (min-width: 900px) {
  .entete {
    padding-bottom: 3rem;
  }
}
@media screen and (min-width: 1000px) {
  .entete {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 10rem;
  }
}
@media screen and (min-width: 1000px) {
  .entete {
    background-image: url("../images/design/vagues-entete.svg");
    background-repeat: no-repeat;
    background-position: 40vw 0;
  }
}
@media screen and (min-width: 1400px) {
  .entete {
    background-position: 44vw 0;
  }
}
@media screen and (min-width: 1600px) {
  .entete {
    background-position: 46vw 0;
  }
}
@media screen and (min-width: 1920px) {
  .entete {
    background-position: 48vw 0;
  }
}
@media screen and (max-width: 899px) {
  .entete__lien-accueil {
    flex-basis: 100%;
  }
}
.entete__lien-accueil:hover .maison, .entete__lien-accueil:focus .maison {
  display: block;
}
@media screen and (prefers-color-scheme: dark) {
  .entete__lien-accueil:hover .maison, .entete__lien-accueil:focus .maison {
    fill: #0d0d0d;
  }
}
.entete__lien-accueil:hover .signature, .entete__lien-accueil:focus .signature {
  display: none;
}
.entete__logo {
  width: 20rem;
  height: 4.885rem;
  margin-left: 0.5rem;
  display: block;
}
@media screen and (min-width: 900px) {
  .entete__logo {
    width: 25rem;
    height: 6.1rem;
    margin-left: 0;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .entete__logo .signature {
    fill: #0d0d0d;
  }
}
.entete__logo .maison {
  display: none;
}
@media screen and (prefers-color-scheme: dark) {
  .entete__logo .logotype {
    fill: #e6e6e6;
  }
}
.entete__menu {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 5.5rem;
}

/*
* Styles des liens de navigation (en-tête, icônes des projets et pied de page)
* @author Gabriel Caron <gabriel.caron@gmail.com>
*/
/* Mixin servant exclusivement à gérér les liens gris, car les liens au fil du texte sont bleus (par défaut) */
/* En-tête */
.entete .navigation {
  width: 100%;
}
@media screen and (min-width: 900px) {
  .entete .navigation {
    width: initial;
  }
}
.entete .navigation__liste {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 3rem 0 0 0;
}
@media screen and (min-width: 1000px) {
  .entete .navigation__liste {
    margin: 3rem 0 2rem 0;
  }
}
.entete .navigation__item {
  display: inline-block;
}
@media screen and (min-width: 1100px) {
  .entete .navigation__item {
    margin-left: 1rem;
  }
}
.entete .navigation__lien {
  display: inline-block;
  font-family: Roboto-Medium, Arial, sans serif;
  font-size: 1.6rem;
  line-height: 120%;
  letter-spacing: 0.05rem;
  padding: 1.2rem 1.7rem;
  margin: 0 0.3rem;
  text-align: center;
}
.entete .navigation__lien:link, .entete .navigation__lien:visited {
  color: #404040;
}
@media screen and (prefers-color-scheme: dark) {
  .entete .navigation__lien:link, .entete .navigation__lien:visited {
    color: #e6e6e6;
  }
}
.entete .navigation__lien:hover, .entete .navigation__lien:active {
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .entete .navigation__lien:hover, .entete .navigation__lien:active {
    color: #e6e6e6;
  }
}
@media screen and (min-width: 600px) {
  .entete .navigation__lien {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1000px) {
  .entete .navigation__lien {
    font-size: 2rem;
    padding: 1.4rem 3rem;
  }
}
.entete .navigation__lien:link, .entete .navigation__lien:visited {
  border-radius: 2.5rem;
}
@media screen and (min-width: 600px) {
  .entete .navigation__lien:link, .entete .navigation__lien:visited {
    border-radius: 3rem;
  }
}
.entete .navigation__lien:active {
  background-color: #ffe100;
  text-decoration: none;
}
@media screen and (prefers-color-scheme: dark) {
  .entete .navigation__lien:active {
    color: #000;
  }
}
.entete .navigation__lien.navigation__lien--courant {
  color: #000;
  font-family: Roboto-Bold, Arial, sans serif;
  text-decoration: none;
  color: #000;
  border: 0.3rem solid #ffe100;
  line-height: 120%;
  padding: 1rem 1.5rem;
}
@media screen and (prefers-color-scheme: dark) {
  .entete .navigation__lien.navigation__lien--courant {
    color: #e6e6e6;
  }
}
.entete .navigation__lien.navigation__lien--courant:hover {
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}
.entete .navigation__lien.navigation__lien--courant:hover:hover {
  text-decoration-thickness: 0.35rem;
  text-underline-offset: 0.3rem;
  text-underline-position: from-font;
}
@media screen and (prefers-color-scheme: dark) {
  .entete .navigation__lien.navigation__lien--courant:hover:hover {
    text-decoration-thickness: 0.4rem;
  }
}
@media screen and (min-width: 520px) {
  .entete .navigation__lien.navigation__lien--courant {
    padding: 1.2rem 2.8rem;
  }
}
.entete .navigation__lien.navigation__lien--courant:active, .entete .navigation__lien.navigation__lien--courant:focus-visible {
  background-color: #ffe100;
  text-decoration: none;
}
@media screen and (prefers-color-scheme: dark) {
  .entete .navigation__lien.navigation__lien--courant:active, .entete .navigation__lien.navigation__lien--courant:focus-visible {
    color: #000;
  }
}

/* Projets */
.projets .navigation__rangee-sections {
  display: flex;
  align-items: center;
  list-style-type: none;
  padding: 0;
}
.projets .navigation__rangee-sections .navigation__lien {
  display: inline-block;
  font-size: 1.6rem;
  text-align: center;
  line-height: 120%;
  padding: 1rem 1.5rem;
  margin: 0 0.3rem;
}
.projets .navigation__rangee-sections .navigation__lien:link, .projets .navigation__rangee-sections .navigation__lien:visited {
  color: #404040;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-sections .navigation__lien:link, .projets .navigation__rangee-sections .navigation__lien:visited {
    color: #e6e6e6;
  }
}
.projets .navigation__rangee-sections .navigation__lien:hover, .projets .navigation__rangee-sections .navigation__lien:active {
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-sections .navigation__lien:hover, .projets .navigation__rangee-sections .navigation__lien:active {
    color: #e6e6e6;
  }
}
@media screen and (min-width: 600px) {
  .projets .navigation__rangee-sections .navigation__lien {
    font-size: 2rem;
    padding: 1rem 2.7rem;
  }
}
.projets .navigation__rangee-sections .navigation__lien:active {
  background-color: #ffe100;
  text-decoration: none;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-sections .navigation__lien:active {
    color: #000;
  }
}
.projets .navigation__rangee-sections .navigation__lien--courant {
  color: #000;
  font-family: Roboto-Bold, Arial, sans serif;
  text-decoration: none;
  color: #000;
  border: 0.3rem solid #ffe100;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-sections .navigation__lien--courant {
    color: #e6e6e6;
  }
}
.projets .navigation__rangee-sections .navigation__lien--courant:hover {
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}
.projets .navigation__rangee-sections .navigation__lien--courant:hover:hover {
  text-decoration-thickness: 0.35rem;
  text-underline-offset: 0.3rem;
  text-underline-position: from-font;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-sections .navigation__lien--courant:hover:hover {
    text-decoration-thickness: 0.4rem;
  }
}
.projets .navigation__rangee-sections .navigation__lien--courant:active, .projets .navigation__rangee-sections .navigation__lien--courant:focus-visible {
  background-color: #ffe100;
  text-decoration: none;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-sections .navigation__lien--courant:active, .projets .navigation__rangee-sections .navigation__lien--courant:focus-visible {
    color: #000;
  }
}
.projets .navigation__rangee-projets {
  padding: 0;
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .projets .navigation__rangee-projets {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2rem;
    }
  }
}
.projets .navigation__rangee-projets .navigation__lien {
  text-decoration: underline;
}
.projets .navigation__rangee-projets .navigation__lien:link, .projets .navigation__rangee-projets .navigation__lien:visited {
  color: #404040;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-projets .navigation__lien:link, .projets .navigation__rangee-projets .navigation__lien:visited {
    color: #e6e6e6;
  }
}
.projets .navigation__rangee-projets .navigation__lien:hover, .projets .navigation__rangee-projets .navigation__lien:active {
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-projets .navigation__lien:hover, .projets .navigation__rangee-projets .navigation__lien:active {
    color: #e6e6e6;
  }
}
.projets .navigation__rangee-projets .navigation__lien:hover .navigation__figcaption {
  text-decoration-thickness: 0.35rem;
  text-underline-offset: 0.3rem;
  text-underline-position: from-font;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-projets .navigation__lien:hover .navigation__figcaption {
    text-decoration-thickness: 0.4rem;
  }
}
.projets .navigation__rangee-projets .navigation__lien .navigation__figcaption {
  text-decoration: underline;
}
.projets .navigation__rangee-projets .navigation__liste {
  list-style-type: none;
  padding: 0;
  vertical-align: top;
}
.projets .navigation__rangee-projets .navigation__item {
  display: inline-block;
  vertical-align: top;
  padding: 1rem 0;
}
@media screen and (max-width: 599px) {
  .projets .navigation__rangee-projets .navigation__item {
    width: calc(50% - 1.3rem);
  }
}
.projets .navigation__rangee-projets .navigation__item:nth-child(odd) {
  padding-right: 2rem;
}
@media screen and (min-width: 600px) {
  .projets .navigation__rangee-projets .navigation__item:nth-child(odd) {
    padding-right: initial;
  }
}
@media screen and (min-width: 600px) {
  .projets .navigation__rangee-projets .navigation__item {
    grid-column: span 3;
  }
}
.projets .navigation__rangee-selecteur {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style-type: none;
  padding: 0;
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .projets .navigation__rangee-selecteur {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2rem;
    }
  }
}
@media screen and (min-width: 1100px) {
  .projets .navigation__rangee-selecteur {
    display: flex;
    gap: 3rem 5rem;
  }
}
.projets .navigation__rangee-selecteur .navigation__lien.navigation__lien:link, .projets .navigation__rangee-selecteur .navigation__lien.navigation__lien:visited {
  color: #404040;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-selecteur .navigation__lien.navigation__lien:link, .projets .navigation__rangee-selecteur .navigation__lien.navigation__lien:visited {
    color: #e6e6e6;
  }
}
.projets .navigation__rangee-selecteur .navigation__lien.navigation__lien:hover, .projets .navigation__rangee-selecteur .navigation__lien.navigation__lien:active {
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-selecteur .navigation__lien.navigation__lien:hover, .projets .navigation__rangee-selecteur .navigation__lien.navigation__lien:active {
    color: #e6e6e6;
  }
}
.projets .navigation__rangee-selecteur .navigation__lien.navigation__lien--courant {
  color: #000;
  font-family: Roboto-Bold, Arial, sans serif;
  text-decoration: none;
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-selecteur .navigation__lien.navigation__lien--courant {
    color: #e6e6e6;
  }
}
.projets .navigation__rangee-selecteur .navigation__lien.navigation__lien--courant .icone {
  border: 0.3rem solid #ffe100;
}
.projets .navigation__rangee-selecteur .navigation__lien.navigation__lien--courant .navigation__figcaption {
  border: 0.3rem solid #ffe100;
}
.projets .navigation__rangee-selecteur .navigation__lien.navigation__lien--courant:hover {
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}
.projets .navigation__rangee-selecteur .navigation__lien.navigation__lien--courant:hover:hover {
  text-decoration-thickness: 0.35rem;
  text-underline-offset: 0.3rem;
  text-underline-position: from-font;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__rangee-selecteur .navigation__lien.navigation__lien--courant:hover:hover {
    text-decoration-thickness: 0.4rem;
  }
}
.projets .navigation__rangee-selecteur .navigation__item {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .projets .navigation__rangee-selecteur .navigation__item {
    grid-column: span 6;
  }
}
@media screen and (min-width: 1100px) {
  .projets .navigation__rangee-selecteur .navigation__item {
    width: initial;
  }
}
.projets .navigation__rangee-selecteur .navigation__figure {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-align: left;
}
.projets .navigation__rangee-selecteur .navigation__figure .icone {
  width: 5rem;
  border-radius: 1.5rem;
}
@media screen and (min-width: 600px) {
  .projets .navigation__rangee-selecteur .navigation__figure .icone {
    width: 8.5rem;
    border-radius: 2rem;
  }
}
.projets .navigation__rangee-selecteur .navigation__figcaption {
  padding: 0;
}
.projets .navigation__lien {
  font-family: Roboto-Medium, Arial, sans serif;
  letter-spacing: 0.05rem;
  line-height: 100%;
  border-radius: 4rem;
}
.projets .navigation__lien:hover .icone, .projets .navigation__lien:focus .icone {
  border: none;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__lien:hover .icone, .projets .navigation__lien:focus .icone {
    border: 0.2rem solid #a6a6a6;
  }
}
.projets .navigation__lien.navigation__lien--courant .icone {
  border: none;
}
.projets .navigation__lien.navigation__lien--courant .navigation__figcaption {
  padding: 1rem 2rem;
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__lien.navigation__lien--courant .navigation__figcaption {
    padding: 1.3rem 2.3rem;
  }
}
.projets .navigation__figure {
  margin: 0;
  text-align: center;
}
.projets .navigation__figure .icone {
  border-radius: 4rem;
  box-shadow: 3px 3px 25px 0 rgba(0, 0, 0, 0.05), -5px -5px 25px 0px rgb(255, 255, 255);
}
@media screen and (min-width: 600px) {
  .projets .navigation__figure .icone {
    border-radius: 3rem;
  }
}
@media screen and (min-width: 900px) {
  .projets .navigation__figure .icone {
    border-radius: 4rem;
  }
}
@media screen and (min-width: 1200px) {
  .projets .navigation__figure .icone {
    border-radius: 5.5rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__figure .icone {
    border: solid 0.2rem #262626;
    box-shadow: none;
  }
  .projets .navigation__figure .icone .elevation {
    fill: #1a1a1a;
  }
}
.projets .navigation__figcaption {
  font-family: Roboto-Medium, Arial, sans serif;
  font-size: 1.6rem;
  display: inline-block;
  line-height: 150%;
  border-radius: 4rem;
  padding: 1.3rem 2.3rem;
}
@media screen and (min-width: 600px) {
  .projets .navigation__figcaption {
    font-size: 1.8rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .projets .navigation__figcaption {
    border: 0.3rem solid transparent;
  }
}

/* Lien externe */
.navigation__lien--externe:hover::after, .navigation__lien--externe:focus::after {
  margin: 0 0 0.75rem 0.75rem;
}
.navigation__lien--externe::after {
  background: url("../images/icones/lien-externe.svg") no-repeat center;
  height: 1.75rem;
  width: 1.75rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  content: "";
  transition: all 200ms ease-in-out;
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien--externe::after {
    background: url("../images/icones/lien-externe--sombre.svg") no-repeat center;
  }
}

/* Pied de page */
@media screen and (min-width: 600px) {
  .pied-de-page .navigation {
    grid-column: 1/13;
    row-gap: 0;
  }
  @supports (grid-template-columns: minmax(auto, 1400px)) {
    @media screen and (min-width: 600px) and (min-width: 600px) {
      .pied-de-page .navigation {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 2rem;
      }
    }
  }
  .pied-de-page .navigation .rangee1 {
    grid-row: 1;
  }
  .pied-de-page .navigation .rangee2 {
    grid-row: 2;
  }
  .pied-de-page .navigation .rangee3 {
    grid-row: 3;
  }
  .pied-de-page .navigation .rangee4 {
    grid-row: 4;
  }
}
.pied-de-page .navigation__titre {
  text-decoration: none;
  line-height: 110%;
  font-family: Roboto-Bold, Arial, sans serif;
  font-size: 2rem;
  margin: 3rem 0 0 0;
}
@media screen and (min-width: 600px) {
  .pied-de-page .navigation__titre {
    grid-column: span 4;
    margin: initial;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page .navigation__titre {
    color: #e6e6e6;
  }
}
.pied-de-page .navigation__titre .section {
  font-family: Roboto-Bold, Arial, sans serif;
  color: #000;
  font-size: 2rem;
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page .navigation__titre .section {
    color: #e6e6e6;
  }
}
.pied-de-page .navigation__liste {
  list-style-type: "– ";
  padding: 0 0 0 2.5rem;
  margin-top: 0.5rem;
}
@media screen and (min-width: 600px) {
  .pied-de-page .navigation__liste {
    grid-column: span 4;
  }
}
.pied-de-page .navigation__lien {
  font-family: Roboto-Medium, Arial, sans serif;
  font-size: 1.8rem;
  line-height: 225%;
  letter-spacing: 0.05rem;
  transition: border-bottom 0.075s ease-in-out;
}
.pied-de-page .navigation__lien:link, .pied-de-page .navigation__lien:visited {
  color: #404040;
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page .navigation__lien:link, .pied-de-page .navigation__lien:visited {
    color: #a6a6a6;
  }
}
.pied-de-page .navigation__lien:hover, .pied-de-page .navigation__lien:active {
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page .navigation__lien:hover, .pied-de-page .navigation__lien:active {
    color: #a6a6a6;
  }
}
.pied-de-page .navigation__lien.section {
  color: #000;
  line-height: 100%;
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page .navigation__lien.section {
    color: #e6e6e6;
  }
}
@media screen and (min-width: 600px) {
  .pied-de-page__copyright {
    grid-column: 1/13;
  }
}

/*
* Composante Accordéon
* @author Gabriel Caron <gabriel.caron@gmail.com>
*/
.accordeon {
  list-style: none;
  width: 100%;
  transition: all 200ms ease-in;
  overflow: hidden;
  margin: 1rem 0;
}
.accordeon:first-of-type {
  margin-top: 3rem;
}
.accordeon--active .accordeon__contenu {
  display: block;
  max-height: fit-content;
  margin: 0 0 1rem 1.5rem;
  transition: max-height 200ms ease-out;
}
.accordeon--active .accordeon__bouton {
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .accordeon--active .accordeon__bouton {
    color: #e6e6e6;
  }
}
.accordeon--active .accordeon__bouton::before {
  background-color: #ffe100;
  border-color: #ffe100;
}
.accordeon--active .accordeon__bouton::after {
  transform: rotate(180deg);
}
@media screen and (prefers-color-scheme: dark) {
  .accordeon--active .accordeon__bouton::after {
    background: url(../images/icones/fleche-accordeon.svg) no-repeat;
  }
}
.accordeon__bouton {
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  color: #404040;
  background-color: transparent;
  border: initial;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0;
  margin: 1rem;
  font-family: Roboto-Medium, Arial, sans serif;
  font-size: 1.8rem;
  text-decoration: underline;
  text-align: left;
  outline-offset: 1rem;
  cursor: pointer;
}
.accordeon__bouton:hover {
  text-decoration-thickness: 0.35rem;
  text-underline-offset: 0.3rem;
  text-underline-position: from-font;
}
@media screen and (prefers-color-scheme: dark) {
  .accordeon__bouton:hover {
    text-decoration-thickness: 0.4rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .accordeon__bouton {
    color: #e6e6e6;
  }
}
.accordeon__bouton::before {
  content: "";
  z-index: -1;
  display: flex;
  border: solid 0.3rem #404040;
  border-radius: 0.7rem;
  height: 3.6rem;
  width: 3.6rem;
}
@media screen and (prefers-color-scheme: dark) {
  .accordeon__bouton::before {
    border-color: #a6a6a6;
  }
}
.accordeon__bouton::after {
  content: "";
  position: absolute;
  margin-left: 0.9rem;
  display: inline-block;
  width: 2.4rem;
  height: 1.4rem;
  background: url(../images/icones/fleche-accordeon.svg) no-repeat;
  background-size: cover;
  transition: all 200ms ease-in-out;
}
@media screen and (prefers-color-scheme: dark) {
  .accordeon__bouton::after {
    background: url(../images/icones/fleche-accordeon--sombre.svg) no-repeat;
  }
}
.accordeon__bouton:hover .accordeon__titre, .accordeon__bouton:focus .accordeon__titre {
  color: #000;
}
.accordeon__titre {
  margin: 0;
}
.accordeon__contenu {
  display: none;
  overflow: hidden;
  max-height: 0;
  font-size: 1.6rem;
  transition: none;
}
.accordeon__contenu > * {
  margin: 1rem 5.5rem;
}

/*
* Pied de page
* @author Gabriel Caron <gabriel.caron@gmail.com>
*/
.pied-de-page {
  padding-left: 2rem;
  padding-right: 2rem;
  background-color: #ffe100;
  margin-top: 5rem;
  padding-bottom: 1rem;
}
@media screen and (min-width: 1000px) {
  .pied-de-page {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (min-width: 1930px) {
  .pied-de-page {
    padding-left: 0;
    padding-right: 0;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .pied-de-page {
      display: grid;
      grid-template-columns: minmax(auto, 1400px);
      justify-content: center;
    }
  }
}
@supports not (grid-template-columns: minmax(auto, 1400px)) {
  .pied-de-page {
    max-width: 1400px;
  }
}
@media screen and (min-width: 900px) {
  .pied-de-page {
    margin-top: 10rem;
    padding: 0 5rem 0 5rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page {
    background-image: linear-gradient(to right bottom, #1d1b16, #1c1a15);
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .pied-de-page__conteneur-grille {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2rem;
    }
  }
}
.pied-de-page__rangee-logo {
  container-type: inline-size;
  container-name: rangee-logo;
  padding: 5rem 0 2rem 0;
}
@media screen and (min-width: 600px) {
  .pied-de-page__rangee-logo {
    grid-column: 1/13;
    display: flex;
    justify-content: space-between;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
    padding: 5rem 0 5rem 0;
  }
}
@media screen and (min-width: 900px) {
  .pied-de-page__rangee-logo {
    padding: 10rem 0 5rem 0;
  }
}
.pied-de-page__titres {
  font-family: Roboto-Medium, Arial, sans serif;
  font-size: 1.8rem;
  color: #404040;
  line-height: 150%;
  letter-spacing: 0.05rem;
  margin: 2rem 0 0 0;
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page__titres {
    color: #a6a6a6;
  }
}
@container rangee-logo (min-width: 525px) {
  .pied-de-page__titres {
    margin: 1rem 0 0 0;
  }
}
.pied-de-page__lien-accueil:hover .maison, .pied-de-page__lien-accueil:focus .maison {
  display: block;
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page__lien-accueil:hover .maison, .pied-de-page__lien-accueil:focus .maison {
    fill: #0d0d0d;
  }
}
.pied-de-page__lien-accueil:hover .signature, .pied-de-page__lien-accueil:focus .signature {
  display: none;
}
.pied-de-page__logo {
  width: 20rem;
  height: 4.9rem;
  display: block;
}
.pied-de-page__logo .maison {
  display: none;
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page__logo .elevation {
    fill: #ffe100;
  }
  .pied-de-page__logo .signature {
    fill: #0d0d0d;
  }
  .pied-de-page__logo .logotype {
    fill: #e6e6e6;
  }
}
.pied-de-page__copyright {
  font-size: 1.6rem;
  letter-spacing: 0.05rem;
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .pied-de-page__copyright {
    color: #a6a6a6;
  }
}
@media screen and (min-width: 1000px) {
  .pied-de-page__copyright {
    position: relative;
    top: 9rem;
  }
}
.pied-de-page__vagues {
  display: none;
}
@media screen and (min-width: 900px) {
  .pied-de-page__vagues {
    display: block;
  }
}

/*
* Icônes des projets
* @author Gabriel Caron <gabriel.caron@gmail.com>
*/
/* État survol des icônes des projets */
@media screen and (min-width: 600px) {
  .navigation__lien--nouveau .navigation__figcaption::before {
    content: "";
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    background-image: url(../images/icones/nouveau.svg);
    background-repeat: no-repeat;
    padding-right: 1rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant svg, .navigation__lien:hover svg, .navigation__lien:focus svg {
    border: solid 0.2rem #a6a6a6;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .SOS .bouee {
    fill: url(#SOS-rouge-sombre);
  }
}
.navigation__lien.navigation__lien--courant .SOS .elevation, .navigation__lien:hover .SOS .elevation, .navigation__lien:focus .SOS .elevation {
  fill: url(#SOS-rouge-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .SOS .elevation, .navigation__lien:hover .SOS .elevation, .navigation__lien:focus .SOS .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .SOS .bouee, .navigation__lien:hover .SOS .bouee, .navigation__lien:focus .SOS .bouee {
  fill: url(#SOS-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .SOS .bouee, .navigation__lien:hover .SOS .bouee, .navigation__lien:focus .SOS .bouee {
    fill: url(#SOS-rouge-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .alaia .planches {
    fill: url(#alaia-sable-sombre);
  }
}
.navigation__lien.navigation__lien--courant .alaia .elevation, .navigation__lien:hover .alaia .elevation, .navigation__lien:focus .alaia .elevation {
  fill: url(#alaia-sable-defaut);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .alaia .elevation, .navigation__lien:hover .alaia .elevation, .navigation__lien:focus .alaia .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .alaia .planches, .navigation__lien:hover .alaia .planches, .navigation__lien:focus .alaia .planches {
  fill: url(#alaia-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .alaia .planches, .navigation__lien:hover .alaia .planches, .navigation__lien:focus .alaia .planches {
    fill: url(#alaia-sable-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .altitude .altisymbole {
    fill: url(#altitude-bleu-sombre);
  }
}
.navigation__lien.navigation__lien--courant .altitude .elevation, .navigation__lien:hover .altitude .elevation, .navigation__lien:focus .altitude .elevation {
  fill: url(#altitude-bleu-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .altitude .elevation, .navigation__lien:hover .altitude .elevation, .navigation__lien:focus .altitude .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .altitude .altisymbole, .navigation__lien:hover .altitude .altisymbole, .navigation__lien:focus .altitude .altisymbole {
  fill: url(#altitude-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .altitude .altisymbole, .navigation__lien:hover .altitude .altisymbole, .navigation__lien:focus .altitude .altisymbole {
    fill: url(#altitude-bleu-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .aquafina .goutte {
    fill: url(#aquafina-bleu-sombre);
  }
}
.navigation__lien.navigation__lien--courant .aquafina .elevation, .navigation__lien:hover .aquafina .elevation, .navigation__lien:focus .aquafina .elevation {
  fill: url(#aquafina-bleu-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .aquafina .elevation, .navigation__lien:hover .aquafina .elevation, .navigation__lien:focus .aquafina .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .aquafina .goutte, .navigation__lien:hover .aquafina .goutte, .navigation__lien:focus .aquafina .goutte {
  fill: url(#aquafina-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .aquafina .goutte, .navigation__lien:hover .aquafina .goutte, .navigation__lien:focus .aquafina .goutte {
    fill: url(#aquafina-bleu-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .boreal .feuille {
    fill: url(#boreal-vert-sombre);
  }
}
.navigation__lien.navigation__lien--courant .boreal .elevation, .navigation__lien:hover .boreal .elevation, .navigation__lien:focus .boreal .elevation {
  fill: url(#boreal-vert-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .boreal .elevation, .navigation__lien:hover .boreal .elevation, .navigation__lien:focus .boreal .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .boreal .feuille, .navigation__lien:hover .boreal .feuille, .navigation__lien:focus .boreal .feuille {
  fill: url(#boreal-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .boreal .feuille, .navigation__lien:hover .boreal .feuille, .navigation__lien:focus .boreal .feuille {
    fill: url(#boreal-vert-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .danseenboites .masques {
    fill: url(#danseenboites-orange-sombre);
  }
}
.navigation__lien.navigation__lien--courant .danseenboites .elevation, .navigation__lien:hover .danseenboites .elevation, .navigation__lien:focus .danseenboites .elevation {
  fill: url(#danseenboites-orange-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .danseenboites .elevation, .navigation__lien:hover .danseenboites .elevation, .navigation__lien:focus .danseenboites .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .danseenboites .masques, .navigation__lien:hover .danseenboites .masques, .navigation__lien:focus .danseenboites .masques {
  fill: url(#danseenboites-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .danseenboites .masques, .navigation__lien:hover .danseenboites .masques, .navigation__lien:focus .danseenboites .masques {
    fill: url(#danseenboites-orange-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .destinations .symbole {
    fill: url(#destinations-rouge-sombre);
  }
}
.navigation__lien.navigation__lien--courant .destinations .elevation, .navigation__lien:hover .destinations .elevation, .navigation__lien:focus .destinations .elevation {
  fill: url(#destinations-rouge-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .destinations .elevation, .navigation__lien:hover .destinations .elevation, .navigation__lien:focus .destinations .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .destinations .symbole, .navigation__lien:hover .destinations .symbole, .navigation__lien:focus .destinations .symbole {
  fill: url(#destinations-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .destinations .symbole, .navigation__lien:hover .destinations .symbole, .navigation__lien:focus .destinations .symbole {
    fill: url(#destinations-rouge-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .elite .etincelle {
    fill: url(#elite-rouge-sombre);
  }
}
.navigation__lien.navigation__lien--courant .elite .elevation, .navigation__lien:hover .elite .elevation, .navigation__lien:focus .elite .elevation {
  fill: url(#elite-rouge-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .elite .elevation, .navigation__lien:hover .elite .elevation, .navigation__lien:focus .elite .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .elite .etincelle, .navigation__lien:hover .elite .etincelle, .navigation__lien:focus .elite .etincelle {
  fill: url(#elite-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .elite .etincelle, .navigation__lien:hover .elite .etincelle, .navigation__lien:focus .elite .etincelle {
    fill: url(#elite-rouge-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .festivaloff .note {
    fill: url(#festivaloff-violet-sombre);
  }
}
.navigation__lien.navigation__lien--courant .festivaloff .elevation, .navigation__lien:hover .festivaloff .elevation, .navigation__lien:focus .festivaloff .elevation {
  fill: url(#festivaloff-violet-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .festivaloff .elevation, .navigation__lien:hover .festivaloff .elevation, .navigation__lien:focus .festivaloff .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .festivaloff .note, .navigation__lien:hover .festivaloff .note, .navigation__lien:focus .festivaloff .note {
  fill: url(#festivaloff-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .festivaloff .note, .navigation__lien:hover .festivaloff .note, .navigation__lien:focus .festivaloff .note {
    fill: url(#festivaloff-violet-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .grosseile .croix {
    fill: url(#grosseile-vert-sombre);
  }
}
.navigation__lien.navigation__lien--courant .grosseile .elevation, .navigation__lien:hover .grosseile .elevation, .navigation__lien:focus .grosseile .elevation {
  fill: url(#grosseile-vert-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .grosseile .elevation, .navigation__lien:hover .grosseile .elevation, .navigation__lien:focus .grosseile .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .grosseile .croix, .navigation__lien:hover .grosseile .croix, .navigation__lien:focus .grosseile .croix {
  fill: url(#grosseile-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .grosseile .croix, .navigation__lien:hover .grosseile .croix, .navigation__lien:focus .grosseile .croix {
    fill: url(#grosseile-vert-sombre);
  }
}
.navigation__lien.navigation__lien--courant .lestuaire .elevation, .navigation__lien:hover .lestuaire .elevation, .navigation__lien:focus .lestuaire .elevation {
  fill: url(#lestuaire-jaune-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .lestuaire .elevation, .navigation__lien:hover .lestuaire .elevation, .navigation__lien:focus .lestuaire .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .lestuaire .symbole, .navigation__lien:hover .lestuaire .symbole, .navigation__lien:focus .lestuaire .symbole {
  fill: url(#lestuaire-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .lestuaire .symbole, .navigation__lien:hover .lestuaire .symbole, .navigation__lien:focus .lestuaire .symbole {
    fill: url(#lestuaire-jaune-hover);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .manueldetypo .livre {
    fill: url(#manueldetypo-bleu-sombre);
  }
}
.navigation__lien.navigation__lien--courant .manueldetypo .elevation, .navigation__lien:hover .manueldetypo .elevation, .navigation__lien:focus .manueldetypo .elevation {
  fill: url(#manueldetypo-bleu-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .manueldetypo .elevation, .navigation__lien:hover .manueldetypo .elevation, .navigation__lien:focus .manueldetypo .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .manueldetypo .livre, .navigation__lien:hover .manueldetypo .livre, .navigation__lien:focus .manueldetypo .livre {
  fill: url(#manueldetypo-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .manueldetypo .livre, .navigation__lien:hover .manueldetypo .livre, .navigation__lien:focus .manueldetypo .livre {
    fill: url(#manueldetypo-bleu-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .memorize .cartes {
    fill: url(#memorize-orange-sombre);
  }
}
.navigation__lien.navigation__lien--courant .memorize .elevation, .navigation__lien:hover .memorize .elevation, .navigation__lien:focus .memorize .elevation {
  fill: url(#memorize-orange-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .memorize .elevation, .navigation__lien:hover .memorize .elevation, .navigation__lien:focus .memorize .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .memorize .cartes, .navigation__lien:hover .memorize .cartes, .navigation__lien:focus .memorize .cartes {
  fill: url(#memorize-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .memorize .cartes, .navigation__lien:hover .memorize .cartes, .navigation__lien:focus .memorize .cartes {
    fill: url(#memorize-orange-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .creativite .feu {
    fill: url(#creativite-orange-sombre);
  }
}
.navigation__lien.navigation__lien--courant .creativite .elevation, .navigation__lien:hover .creativite .elevation, .navigation__lien:focus .creativite .elevation {
  fill: url(#creativite-orange-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .creativite .elevation, .navigation__lien:hover .creativite .elevation, .navigation__lien:focus .creativite .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .creativite .feu, .navigation__lien:hover .creativite .feu, .navigation__lien:focus .creativite .feu {
  fill: url(#creativite-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .creativite .feu, .navigation__lien:hover .creativite .feu, .navigation__lien:focus .creativite .feu {
    fill: url(#creativite-orange-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .mexico .guitare {
    fill: url(#mexico-orange-sombre);
  }
}
.navigation__lien.navigation__lien--courant .mexico .elevation, .navigation__lien:hover .mexico .elevation, .navigation__lien:focus .mexico .elevation {
  fill: url(#mexico-orange-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .mexico .elevation, .navigation__lien:hover .mexico .elevation, .navigation__lien:focus .mexico .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .mexico .guitare, .navigation__lien:hover .mexico .guitare, .navigation__lien:focus .mexico .guitare {
  fill: url(#mexico-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .mexico .guitare, .navigation__lien:hover .mexico .guitare, .navigation__lien:focus .mexico .guitare {
    fill: url(#mexico-orange-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .presto .prestosymbole {
    fill: url(#presto-vert-sombre);
  }
}
.navigation__lien.navigation__lien--courant .presto .elevation, .navigation__lien:hover .presto .elevation, .navigation__lien:focus .presto .elevation {
  fill: url(#presto-vert-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .presto .elevation, .navigation__lien:hover .presto .elevation, .navigation__lien:focus .presto .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .presto .prestosymbole, .navigation__lien:hover .presto .prestosymbole, .navigation__lien:focus .presto .prestosymbole {
  fill: url(#presto-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .presto .prestosymbole, .navigation__lien:hover .presto .prestosymbole, .navigation__lien:focus .presto .prestosymbole {
    fill: url(#presto-vert-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .controle .pantin {
    fill: url(#controle-jaune-sombre);
  }
}
.navigation__lien.navigation__lien--courant .controle .elevation, .navigation__lien:hover .controle .elevation, .navigation__lien:focus .controle .elevation {
  fill: url(#controle-jaune-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .controle .elevation, .navigation__lien:hover .controle .elevation, .navigation__lien:focus .controle .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .controle .pantin, .navigation__lien:hover .controle .pantin, .navigation__lien:focus .controle .pantin {
  fill: url(#controle-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .controle .pantin, .navigation__lien:hover .controle .pantin, .navigation__lien:focus .controle .pantin {
    fill: url(#controle-jaune-sombre);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien .tim .logotim {
    fill: url(#tim-bleu-sombre);
  }
}
.navigation__lien.navigation__lien--courant .tim .elevation, .navigation__lien:hover .tim .elevation, .navigation__lien:focus .tim .elevation {
  fill: url(#tim-bleu-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .tim .elevation, .navigation__lien:hover .tim .elevation, .navigation__lien:focus .tim .elevation {
    fill: rgba(255, 225, 0, 0.05);
  }
}
.navigation__lien.navigation__lien--courant .tim .logotim, .navigation__lien:hover .tim .logotim, .navigation__lien:focus .tim .logotim {
  fill: url(#tim-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .navigation__lien.navigation__lien--courant .tim .logotim, .navigation__lien:hover .tim .logotim, .navigation__lien:focus .tim .logotim {
    fill: url(#tim-bleu-sombre);
  }
}

.lien {
  font-family: Roboto-Medium, Arial, sans serif;
  letter-spacing: 0.05rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.lien:link, .lien:visited {
  color: #404040;
}
@media screen and (prefers-color-scheme: dark) {
  .lien:link, .lien:visited {
    color: #e6e6e6;
  }
}
.lien:hover, .lien:active {
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .lien:hover, .lien:active {
    color: #e6e6e6;
  }
}
.lien::before {
  content: "";
  width: 3rem;
  height: 4rem;
  background-repeat: no-repeat;
  transition: all, 0.1s ease-in-out;
}
.lien.axure::before {
  background-image: url(../images/icones/axure.svg);
}
@media screen and (prefers-color-scheme: dark) {
  .lien.axure::before {
    background-image: url(../images/icones/axure--sombre.svg);
  }
}
.lien.axure:hover::before, .lien.axure:active::before, .lien.axure:focus-visible::before {
  background-image: url(../images/icones/axure--hover.svg);
}
.lien.figma::before {
  background-image: url(../images/icones/figma.svg);
}
@media screen and (prefers-color-scheme: dark) {
  .lien.figma::before {
    background-image: url(../images/icones/figma--sombre.svg);
  }
}
.lien.figma:hover::before, .lien.figma:active::before, .lien.figma:focus-visible::before {
  background-image: url(../images/icones/figma--hover.svg);
}
.lien.github::before {
  background-image: url(../images/icones/github.svg);
}
@media screen and (prefers-color-scheme: dark) {
  .lien.github::before {
    background-image: url(../images/icones/github--sombre.svg);
  }
}
.lien.github:hover::before, .lien.github:active::before, .lien.github:focus-visible::before {
  background-image: url(../images/icones/github--hover.svg);
}
.lien.pdf::before {
  background-image: url(../images/icones/pdf.svg);
}
@media screen and (prefers-color-scheme: dark) {
  .lien.pdf::before {
    background-image: url(../images/icones/pdf--sombre.svg);
  }
}
.lien.pdf:hover::before, .lien.pdf:active::before, .lien.pdf:focus-visible::before {
  background-image: url(../images/icones/pdf--hover.svg);
}
.lien.pdf .abreviation,
.lien.pdf .taille {
  font-size: 1.6rem;
}
.lien.rtf::before {
  background-image: url(../images/icones/rtf.svg);
}
@media screen and (prefers-color-scheme: dark) {
  .lien.rtf::before {
    background-image: url(../images/icones/rtf--sombre.svg);
  }
}
.lien.rtf:hover::before, .lien.rtf:active::before, .lien.rtf:focus-visible::before {
  background-image: url(../images/icones/rtf--hover.svg);
}
.lien.sketch::before {
  background-image: url(../images/icones/sketch.svg);
}
@media screen and (prefers-color-scheme: dark) {
  .lien.sketch::before {
    background-image: url(../images/icones/sketch--sombre.svg);
  }
}
.lien.sketch:hover::before, .lien.sketch:active::before, .lien.sketch:focus-visible::before {
  background-image: url(../images/icones/sketch--hover.svg);
}
.lien.web::before {
  background-image: url(../images/icones/web.svg);
}
@media screen and (prefers-color-scheme: dark) {
  .lien.web::before {
    background-image: url(../images/icones/web--sombre.svg);
  }
}
.lien.web:hover::before, .lien.web:active::before, .lien.web:focus-visible::before {
  background-image: url(../images/icones/web--hover.svg);
}
.lien.xd::before {
  background-image: url(../images/icones/xd.svg);
}
@media screen and (prefers-color-scheme: dark) {
  .lien.xd::before {
    background-image: url(../images/icones/xd--sombre.svg);
  }
}
.lien.xd:hover::before, .lien.xd:active::before, .lien.xd:focus-visible::before {
  background-image: url(../images/icones/xd--hover.svg);
}

/********* LAYOUT *********/
/*
* Mise en page de l'accueil
* @author Gabriel Caron <gabriel.caron@gmail.com>
* @version 6.3
*/
.accueil .entete {
  padding-bottom: 0;
}
.accueil__accroche {
  font-family: Roboto-Medium, Arial, sans serif;
  font-style: normal;
  font-weight: 500;
  font-size: 3rem;
  line-height: 110%;
  letter-spacing: 0.05rem;
  text-align: center;
  color: #000;
  text-shadow: -1px -1px 3px #fff, 2px 2px 3px rgba(0, 0, 0, 0.15);
  margin: 4rem 2rem;
}
@media screen and (min-width: 600px) {
  .accueil__accroche {
    font-size: 5rem;
    margin: 4rem 0;
  }
}
@media screen and (min-width: 735px) {
  .accueil__accroche {
    margin: 6rem 0;
  }
}
@media screen and (min-width: 850px) {
  .accueil__accroche {
    margin: 8rem 0;
    font-size: 7rem;
  }
}
@media screen and (min-width: 900px) {
  .accueil__accroche {
    margin: 5rem 0 4rem 0;
  }
}
@media screen and (min-width: 950px) {
  .accueil__accroche {
    margin: 20rem 0 10rem 0;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .accueil__accroche {
    color: #e6e6e6;
    text-shadow: none;
  }
}
.accueil__coeur {
  height: 5rem;
  vertical-align: top;
}
@media screen and (min-width: 545px) {
  .accueil__coeur {
    height: 6rem;
  }
}
@media screen and (min-width: 850px) {
  .accueil__coeur {
    height: 8rem;
  }
}
@media screen and (max-width: 899px) {
  .accueil .projets {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (max-width: 899px) and (min-width: 1000px) {
  .accueil .projets {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (max-width: 899px) and (min-width: 1930px) {
  .accueil .projets {
    padding-left: 0;
    padding-right: 0;
  }
}
.accueil .projets--demi-grille {
  padding: 0;
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 900px) {
    .accueil .projets--demi-grille {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2rem;
    }
  }
}
@media screen and (max-width: 899px) {
  .accueil .projets--demi-grille {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (max-width: 899px) and (min-width: 1000px) {
  .accueil .projets--demi-grille {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (max-width: 899px) and (min-width: 1930px) {
  .accueil .projets--demi-grille {
    padding-left: 0;
    padding-right: 0;
  }
}
.accueil .projets--demi-grille .projets__titre-h2 {
  margin: 3rem 0 1rem 2rem;
}
.accueil .projets--demi-grille .projets__titre-h2:after {
  content: none;
}
@media screen and (min-width: 1100px) {
  .accueil .projets--demi-grille .projets__titre-h2::after {
    background: url("../images/icones/fleche-section.svg") no-repeat center;
    height: 3.5rem;
    width: 3.5rem;
    display: inline-block;
    vertical-align: text-bottom;
    margin-left: 1rem;
    content: "";
    transition: all 200ms ease-in-out;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 900px) {
    .accueil .projets--demi-grille .projets__web-applis {
      display: grid;
      grid-template-columns: minmax(auto, calc(690px - 4rem));
      column-gap: 2rem;
    }
  }
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .projets__web-applis {
    padding: 2rem 0 0 0;
  }
}
@media screen and (min-width: 900px) {
  .accueil .projets--demi-grille .projets__web-applis {
    grid-column: 1/7;
    justify-content: flex-end;
    border-left: none;
    border-radius: 0 5.5rem 5.5rem 0;
    padding: 2rem 4rem 0 0;
  }
  .accueil .projets--demi-grille .projets__web-applis:before {
    left: -0.2rem;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 900px) {
    .accueil .projets--demi-grille .projets__design-graphique {
      display: grid;
      grid-template-columns: minmax(auto, calc(690px - 4rem));
      column-gap: 2rem;
    }
  }
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .projets__design-graphique {
    padding: 2rem 0 0 0;
  }
}
@media screen and (min-width: 900px) {
  .accueil .projets--demi-grille .projets__design-graphique {
    grid-column: 7/13;
    justify-content: flex-start;
    border-right: none;
    border-radius: 5.5rem 0 0 5.5rem;
    padding: 2rem 0 0 4rem;
  }
  .accueil .projets--demi-grille .projets__design-graphique:before {
    right: 0.2rem;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 900px) {
    .accueil .projets--demi-grille .navigation--web-applis {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2rem;
    }
  }
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .navigation--web-applis {
    align-content: flex-start;
  }
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .navigation--web-applis .navigation__lien-section {
    grid-column: 2/13;
  }
}
@media screen and (min-width: 1000px) {
  .accueil .projets--demi-grille .navigation--web-applis .navigation__lien-section {
    grid-column: 3/13;
  }
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .navigation--web-applis .navigation__rangee-projets {
    grid-column: 2/13;
  }
}
@media screen and (min-width: 1000px) {
  .accueil .projets--demi-grille .navigation--web-applis .navigation__rangee-projets {
    grid-column: 3/13;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 900px) {
    .accueil .projets--demi-grille .navigation--design-graphique {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2rem;
    }
  }
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .navigation--design-graphique {
    align-content: flex-start;
  }
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .navigation--design-graphique .navigation__lien-section {
    grid-column: 1/12;
  }
}
@media screen and (min-width: 1000px) {
  .accueil .projets--demi-grille .navigation--design-graphique .navigation__lien-section {
    grid-column: 1/11;
  }
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .navigation--design-graphique .navigation__rangee-projets {
    grid-column: 1/12;
  }
}
@media screen and (min-width: 1000px) {
  .accueil .projets--demi-grille .navigation--design-graphique .navigation__rangee-projets {
    grid-column: 1/11;
  }
}
.accueil .projets--demi-grille .navigation__liste {
  padding: 0;
}
@media screen and (min-width: 600px) {
  .accueil .projets--demi-grille .navigation__liste > * {
    grid-column: span 6;
    vertical-align: top;
  }
}
.accueil .projets .navigation__lien-section {
  text-decoration: none;
  color: #000;
}
@media screen and (min-width: 600px) {
  .accueil .projets .navigation__lien-section::after {
    background: url("../images/icones/fleche-section.svg") no-repeat center;
    height: 3.5rem;
    width: 3.5rem;
    display: inline-block;
    vertical-align: text-bottom;
    margin-left: 1rem;
    content: "";
    transition: all 200ms ease-in-out;
  }
}
@media screen and (min-width: 1100px) {
  .accueil .projets .navigation__lien-section:hover::after, .accueil .projets .navigation__lien-section:focus::after {
    margin-left: 2.5rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .accueil .projets .navigation__lien-section {
    color: #e6e6e6;
  }
}

/*
* Mise en page de la page Contact
* @author Gabriel Caron <gabriel.caron@gmail.com>
*/
.contact {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (min-width: 1000px) {
  .contact {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (min-width: 1930px) {
  .contact {
    padding-left: 0;
    padding-right: 0;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .contact {
      display: grid;
      grid-template-columns: minmax(auto, 1400px);
      justify-content: center;
    }
  }
}
@supports not (grid-template-columns: minmax(auto, 1400px)) {
  .contact {
    max-width: 1400px;
  }
}
.contact__titre {
  padding: 2rem 0 1rem 0;
}
@media screen and (min-width: 600px) {
  .contact__titre {
    padding: 4rem 0 1rem 0;
  }
}
@media screen and (min-width: 900px) {
  .contact__titre {
    padding: 10rem 0 1rem 0;
  }
}
.contact__liste {
  padding: 0 0 5rem 0;
  list-style-type: none;
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .contact__liste {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2rem;
    }
  }
}
.contact__item {
  grid-column: span 4;
  padding: 2rem 0;
}
.contact__item:first-child {
  grid-column: 3/span 4;
}
.contact__lien {
  font-family: Roboto-Medium, Arial, sans serif;
  letter-spacing: 0.05rem;
  line-height: 100%;
  border-radius: 4rem;
  color: #000;
  text-decoration-thickness: 0.3rem;
}
@media screen and (prefers-color-scheme: dark) {
  .contact__lien {
    color: #e6e6e6;
  }
}
.contact__lien:hover, .contact__lien:focus {
  text-decoration-thickness: 0.5rem;
  text-underline-offset: 0.1rem;
}
.contact__lien:hover .icone, .contact__lien:focus .icone {
  border: none;
  margin: 0.4rem 0.4rem 0 0;
}
@media screen and (prefers-color-scheme: dark) {
  .contact__lien:hover .icone, .contact__lien:focus .icone {
    margin: initial;
  }
}
.contact__lien:hover .courriel .elevation, .contact__lien:focus .courriel .elevation {
  fill: url(#courriel-elevation-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .contact__lien:hover .courriel .elevation, .contact__lien:focus .courriel .elevation {
    fill: #1a1a1a;
  }
}
.contact__lien:hover .courriel .enveloppe, .contact__lien:focus .courriel .enveloppe {
  fill: url(#enveloppe-hover);
}
.contact__lien:hover .linkedin .elevation, .contact__lien:focus .linkedin .elevation {
  fill: url(#linkedin-bleu-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .contact__lien:hover .linkedin .elevation, .contact__lien:focus .linkedin .elevation {
    fill: #1a1a1a;
  }
}
.contact__lien:hover .linkedin .logotype, .contact__lien:focus .linkedin .logotype {
  fill: url(#linkedin-gris-hover);
}
@media screen and (prefers-color-scheme: dark) {
  .contact__lien:hover, .contact__lien:focus {
    color: #e6e6e6;
  }
  .contact__lien:hover .courriel, .contact__lien:focus .courriel {
    border: solid 0.2rem #a6a6a6;
  }
  .contact__lien:hover .courriel .enveloppe, .contact__lien:focus .courriel .enveloppe {
    fill: url(#enveloppe-sombre);
  }
  .contact__lien:hover .linkedin, .contact__lien:focus .linkedin {
    border: solid 0.2rem #a6a6a6;
  }
  .contact__lien:hover .linkedin .logotype, .contact__lien:focus .linkedin .logotype {
    fill: url(#linkedin-bleu-sombre);
  }
}
.contact__lien:visited {
  color: #000;
}
@media screen and (prefers-color-scheme: dark) {
  .contact__lien:visited {
    color: #e6e6e6;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .contact__lien .courriel .enveloppe {
    fill: url(#enveloppe-sombre);
  }
  .contact__lien .linkedin .logotype {
    fill: url(#linkedin-bleu-sombre);
  }
}
.contact__figure {
  margin: 0;
  text-align: center;
}
@media screen and (min-width: 1050px) {
  .contact__figure {
    display: flex;
    align-items: center;
  }
}
.contact__figure .icone {
  width: 10rem;
  border: solid 0.2rem #fff;
  border-radius: 3.5rem;
  vertical-align: middle;
  box-shadow: 3px 3px 25px 0 rgba(0, 0, 0, 0.05), -5px -5px 25px 0px rgb(255, 255, 255);
}
@media screen and (min-width: 600px) {
  .contact__figure .icone {
    width: 13rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .contact__figure .icone {
    box-shadow: none;
    border: solid 0.2rem #262626;
  }
  .contact__figure .icone .elevation {
    fill: #1a1a1a;
  }
}
.contact__figcaption {
  font-family: Roboto-Bold, Arial, sans serif;
  font-size: 3.5rem;
  display: inline-block;
  line-height: 120%;
  border-radius: 4rem;
  margin-top: 0.5rem;
  padding: 1.3rem 2rem;
  vertical-align: middle;
}

/*
* Mise en page des projets
* @author Gabriel Caron <gabriel.caron@gmail.com>
*/
/* Styles généraux, tous les projets */
.projets {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (min-width: 1000px) {
  .projets {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (min-width: 1930px) {
  .projets {
    padding-left: 0;
    padding-right: 0;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .projets {
      display: grid;
      grid-template-columns: minmax(auto, 1400px);
      justify-content: center;
    }
  }
}
@supports not (grid-template-columns: minmax(auto, 1400px)) {
  .projets {
    max-width: 1400px;
  }
}
@media screen and (min-width: 900px) {
  .projets .navigation {
    margin-bottom: 3rem;
  }
}
.projets__titre-h2 {
  display: inline-block;
  margin: 4rem 0 1rem 1rem;
  font-size: 4rem;
}
@media screen and (min-width: 900px) {
  .projets__titre-h2 {
    margin: 4rem 0 1rem 3rem;
  }
}

/* Styles spécifiques, aperçu d'un projet */
.projet__titre {
  font-size: 5.5rem;
  text-align: left;
  margin: 0;
  padding: 3rem 0 0 0;
}
@media screen and (min-width: 600px) {
  .projet__titre {
    font-size: 8rem;
  }
}
.projet__description {
  font-size: 1.8rem;
  letter-spacing: 0.05rem;
  color: #404040;
  margin: 1rem 0;
}
@media screen and (prefers-color-scheme: dark) {
  .projet__description {
    color: #a6a6a6;
  }
}
.projet__processus {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 4rem;
  list-style-type: none;
  padding: 0;
}
.projet__formats {
  font-size: 1.8rem;
}
.projet__figure {
  margin: 4rem 0 0 0;
}
@media screen and (min-width: 600px) {
  .projet__figure {
    margin: 7rem 0 0 0;
  }
}
.projet__figcaption {
  font-size: 1.6rem;
  margin-top: 2rem;
  color: #404040;
}
@media screen and (prefers-color-scheme: dark) {
  .projet__figcaption {
    color: #a6a6a6;
  }
}
.projet.sans-contexte img {
  border-radius: 3.5rem;
  border: 0.2rem solid #fff;
}
@media screen and (prefers-color-scheme: dark) {
  .projet.sans-contexte img {
    border: 0.2rem solid #262626;
  }
}
@media screen and (min-width: 600px) {
  .projet.masonry img {
    border-radius: 3.5rem;
    box-shadow: 3px 3px 25px 0 rgba(0, 0, 0, 0.05), -5px -5px 25px 0px #fff;
    border: solid 0.2rem #fff;
  }
}
@media screen and (min-width: 600px) and (prefers-color-scheme: dark) {
  .projet.masonry img {
    box-shadow: none;
    border: solid 0.2rem #262626;
  }
}
@media screen and (min-width: 600px) {
  .projet.macOS img {
    border-radius: 1rem;
    box-shadow: 3px 3px 25px 0 rgba(0, 0, 0, 0.05), -5px -5px 25px 0px white;
  }
}
@media screen and (min-width: 600px) and (prefers-color-scheme: dark) {
  .projet.macOS img {
    box-shadow: none;
  }
}

/*
* Pages de contenu
* @author Gabriel Caron <gabriel.caron@gmail.com>
* @version 1.1
*/
.apropos .contenu {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (min-width: 1000px) {
  .apropos .contenu {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (min-width: 1930px) {
  .apropos .contenu {
    padding-left: 0;
    padding-right: 0;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .apropos .contenu {
      display: grid;
      grid-template-columns: minmax(auto, 1400px);
      justify-content: center;
    }
  }
}
@supports not (grid-template-columns: minmax(auto, 1400px)) {
  .apropos .contenu {
    max-width: 1400px;
  }
}
.apropos .sous-titre {
  font-size: 3.5rem;
  font-family: Roboto-Bold, sans serif;
  margin-bottom: 0.5rem;
}
.apropos .stats {
  font-size: 2.5rem;
  font-family: Roboto-Bold, sans serif;
}
.apropos .projet {
  padding: 0;
}
.apropos .projet__formats.lien {
  display: block;
}
.apropos .projet .lien:hover {
  text-decoration: none;
}

.contenu.secondaire .contenu {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (min-width: 1000px) {
  .contenu.secondaire .contenu {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (min-width: 1930px) {
  .contenu.secondaire .contenu {
    padding-left: 0;
    padding-right: 0;
  }
}
@supports (grid-template-columns: minmax(auto, 1400px)) {
  @media (min-width: 600px) {
    .contenu.secondaire .contenu {
      display: grid;
      grid-template-columns: minmax(auto, 1400px);
      justify-content: center;
    }
  }
}
@supports not (grid-template-columns: minmax(auto, 1400px)) {
  .contenu.secondaire .contenu {
    max-width: 1400px;
  }
}

/*# sourceMappingURL=styles.css.map */