/* feuille de route
- [x] style pour figcaption
- [x] style pour blockquotes
- [x] feuille de style dark mode
- [ ] bouton dark mode
- [ ] feuille de style pour mobile
*/

:root{
    --off-white: #FAF9F6;
    --taupe: #4c4542;
    --taupe-sombre: #37322f;
    --secondaire-cyan: #009192;
    --secondaire-bleu: #0070c0;
    --bleu-clair: #33aaff;
    --secondaire-mauve: #581c9e;
    --mauve-clair: #aa74e7;
    --accent-orange: #ff855d;
    --accent-rose: #fe4687;
}

body {
    background-color: var(--taupe-sombre);
    font-size: 1.2em;
    color: var(--off-white);
    font-family: 'Avenir Light', 'Avenir', 'Montserrat', 'Helvetica', sans-serif;
}

/* navigation */

.navbar {
    background-color: var(--bleu-clair);
    padding: 0.2em;
    margin: 0.2em;
    margin-bottom: 2em;
    display: flex;
    flex-wrap: wrap;
}

.navtab {
    color: var(--off-white);
    flex-grow: 1;
    flex: 1 1 160px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    padding: 0.5em;
    text-align: center;
}

.navtab a {
    color: var(--off-white);
    position: relative;
}

.navtab a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 20%;
  bottom: 0;
  left: 0;
  background-color: var(--off-white);
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s ease;
}

.navtab a:hover {
    color: var(--off-white);
}

.navbar a:hover::before {
  transform: scaleX(1);
}

.flechehaut img {
    position: fixed;
    bottom: 2%;
    left: 2%;
    height: 50px;
    width: 50px;
}

.darkmode {
    position: fixed;
    background-color: var(--off-white);
    margin: 5px;
    padding: 5px;
    border-radius: 50%;
    top: 4em;
    right: 2%;
    height: 35px;
    width: 35px;
}


/* corps du texte */

.cont {
    display: flex;
    flex-direction: row;
    height: 85vh;
    line-height: 175%;
}

.standalone {
    flex-basis: 70%;
    overflow-y: auto;
    width: 60%;
    padding-left: 20%;
    padding-right: 20%;
}

.gauche {
    flex-basis: 50%;
    overflow-y: auto;
    padding-left: 10%;
    padding-right: 10%;
}

.droite { 
    flex-basis: 50%; 
    padding: 5%; 
    overflow: hidden;
}

mark {
  --floating-background: var(--taupe-sombre);
  border-radius: 0;
  padding-bottom: 1px;
  background-image: linear-gradient(
    360deg,
    var(--accent-orange) 20%,
    var(--floating-background) 20%
  ) !important;
  color: var(--off-white);
}

.media {
    flex-grow: 1;
    flex-shrink: 1;
}

/* images et décoration */

img {
    width: 100%;
}

figcaption {
    color: var(--bleu-clair);
    text-align: center;
    font-size: 0.9em;
    line-height: normal;
}

blockquote {
    background: var(--taupe-sombre);
    border-left: 10px solid var(--secondaire-cyan);
    margin: 1.5em 10px;
    padding: 0.1em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

/* classes de texte */

h1 {
    color: var(--bleu-clair);
    font-family: 'Montserrat', 'Helvetica', sans-serif;
    text-align: center;
    font-variant-caps: small-caps;
}

h2, h3, h4, h5, h6 {
    color: var(--bleu-clair);
    font-family: 'Montserrat', 'Helvetica', sans-serif;
}

code {
    font-weight: bold;
    color: var(--secondaire-cyan)
}

/* liens hypertexte et abbr*/

a {
    color: var(--accent-rose);
    text-decoration: none;
}

a:active, a:hover {
    color: var(--mauve-clair);
}

/*
Source - https://stackoverflow.com/a/18818056
Posted by Dadou, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-06, License - CC BY-SA 3.0
*/

abbr {
    position: relative;
    cursor: help;
}

abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    border-radius: 10px;
    background: var(--taupe-sombre);
    color: var(--off-white);
    content: attr(title);
    line-height: normal;
    font-size: 0.8em;
}