/* This Theme is called "Wasp" and Obsidian Theme created by Santi Younger */

:root
{
--font-monospace: "Source Code Pro", monospace;
--lang: "fr";
}


.theme-dark
      {
--button-hover-bg-color: #DAA520; /* Darker Yellow Background for Hover */
--button-hover-text-color: #ffffff; /* White Text for Hover */
      --button-bg-color: #D49335; /* Gray-Black Background */
      --button-text-color: #242424; /* Light Gray Text */   
      --background-primary:         #282F3E;
      --background-primary-alt:     #242424;
      --background-secondary:       #191919;
      --background-secondary-alt:   #3D3D3D;
      --text-normal:                #faf2d6;
      --text-faint:                 #bdae93;
      --text-title-h1:              #EEC973; /*EOEOEO*/
      --text-title-h2:              #A882FF; /*E0E0E0*/
      --text-title-h3:              #53DFDD; /*E0E0E0*/
      --text-title-h4:              #E0E0E0;
      --text-title-h5:              #E0E0E0;
      --text-title-h6:              #83a598;
      --text-highlight-bg:          #640211;
      --text-link:                  #83a598; 
      --text-a-hover:               #83a598; 
          --text-accent-hover:      #D49335;
 /* ^^^ added for hover over bracket internal links */
      --inline-code:                #83a598; 
      --code-block:                 #83a598; 
      --text-a:                     #f8c537; 
      --interactive-accent:         #f8c537;
      --text-accent:                #f8c537; 
      --text-on-accent:             #fff;
      --interactive-accent-rgb:     #f8c537; 
      --vim-cursor:                 #f8c537; 
      /*  --text-mark:                  add text-mark if needed, this should work together with 'mark' */
      --pre-code:                   #;
      --interactive-before:         #7c6f64;
      --background-modifier-border: #f8c537;
      --text-selection:             #f8c537;
      --list-marker-color:          #83a28b;
      --page-width: 100%;
		  

.theme-dark .cm-s-obsidian span.obsidian-search-match-highlight {
color: var(--text-normal);
background-color: #483699;
}

.theme-light
     {
         --background-primary:         #282F3E; /*EDEDED*/
         --background-secondary:       #242424;
          /* thick menu border */
         --background-primary-alt:     #282F3E;
         --background-secondary-alt:   #242424; /* ← ↓  corner */
         --text-normal:                #FFFFFF; /*1A2023*/
         --text-faint:                 #DEDEDE;
         --text-title-h1:              #D49335;
         --text-title-h2:              #D49335;
         --text-title-h3:              #D49335;
         --text-title-h4:              #D49335;
         --text-title-h5: 	     	   #D49335;
         --text-title-h6:              #D49335;
		 --text-link:                  #D49335;
         --text-a-hover:               #D49335;
         --text-accent-hover:          #D49335;
/* ^^^ added for hover over bracket internal links */
         --inline-code:                #458588;
         /*  --text-mark:                  add if needed */
         --pre-code:                   #bebebe;
         /*  --text-highlight-bg:          add if needed */
         --interactive-before:         #a89984;
         --background-modifier-border: #D49335;
         --text-a:                     #961327;
         --interactive-accent:         #f8c537;
         --text-accent:                #961327;
         --interactive-accent-rgb:     #961327;
         --vim-cursor:                 #961327;
         --text-selection:             #EDC180;
         --text-white: 		           #ffffff;
         --page-width: 100%; 
	 }

.nav-file-title, .nav-folder-title {
    color: var(--text-normal);
}

.nav-file-title.is-active, .nav-folder-title.is-active, body:not(.is-grabbing) .nav-file-title:hover, body:not(.is-grabbing) .nav-folder-title:hover {
    background-color: var(--background-modifier-border);
    color: white;
}

.cm-s-obsidian span.cm-formatting-link {
    color: var(--text-normal);
}

.CodeMirror-guttermarker-subtle {
    color: var(--text-normal) !important;
}

button.mod-cta {
    background-color: var(--interactive-accent);
    color: var(--text-normal);
}

.vertical-tab-header-group-title {
    color: var(--text-white);
}

.cm-header-1 {
font-size: 18px; 
color: var(--text-title-h1) !important;
}

.cm-header-2 {
font-size: 18px;
color: var(--text-title-h2) !important;
}

.cm-header-3 {
font-size: 18px;
color: var(--text-title-h3) !important;
}

.cm-header-4 {
font-size: 18px;
color: var(--text-title-h4) !important;
}

.cm-header-5 {
font-size: 18px;
color: var(--text-title-h5) !important;
}

.cm-header-6 {
font-size: 18px;
color: --text-normal;
color: var(--text-title-h6) !important;
}

.markdown-preview-view h1 {
font-size: 20px;
line-height: 24px;
color: var(--text-title-h1) !important;
}

.markdown-preview-view h2 {
font-size: 20px;
line-height: 24px;
color: var(--text-title-h2) !important;
}

.markdown-preview-view h3 {
font-size: 20px;
line-height: 24px;
color: var(--text-title-h3) !important;
}

.markdown-preview-view h4 {
font-size: 20px;
line-height: 24px;
color: var(--text-title-h4) !important;
}

.markdown-preview-view h5 {
font-size: 20px;
line-height: 24px;
color: var(--text-title-h5) !important;
}

.markdown-preview-view h6 {
font-size: 16px;
line-height: 0px;
color: --text-normal;
color: var(--text-title-h6) !important;
}

/*-----------------------------------------*/
/* End of main theme, extra functionality can be added below */

.markdown-source-view { font-family: var(--font-monospace)
}

.cm-fat-cursor .CodeMirror-cursor {
background-color: #f8c537 !important;
opacity: 80% !important;
width: 9px !important; 
visibility: visible !important
}

.plugin-tabs .stayopen .view-header {
border-bottom: 2px solid var(--interactive-accent)!important;
}

.plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-leaf:not(.stayopen) > .workspace-leaf-content > .view-header .view-header-title::before{
background-color:transparent!important
}

.plugin-tabs .mod-root.workspace-split.mod-vertical .workspace-split.mod-vertical > div.workspace-leaf:not(.stayopen),
.plugin-tabs .mod-root.workspace-split.mod-vertical > div.workspace-leaf:not(.stayopen){
border-radius: 5px 5px 0px 0px!important;
}

.plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-leaf{
border-color: var(--background-secondary-alt)!important;
border-bottom-width: 0px!important;
border-right-width: 0px!important
}

.theme-light.plugin-tabs  .mod-root.workspace-split.mod-vertical div.workspace-leaf{
border-color: var(--background-secondary-alt)!important;
border-left-width:3px!important;
border-bottom-width: 0px!important;
border-right-width: 0px!important
}

.plugin-tabs .mod-root.workspace-split.mod-vertical > div.workspace-leaf hr.workspace-leaf-resize-handle,
.plugin-tabs .mod-root.workspace-split.mod-vertical > .mod-vertical hr.workspace-leaf-resize-handle{
display: none;
}


.plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-leaf .view-header{
border-left-color: transparent!important
}

.plugin-tabs .workspace-split.mod-root > .workspace-leaf:last-of-type .workspace-leaf-content,
.plugin-tabs .workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content {
    border-radius: 0px!important;
}

.plugin-tabs .theme-dark .mod-root.workspace-split.mod-vertical .workspace-split.mod-vertical > div.workspace-leaf.mod-active,
.plugin-tabs .theme-dark .mod-root.workspace-split.mod-vertical > div.workspace-leaf.mod-active {
border: 0!important;
border-radius: 0px 0px 0px 0px!important;
}

button.mod-cta {
        background-color: var(--button-bg-color); /* Uses variable for background color */
        color: var(--button-text-color); /* Uses variable for text color */
        font-weight: 600; /* Makes text bold but less than standard bold */

    }

    button.mod-cta:hover, button.mod-cta:focus {
        background-color: var(--button-hover-bg-color); /* Darker Yellow Background for Hover */
        color: var(--button-text-color); /* Keeps the default light gray text color on hover */
        font-weight: 600; /* Makes text bold but less than standard bold */
    }

    .vertical-tab-nav-item.is-active {
        background-color: var(--button-bg-color); /* Gray-Black Background */
        color: var(--button-text-color); /* Light Gray Text */
        font-weight: bold; /* Makes text bold */
        font-weight: 600; /* Makes text bold but less than standard bold */
    }

    .vertical-tab-nav-item.is-active:hover, .vertical-tab-nav-item.is-active:focus {
        background-color: var(--button-hover-bg-color); /* Darker Yellow Background for Hover */
        color: var(--button-text-color); /* Keeps the default light gray text color on hover */
        font-weight: 600; /* Makes text bold but less than standard bold */
    }

    body:not(.is-phone) .vertical-tab-nav-item.is-active {
      --background-modifier-hover: var(--button-hover-bg-color); /* More specific variable for hover */
      --icon-color: var(--button-text-color);
      background-color: var(--button-bg-color);
      color: var(--button-text-color);
        font-weight: 600; /* Makes text bold but less than standard bold */
    }

    body:not(.is-phone) .vertical-tab-nav-item.is-active:hover,
    body:not(.is-phone) .vertical-tab-nav-item.is-active:focus {
      background-color: var(--button-hover-bg-color);
      color: var(--button-text-color);
        font-weight: 600; /* Makes text bold but less than standard bold */
    }
	
	.checkbox-container.is-enabled {
      background-color: var(--button-bg-color); /* Gray-Black Background */
      color: var(--button-text-color); /* Light Gray Text */
	}

  .checkbox-container.is-enabled:hover, .checkbox-container.is-enabled:focus {
      background-color: var(--button-hover-bg-color); /* Darker Yellow Background for Hover */
      color: var(--button-text-color); /* Keeps the default light gray text color on hover */
  }
  
    
  .flair.mod-pop {
    background-color: var(--button-bg-color); /* Gray-Black Background */
    color: var(--button-text-color); /* Light Gray Text */
}

.flair.mod-pop:hover, .flair.mod-pop:focus {
    background-color: var(--button-hover-bg-color); /* Darker Yellow Background for Hover */
    color: var(--button-text-color); /* Keeps the default light gray text color on hover */
}

/** hr styles -- PREVIEW MODE */
.cm-line hr,
.markdown-preview-view hr {
  margin-block-start: 2em;/*4em*/
  margin-block-end: 2em;
  border: none;
  height: 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-width: 1px;
  border-image-source: linear-gradient(to right, transparent, var(--text-accent), transparent);
}

.cm-line hr::after,
.markdown-preview-view hr::after {
  /* content: '\1f41d'; */
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  padding: 0.2rem; /*0.5rem*/
  color: var(--text-sub-accent);
  background-color: var(--background-primary);
}

/*Site*/
body:is(.theme-dark, .theme-light), .published-container {
    --font-text-size: 18px;
    --page-width: 100%;
    --page-margins: auto;
    --font-text: var(--font-default);
    --font-interface: var(--font-default);
    --font-monospace-default: var(--font-monospace);
    --sidebar-left-background: #1E232F;
    --sidebar-left-border-width: 1px;
	--sidebar-left-border-color: var(--background-modifier-border);
    --sidebar-left-width: 280px;
	--sidebar-right-width: 300px;
    --sidebar-right-background: var(--outer-bar);
    --sidebar-right-border-width: 1px;
    --sidebar-right-border-color: var(--background-modifier-border);
	--site-name-color: #EEC973;
	--site-name-size: 30px;
	--site-name-font: ;
	--site-theme-toggle: none;
	--line-height: 2.0;
	
}

.search-view-container .search-bar::placeholder {
  font-size: 14px;
  color: var(--text-faint);
}

.publisher-container .publish-article-heading {
	font-size: 20px !important;
}

.graph-view .color-line {
	color: #EC7500;
}

/*.graph-view {
	color: #1E232F;
}*/



/* Change spacing above and below a heading */
h6 {
  margin-block-start: 0.5rem !important; /* var(--p-spacing); */
  margin-block-end: 0.5rem !important; /* var(--p-spacing); */
}
/* Change spacing above a heading when it follows a paragraph */
div:has( > :is(p,pre,table,ul,ol)) + div > :is(h6) {
	margin-top: 0.5rem !important; /* var(--heading-spacing); */
}

.markdown-rendered p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.05em;
    text-justify: distribute;
    text-align-last: left;
}



