/* =========================================================
   FEUILLE CSS FUSIONNÉE
   Feuille 1 prioritaire
   ========================================================= */

/* ---------- Base ---------- */

/*
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Libertinus+Serif:ital,wght@0,400;0,700;1,400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Goudy+Bookletter+1911&family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Marcellus&display=swap');
*/

@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');


/* ---------- Variables ---------- */

:root {
  --base-size: clamp(0.85rem, 0.8rem + 0.4vw, 1.1rem);
  --spacing: clamp(1rem, 0.75rem + 0.6vw, 2rem);
  --h1: clamp(1.4rem, 1.1rem + 0.9vw, 2.6rem);
  --h2: clamp(1.3rem, 1.1rem + 0.7vw, 2.1rem);
  --h3: clamp(1.1rem, 0.9rem + 0.5vw, 1.6rem);
  --h4: clamp(1rem, 0.9rem + 0.3vw, 1.3rem);
  --h5: 1.05rem;
  --h6: 1rem;
  --text: #333;
  --title: #005bb5;
  --accent: #0033cc;
  --border: #ccc;
  --link: #007bff;
  --bg: #f8fcff;
  --bg-aside: #f9f9f9;
  --bg-code: #f4f4f4;
}



*, *::before, *::after {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}







html {
/*font-size: clamp(valeur-min, valeur-préférée, valeur-max);*/
/*font-size: clamp(14px, 0.9rem + 0.5vw, 20px);*/
/*font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.15rem);*/
/*font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.15rem);*/
/*font-size: clamp(14px, 0.9rem + 0.5vw, 20px);*/
/*font-size: clamp(1.04rem, 0.98rem + 0.35vw, 1.32rem);*/
font-size:   clamp(1.1rem, 0.95rem + 0.4vw, 1.3rem);
-webkit-text-size-adjust: 100%;
}


/*font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;*/
/*font-family: system-ui, sans-serif;*/
/*  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
*/


body {
font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

background-color: #fdfeff;
/*background: repeating-conic-gradient(#eee 0 25%, #ddd 0 50%) 0 / 20px 20px;*/
  color: #333;
  

  margin: 0;
  padding: 0;
  width: 100%;
 /* display: flex;
  flex-direction: column;
  align-items: center;*/
  
   display: block;
  box-sizing: border-box;
    margin-bottom: 300px;
  text-wrap: pretty;
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}




/*
main {
  padding: var(--spacing) auto;
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  padding-bottom: 4rem;
  padding-top: 0;
  margin: 0rem;
  background-color: #fdfeff;
}


main {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  margin-top: 0;
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  padding-bottom: 4rem;
  padding-top: 0;
  background-color: #fdfeff;
  box-sizing: border-box;
}
*/

main {
  width: auto;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  margin-top: 0;
  /*
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  */
  padding-bottom: 4rem;
  padding-top: 0;
  background-color: transparent;
  box-sizing: border-box;
}


main img {
  max-width: 100%;
  height: auto;
}


body img.hero {
  width: calc(100% + 2 * var(--spacing));
  margin: 0;
  max-width: none;
  margin-left: calc(-1 * var(--spacing));
  margin-right: calc(-1 * var(--spacing));
  display: block;
  margin-bottom: 1rem;
  margin-top: 0;
}



#menu-button{
position:fixed;
top:12px;left:95%;
transform:translateX(-50%);
z-index:1000;
/*width:46px;
height:46px;*/
border:1px solid #ccc;
border-radius:8px;
padding: 0.2rem 0.6rem;
font-weight :900;
color:#222;
font-size:1.8rem;
/*line-height:1;*/
cursor:pointer;

background: rgba(230, 240, 230, 0.7);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}








header, footer {
  padding: var(--spacing) 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

article {
  padding: var(--spacing) 0;
  border: 1px solid var(--border);
  border-radius: 4px;
}

section {
  padding: var(--spacing) 0;
}

aside {
  font-style: italic;
  padding: var(--spacing);
  background-color: var(--bg-aside);
  border-left: 4px solid var(--border);
}

summary {
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 0.5rem;
}





img, video, iframe, svg, canvas, embed, object {
  height: auto;
}

pre, .table-responsive {
  overflow-x: auto;
  white-space: pre-wrap;
}



html.dark-mode {
  --text: #e0e0e0;
  --title: #fff;
  --accent: #6699ff;
  --border: #444;
  --link: #66b3ff;
  --bg: #121212;
  --bg-aside: #1e1e1e;
  --bg-code: #252525;
}

/* ---------- Liens ---------- */

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
/*
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
*/


a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 40%, transparent);
}



/* ---------- Titres ---------- */

h1, h2, h3 {
 /* color: #0077cc;*/
 color: #0030a0;
  text-align: center;
}

