@charset"utf-8";

@font-face {
    font-family: "Alegreya Sans";
    src: url("fonts/alegreyasans-regular-webfont.eot");
    src:
    url("fonts/alegreyasans-regular-webfont.woff") format("woff"),
    url("fonts/alegreyasans-regular-webfont.otf") format("opentype"),
    url("fonts/alegreyasans-regular-webfont.svg#filename") format("svg");
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "icon-lougitools";
    src: url("fonts/icon-lougitools.woff2") format("woff2"),
        url("fonts/icon-lougitools.woff") format("woff"),
        url("fonts/icon-lougitools.ttf") format("truetype"),
        url("fonts/icon-lougitools.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.icon, [class^="icon-"], [class*=" icon-"] {
    /* Use !important to prevent extensions from overriding this font. */
    font-family: "icon-lougitools" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
:root {
  /* Couleurs par défaut (mode clair) */
  --bg-color: #ffffff;
  --bg-hover-color: #dae6f7;
  --text-color: #333333;
  --bg-primary-color: #8596b2;
  --primary-color: #ffffff;
  --bg-secondary-color: #A9A9F5;
  --secondary-color: #666666;
  --bg-tertiary-color: #e0e0e0;
  --tertiary-color: #999999;
  --bg-quaternary-color: #f0f0f0;
  --quaternary-color: #999999;
  --bg-quinary-color: #f0f0f0;
  --quinary-color: #999999;
  --border-color: #dddddd;
  --color-icon: #bdc2c8;
  --color-icon-hover: #f1c40f;
  --font-primary: 'Roboto', Verdana, Geneva, sans-serif;
  --font-secondary: 'Alegreya Sans', Verdana, Geneva, sans-serif;
  --color-on:  #FFD700;
  --color-off: #bdc2c8;
  --color-active: #FFD700; /**doré */
  /*#FF9800 /** orange */
  --bg-mosaicheader-color: #f0f0f0;
  --bg-mosaiccontent-color: #ffffff;
  --bg-mosaicfooter-color: #f0f0f0;
}

/* Mode sombre */
[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
  --primary-color: #bb86fc;
  --secondary-color: #1e1e1e;
  --border-color: #444444;
}