/* ==========================================
   POLICES (Poppins variable)
   ========================================== */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* stylelint-disable */
  src:
    url("Poppins-Variable-opti.woff2") format("woff2") tech("variations"),
    url("Poppins-Variable-opti.woff2") format("woff2-variations");
  /* stylelint-enable */
}

/* ==========================================
   CUSTOM PROPERTIES (VARIABLES CSS)
   ========================================== */

:root {
  /* === POLICES === */
  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-poppins: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New", monospace;
  --font-family-serif: Georgia, "Times New Roman", Times, serif;
  
  /* === TAILLES DE POLICE === */
  --font-size-base: 1rem;
  --font-size-small: 0.8rem;
  --font-size-code: 0.85rem;
  --font-size-h1: 2rem;
  
  /* === HAUTEURS DE LIGNE === */
  --line-height-base: 1.67;
  --line-height-headings: 1.33;
  --line-height-tight: 1.15;
  --line-height-relaxed: 1.2;
  
  /* === POIDS DE POLICE === */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* === COULEURS DE BASE === */
  --color-text: rgba(0, 0, 0, 0.75);
  --color-text-light: rgba(0, 0, 0, 0.5);
  --color-text-dark-mode: hsla(0, 0%, 100%, 0.75);
  --color-text-dark-mode-light: hsla(0, 0%, 100%, 0.4);
  --color-background: #fff;
  --color-black: #000;
  --color-white: #fff;
  
  /* === COULEURS FONCTIONNELLES === */
  --color-link: #0c93e4;
  --color-border: #dcdcdc;
  --color-border-light: rgba(0, 0, 0, 0.1);
  --color-border-medium: hsla(0, 0%, 50%, 0.33);
  --color-code-bg: rgba(0, 0, 0, 0.05);
  --color-mark: #f8f840;
  --color-kbd-text: #333;
  --color-kbd-border: rgba(63, 63, 63, 0.25);
  --color-help-border: #777;
  --color-toc-text: #888;
  --color-stackedit-hover: rgba(0, 0, 0, 0.075);
  --color-pdf-border: #ececec;
  
  /* === COULEURS PRISM === */
  --color-prism-comment: #708090;
  --color-prism-punctuation: #999;
  --color-prism-keyword: #07a;
  --color-prism-string: #690;
  --color-prism-number: #905;
  --color-prism-operator: #a67f59;
  --color-prism-function: #dd4a68;
  --color-prism-important: #e90;
  
  /* === ESPACEMENTS === */
  --spacing-xs: 0.1rem;
  --spacing-sm: 0.2rem;
  --spacing-base: 1rem;
  --spacing-md: 1.2rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 1.8rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 2.4rem;
  
  /* === MARGES ET PADDINGS === */
  --margin-block: var(--spacing-md);
  --margin-headings: var(--spacing-xl);
  --margin-hr: var(--spacing-2xl);
  --padding-code: 0.125rem 0.25rem;
  --padding-pre: 0.5rem;
  --padding-kbd: 0.1rem 0.6rem;
  --padding-table-cell: 0.5rem 0.75rem;
  --padding-toc: 1.25rem;
  --padding-stackedit: 1.875rem;
  --padding-fieldset: 0.35rem 0.75rem 0.625rem;
  --padding-lg: var(--spacing-lg);
  
  /* === BORDURES === */
  --border-width-thin: 0.0625rem;
  --border-width-medium: 0.3125rem;
  --border-radius-small: 0.1875rem;
  --border-style-solid: solid;
  --border-style-dotted: dotted;
  --border-style-dashed: dashed;
  
  /* === OMBRES === */
  --shadow-kbd: 0 0.0625rem 0 var(--color-kbd-border);
  
  /* === LARGEURS === */
  --width-sidebar: 15.625rem;
  --width-content-max: 46.875rem;
  --width-figure-margin: 2.5rem;
  --width-breakpoint: 66.25rem;
  
  /* === OPACITÉS === */
  --opacity-namespace: 0.7;
  --opacity-fill: 1;
  
  /* === POSITIONS === */
  --position-top: 0.33rem;
  --position-sub: -0.25rem;
  --position-sup: -0.5rem;
  --position-footnote: -0.25rem;
  
  /* === TAILLES SPÉCIFIQUES === */
  --size-small-percent: 80%;
  --size-sub-sup-percent: 75%;
  --size-toc-font: 0.9rem;
  --size-footnote-font: 0.8rem;
  --size-margin-bottom: 11.25rem;
}

/* ==========================================
   STYLES PRISM POUR LA COLORATION SYNTAXIQUE
   ========================================== */

.prism *,
.token.pre.gfm * {
  font-weight: inherit !important;
}

