/* Colors */

:root {
  --dark-red-flat: #bd1e1f;
  --dark-red-text: #bd1f20;
  --dark-red-hover: #9d0c11;
  --darker-red-text: #83090d; 
  --text: #333;
  --white-text: #fff;
  --text-dim: #888;
  --document-background: #efefef;
  --body-background: #fff;
  --body-shadow: 0 0 20px #ccc;
  --grey-line: .5px solid #333;
  --secondary-background: #f6f6f6;
  --image-outline: .5px solid #e7e7e7;

  @media (prefers-color-scheme: dark) {
    --dark-red-flat: #9d0c11;
    --dark-red-text: #bd1e1f;
    --dark-red-hover: #bd1f20;
    --darker-red-text: #9d0c11; 
    --text: #ddd;
    --white-text: #fff;
    --text-dim: #888;
    --document-background: #121212;
    --body-shadow: 0 0 20px #444;
    --body-background: #000;
    --grey-line: .5px solid #ddd;
    --secondary-background: #181818;
    --image-outline: .5px solid #ddd;
  }
}

:root {
  /*
   Responsive design (without media queries)
   We use wide margins when the viewport is larger than 1000px, and narrow margins when the viewport is narrower than 800px.
   Between 800px and 1000px, we use linear interpolation (lerp) for a smooth transition between the narrow and the wide designs.
   --clamped-width and --lerp-px change dynamically as the viewport width changes.
   --clamped-width is the viewport width, clamped between [800px, 1000px].
   --lerp-px is the same, scaled to the [0px, 1px] range.
     It is then used in actual css properties, e.g.: `padding-block-start: calc(16px + 32*var(--lerp-px));`
   
   See observeCssVariable to make more sense of it.
   
   Note: We need unitless values (raw numbers, not dimensions with px) to do our math. 
         This is why we have --narrow/--narrow-width and --wide/--wide-width.
         CSS does not (yet) support converting variables from a type to another.
   */
  --narrow: 800;  --narrow-width: calc(var(--narrow) * 1px);
  --wide: 1000;   --wide-width: calc(var(--wide) * 1px);
  
  --clamped-width: clamp(var(--narrow-width), 100vw, var(--wide-width));
  --lerp-px: calc((var(--clamped-width) - var(--narrow-width)) / (var(--wide) - var(--narrow)));
}

/* Fonts */

body {
  font-family: 'Source Sans 3 VF', Helvetica, sans-serif;
}

code {
  font-family: 'Source Code VF', monospace;
}

/* Typography */

body {
  font-size: 19px;
  line-height: 1.8;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  line-height: calc(1.3em + 10*var(--lerp-px));
  text-wrap: balance;
}

h1 {
  font-size: 1.8em;
  font-weight: 600;
}

h2 {
  font-size: 1.5em;
  font-weight: 600;
}

h3 {
  font-size: 1em;
  font-weight: 700;
}

ul {
  line-height: 1.2;
}

a {
  color: var(--dark-red-text);
  text-decoration: none;
}

a:focus, a:hover {
  color: var(--dark-red-hover);
}

/* Layout */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background: var(--document-background)
}

body {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding-inline: calc(16px + 80 * var(--lerp-px));

  color: var(--text);
  background: var(--body-background);
  border-block-start: 1.25em solid var(--dark-red-flat);
  box-shadow: var(--body-shadow);
}

footer {
  font-size: 0.9em;
  font-style: italic;
}

main section + section,
main article + article {
  margin-block-start: calc(16px + 48*var(--lerp-px));
  padding-block-start: calc(16px + 48*var(--lerp-px));
  border-block-start: var(--grey-line);
}

main section + section,
main article + article
dialog, 
header {
  h1, h2, h3 {
    &:first-child {
      margin-block-start: 0;
    }
  }
}

nav+main {
  margin-block-start: 2em;
}

main+footer {
  margin-block: 3em;
  padding-block-end: 3em;
}

p {
  margin: 0;
}

p + p {
  margin-block-start: 0.8em;
}

/* sanity */

[hidden] {
  display: none !important
}
/* navigation */

nav.navbar {
  padding-block-start: calc(16px + 32*var(--lerp-px));
  display: grid;
  justify-content: space-between;
  grid-template-areas: "home home" "logo items";
  grid-template-columns: 1fr auto;
}

.navbar__home {
  grid-area: home;
  white-space: nowrap;
}