/* Callouts */
  --callout-border-width: 0px;
  --callout-icon: none;
  --callout-border-opacity: 0.25;
  --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
  --callout-radius: var(--radius-s);
  --callout-blend-mode: var(--highlight-mix-blend-mode);
  --callout-title-color: inherit;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-title-weight: calc(var(--font-weight) + var(--bold-modifier));
  --callout-content-padding: 0;
  --callout-content-background: transparent;
  --callout-bug: var(--color-red-rgb);
  --callout-default: var(--color-blue-rgb);
  --callout-error: var(--color-red-rgb);
  --callout-example: var(--color-purple-rgb);
  --callout-fail: var(--color-red-rgb);
  --callout-important: var(--color-cyan-rgb);
  --callout-info: var(--color-blue-rgb);
  --callout-question: var(--color-orange-rgb);
  --callout-success: var(--color-green-rgb);
  --callout-summary: var(--color-cyan-rgb);
  --callout-tip: var(--color-cyan-rgb);
  --callout-todo: var(--color-blue-rgb);
  --callout-warning: var(--color-orange-rgb);
  --callout-quote: 158, 158, 158;
  --callout-custom: var(--color-green-rgb);
  
  .callout:is([data-callout-metadata^="noicon"]) .callout-icon {
  display: none;
}



  
/* Default markers */
ul ul,
ol ul,
ol ol ul,
ol ul ul,
ul ol ul,
ul ul ul {
  list-style-type: disc;
}
ol {
  list-style-type: var(--list-numbered-style);
}
ul > li,
ol > li {
  text-align: start;
}
ol > li::marker,
ul > li::marker {
  color: var(--list-marker-color);
}
ol > li.is-collapsed::marker,
ul > li.is-collapsed::marker {
  color: var(--list-marker-color-collapsed);
}
/* Indent depth
   Consistency in horizontal positioning of lists
*/
.markdown-rendered ul,
.markdown-rendered ol {
  padding-inline-start: 0;
  margin-block-start: var(--p-spacing);
  margin-block-end: var(--p-spacing);
  /* Space between list items */
}
.markdown-rendered ul ul,
.markdown-rendered ol ul,
.markdown-rendered ul ol,
.markdown-rendered ol ol {
  margin-block-start: 0;
  margin-block-end: 0;
}
.markdown-rendered ul li p:first-of-type,
.markdown-rendered ol li p:first-of-type {
  margin-block-start: 0;
}
.markdown-rendered ul li p:last-of-type,
.markdown-rendered ol li p:last-of-type {
  margin-block-end: 0;
}
.markdown-rendered ul > li,
.markdown-rendered ol > li {
  padding-top: var(--list-spacing);
  padding-bottom: var(--list-spacing);
  position: relative;
}
.markdown-rendered ul > li {
  margin-inline-start: 3ch;
}
.markdown-rendered ol > li {
  margin-inline-start: 3ch;
}
.markdown-rendered ol ol > li,
.markdown-rendered ul ul > li {
  margin-inline-start: var(--list-indent);
}  