h1, h2, h3,
h1 a, h2 a, h3 a,
h1 span, h2 span, h3 span {
  /*color: #0077cc;*/
  color: #0030a0;
  text-align: center;
  border-bottom: none;
  text-decoration: none;
  /*font-family: "Source Serif 4", Georgia, "Times New Roman", serif;*/
/*  font-family: "Playfair Display", Georgia, serif;*/
/*font-family: "Cormorant Garamond", Georgia, serif;*/
/*font-family: "Marcellus", Georgia, serif;*/
/*font-family: "Linux Libertine", Georgia, Times, serif;*/
/*font-family: 'Libertinus Serif', serif;*/
font-family: "Gilda Display", serif;
  font-weight: 600;
/*font-weight: 600;*/  /* Marcellus n'a qu'une seule graisse */
  line-height: 1.25;
  letter-spacing: 0.01em;
}




h1,h2{
margin-top:2.5rem;
padding-top:1.0rem;
}

h1{
margin-top:2.5rem;
padding-top:1.0rem;
border-top:6px double lightblue;
}
/*
main>h1:first-of-type, 
#content>h1:first-of-type,
main>h2:first-of-type {
margin-top:0;
padding-top:0rem;
border:none;
}
*/
body>h1:first-of-type,
main>h1:first-of-type,
#content>h1:first-of-type,
body>h2:first-of-type,
main>h2:first-of-type {
margin-top: 1rem;
padding-top:0rem;
border:none;
}



h2,h3{
margin-top:2.5rem;
padding-top:1.0rem;
border-top:1px dashed rgba(120,120,120,0.5);
}


h4, h5, h6 {
 /* color: #0077cc;*/
  line-height: 1.2;
}

|
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

/* ---------- Texte ---------- */

strong, b {
  color: navy;
  font-weight: 600;
  /*font-weight: normal;*/
  /*background-color: #fff3df;*/
  /*background-color: #Eff0Fe;*/
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
}

/*

Nom Hex Ambiance
Lavande #E6E6FA Doux, apaisant
Lilas #C8A2C8 Romantique, délicat
Mauve clair #E0B0FF Féminin, floral
Améthyste claire #B19CD9 Élégant, raffiné
Violet pastel #DDA0DD Tendre, sucré
Pervenche #CCCCFF Frais, lumineux


*/




p, ul, ol, dl {
  margin-bottom: var(--spacing);
}

mark {
  background-color: #fff3bf;
  padding: 0.1em;
}

small {
  font-size: 0.85em;
}

u {
  text-decoration: underline;
}

s, del {
  text-decoration: line-through;
  color: #777;
}

sub, sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* ---------- Listes ---------- */

ul {
  list-style-type: none;
  padding-left: 1rem;
}

ul li {
  color: inherit;
  margin-bottom: 0.2rem;
}

ul li::before {
  content: "\2714";
  color: #00b032;
  font-weight: bold;
  display: inline-block;
  width: 1.5em;
}

ol {
  list-style-position: inside;
  list-style-type: decimal;
  padding-left: 1rem;
}

ol li::marker {
  color: teal;
  font-weight: bold;
}

dt {
  font-weight: bold;
  margin-top: 0.5rem;
}

dd {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}

/* ---------- Éléments structurants ---------- */

header, nav, main, section, article, aside, figure, details {
  display: block;
  margin-bottom: var(--spacing);
}





/* ---------- Blockquotes ---------- */

blockquote {
  /*margin: 1.2rem 0;*/
  width: 94%;
margin: 1.4rem auto;
  /*padding: .85rem 1.2rem;*/
  padding:  0.0rem 0.96rem;
  border: 1px solid;
  border-left-width: 5px;
  border-radius: 8px;
/*  line-height: 1.6;*/
  background: #e0eaff;  
    border-radius: 6px;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, .14),
    0 1px 2px rgba(0, 0, .08);
}

/*
blockquote strong:first-of-type {
  display: block;
  text-align: center;
}
*/
blockquote p {
    position: relative;
}

blockquote .alert-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5em;
    margin-bottom: 0.5em;
}

blockquote .icon {
	font-size: 1.4rem;
    position: absolute;
    left: 0;
}

blockquote .alert-header strong {
	background: #f0f0e0;
	font-weight : 500;
	border-radius: 28px;
	padding: 0.2rem 1.4rem;
	font-size: 1.15rem;
    display: block;
    text-align: center;
}

/* ℹ️ NOTE — bleu */
blockquote.note {
  background: #eef6ff;
  border-color: #9fc7ed;
  border-left-color: #2196f3;
  color: #174a73;
}

/* 💡 CONSEIL — vert */
blockquote.conseil {
  background: #effaf3;
  border-color: #a8d8b8;
  border-left-color: #2e9d59;
  color: #205c37;
}