.navbar__home {
  font-size: 1.3em;
  font-weight: 700;
  color: var(--text);
}

.navbar__logo {
  grid-area: logo;
  min-width: 100px;
  max-width: 200px;
  display: flex;
  flex-shrink: 1;
  padding-block-start: 15px; 
  margin-inline-end: 4em;
}

.navbar__logo img {
  width: 100%;
  filter: drop-shadow(0 3px 60px #ffffff78);
}

.navbar__items {
  grid-area: items;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: end;
  gap: .5em;
  padding-block-start: 30px;
}

.navbar__item {
  white-space: nowrap;
  background-color: var(--dark-red-flat);
  border-radius: .25em;
  padding: .2em .5em .3em;
  line-height: 1em;
  a {
    color: var(--white-text);
  }
}

/* Wrapped lists */

.wrapped-list-container {
  overflow-x: hidden; /* Hack to hide the first bullet (from `.wrapped-list-container ul li::before`) when the flex wraps on a new line */
}

.wrapped-list-container ul {
  text-wrap: balance;
  padding-inline-start: 0;
  margin-inline-start: -0.5em;
  li {
    display: inline-block;
    text-indent: -0.5em;
    margin-inline-start: 0.5em;
  }
  li::before {
    content: "·";
    margin-right: 0.25em;
  }
}

/* Generic elements */

main li {
  line-height: 1.6;
}

table {
  margin: 3em auto 4em auto;
}

th {
  font-weight: normal;
  color: var(--text-dim);
}

td {
  min-width: 10em;
  background-color: var(--secondary-background);
}

blockquote {
  border-inline-start: var(--grey-line);
  padding: 0.5em;
  background: var(--secondary-background);
}

blockquote cite {
  font-weight: 500;
}

blockquote cite::after {
  content: " :";
}

figure {
  margin-inline: auto;
  text-align: center;
  img {
    margin-block-end: 0;
  }
}

/* Home page */

section#clients a {
  color: var(--darker-red-text);
  &:focus, &:hover {
    color: var(--dark-red-text);
  }
}

/* Mentions Légales */

section#mentions-legales dt {
  color: var(--text-dim);
}

/* Articles list */

.articles-list__meta {
  margin-top: -8px;
  margin-bottom: 10px;
  font-style: italic;
}

.articles-list__title a:not(:hover) {
  color: inherit;
}

.articles-list__summary {
  font-size: 1em;
}

.articles-list__summary h1, .articles-list__summary h2 {
  font-size: 1.1em;
  margin-block: 1em;
}

.articles-list__summary img, .articles-list__summary video, .articles-list__summary iframe {
  max-width: 80%;
  display: block;
  margin-inline: auto
}

/* Individual article */

.article__meta {
  margin-top: -1.4em;
  margin-bottom: 3em;
  font-style: italic;
}

article.article img, article.article video, article.preview iframe {
  max-inline-size: 100%;
  display: block;
  margin: 1em auto;
  outline: var(--image-outline);
}

article figcaption {
  font-style: italic;
}

/* Syntax-highlighted code blocks */

.highlight pre {
  padding: 4px 6px;
  font-size: 0.9em;
  overflow-x: auto;
  code {
    font-size: 1em;
  }
}

code {
  font-size: 0.9em;
}

/* Qui sommes-nous */

.hero {
  margin-block: 2em;
}

article.article .hero img {
  display: block;
  max-inline-size: min(700px, 100%);
  margin-inline: auto;
}

.bios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1em;
  justify-content: center;
}

#old>.bios .bio img {
  filter: grayscale(60%);
}

.bio {
  padding: .5em .8em;
  border: var(--image-outline);
  background-color: var(--secondary-background);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: .5em;
  
  .bio__name {
    margin-block: 0;
    font-size: 1.12em;
  }

  .bio__pic {
    height: 90px;
    border-radius: .2em;
    border: var(--image-outline)
  }
  
  p {
    font-size: .8em;
    line-height: 1.3;
  }
  
  .bio__desc {
    margin-block: auto 0;
    align-self: stretch;
    padding-block-start: .5em;
    &:not(:empty) {
      border-block-start: var(--grey-line);
    }
    display: flex;
    align-items: center;
    gap: 0.5em;
    line-height: 1;
    a {
      color: var(--text);
      &:hover {
        color: var(--dark-red-text);
      }
    }
  }
}

/* Icons
 * Mostly extracted from https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
 */

.icon {
  width: .75em;
  height: .75em;
}