/* Hide "Powered by Obsidian" */

.site-footer a {
  display: none;
}

/* Translate "Links to this page" to "Liens vers cette page" */

.mod-footer .published-section-header > .published-section-header-icon {
  display: none;
}

.mod-footer .published-section-header > span {
  visibility: hidden;
  display: block;
  height: calc(var(--line-height-normal) * var(--component-title-size));
  height: 1lh;
}

.mod-footer .published-section-header > span:after {
  content: "Liens vers cette page";
  visibility: visible;
  display: block;
  position: relative;
  bottom: calc(var(--line-height-normal) * var(--component-title-size));
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* Translate "Interactive graph" to "Graphique intéractif" */

.graph-view-outer .published-section-header > .published-section-header-icon {
  display: none;
}

.graph-view-outer .published-section-header > span {
  visibility: hidden;
  display: block;
  height: calc(var(--line-height-normal) * var(--component-title-size));
  height: 1lh;
}

.graph-view-outer .published-section-header > span:after {
  content: "Graphique intéractif";
  visibility: visible;
  display: block;
  position: relative;
  bottom: calc(var(--line-height-normal) * var(--component-title-size));
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* Translate "On this page" to "Sur cette page" */

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > .published-section-header-icon {
  display: none;
}

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > span {
  visibility: hidden;
  display: block;
  height: calc(var(--line-height-normal) * var(--component-title-size));
  height: 1lh;
}

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > span:after {
  content: "Sur cette page";
  visibility: visible;
  display: block;
  position: relative;
  bottom: calc(var(--line-height-normal) * var(--component-title-size));
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* Translate "Search page or heading..." to "Rechercher une page ou un titre..." */

.search-bar::placeholder {
  color: transparent !important;
}

.search-bar {
  /* https://stackoverflow.com/a/59066059 */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='250px'><text x='30' y='19.5' fill='%23ababab' font-size='16'>Rechercher une page ou un titre...</text></svg>") !important;
  background-repeat: no-repeat !important;
}

.search-bar:focus {
  background-image: none !important;
}







/* Remove "Search page or heading..." 

.search-bar::placeholder {
  color: transparent !important;
}

.search-bar {
  background-image: none !important;
}
*/

/* Translate "Not found - This page does not exist" to "Page introuvable - La page que vous avez demandée est introuvable" */

.not-found-title {
  visibility: hidden;
}

.not-found-title:after {
  content: "Page introuvable";
  visibility: visible;
  display: block;
}

.not-found-description {
  visibility: hidden;
}

.not-found-description:after {
  content: "La page que vous avez demandée est introuvable";
  visibility: visible;
  display: block;
}
 



/* Custom placeholder for 'people' property */
div.metadata-property[data-property-key="people"] .multi-select-input:empty::before {
    content: "first_last";  /* Placeholder text for 'people' */
    color: currentColor;  /* Placeholder text color */
	font-family: Arial, sans-serif;  /* Change font to Arial */
    font-style: italic;  /* Remove the italic style */
}

/* Custom placeholder for 'relevant' property */
div.metadata-property[data-property-key="relevant"] .multi-select-input:empty::before {
    content: "project tag";  /* Placeholder text for 'relevant' */
    color: currentColor;  /* Placeholder text color */
	font-family: Arial, sans-serif;  /* Change font to Arial */
    font-style: italic;  /* Remove the italic style */
}

/* Custom placeholder for 'url' property */
div.metadata-property[data-property-key="url"] .multi-select-input:empty::before {
    content: "internet link";  /* Placeholder text for 'url' */
    color: currentColor;  /* Placeholder text color */
	font-family: Arial, sans-serif;  /* Change font to Arial */
    font-style: italic;  /* Remove the italic style */
}

/* Custom placeholder for 'link' property */
div.metadata-property[data-property-key="link"] .multi-select-input:empty::before {
    content: "[[internal link]]";  /* Placeholder text for 'link' */
    color: currentColor;  /* Placeholder text color */
	font-family: Arial, sans-serif;  /* Change font to Arial */
    font-style: italic;  /* Remove the italic style */
}

/* General styles for the multi-select input */
div.multi-select-input {
    position: relative;
    color: currentColor;  /* Color of the actual input text */
}

div.multi-select-input:empty::before {
    display: block;
}
/*------------------*/

.internal-embed,
.is-mobile .internal-embed {
    padding-left: 5px !important;
    border-left-color: rgba(125, 91, 237, 0.4) !important;
    border-left-width: 8px !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

blockquote {
    padding-left: 3px !important;
    border-left-color:  rgba(255, 255, 255, 0.4) !important;
    border-left-width: 3px !important;
    border-top-left-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
}

.internal-embed {
    padding-left: 5px !important;
    border-left-color: rgba(125, 91, 237, 0.4) !important;
    border-left-width: 8px !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}


/* --------------- */
/* Phone */
@media (max-width: 400pt) {
  .is-mobile .search-bar::placeholder {
  color: transparent !important;}
  
  .is-mobile .search-bar {
  /* https://stackoverflow.com/a/59066059 */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='250px'><text x='30' y='19.5' fill='%23ababab' font-size='16'>Rechercher une page ou un titre...</text></svg>") !important;
  background-repeat: no-repeat !important;}
  
  .is-mobile .search-bar:focus {
  background-image: none !important;}

/* --------------- */
/* Tablet */
@media (min-width: 400pt) {
  .is-mobile .search-bar::placeholder {
  color: transparent !important;}
  
  .is-mobile .search-bar {
  /* https://stackoverflow.com/a/59066059 */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='250px'><text x='30' y='19.5' fill='%23ababab' font-size='16'>Rechercher une page ou un titre...</text></svg>") !important;
  background-repeat: no-repeat !important;}
  
  .is-moble .search-bar:focus {
  background-image: none !important;}
}

.is-mobile .is(.theme-dark,.theme-light).callout-icon {
	display: none;
}




<!-- Elements tags obligatoires
 	================================================== -->
	
/* -- Éléments obligatoires
   =================================================== */