/* Commentaires et éléments similaires */
.prism .token.cdata,
.prism .token.comment,
.prism .token.doctype,
.prism .token.prolog,
.token.pre.gfm .token.cdata,
.token.pre.gfm .token.comment,
.token.pre.gfm .token.doctype,
.token.pre.gfm .token.prolog {
  color: var(--color-prism-comment);
}

/* Ponctuation */
.prism .token.punctuation,
.token.pre.gfm .token.punctuation {
  color: var(--color-prism-punctuation);
}

/* Namespaces */
.prism .namespace,
.token.pre.gfm .namespace {
  opacity: var(--opacity-namespace);
}

/* Booléens, constantes, nombres, propriétés, symboles, tags */
.prism .token.boolean,
.prism .token.constant,
.prism .token.deleted,
.prism .token.number,
.prism .token.property,
.prism .token.symbol,
.prism .token.tag,
.token.pre.gfm .token.boolean,
.token.pre.gfm .token.constant,
.token.pre.gfm .token.deleted,
.token.pre.gfm .token.number,
.token.pre.gfm .token.property,
.token.pre.gfm .token.symbol,
.token.pre.gfm .token.tag {
  color: var(--color-prism-number);
}

/* Attributs, built-ins, caractères, éléments insérés, sélecteurs, chaînes */
.prism .token.attr-name,
.prism .token.builtin,
.prism .token.char,
.prism .token.inserted,
.prism .token.selector,
.prism .token.string,
.token.pre.gfm .token.attr-name,
.token.pre.gfm .token.builtin,
.token.pre.gfm .token.char,
.token.pre.gfm .token.inserted,
.token.pre.gfm .token.selector,
.token.pre.gfm .token.string {
  color: var(--color-prism-string);
}

/* CSS et entités */
.prism .language-css .token.string,
.prism .style .token.string,
.prism .token.entity,
.prism .token.operator,
.prism .token.url,
.token.pre.gfm .language-css .token.string,
.token.pre.gfm .style .token.string,
.token.pre.gfm .token.entity,
.token.pre.gfm .token.operator,
.token.pre.gfm .token.url {
  color: var(--color-prism-operator);
}

/* Règles at, valeurs d'attributs, mots-clés */
.prism .token.atrule,
.prism .token.attr-value,
.prism .token.keyword,
.token.pre.gfm .token.atrule,
.token.pre.gfm .token.attr-value,
.token.pre.gfm .token.keyword {
  color: var(--color-prism-keyword);
}

/* Fonctions */
.prism .token.function,
.token.pre.gfm .token.function {
  color: var(--color-prism-function);
}

/* Éléments importants, regex, variables */
.prism .token.important,
.prism .token.regex,
.prism .token.variable,
.token.pre.gfm .token.important,
.token.pre.gfm .token.regex,
.token.pre.gfm .token.variable {
  color: var(--color-prism-important);
}

/* Styles de formatage */
.prism .token.bold,
.prism .token.important,
.token.pre.gfm .token.bold,
.token.pre.gfm .token.important {
  font-weight: var(--font-weight-medium);
}

.prism .token.italic,
.token.pre.gfm .token.italic {
  font-style: italic;
}

/* ==========================================
   NORMALIZE.CSS
   ========================================== */

/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */

html {
  line-height: var(--line-height-tight);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: var(--font-size-h1);
  margin: var(--margin-headings) 0;
}

figcaption,
figure {
  display: block;
}

