html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

@font-face {
    font-family: 'Skateblade';
    src: url('/fonts/Skateblade-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Police des titres pilotee par marque. Defaut Arial. Surchargee par brand-<marque>.css. Les titres utilisent font-family: var(--brand-title-font). */
:root {
    --brand-title-font: Arial, Helvetica, sans-serif;

    /* Couleurs du bandeau : <span class=un>..</span><span class=deux>..</span><span class=trois>..</span> */
    --brand-title-1: #16213E;
    --brand-title-2: black;
    --brand-title-3: #dfae45;

    /* Fond des barres header / footer */
    --brand-header-footer: whitesmoke;
    --brand-header-footer-color: #202124;

    /* En-tetes des composants Syncfusion (grid, treegrid, dashboard, card...) */
    --brand-component-header-bg: var(--brand-header-footer);
    --brand-component-header-color: var(--brand-header-footer-color);
}

/* =========================================================
   En-tetes des composants Syncfusion.
   Chargee APRES fluent.css. Fond + texte pilotes par marque
   via --brand-component-header-bg / --brand-component-header-color.
   color est pose sur le conteneur (herite par les libelles) ;
   les selecteurs enfants forcent les cas ou Fluent impose une
   couleur explicite. Nouveau composant : ajouter sa classe.
   ========================================================= */

.e-grid .e-gridheader,
.e-grid .e-headercontent,
.e-grid .e-headercell,
.e-grid .e-detailheadercell,
.e-treegrid .e-headercell,
.e-dashboardlayout .e-panel .e-panel-header,
.e-card .e-card-header,
.e-accordion .e-acrdn-item .e-acrdn-header ,
.e-dialog .e-dlg-header-content,
.e-tab .e-tab-header,
.e-schedule .e-header-cells,
.e-listview .e-list-header,
.e-ddl.e-popup .e-list-header,
.e-ddl.e-popup .e-list-group-item {
    background-color: var(--brand-component-header-bg);
    color: var(--brand-component-header-color);
}
.e-grid .e-headercell .e-headertext,
.e-grid .e-headercelldiv,
.e-grid .e-headercell .e-sortfilterdiv,
.e-grid .e-headercell .e-icons,
.e-card .e-card-header .e-card-header-caption,
.e-card .e-card-header .e-card-title,
.e-card .e-card-header .e-card-sub-title,
.e-accordion .e-acrdn-header .e-acrdn-header-content,
.e-accordion .e-acrdn-header .e-toggle-icon,
.e-dialog .e-dlg-header-content .e-dlg-header,
.e-dialog .e-dlg-header-content .e-icons,
.e-tab .e-tab-header .e-tab-text,
.e-tab .e-tab-header .e-tab-icon,
.e-schedule .e-header-cells .e-header-day,
.e-schedule .e-header-cells .e-header-date,
.e-listview .e-list-header .e-text {
    color: var(--brand-component-header-color);
}

/* Classe utilitaire : a poser sur la racine du contenu dun
   HeaderTemplate pour forcer la couleur de marque, quel que soit
   le composant (utile quand le template impose sa propre couleur,
   ou quand la classe du conteneur est incertaine). */
.brand-header {
    background-color: var(--brand-component-header-bg);
    color: var(--brand-component-header-color);
}

/* DashboardLayout - cale sur les selecteurs REELS de fluent.css.
   .e-panel-header na pas de fond par defaut ; Fluent force sa
   couleur texte via un selecteur a 5 classes. On matche cette
   specificite + !important. Contenu du HeaderTemplate = 
   .e-header-content / .e-header-template. */
.e-dashboardlayout.e-control .e-panel .e-panel-header,
.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
    background-color: var(--brand-component-header-bg) !important;
    color: var(--brand-component-header-color) !important;
}
.e-dashboardlayout.e-control .e-panel .e-panel-header .e-header-content,
.e-dashboardlayout.e-control .e-panel .e-panel-header .e-header-template,
.e-dashboardlayout.e-control .e-panel .e-panel-header > * {
    color: var(--brand-component-header-color) !important;
}

/* Accordion - Fluent cible l-en-tete via .e-accordion .e-acrdn-item
   .e-acrdn-header (3 classes) + etats selected/hover. On matche au
   niveau item + !important pour couvrir tous les etats. */
.e-accordion .e-acrdn-item .e-acrdn-header {
    background-color: var(--brand-component-header-bg) !important;
    color: var(--brand-component-header-color) !important;
}
.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon,
.e-accordion .e-acrdn-item .e-acrdn-header .e-icons {
    color: var(--brand-component-header-color) !important;
}