@font-face {
  font-family: "IBM Plex Mono";
   src: url("fonts/IBMPlexMono-Medium.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AlegreyaSC";
  src: url("fonts/AlegreyaSC-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AlegreyaSC";
  src: url("fonts/AlegreyaSC-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "AlegreyaSC";
  src: url("fonts/AlegreyaSC-BoldItalic.ttf") format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "AlegreyaSC";
  src: url("fonts/AlegreyaSC-Italic.ttf") format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-SemiBold.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-SemiBoldItalic.ttf") format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/Alegreya-Italic.ttf") format('truetype');
  font-weight: normal;
  font-style: italic;
}

.reveal {
  font-family: Alegreya;
  font-weight: normal;
  font-style: normal;
  font-size: 38px;          /* ajuste selon ton goût */
  line-height: 1.25;
}

.reveal h1 {
  font-family: AlegreyaSC;
  font-weight: bold;
  color: #e07;
  text-transform: none;
}

.reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  font-family: AlegreyaSC;
  font-weight: bold;
  text-transform: none;
}

.cool { color: #e07; }

.reveal p { font-weight: normal; }

/* Optionnel: listes plus lisibles */
.reveal ul, .reveal ol { margin-top: 0.4em; }
.reveal li { margin: 0.15em 0; }

/* Optionnel: code */
.reveal code { font-size: 0.9em; }

.reveal .slides { text-align: left; }

.reveal .slide-number {
    right: 3.2em;
    bottom: 3.9em;
    color: #ccc;
    background-color: transparent;
}

div.palette, div.boardhandle {
  display: none !important;
}

/* customcontrols */
body.ui-minimal #customcontrols { display: none !important; }

/* reveal.js-menu : masque le panneau + l'overlay + le bouton */
body.ui-minimal .slide-menu-wrapper .slide-menu,
body.ui-minimal .slide-menu-wrapper .slide-menu-overlay,
body.ui-minimal .reveal .slide-menu-button {
  display: none !important;
}

.reveal.overview #chalkboard,
.reveal.overview #notescanvas,
.reveal.overview .palette {
  display: none !important;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;       /* prevents scroll bars */
    background: #DDD;
}
div.statusbar { text-align: left; }
textarea.statusbar {
    font-family: monospace; font-size: 12px; line-height: 16px;
    resize: none; overflow: hidden; width: 100%;
    background: #FFFFCE; border: 1px solid gray; margin-top: 10px; padding: 2px;
}
div.canvas_border { border: 0px none; }
/* the canvas must not have any border or padding, or mouse coords will be wrong */
canvas.golly {
    position: absolute;
    border: 0px none;
}
div.menubar { text-align: center; }
div.menu_container { display: inline-block; margin-top: 6px; margin-bottom: 5px; }
div.toolbar { text-align: center; }
div.myclipboard { text-align: center; }
textarea.myclipboard {
    font-family: monospace; font-size: 11px; resize: none; width: 280px;
    background: #FFF; border: 1px solid gray; margin-top: 10px; padding: 1px;
}

		div.patterndir {
			width: 280px;
			padding: 1px;
			margin-left: 8px;       /* better alignment with textarea.myclipboard */
			height: 300px;
			border: 1px solid gray;
			background: #FFF;
			white-space: nowrap;
  			overflow: auto;
		}
		button.imgbutton {
			width: 36px;    /* for better agreement with Firefox and Safari/Chrome */
			height: 32px;
			margin: 0px;
			vertical-align: middle;
		}
		img.imgbutton {
			vertical-align: middle;
		}
		img.dir {
			margin: 0px;
			vertical-align: bottom;
		}
		span.dir {
			cursor: pointer;
		}
		span.dir:hover {
	    	background: #888;
		    color: #FFF;
		}
		span.file {
		    display: inline-block;
			cursor: pointer;
		}
		span.file:hover {
	    	background: #000;
		    color: #FFF;
		}
label { font: caption; }
.vspace { height: 10px; }

#pastemenu {
 	position: absolute;
 	z-index: 1;
    visibility: hidden;
    border: 1px solid #000;
}
#pastemenu span {
 	position: relative;
    display: block;
    padding: 5px 10px;
    font: bold 12px Arial, Helvetica, sans-serif;
}
	    #pastemenu span.normal {
	    	background: #FEE;   /* light red to match paste image */
		    color: #000;
		}
	    #pastemenu span.grayed {/* grayed class is used to indicate an inactive item */
	    	background: #FEE;
		    color: #AAA;
		}
	    #pastemenu span.normal:hover {
	    	background: #000;
		    color: #FFF;
    cursor: pointer;
		}
	    #pastemenu span.grayed:hover {
	    	background: #FEE;
		    color: #AAA;
		    cursor: default;
		}
		
