/* ============================================ */
/* style.css — Fichier commun                   */
/* ============================================ */

/* ============================================ */
/* VARIABLES                                    */
/* ============================================ */
:root {
  --color-primary:      steelblue;
  --color-primary-dk:   rgb(39, 72, 99);
  --color-secondary:    darkkhaki;
  --color-secondary-dk: rgb(135, 131, 76);
  --color-danger:       #cc0000;
  --color-danger-bg:    #ffdddd;
  --color-bg:           #DEDBB5;
  --color-panel-bg:     #f9f9f9;
  --radius:             4px;
}

/* ============================================ */
/* BASE                                         */
/* ============================================ */
body {
  margin: auto;
  max-width: 65em;
  background-color: var(--color-bg);
  font-family: sans-serif, helvetica, verdana;
}

a { text-decoration: none; color: #5555FF; }
a:hover { text-decoration: underline; }

h1 {
  text-align: center;
  font-variant: small-caps;
  color: darkkhaki;
  font-size: 2.5em;
  margin-bottom: 3em;
}

h2 {
	color: steelblue;
	font-size:1.5em;
  margin-top: 2em;
}
.steelblue {
  color: var(--color-primary);
  font-size: 1.2em;
  font-weight: bold;
}

.centre {
  background-color: white;
  max-width: 65em;
  padding: 3em;
  margin: auto;
  text-align: justify;
  counter-reset: section;
}

/* ============================================ */
/* ZONE "ANNEXE" / RÉSULTAT DE COMPILATION       */
/* ============================================ */
div.h { background-color: #F5F5FF; margin: .5em 0; }
div.h iframe { border-top: 1px solid #ccc; }

/* ============================================ */
/* ÉDITEUR ACE                                  */
/* ============================================ */
.ace_editor {
  border: 1px solid lightgray;
  margin-bottom: 1px !important;
  width: 100%;
}

pre {
  margin: 0;
  padding: .5em;
  background-color: #EEE;
  height: 50vh;
  min-height: 200px;
}

/* ============================================ */
/* BOUTONS                                      */
/* ============================================ */
.llbutton,
.btn-unified,
.btn-primary,
.btn-secondary,
.tab-btn,
.btn-remove {
  padding: 0.3em 0.5em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  transition: background-color 0.2s ease;
  display: inline-block;
}

.llbutton { margin: 5px; }

.btn-primary,
.btn-unified,
.llbutton {
  background-color: var(--color-primary);
  color: white;
}
.btn-primary:hover,
.btn-unified:hover,
.llbutton:hover {
  background-color: var(--color-primary-dk);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: white;
}
.btn-secondary:hover {
  background-color: var(--color-secondary-dk);
}

.btn-remove {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: 0.3em 0.6em;
  flex: none;
}
.btn-remove:hover { background: #ffcccc; }

.button-wrapper { margin-bottom: 1em; }

/* ============================================ */
/* RESPONSIVE                                   */
/* ============================================ */
@media (max-width: 900px) {
  body { font-size: 18px; }
  .centre { padding: 0.8em; }
  h1 { font-size: 2em; margin-bottom: 1em; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .centre { padding: 0.8em; }
  h1 { font-size: 1.5em; margin-bottom: 0.6em; }
  pre { height: 35vh; min-height: 140px; }
}