/*
 * Adaptateur de la charte Yocoop pour YesWiki 4.5 / thème margot (horde.yocoop.fr).
 * Les variables --yc-* et les polices viennent de /opt/yocoop/charte/public, monté en lecture seule
 * sur custom/charte/. Ce fichier ne fait que relier les variables de YesWiki à celles de la charte,
 * plus quelques règles pour les blancs codés en dur de Bootstrap 3 (sombre).
 * Le sombre suit le système (prefers-color-scheme), comme le reste de la charte.
 */
@import url('../charte/yocoop-charte.css');

:root {
  /* palette YesWiki → charte */
  --primary-color: var(--yc-link);
  --secondary-color-1: var(--yc-sh);
  --secondary-color-2: var(--yc-p);
  --neutral-color: var(--yc-ink);
  --neutral-soft-color: var(--yc-muted);
  --neutral-light-color: var(--yc-soft);
  --main-text-color: var(--yc-ink);
  --main-bg-color: var(--yc-paper);
  --main-container-bg-color: var(--yc-paper);
  --link-color: var(--yc-link);
  --link-hover-color: var(--yc-ink);
  --success-color: var(--yc-ok);
  --danger-color: var(--yc-err);
  --warning-color: #b45309;
  --checkbox-color: var(--yc-link);
  --title-h1-color: var(--yc-ink);
  --title-h2-color: var(--yc-ink);
  --title-h3-color: var(--yc-link);
  --title-h4-color: var(--yc-ink);
  --title-h5-color: var(--yc-muted);

  /* barre du haut */
  --navbar-bg-color: var(--yc-bar);
  --navbar-text-color: var(--yc-on-bar);
  --navbar-link-color: var(--yc-on-bar);
  --navbar-link-hover-color: var(--yc-p);
  --navbar-link-bg-color: transparent;
  --navbar-link-bg-hover-color: transparent;
  --navbar-border: none;
  --navbar-shadow: none;
  --header-bg-color: var(--yc-paper);
  --header-text-color: var(--yc-ink);
  --header-title-color: var(--yc-ink);
  --footer-bg-color: var(--yc-paper);
  --footer-text-color: var(--yc-muted);
  --footer-title-color: var(--yc-ink);

  /* typographie */
  --main-text-fontsize: 17px;
  --main-text-fontfamily: var(--yc-body);
  --main-title-fontfamily: var(--yc-display);
  --btn-border-radius: 0;
}
@media (width <= 1200px) { :root { --main-text-fontsize: 16px; } }
@media (width <= 800px)  { :root { --main-text-fontsize: 15px; } }

/* ── Surfaces et texte ── */
html, body { background: var(--yc-paper); color: var(--yc-ink); }
h1, h2, h3, h4, h5, h6, .navbar-brand, .lms-module-title { font-family: var(--yc-display); }
code, pre, kbd { font-family: var(--yc-mono); }
a { color: var(--yc-link); }
:focus-visible { outline: var(--yc-focus-ring); outline-offset: 2px; }

/* ── Barre du haut (light.css la met en blanc) ── */
#yw-topnav { background: var(--yc-bar); border-bottom: var(--yc-line-w) solid var(--yc-line); }
#yw-topnav a, #yw-topnav .navbar-brand, #yw-topnav .btn.btn-default { color: var(--yc-on-bar) !important; }
#yw-topnav a:hover, #yw-topnav a:focus, #yw-topnav .btn.btn-default:hover { color: var(--yc-p) !important; }
#yw-topnav .dropdown-menu { background: var(--yc-card); border: var(--yc-line-w) solid var(--yc-line); }
#yw-topnav .dropdown-menu a { color: var(--yc-ink) !important; }