/* ❗ IMPORTANT — orange */
blockquote.important {
  background: #fff5e6;
  border-color: #e7c18a;
  border-left-color: #f39c12;
  color: #704b00;
}
/* ⚠️ ATTENTION — jaune */
blockquote.attention {
  background: #fffbea;
  border-color: #e5d58a;
  border-left-color: #e0b000;
  color: #685500;
}
/* ⚠️ ATTENTION — jaune */
blockquote.avertissement {
  background: #fff0f0;
  border-color: #e3a6ac;
  border-left-color: #dc3545;
  color: #7a1f29;
}

blockquote strong {
  font-weight: 500;
}

/* ---------- Images / médias ---------- */

img, video, iframe, svg, canvas, embed, object {
  max-width: 100%;
}

img {
  border-radius: 6px;
}

.zoomable {
  cursor: pointer;
  transition: .3s;
}

.zoomable.fullscreen {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  z-index: 9999;
  padding: 0;
}

/* ---------- Galerie ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  max-width: 100%;
}

.gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- Modale ---------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.open {
  display: flex;
}

.modal img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 4px;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 20px;
  cursor: pointer;
}

/* ---------- Code ---------- */

code {
  background-color: rgba(27,31,35,0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: 85%;
  overflow-wrap: anywhere;
}

pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre code {
  background-color: transparent;
  padding: 0;
}

/* ---------- Tableaux ---------- */

.table-responsive,
.table-container {
  width: 100%;
  overflow-x: auto;
}

.table-container {
  margin: var(--spacing) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  table-layout: fixed;
}

th, td {
  border: 1px solid #b0c4de;
  padding: 10px 14px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

th {
  background-color: #2b6cb0;
  color: #ffffff;
  font-weight: bold;
}

tr:nth-child(odd) {
  background-color: #ebf8ff;
}

tr:nth-child(even) {
  background-color: #ffffff;
}

tr:hover td {
  background: #ffe9c6;
}

/* ---------- Formulaires ---------- */

form,
input,
textarea,
select,
button {
  font: inherit;
}

input,
textarea,
select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

button {
  padding: 10px 16px;
  background-color: #0969da;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--spacing) 0;
}

/* ---------- Classes de mise en forme ---------- */

.b { font-weight: bold; }
.i { font-style: italic; }
.u { text-decoration: underline; }
.s { text-decoration: line-through; }
.h { background: yellow; padding: 2px 6px; }

.c { text-align: center; }
.center { text-align: center; display: block; }
.l { text-align: left; }
.r { text-align: right; }
.j { text-align: justify; }

/* ---------- Tailles ---------- */

.xs { font-size: 0.8em; }
.sm { font-size: 0.9em; }
.lg { font-size: 1.2em; }
.xl { font-size: 1.5em; }
.xxl { font-size: 2em; }
.big { font-size: 1.4em; }

/* ---------- Couleurs ---------- */

.red { color: red; }
.green { color: green; }
.blue { color: blue; }
.orange { color: orange; }
.purple { color: purple; }
.black { color: black; }
.white { color: white; }

/* ---------- Fonds ---------- */

.bg-red { background: red; padding: 2px 6px; }
.bg-green { background: green; padding: 2px 6px; }
.bg-blue { background: blue; padding: 2px 6px; }
.bg-yellow { background: yellow; padding: 2px 6px; }
.bg-cyan { background: cyan; padding: 2px 6px; }

/* ---------- Espacement ---------- */

.m1 { margin: 0.5rem; }
.m2 { margin: 1rem; }

.p0 { padding: 0 6px; }
.p1 { padding: 0.5rem; }
.p2 { padding: 1rem; }
.p24 { padding: 2px 4px; }

/* ---------- Bordures ---------- */

.br { border: 1px solid #ccc; }
.rd { border-radius: 8px; }
.sh { box-shadow: 0 2px 5px rgba(0,0,0,.2); }

.rounded {
  border-radius: 8px;
}

.height30vh {
  height: 30vh;
}

/* ---------- Dégradés ---------- */

.grad1 {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red, green, blue);
}

.grad2 {
  background: radial-gradient(circle, lch(79 33 356) 20%, lch(82 28 253) 100%);
}

.grad3 {
  background: radial-gradient(red, orange, yellow, green, blue, purple);
}

.grad4 {
  background:
    linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}


.clignotant {    animation: clignotement 1.5s infinite;}
.important { color: red; font-size: 1.15rem;}
.souligne { text-decoration: underline; }
s {  text-decoration: none  ;}



/* ---------- Boîtes à attribut ---------- */
/*
*/




/* ---------- Attributs sur span ---------- */

span[b], span[bold], span[gras] {
  font-weight: bold;
}

span[i], span[italic] {
  font-style: italic;
}

span[u] {
  text-decoration: underline;
}

span[s] {
  text-decoration: line-through;
}

span[xs] { font-size: 0.75rem; }
span[sm], span[small] { font-size: 0.85rem; }
span[lg] { font-size: 1.3rem; }
span[xl] { font-size: 1.5rem; }
span[xxl] { font-size: 1.8rem; }
span[big] { font-size: 1.5rem !important; }
span[big2] { font-size: 2rem !important; }
span[big3] { font-size: 3rem !important; }

span[center] {
  text-align: center;
  display: block;
}

span[right] { text-align: right; }
span[left] { text-align: left; }

span[red] { color: red !important; }
span[green] { color: green; }
span[blue] { color: blue; }
span[white] { color: white; }
span[gray] { color: #888; }
span[orange] { color: orange; }
span[purple] { color: purple; }

span[bg-yellow] {
  background-color: #ffd;
  padding: 4px 10px;
  color: #640;
}

span[bg-green] {
  background-color: #dfd;
  padding: 4px 10px;
  color: #060;
}

span[bg-gray] {
  background-color: #eee;
  padding: 2px 6px;
}

span[bg-red] {
  background-color: #fdd;
  padding: 4px 10px;
  color: #900;
}

span[bg-blue] {
  background-color: #d1ecf1;
  padding: 4px 10px;
  color: #006;
}

span[highlight], span[mark] {
  background: yellow;
  padding: 4px;
}

span[shadow] {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

span[upper] {
  text-transform: uppercase;
}

span[mono] {
  font-family: monospace;
}

span[border1] {
  border: 1px solid LightGray !important;
  padding: 2px 6px;
}

span[border2] {
  border: 2px solid #999;
  padding: 2px 6px;
}

span[border-red] {
  border: 2px solid red;
  padding: 2px 16px;
}

span[border-green] {
  border: 2px solid green;
  padding: 2px 6px;
}

span[border-blue] {
  border: 1px solid blue !important;
}

span[rounded] {
  border-radius: 0.6rem !important;
}

span[height30vh] {
  height: 30vh;
}

span[grad1] {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red, green, blue);
}

span[grad2] {
  background: radial-gradient(circle, lch(79 33 356) 20%, lch(82 28 253) 100%);
}

span[grad3] {
  background: radial-gradient(red, orange, yellow, green, blue, purple);
}

span[grad4] {
  background:
    linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

span[bg-yellow],
span[bg-green],
span[bg-gray],
span[bg-red],
span[bg-blue],
span[border1],
span[border2],
span[border-red],
span[border-green],
span[border-blue],
span[rounded],
span[mark] {
  display: inline-block;
}

/* ---------- Clavier ---------- */

kbd {
  background: var(--bg-code);
  border-radius: 3px;
  padding: 0.1em 0.3em;
  border: 1px solid var(--border);
  font-family: monospace;
}



/*
blockquote{margin:20px 0;padding:15px 20px;border-left:6px solid #ccc;border-radius:6px;position:relative;font-family:sans-serif;line-height:1.5;}

*/


blockquote::before{font-weight:bold;margin-right:12px;font-size:1.3em;vertical-align:middle;}
|
blockquote.info{background-color:#e8f4fd;border-left-color:#2196f3;color:#0d47a1;}
blockquote.info::before{content:"ℹ️";}

blockquote.note_{background-color:#f5f5f5;border-left-color:#616161;color:#212121;}
blockquote.note_::before{content:"📝";}

blockquote.tip{background-color:#e8f8f5;border-left-color:#1abc9c;color:#117a65;}
blockquote.tip::before{content:"💡";}

blockquote.success{background-color:#e8f5e9;border-left-color:#4caf50;color:#1b5e20;}
blockquote.success::before{content:"✅";}
blockquote.warning{background-color:#fff8e1;border-left-color:#ffb300;color:#b78103;}
blockquote.warning::before{content:"⚠️";}
blockquote.danger{background-color:#ffebee;border-left-color:#f44336;color:#c62828;}
blockquote.danger::before{content:"🚨";}
blockquote.example{background-color:#f3e5f5;border-left-color:#9c27b0;color:#4a148c;}
blockquote.example::before{content:"🧪";}
blockquote.code{background-color:#f8f9fa;border-left-color:#6c757d;color:#333333;font-family:monospace;}
blockquote.code::before{content:"💻";}
blockquote.quote{background-color:#fff3e0;border-left-color:#ff9800;color:#e65100;font-style:italic;}
blockquote.quote::before{content:"💬";}
blockquote.bug{background-color:#fce4ec;border-left-color:#e91e63;color:#880e4f;}
blockquote.bug::before{content:"🪲";}
blockquote.todo{background-color:#f4f6f7;border-left-color:#95a5a6;color:#34495e;}
blockquote.todo::before{content:"📌";}
blockquote.help{background-color:#f5eef8;border-left-color:#8e44ad;color:#4a235a;}
blockquote.help::before{content:"❓";}