#selectionmenu {
 	position: absolute;
 	z-index: 1;
    visibility: hidden;
    background: #DFD;           /* light green to match selection */
    border: 1px solid #000;
}
#selectionmenu span {
 	position: relative;
    display: block;
    padding: 5px 10px;
    font: bold 12px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
	    #selectionmenu span:hover {
	    	background: #000;
		    color: #FFF;
		}

#open_overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
}
#open_dialog {
    width: 300px;
    margin: 140px auto;
    border: 1px solid #000;
    padding: 0px;
    background-color: #FFF;
}

#save_overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
}
#save_dialog {
    width: 300px;
    margin: 140px auto;
    border: 1px solid #000;
    padding: 0px;
    background-color: #FFF;
}

#prefs_overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1000;          /* might appear above help dialog */
    background-color: rgba(0,0,0,0.5);
}
#prefs_dialog {
    width: 300px;
    margin: 140px auto;
    border: 1px solid #000;
    padding: 0px;
    background-color: #FFF;
}

#help_overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
}
#help_dialog {
    width: 670px;
    margin: 130px auto;
    border: 1px solid #000;
    padding: 0px;
}
#help_header {
    width: 670px;
    height: 30px;
    background-color: #DDD;
    text-align: center;
}
#help_text {
    width: 650px;
    padding: 0px 10px;
    height: 770px;
    /* background-color: #FFF9D5;  nicer to set this in ShowHelp code */
    text-align: left;
    overflow: auto;
}

#info_overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1000;          /* might appear above help dialog */
    background-color: rgba(0,0,0,0.5);
}
#info_dialog {
    width: 670px;
    margin: 130px auto;
    border: 1px solid #000;
    padding: 0px;
}
#info_header {
    width: 670px;
    height: 30px;
    background-color: #DDD;
    text-align: right;
}
#info_text {
    width: 650px;
    padding: 0px 10px;
    height: 770px;
    background-color: #FFF;
    text-align: left;
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
    overflow: auto;
}

#progress_overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1001;
    background-color: rgba(0,0,0,0.1);
}
#progress_dialog {
    width: 300px;
    height: 100px;
    margin: 140px auto;
    border: 1px solid #000;
    padding: 0px;
    background-color: #FFF;
}

/* following is a heavily modified version of the code at http://www.lwis.net/free-css-drop-down-menu */
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.dropdown {
    position: relative;
    z-index: 500;
    font: 14px Arial, Helvetica, sans-serif;
    font-weight: bold;
}
ul.dropdown ul li {
    float: none;
    font: 14px Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: left;
}
ul.dropdown li {
    float: left;
    padding: 8px 10px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #69C3FF #5970B2 #5970B2 #69C3FF;
    background-color: #49A3FF;
    color: #FFF;
}
ul.dropdown li:hover {
    position: relative;
    z-index: 502;
    cursor: default;
    background-color: #5970B2;
    color: #FFF;
}
ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 501;
    width: 160px;
    margin-top: 1px;
}
ul.dropdown ul ul {
    top: 1px;
    left: 100%;
}
ul.dropdown *.menu {
    padding-right: 40px;
    background-image: url(images/menu_down.png);
    background-position: 100% 50%;
    background-repeat: no-repeat;
}
ul.dropright ul *.menu {
    padding-right: 15px;
    background-image: url(images/menu_right.png);
    background-position: 100% 50%;
    background-repeat: no-repeat;
}
ul.dropdown ul *.item_normal {
    cursor: pointer;
    background-image: url(images/item_blank.png);
    background-position: 95% 50%;
    background-repeat: no-repeat;
}
ul.dropdown ul *.item_disabled {    /* item_disabled class is set in UpdateMenuItems */
    cursor: default;
    background-image: url(images/item_blank.png);
    background-position: 95% 50%;
    background-repeat: no-repeat;
    background-color: #49A3FF;
    color: #70D0FF;
}
    
#golly-root {
    background: #ccc;
}