/* ── Boutons : rose plein, texte encre, ombre décalée ── */
.btn { border-radius: 0; font-weight: 600; }
.btn-primary, .btn-primary:focus {
  background: var(--yc-p) !important; color: var(--yc-on-p) !important;
  border: var(--yc-line-w) solid var(--yc-line) !important; box-shadow: var(--yc-shadow-sm);
}
.btn-primary:hover { background: var(--yc-sh) !important; color: #fff !important; }
.btn-default { background: var(--yc-card); color: var(--yc-ink); border: var(--yc-line-w) solid var(--yc-line); }
.btn-default:hover, .btn-default:focus { background: var(--yc-soft); color: var(--yc-ink); }

/* ── Bootstrap 3 : blancs codés en dur ── */
.panel, .panel-default > .panel-heading, .well, .list-group-item, .modal-content, .dropdown-menu,
.form-control, .input-group-addon, .popover, .table, .thumbnail, .nav-tabs > li.active > a,
.bazar-entry, .bazar-card, .card, .reaction-content, .page-widget, .lms-reaction {
  background-color: var(--yc-card);
  color: var(--yc-ink);
  border-color: var(--yc-soft);
}
.form-control::placeholder { color: var(--yc-muted); }
.table > thead > tr > th, .table > tbody > tr > td { border-color: var(--yc-soft); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--yc-paper); }
.dropdown-menu > li > a { color: var(--yc-ink); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--yc-soft); color: var(--yc-ink); }
.text-muted, .help-block { color: var(--yc-muted); }
hr { border-color: var(--yc-soft); }
.close { color: var(--yc-ink); opacity: .7; }

/* ── LMS : menu des modules et boutons Précédent / Suivant ── */
.lms-navigation .btn, .navigation-activity .btn,
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  border-color: var(--yc-line);
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  background: var(--yc-p); color: var(--yc-on-p);
}

/* ── Barre du haut : pas de cadre autour des icônes ── */
#yw-topnav .btn.btn-default { border: none !important; box-shadow: none; }

/* ── LMS (lms.css code ses fonds en dur) ── */
.panel-menu-lms .panel-heading, .panel-menu-lms .panel-heading a, .panel-menu-lms .panel-heading .panel-title {
  background-color: var(--yc-p) !important; color: var(--yc-on-p) !important;
}
.panel-menu-lms .list-group-item { background-color: var(--yc-card) !important; color: var(--yc-ink) !important; border-color: var(--yc-soft) !important; }
.panel-menu-lms .list-group-item a { color: var(--yc-ink) !important; }
.panel-menu-lms .list-group-item.active, .panel-menu-lms .list-group-item.active:hover {
  background-color: var(--yc-t-rose) !important; color: var(--yc-on-t) !important; font-weight: 700;
}
.panel-menu-lms .list-group-item.active a { color: var(--yc-on-t) !important; }
.learners-groups .learner-details-table tr td { background-color: var(--yc-card); color: var(--yc-ink); }
a.bazar-entry, a.bazar-entry * { color: var(--yc-ink); }
.btn-neutral { background-color: var(--yc-card) !important; color: var(--yc-ink) !important; border: var(--yc-line-w) solid var(--yc-line) !important; }

/* ── Éditeur (aceditor + Ace, thème clair « tm » codé en dur) ── */
.aceditor-toolbar, .bootstrap-tagsinput { background-color: var(--yc-card) !important; color: var(--yc-ink); }
.ace-editor-container, .ace-tm, .ace-tm .ace_scroller { background-color: var(--yc-card) !important; color: var(--yc-ink) !important; }
.ace-tm .ace_gutter, .ace-tm .ace_gutter-cell, .ace-tm .ace_gutter-active-line { background-color: var(--yc-paper) !important; color: var(--yc-muted) !important; }
.ace-tm .ace_marker-layer .ace_active-line { background-color: var(--yc-soft) !important; }
.ace-tm .ace_cursor { color: var(--yc-ink) !important; }
.ace-tm .ace_marker-layer .ace_selection { background: var(--yc-t-violet) !important; }
.ace-tm .ace_placeholder { color: var(--yc-muted) !important; }
@media (prefers-color-scheme: dark) {
  /* les couleurs de syntaxe d'Ace sont faites pour un fond blanc : en sombre, le texte reprend l'encre */
  .ace-tm .ace_line > span { color: inherit !important; }
}

/* ── Boutons Précédent / Suivant (pager Bootstrap 3) ── */
.pager .previous > a, .pager .next > a, .pager li > a {
  background-color: var(--yc-card) !important; color: var(--yc-link) !important;
  border: var(--yc-line-w) solid var(--yc-line) !important; border-radius: 0 !important; box-shadow: var(--yc-shadow-sm);
}
.pager li > a:hover, .pager li > a:focus { background-color: var(--yc-soft) !important; color: var(--yc-ink) !important; }

/* Bootstrap 3 grise les <small> des titres en #777 (contraste < 4,5) */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, small { color: var(--yc-muted); }