figure {
  margin: var(--spacing-base) var(--width-figure-margin);
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

main {
  display: block;
}

pre {
  font-family: monospace, monospace;
  font-size: var(--spacing-base);
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: var(--spacing-base);
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: var(--color-black);
}

small {
  font-size: var(--size-small-percent);
}

sub,
sup {
  font-size: var(--size-sub-sup-percent);
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: var(--position-sub);
}

sup {
  top: var(--position-sup);
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  font-family: var(--font-family-system);
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: button;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

input {
  overflow: visible;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

fieldset {
  padding: var(--padding-fieldset);
}

legend {
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

details {
  display: block;
}

summary {
  display: list-item;
}

menu {
  display: block;
}

canvas {
  display: inline-block;
}

[hidden],
template {
  display: none;
}

/* ==========================================
   STYLES DE BASE DE L'APPLICATION
   ========================================== */

body,
html {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family-system);
  font-variant-ligatures: common-ligatures;
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {font-size: 1.2rem;}

h1 {
  font-family: var(--font-poppins);
  margin-top: 1.4rem;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.1;
}



.app--dark .layout__panel--editor,
.app--dark .layout__panel--preview {
  color: var(--color-text-dark-mode);
}

/* ==========================================
   TYPOGRAPHIE
   ========================================== */

blockquote,
dl,
ol,
p,
pre,
ul {
  margin: var(--margin-block) 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--margin-headings) 0;
  line-height: var(--line-height-headings);
}

h1:after,
h2:after {
  content: "";
  display: block;
  position: relative;
  top: var(--position-top);
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--color-border-medium);
}

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

dt {
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-skip: ink;
}

a:focus,
a:hover {
  text-decoration: none;
}

code,
pre,
samp {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
}

code *,
pre *,
samp * {
  font-size: inherit;
}

blockquote {
  color: var(--color-text-light);
  padding-left: var(--padding-lg);
  border-left: var(--border-width-medium) var(--border-style-solid) var(--color-border-light);
}

.app--dark .layout__panel--editor blockquote,
.app--dark .layout__panel--preview blockquote {
  color: var(--color-text-dark-mode-light);
  border-left-color: var(--color-border-light);
}

code {
  background-color: var(--color-code-bg);
  border-radius: var(--border-radius-small);
  padding: var(--padding-code);
}

hr {
  border: 0;
  border-top: var(--border-width-thin) var(--border-style-solid) var(--color-border-medium);
  margin: var(--margin-hr) 0;
}

pre > code {
  background-color: var(--color-code-bg);
  display: block;
  padding: var(--padding-pre);
  -webkit-text-size-adjust: none;
  overflow-x: auto;
  white-space: pre;
}

/* ==========================================
   ÉLÉMENTS SPÉCIAUX
   ========================================== */

.toc ul {
  list-style-type: none;
  padding-left: var(--padding-toc);
}

table {
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  border-right: var(--border-width-thin) var(--border-style-solid) var(--color-border);
  padding: var(--padding-table-cell);
}

td:last-child,
th:last-child {
  border-right: 0;
}

td {
  border-top: var(--border-width-thin) var(--border-style-solid) var(--color-border);
}

mark {
  background-color: var(--color-mark);
}

kbd {
  font-family: var(--font-family-system);
  background-color: var(--color-white);
  border: var(--border-width-thin) var(--border-style-solid) var(--color-kbd-border);
  border-radius: var(--border-radius-small);
  box-shadow: var(--shadow-kbd);
  color: var(--color-kbd-text);
  display: inline-block;
  font-size: var(--font-size-small);
  margin: 0 var(--spacing-xs);
  padding: var(--padding-kbd);
  white-space: nowrap;
}

abbr[title] {
  border-bottom: var(--border-width-thin) var(--border-style-dotted) var(--color-help-border);
  cursor: help;
}

img {
  max-width: 100%;
}

/* ==========================================
   LISTES DE TÂCHES
   ========================================== */

.task-list-item {
  list-style-type: none;
}

.task-list-item-checkbox {
  margin: 0 var(--spacing-sm) 0 -1.3rem;
}

/* ==========================================
   ÉLÉMENTS DIVERS
   ========================================== */

.footnote {
  font-size: var(--size-footnote-font);
  position: relative;
  top: var(--position-footnote);
  vertical-align: top;
}

.page-break-after {
  page-break-after: always;
}

.abc-notation-block {
  overflow-x: auto !important;
}

/* ==========================================
   STACKEDIT - ÉDITEUR MARKDOWN
   ========================================== */

.stackedit__html {
  margin-bottom: var(--size-margin-bottom);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-stackedit);
  padding-right: var(--padding-stackedit);
  max-width: var(--width-content-max);
}

.stackedit__toc ul {
  padding: 0;
}

.stackedit__toc ul a {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
}

.stackedit__toc ul ul {
  color: var(--color-toc-text);
  font-size: var(--size-toc-font);
}

.stackedit__toc ul ul a {
  margin: 0;
  padding: 0.1rem 1rem;
}

.stackedit__toc li {
  display: block;
}

.stackedit__toc a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.stackedit__toc a:active,
.stackedit__toc a:focus,
.stackedit__toc a:hover {
  background-color: var(--color-stackedit-hover);
  border-radius: var(--border-radius-small);
}

/* ==========================================
   LAYOUT STACKEDIT
   ========================================== */

.stackedit__left {
  position: fixed;
  display: none;
  width: var(--width-sidebar);
  height: 100%;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}

@media (min-width: 66.25rem) {
  .stackedit__left {
    display: block;
  }
}

.stackedit__right {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
}

@media (min-width: 66.25rem) {
  .stackedit__right {
    left: var(--width-sidebar);
  }
}

/* ==========================================
   STACKEDIT PDF
   ========================================== */

.stackedit--pdf blockquote {
  border-left-color: var(--color-pdf-border);
}

.stackedit--pdf .katex-mathml,
.stackedit--pdf annotation {
  display: none;
}

.stackedit--pdf .stackedit__html {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}