#golly-root.golly-bg, #golly-root.golly-overlay {
    position: fixed;
    inset: 0;
}
#golly-root.golly-bg {
    z-index: -1;
    pointer-events: none;
}
#golly-root.golly-overlay {
    z-index: 9999;
    pointer-events: auto;
}
/* Canvas-only mode (no browser fullscreen required) */
body.golly-canvas-only div.menubar,
body.golly-canvas-only div.toolbar,
body.golly-canvas-only div.statusbar,
body.golly-canvas-only div.myclipboard,
body.golly-canvas-only div.patterndir {
    display: none !important;
}
body.golly-canvas-only canvas.golly {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

/* Reveal.js overlay (POC) */
.reveal {
    position: relative;
    z-index: 50;
}

/* Chalkboard overlays must cover the whole reveal and receive pointer events */
.reveal #chalkboard,
.reveal #notescanvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Make sure the chalkboard is above slides (and above most reveal UI) */
.reveal #chalkboard { z-index: 120 !important; }
.reveal .palette { z-index: 121 !important; }

/* The actual drawing surface */
.reveal #chalkboard canvas,
.reveal #notescanvas canvas {
  position: absolute !important;
  inset: 0 !important;
}

.reveal .slides {
    /* allow clicks even if Golly is behind */
    pointer-events: auto;
}

    
/* When Golly is on top, its menus/overlays must also be above Reveal */
body.golly-overlay-active #pastemenu,
body.golly-overlay-active #selectionmenu,
body.golly-overlay-active #open_overlay,
body.golly-overlay-active #save_overlay,
body.golly-overlay-active #prefs_overlay,
body.golly-overlay-active #help_overlay,
body.golly-overlay-active #info_overlay,
body.golly-overlay-active #progress_overlay {
    z-index: 10050;
}


/***** CHALKBOARD AU DESSUS DE GOLLY ****/
#chalkboard-bg-layer{
  position: fixed;
  inset: 0;
  z-index: 6000;           /* < 9999 (golly-overlay), > 50 (reveal) */
  pointer-events: none;
  background-repeat: repeat;
}

.reveal #chalkboard{
  background: transparent !important; /* on enlève l’overlay opaque du plugin */
  z-index: 10020 !important;          /* > golly-overlay (9999) */
}

body.golly-overlay-active:not(.chalk-active) .reveal #chalkboard{
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body.chalk-active .reveal #chalkboard{
  pointer-events: auto !important;
}

/* Chalkboard DANS golly-root */
#golly-root #chalkboard{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  background: transparent !important;
  z-index: 10020 !important; /* au-dessus du canvas golly (dans le même root) */
}

/* Quand on est en overlay golly mais PAS en mode chalk: visible mais clics à Golly */
body.golly-overlay-active:not(.chalk-active) #golly-root #chalkboard{
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Quand on dessine réellement */
body.chalk-active #golly-root #chalkboard{
  pointer-events: auto !important;
}

#genbar.genbar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 10019 !important; 
  padding: 2px 8px;
  font-family: "IBM Plex Mono";
  font-weight: normal;
  font-style: normal;
  font-size: 38px;  
  background: transparent;
  pointer-events: none;
  user-select: none;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.85),
    0 0 6px rgba(0,0,0,0.65);
}

#golly-root.golly-bw #genbar.genbar {
  color: #000;
  text-shadow:
    0 1px 2px rgba(255,255,255,0.85),
    0 0 6px rgba(255,255,255,0.65);
}

#popbar.popbar {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 10019 !important; 
  padding: 2px 8px;
  font-family: "IBM Plex Mono";
  font-weight: normal;
  font-style: normal;
  font-size: 38px;  
  background: transparent;
  pointer-events: none;
  user-select: none;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.85),
    0 0 6px rgba(0,0,0,0.65);
}

#golly-root.golly-bw #popbar.popbar {
  color: #000;
  text-shadow:
    0 1px 2px rgba(255,255,255,0.85),
    0 0 6px rgba(255,255,255,0.65);
}


section.title { height: 100%; }

.title-card{
  position: absolute;
  left: 70px;
  bottom: 70px;
  max-width: 75%;
  padding: 24px 28px;
  border-radius: 18px;
  background: rgba(220,220,220,0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

.title-card h1{ margin: 0 0 10px; font-size: 66px; }
.title-card .subtitle{ margin: 14px 0 0; font-size: 24px; opacity: 0.9; font-weight: bold; }
.title-card .meta{ margin: 14px 0 0; font-size: 30px; opacity: 0.8; font-weight: bold; }

.reveal .slide-background .slide-background-content {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.title-card h1, .title-card h2 {
  text-shadow: 0 2px 0 rgba(0,0,0,0.12);
  letter-spacing: 0.5px;
}

.reveal.hide-slide-number .slide-number {
  display: none !important;
}

.menu-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}
.menu-help-table th,
.menu-help-table td {
  padding: 0.35em 0.5em;
  vertical-align: top;
}