site.less

// ===========================
// STYLES DE LA MAQUETTE NOVA
// /!\ Ce fichier ne devrait jamais être modifié directement. Les styles et variables personnalisés doivent être déclarés dans le fichier less/custom.less.
// ===========================

// Includes
@import "inc/lodel.less";
@import "inc/mixins.less";
@import "inc/vars.less";

// Chemin relatif des dossiers
// Utiliser une variable permet d'ajuster le chemin quand on utilise LESS browser.
@publicDir: "..";
@webfontsDir: "../fonts";

// BASE
// ====

html {
  font-size: 62.5%; // https://snook.ca/archives/html_and_css/font-size-with-rem
  font-family: @font-default;
  scroll-behavior: smooth;
}

body {
  font-family: @font-default;
  background-color: @color-global-bg;
  position: relative;
  .font-size(m);
}

hr {
  border-top: 1px solid @color-grey-l4;
  margin: 3rem 0;
}

a {
  color: @color-link;
  transition: .2s color linear;
}

a:hover {
  color: @color-link-hover;
}

img {
  max-width: 100%;
}

// Reset Bootstrap styles for focus
.form-control:focus, .btn.focus, .btn:focus {
  outline: auto;
  box-shadow: none;
}

// LODEL FIX
// =========

// Fix position:absolute children in lodel-container
#lodel-container {
  position: relative;
}

// UTILS & COMPONENTS
// ==================

// Styles de bouton
.button {
  color: @color-link;
  background-color: @color-grey-l2;
  padding: .5rem 1rem;
  border-radius: @radius-button;
  cursor: pointer;
  transition: .2s all linear;
  border: 1px solid transparent;
  text-decoration: none;

  &:hover, &:focus {
    color: @color-link-dark;
    background-color: @color-grey-l3;
    text-decoration: none;
    border: 1px solid @color-link;
  }
}

.button-back-container {
  border-top: 1px solid @color-border;
  margin-top: 4rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.button-back, .button-back:hover {
  color: @color-grey-d4;
}

// Sections headers
.section-header-container {
  font-family: @font-section-headers;
  color: @color-grey-d4;
  border-bottom: 4px solid @color-border;
  .font-size(s);
  margin-top: 4rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

.main-content > .section-header-container:first-child {
  margin-top: 0;
}

.section-header {
  text-transform: uppercase;
  padding-bottom: .4rem;
  margin: 0;
  margin-top: .3rem;
  .font-size(xl);
}

.nav-tabs {
  border-color: @color-border;
  font-family: @font-default;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  border-color: @color-border @color-border #fff;
}

.nav-tabs .nav-link:hover {
  text-decoration: underline;
}

.tab-content {
  padding-top: 1rem;
  border: none;
}

.tab-content--count-1 {
  padding: 0;
  border: none;
  margin: 2rem 0;
}

// Tabs included in section-header
.section-header-container .nav-tabs {
  border: none;
  padding-top: .3rem;
}

.section-header-container .nav-link {
  padding: .3rem .8rem;
}

.section-header-container .nav-tabs .nav-link.active {
  background-color: transparent;
  border-bottom: none;
}

.section-header-container + .tab-content {
  padding: 0;
  border: 0;
}

.link-is-url {
  overflow-wrap: anywhere;
}

.icon--src, .icon--inline svg {
  width: 16px;
  height: 16px;
}

// Nav entities / ariane
.nav-entities {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
}

.nav-entities--top {
  border-bottom: 1px solid @color-border;
  margin-top: -3rem;
  margin-bottom: 3rem;
}

.nav-entities--bottom {
  border-top: 1px solid @color-border;
  margin-top: 6rem;
  margin-bottom: -3rem;
}

.nav-entities-col-parent {
  flex-grow: 1;
  margin-top: 0.1rem;
}

.ariane__list {
  margin: 0;
  padding: 0;
  background-color: transparent;
  display: block;
}

.ariane__item {
  padding-right: .2rem;
  display: inline;
}

.ariane__item + .ariane__item, .ariane__item:last-child {
  padding: 0;
}


.ariane__item a {
  color: @color-grey-d4;
}

.ariane__item + .ariane__item::before {
  content: none;
}

.ariane__item:not(:last-child)::after {
  color: @color-grey-d5;
  content: " >";
}

.nav-entities-col-siblings {
  text-align: right;
  white-space: nowrap;
  margin-left: .5rem;
}

.nav-entities .row {
  align-items: baseline;
}

.nav-entities .icon--inline svg {
  stroke: @color-grey-d5;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: .2s background-color linear, .2s filter linear;

  &:hover {
    background-color: @color-grey-d4;
    stroke: @color-white;
  }
}

.btn--previous svg {
  padding-right: 1px;
}

.btn--next svg {
  padding-left: 1px;
}

// Pagination
.pagination {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.page-item .page-link {
  color: @color-accent;
}

.page-item:not(.active) .page-link:hover {
  color: @color-accent-dark;
}

.page-item.active .page-link {
  background-color: @color-accent;
  border-color: @color-accent;

  &:hover {
    background-color: @color-accent-dark;
  border-color: @color-accent-dark;
  }
}

// Page shortcuts
.page-shortcuts {
  line-height: 1.5;
  margin: 2rem 0;
}

.page-shortcuts__item {
  display: inline-block;
  margin-right: 1rem;

  &::after {
    content: "|";
    display: inline-block;
    margin-left: 1rem;
    color: @color-border;
  }
}

.page-shortcuts__item.active a {
  color: @color-grey-d1;
  font-weight: bold;
}

.page-shortcuts__item:last-child::after {
  content: none;
}

// Dot shortcuts
.dot-shortcuts-placeholder {
  display: none;
}

@media (min-width: 600px) and (min-height: 500px) and (hover: hover) {
  .dot-shortcuts-placeholder {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
  }

  // Mac scroll bar width is 16px
  .dot-shortcuts-placeholder.is-mac {
    right: 16px;
  }

  .dot-shortcuts-container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 40px;
  }

  .dot-shortcut {
    position: absolute;
    right: 10px;
    opacity: 0;
    transition: background-color .2s linear, opacity .4s ease-in;
  }

  .dot-shortcut-tooltip {
    .font-size(s);
    white-space: nowrap;
  }

  @supports (position: sticky) or (position: -webkit-sticky) {
    .dot-shortcuts-container {
      position: -webkit-sticky;
      position: sticky;
    }
  }

  .dot-shortcut--top {
    height : 0;
    width : 0;
    border-right : 5px solid transparent;
    border-bottom : 9px solid @color-dot-shortcut;
    border-left : 5px solid transparent;
  }

  .dot-shortcut--top:hover {
    border-bottom-color: @color-dot-shortcut-hover;
  }

  .dot-shortcut--section {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: @color-dot-shortcut;
  }

  .dot-shortcut--section:hover {
    background-color: @color-dot-shortcut-hover;
  }

  .dot-shortcuts-container:hover .dot-shortcut, .dot-shortcuts-container.visible .dot-shortcut {
    opacity: 1;
  }
}

// Flèches des boutons
// Ex: "« Retour à l'index"
.arrow-before {
  &::before {
    content: "«\00a0"; // «

    @supports (content: "x" / "y") {
      content: "«\00a0" / ""; // «
    }
  }
}

// Ex: "Sommaire du numéro »"
.arrow-after {
  &::after {
    content: "\00a0»"; // »

    @supports (content: "x" / "y") {
      content: "\00a0»" / ""; // »
    }
  }
}

// Ex: "Commander ce numéro 🡕"
.arrow-external {
  &::after {
    content: url("@{publicDir}/icons/external-link.svg");
    display: inline-block;
    margin-left: .5ch;
  }
}

// LAYOUT
// ======

.main-header, .main-menu-container, .main-content, .main-aside, .main-footer {
  padding: 4rem 3rem;
}

@media (min-width: @screen-xl) {
  .topbar, .main-header, .main-container, .main-footer {
    max-width: @layout-max-width;
  }

  .main-content {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

// SKIP TO CONTENT LINKS
// =====================

.skip-links {
  background: @color-grey-d3;
  font-weight: bold;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  padding: 1rem;
  position: absolute;
  transform: translateX(-100%);
}

.skip-links:focus-within {
  transform: translateY(0%);
}

.skip-links a {
  color: @color-white;
  padding: .3rem .6rem;
  border: 1.5px dotted transparent;
}

.skip-links a + a {
  margin-left: 1rem;
}

.skip-links a:hover {
  color: @color-link-contrast;
  text-decoration: underline;
}

.skip-links a:focus {
  border-color: @color-link-contrast;
}

// TOPBAR
// ======

.topbar {
  padding: 1rem 0;
}

.topbar a:not(.dropdown-item) {
  color: @color-topbar-link;

  &:hover, &:focus {
    color: @color-topbar-link-hover;
  }
}

.topbar a:hover, .topbar a:focus {
  text-decoration: underline;
  background-color: transparent;
}

.topbar .dropdown-item {
  color: @color-link;

  &:hover, &:focus {
    color: @color-link-hover;
  }
}

.dropdown-item.disabled, .dropdown-item:disabled {
  color: @color-grey-d5;
}

.topbar .navbar-nav {
  margin-left: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar .nav-item {
  margin: .5rem 0;
  padding: 0 1rem;
  border-right: 1px solid @color-border;
}

.topbar .nav-item:last-child {
  border: none;
}

.topbar when (@topbar-brand-position = left) {
  @media (min-width: @screen-md) {
    .navbar-nav {
      width: 100%;
    }

    .brand-item {
      border: none;
      margin-right: auto;
    }
  }
}

.brand-logo {
  max-height: 24px;
  opacity: .8;
  transition: opacity linear .2s;
  margin-right: 1rem;
}

.brand-name {
  display: inline-block;
  transition: color linear .2s;
}

.brand-link:hover, .brand-link:focus {
  .brand-logo {
    opacity: 1;
  }

  .brand-name {
    text-decoration: underline;
    color: @color-topbar-link-hover;
  }
}

.brand-link--has-image when (@topbar-brand-reveal = true) {
  @media (min-width: @screen-md) {
    display: flex;
    align-items: stretch;

    .brand-name {
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: max-width .2s linear;
    }

    &:hover, &:focus {
      .brand-name {
        max-width: 100%;
      }
    }
  }
}

.topbar .nav-link {
  line-height: 1.2;
  padding: .2rem 1rem;
}

.topbar .dropdown-menu {
  position: absolute;
  .font-size(m);
  border: 1px solid @color-border;
  border-radius: 0;
  margin-top: 1rem;
}

.topbar-icon {
  border-bottom: 1px solid transparent;
}

.topbar a:hover .topbar-icon {
  border-bottom-color: @color-topbar-link-hover;
}

.topbar-icon--src {
  opacity: .6;
  padding-bottom: 3px;
  box-sizing: content-box;
}

.topbar-icon--src:hover {
  opacity: 1;
}

.topbar-icon--src, .topbar-icon--inline svg {
  max-width: 16px;
  max-height: 16px;
}

.topbar-icon--inline svg {
  stroke: @color-topbar-link;
  margin-top: -5px;
}

.topbar-icon--inline:hover svg {
  stroke: @color-topbar-link-hover;
}

// HAMBURGER MENU
// ==============

.main-menu-toggler {
  color: @color-topbar-link;
  border: 1.5px solid @color-border;
  border-radius: 2px;
  padding: 2px;
  transition: border-color .3s linear;
}

.main-menu-toggler .icon--inline svg {
  width: 32px;
  height: 32px;
  stroke: @color-topbar-link;
  transition: stroke .3s linear;
}

.main-menu-toggler:hover {
  color: @color-topbar-link-hover;
  border-color: @color-topbar-link-hover;

  svg {
    stroke: @color-topbar-link-hover;
  }
}

@media (max-width: @screen-md) {
  .topbar .navbar-nav, .main-menu-container {
    display: none;
  }

  body.menu-visible .main-menu-toggler {
    background-color: @color-menu-bg;
    border-color: @color-menu-bg;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    svg {
      stroke: @color-menu;
    }

    .main-menu-toggler__title {
      color: @color-menu;
    }
  }


  body.menu-visible .topbar {
    padding-bottom: 0;
  }

  body.menu-visible .topbar .navbar-nav {
    background-color: @color-menu-bg;
    display: flex;
    margin: 0;
    width: 100%;
    padding: 3rem 1rem;
    justify-content: flex-start;
  }

  body.menu-visible .brand-name, body.menu-visible .topbar a:not(.dropdown-item) {
    color: @color-menu-link;

    &:hover, &:focus {
      color: @color-menu-link-hover;
    }
  }

  body.menu-visible .topbar-icon--inline svg {
    stroke: @color-menu-link;

    &:hover, &:focus {
      stroke: @color-menu-link-hover;
    }
  }

  body.menu-visible a:hover .topbar-icon {
    border-bottom-color: @color-menu-link-hover;
  }

  body.menu-visible .main-menu-container {
    display: block;
    padding-bottom: 2rem;
  }

  body.menu-visible .main-header {
    display: none;
  }

  body.menu-visible .main-menu__logos {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: @screen-sm) {
  .main-menu-toggler {
    margin-left: 2rem;
  }
}

// MAIN HEADER
// ===========

.main-header {
  background-color: @color-header-bg;
  color: @color-header;
}

.main-header a {
  color: @color-header;
}

.site-logo-container {
  font-family: @font-header;
  text-align: center;
}

.site-title--text {
  .font-size(xxxl);
  margin-bottom: 0;
}

.site-title--image a {
  display: inline-block;

  &:hover, &:focus {
    opacity: .8;
  }
}

.site-logo {
  max-height: 150px;
}

// MAIN CONTAINER
// ==============

.main-container {
  background-color: @color-main-bg;
  color: @color-main;
}

// MAIN MENU
// =========

.main-menu-container {
  font-family: @font-menu;
  background-color: @color-menu-bg;
  color: @color-menu;
  padding-top: 0;
}

.main-menu-container a {
  color: @color-menu-link;
}

.main-menu-container a:hover {
  color: @color-menu-link-hover;
}

.search-form .form-control {
  .font-size(m);
  border-top-left-radius: @radius-search-form;
  border-bottom-left-radius: @radius-search-form;
  border: none;
}

.search-form .btn {
  border-top-right-radius: @radius-search-form !important;
  border-bottom-right-radius: @radius-search-form !important;
  background-color: @color-search-button-background;
  border: 2px solid @color-search-button-background;
  transition: background-color linear .2s, border-color .3s;
}

.search-form .btn .icon svg {
  width: 20px;
  height: 20px;
  stroke: @color-search-button;
  transition: stroke .3s;
}

.search-form .btn:hover {
  border-color: @color-search-button-hover;
  background-color: @color-search-button-hover-background;
}

.main-menu__section:not(:first-child) {
  margin-top: 3rem;
}

.main-menu__section-title {
  .font-size(l);
  margin-bottom: .8rem;
}

.main-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu__item {
  line-height: 1.3;
}

.main-menu__item--issue {
  margin-top: 1rem;
}

.main-menu__item .publi-number {
  font-weight: bold;
}

.link-to-issues {
  display: inline-block;
  border-top: 1px solid @color-grey-d5;
  margin-top: 2rem;
  padding-top: 1rem;
}

// LOGOS PARTENAIRES
// =================

.main-menu__section.main-menu__section--partenaires {
  margin-top: 4rem;
}

.main-menu__logos {
  list-style-type: none;
  padding: 0;
}

.main-menu__logo {
  margin: 0;
}

.main-menu__logo-image {
  max-width: 90px;
  max-height: 60px;
  transition: opacity .2s linear;
}

.main-menu__logo-image:hover {
  opacity: .8;
}

@media (min-width: @screen-md) {
  .main-menu__section.main-menu__section--partenaires {
    margin-top: 6rem;
  }

  .main-menu__logo {
    margin: 4rem 0;
  }

  .main-menu__logo-image {
    max-width: 140px;
    max-height: 100px;
    display: block;
    margin: 0 auto;
  }
}

// MAIN ASIDE
// ==========

.main-aside {
  background-color: @color-side-bg;
  color: @color-side;
  padding: 0 3rem 4rem 3rem;
  padding-top: 0;
  margin-top: -3rem;
}

.main-aside .side__section:first-child .section-header-container {
  margin-top: 0;
}

.main-aside ul {
  list-style-type: none;
  padding: 0;
}

.side-actualites-section__item {
  margin: 1rem 0;
  line-height: 1.3;
}

.side-rss-item {
  margin-bottom: 2.5rem;
}

.side-rss-item__title {
  color: @color-black;
  font-weight: bold;
  margin-top: 1rem;
}

.side-rss-item__entry {
  margin-top: 1rem;
  line-height: 1.3;
}

.side-rss-item__link {
  display: inline-block;
  line-height: 1.3;
  margin-top: 2rem;
  border-top: 1px solid @color-grey-d5;
  padding-top: 1rem;
}

.lien-rss__list {
  padding-left: 1.5rem;
}

.lien-rss__list li {
  margin-bottom: 1.5rem;
}

.link-rss__description {
  margin: 0;
}

.side-twitter__container iframe {
  min-width: 0 !important;
}

.side-twitter__message {
  .font-size(1.4);
  color: @color-grey-d4;
  line-height: 1.2;
}

.twitter-error,
.side-twitter__message.error .twitter-loading {
  display: none;
}

.side-twitter__message.error .twitter-error {
  display: block;
}

.side-twitter__link {
  display: block;
  line-height: 1.3;
  margin-top: 1rem;
}

.twitter-loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(10, end) 900ms infinite;
  animation: ellipsis steps(10, end) 900ms infinite;
  content: "\2026"; // …
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 30px;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 30px;
  }
}

@media (min-width: @screen-lg) {
  .main-aside {
    padding: 4rem 3rem;
    margin-top: 0;
    border-left: 1px solid @color-border;
  }

  .side-twitter__container {
    margin: 1rem -1rem;
  }
}

// MAIN FOOTER
// ===========

.main-footer {
  font-family: @font-footer;
  background-color: @color-footer-bg;
  color: @color-footer;
  text-align: center;
}

.main-footer__list {
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
}

.main-footer__item {
  display: inline-block;
}

.main-footer__item + .main-footer__item::before {
  content: "\2022"; // •
  display: inline-block;
  margin: 0 1rem;
  color: @color-footer;

  @supports (content: "x" / "y") {
    content: "\2022" / ""; // •
  }
}

.main-footer__link {
  color: @color-footer-link;

  &:hover, &:active, &:focus {
    color: @color-footer-link-hover;
  }
}

// HOME
// ====

.home-billets {
  .font-size(l);
  border-bottom: 1px solid @color-border;
}

.home-billet {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  font-family: @font-billet;
}

.home-billet__titre {
  .section-header-container;
  .section-header;
  margin-bottom: 2rem;
  padding-top: 0;
}

.home-billet__accroche {
  max-width: 50%;
  float: left;
  clear: left;
  padding: 0 2rem .5rem 0;
  margin: .5rem auto 0 auto !important;
  opacity: 1 !important;
}

.home-latest-issue {
  margin-top: 3rem;

  &:first-child {
    margin-top: 0;
  }
}

.home-latest-issue + .home-rubriques {
  border-top: 1px solid @color-border;
  margin-top: 6rem;
  padding-top: 3rem;
}

.home-rubriques__title {
  .main-title();
}

.home-rubrique {
  margin: 4rem 0;
}

// PUBLICATION
// ===========

.publi__accroche {
  min-width: 100px;
  text-align: center;
}

.publi__accroche a {
  color: @color-grey-d4;
}

.accroche__img {
  border: 1px solid @color-border;
  max-height: 300px;
  display: block;
  margin: 0 auto;
}

.accroche__credits {
  .font-size(s);
  margin-top: 1rem;
  color: @color-grey-d4;
}

@media (min-width: @screen-sm) {
  .publi__accroche {
    text-align: left;
  }

  .accroche__img {
    margin: 0;
  }
}

.main-title .publi-number {
  font-size: 60%;
}

.publi-number + .publi-title-text {
  display: block;
}

.publi__altertitles {
  margin-bottom: 2rem;
}

.publi__introduction {
  margin-top: 4rem;
}

.publi__descriptionouvrage, .publi__isbn {
  color: @color-grey-d4;
}

.publi__urlpublicationediteur {
  margin: 2rem 0;
}

.toc--publi, .toc--entry {
  margin-top: 4rem;
}

.toc__contents {
  list-style: none;
  margin-top: 2rem;
  padding: 0;
}

.toc__contents .toc__contents {
  margin: 0;
}

.toc__li {
  margin: 2rem 0;
}

.toc__li p {
  margin: 0;
}

.toc--publi .toc__li--class-publications {
  margin: 3rem 0;
  padding-left: 2rem;
  border-left: 4px solid @color-border;
}

.toc__link.translation .toc__title[lang] {
  .lang();
}

.toc__author {
  font-weight: bold;
}

.toc__subtitle {
  color: @color-grey-d4;
}

.toc__altertitles, .toc__publi-altertitles {
  margin-top: .5rem;
  color: @color-grey-d5;
  font-size: 90%;
}

.toc__vignette {
  width: 200px;
  margin: .5rem 0;
}

.toc__additional-info {
  color: @color-grey-d4;
}

.toc__datepubli {
  color: @color-grey-d4;
}

.toc__header .nav-tabs {
  margin-top: 2rem;
}

.toc__publi-title {
  font-size: 2rem;
}

.toc__publi-subtitle {
  margin-bottom: .5rem;
}

.toc__object {
  margin: .5rem 0;
  max-width: 600px;
}

// STYLES GENERIQUES DE TEXTE
// ==========================

.main-title {
  font-family: @font-doc-title;
  .font-size(xxxl);
  margin-bottom: 2rem;
}

.main-subtitle {
  font-family: @font-doc-title;
  .font-size(l);
}

.main-title + .main-subtitle {
  margin-top: -.5rem;
  margin-bottom: 2rem;
}

.main-title a {
  color: inherit;
}

.altertitles {
  line-height: 125%;
  font-style: italic;
  color: @color-grey-d4;
  font-family: @font-doc-title;
  list-style: none;
  padding: 0;
}

.altertitle {
  .lang();
  margin-bottom: .5rem;
}

.altertitle em, .altertitle i {
  font-style: normal;
}

.accroche {
  position: relative;
  font-weight: normal;
  margin: 2rem auto;
  transition: opacity .2s linear;
}

.accroche:hover {
  opacity: .8;
}

// Soulignement des liens dans les textes longs
.tab-content, .home-billet, .article__abstract, .article__errata, .article__dedication, .article__ndlr, .article__ndla, .article__chapo, .article__text, .article__biblio, .article__appendix, .article__footnotes, .article__endnotes, .illustrations, .article__quotation, .article__license, .publi__introduction, .publi__ndlr, .publi__descriptionouvrage, .image__caption, .image__description, .image__credits, .lien__text {
  & when (@text-underline-links = true) {
    p a:not(.footnotecall, .endnotecall, .FootnoteSymbol, .EndnoteSymbol) {
      text-decoration: underline;

      &:hover {
        text-decoration: none;
      }
    }
  }
}

// ARTICLE HEADER AND ACCROCHE
// ===========================

.article__number {
  color: @color-grey-d4;
  .font-size(xxl);
  margin-bottom: .8rem;
  font-family: @font-doc-title;
}

.article__subhead {
  color: @color-grey-d4;
  font-family: @font-doc-title;
  font-variant: small-caps;
  line-height: 125%;
  margin-bottom: .8rem;
}

.article__subtitle {
  line-height: 120%;
}

.article__header .article__datepubli {
  color: @color-grey-d4;
}

.article__author {
  margin: 2rem 0;
}

.article__author + .article__author {
  margin-top: -2rem;
}

.article__author span {
  font-weight: bold;
}

.article__translations {
  padding: 2rem 3rem;
  border: 1px solid @color-border;
  margin: 2rem 0;
}

.article__translations dt {
  font-weight: normal;
  font-family: @font-section-headers;
  color: @color-grey-d4;
  text-transform: uppercase;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.article__translations dt:first-child {
  margin-top: 0;
}

.translations__title {
  .lang();
}

.article__reference {
  margin-top: 2rem;
  color: @color-grey-d3;
}

.article__reference-title {
  .font-size(m);
  font-weight: bold;
}

.article__accroche {
  display: block;
  width: 200px;
  max-width: 100%;
  margin: 1.6rem 2rem 2rem 0;
  border: 1px solid @color-border;
  float: left;
  clear: left;
  position: relative;
  z-index: 8;
  transition: border-color .3s linear;
}

.article__accroche:hover {
  border-color: @color-grey-d4;
}

.article__info-bm {
  margin: 2rem 0;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  background-color: @color-grey-l2;
}

// ARTICLE BUTTONS
// ===============

.document-buttons {
  display: block;
  margin: 0 0 1.5rem 0;
  padding: 0 1.5rem 3rem 0;
  border-top: none;
  border-bottom: 1px solid @color-border;
}

.document-buttons-group + .document-buttons-group, .document-button--text + .document-button--text {
  margin-top: 1rem;
}

.document-buttons a {
  color: @color-grey-d4;
  transition: color .15s linear;
  margin-right: 1rem;
}

.document-buttons a:last-child {
  margin-right: 0;
}

.document-buttons a:hover {
  color: @color-grey-d1;
}

.document-buttons__partage {
  display: flex;
  justify-content: space-start;
}

.document-buttons__partage .icon {
  width: 20px;
  height: 20px;
  border-bottom: 1px solid transparent;
  padding-bottom: .2rem;
  box-sizing: content-box;

  svg {
    stroke: @color-grey-d4;
    transition: stroke .3s ease;
  }

  &:hover {
    border-bottom-color: @color-grey-d1;

    svg {
      stroke: @color-grey-d1;
    }
  }
}

.document-button--text {
  display: block;
}

@media (min-width: @screen-sm) and (max-width: @screen-lg) {
  .document-buttons {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2rem;
    padding: 0;
    border: none;
  }

  .document-buttons-group {
    padding-right: 2rem;
    margin-right: 2rem;
    border-right: 1px solid @color-border;
  }

  .document-buttons-group + .document-buttons-group, .document-button--text + .document-button--text {
    margin-top: 0;
  }

  .document-buttons-group:last-child {
    border-right: none;
  }
}

@media (min-width: @screen-lg) {
  .document-buttons {
    padding-left: 1.5rem;
  }
}

// ABSTRACTS AND KEYWORDS
// ======================

.article__abstracts .tab-pane > :not(:first-child) {
  margin-top: 3rem;
}

.article__abstract {
  color: @color-grey-d3;
}

.article__abstract .tab-content {
  font-family: @font-abstract;
}

.article__index {
  color: @color-grey-d3;
}

.entries-type {
  margin-top: 1rem;
}

.entry {
  font-family: @font-keyword;
}

// ADDENDUM
// ========

.article__errata-contents, .article__dedication-contents, .article__ndlr-contents, .article__ndla-contents {
  font-family: @font-text;
  .font-size(text);
  color: @color-grey-d3;
}

// ARTICLE TOC
// ===========

.article__toc-contents {
  font-family: @font-outline;
}

.article__toc-contents > ul  {
  padding-left: 0;
}

.article__toc-contents li {
  list-style: none;
}

// ARTICLE INTERTITRES
// ===================

.article__text-contents, .article__appendix-contents, .article__biblio-contents, .article__footnotes-contents, .article__endnotes-contents {
  each(range(6), {
    @next-level: (@value + 1);
    h@{value} {
      @arg: ~"h@{value}";
      .font-size(@arg);
      font-family: @font-doc-headings;
      color: @color-doc-headings;
      margin-top: 4rem;

      & + h@{next-level} {
        margin-top: @p-margin-top;
      }

      &:first-child {
        margin-top: 0;
      }
    }
  });
}

.article__text-contents {
  each(range(6), {
    h@{value} {
      a {
        position: relative;
        color: @color-doc-headings-links;

        // Top arrow on :hover
        &:not(.footnotecall, .endnotecall)::before {
          content: url("@{publicDir}/icons/arrow-up.svg");
          position: absolute;
          left: -(@numbered-left-padding - 5);
          top: 25%; // legacy browsers
          top: calc(50% - 1ch);
          .font-size(m);
          line-height: 1;
          color: @color-doc-headings-links-hover;
          font-family: @font-default;
          opacity: 0;
          transition: .2s opacity linear;
        }

        &:hover, &:focus {
          color: @color-doc-headings-links-hover;

          &::before {
            opacity: 1;
          }
        }
      }
    }
  });
}

// ARTICLE MAIN CONTENTS
// =====================

.article__text-contents {
  display: block;
  font-family: @font-text;
  line-height: @text-line-height;
  margin-top: 2rem;
  .font-size(text);
}

body:not(.type-informations):not(.type-actualite) .article__text-contents {
  .numbered();
}

// Default margin-top
.annexe, .bibliographie, p.citation, p.citationbis, p.citationter, .code, .crditsillustration, .creditillustration, .encadre, .epigraphe, .latex, .legendeillustration, .mathlatex, .mathml, .media-description, .media-credits, .media-legende, .media-titre, .media-urlaccesmedia, .notefin, .notesbaspage, .paragraphesansretrait, .question, .remerciements, .reponse, .separateur, .texte, .titreillustration {
  margin-top: @p-margin-top;
}

// Justification
p.remerciements, p.texte, p.paragraphesansretrait, p.epigraphe, p.question, p.reponse, p.encadre, p.annexe, p.legendeillustration, p.creditillustration, p.crditsillustration, p.notesbaspage, p.notefin, p.media-description, p.media-credits, p.media-legende {
  text-align: @default-align;
}

.chapo {
  font-weight: bold;
  line-height: @text-line-height;
  font-size: .95em;
  margin-bottom: 4rem;
}

.remerciements {
  line-height: @text-line-height;
  font-style: italic;
  font-size: .95em;
  margin-bottom: 4rem;
}

.remerciements em, .remerciements i {
  font-style: normal;
}

.epigraphe {
  width: 70%;
  margin: 2rem 0 2rem auto;
  break-after: avoid;
  font-size: .95em;
}

ul.texte, ol.texte {
  font-size: .95em;
  margin-top: 2rem;
  margin-bottom: 3rem;
  text-align: left;
}

ul.texte li, ol.texte li {
  margin-top: 1rem;
}


ul.texte p, ol.texte p {
  margin: 0;
}

ul.texte li::marker, ol.texte li::marker {
  color: @color-grey-d5;
}

ul.texte *, ol.texte * {
  text-align: left;
  list-style-position: outside;
}

blockquote {
  border: none;
  padding: 0;
  margin: 0;
}

blockquote + blockquote {
  margin-top: -3rem;
}

p.citation, p.citationbis, p.citationter {
  color: @color-grey-d4;
  border-width: 0;
  border-left-width: 6px;
  border-color: @color-border;
  border-style: solid;
  margin: 3rem 0 3rem 0;
  padding: .8rem 3rem .8rem 3rem;
  font-size: .95em;
  line-height: @text-line-height;
}

p.citationbis {
  border-style: dotted;
}

p.citationter {
  border-style: double;
}

.encadre {
  background-color: @color-grey-l2;
  padding: 3rem;
  margin-top: 4rem;
}

.encadre + * {
  margin-top: 4rem;
  padding-top: 0;
}

.encadre + .encadre {
  margin-top: -1rem;
}

.separateur {
  text-align: center;
  font-size: 1.25em;
  color: @color-grey-d5;
  line-height: 150%;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.question {
  color: @color-grey-d4;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: .3rem;
}

.question, h1, h2, h3, h4, h5, h6 {
  & + .question {
    margin-top: @p-margin-top;
  }
}

.reponse {
  color: @color-grey-d4;
}

.code, pre, code {
  font-family: @font-mono;
  line-height: 130%;
  font-size: .85em;
  text-align: left;
  background-color: @color-grey-d1;
  color: @color-grey-l1;
  padding: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-radius: 1.2rem;
  hyphens: none;
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
}

table.texte {
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  break-inside: avoid;
  font-size: .8em;
  line-height: 125%;
}

table.texte p {
  padding: 0;
  text-align: left;
  margin: .2rem 0;
}

table.texte td {
  vertical-align: top;
  padding: .3rem;
}

.titreillustration, .legendeillustration, .creditillustration, .media-titre, .media-description, .media-credits, .media-legende, .media-urlaccesmedia {
  break-inside: avoid;
  text-align: left;
  line-height: 130%;
  font-size: .85em;
  font-family: @font-captions;
}

.titreillustration, .media-titre {
  margin-top: 3rem;
  margin-bottom: 0;
  break-after: avoid;
  font-weight: bold;
}

:not(.largetable-scroller) > table.texte, .largetable:not(.largetable-maximized), .imageillustration, .texte img, .doc-media-contents {
  margin: 3rem 0;
}

.titreillustration + table.texte, .titreillustration + .largetable:not(.largetable-maximized), .titreillustration + .imageillustration, .media-titre + .doc-media-contents {
  margin-top: 1rem;
}

.largetable:not(.largetable-maximized) + .largetable:not(.largetable-maximized) {
  margin-top: -3rem;
}

.legendeillustration, .creditillustration, .media-description, .media-credits, .media-legende, .media-urlaccesmedia {
  margin-top: -2rem;
  margin-bottom: 3rem;
}

.legendeillustration + .legendeillustration, .legendeillustration + .creditillustration, figcaption + .creditillustration, .creditillustration + .creditillustration, .doc-media > :not(.media-titre, .doc-media-contents) + * {
  margin-top: -2.5rem;
}

.creditillustration, .media-credits {
  color: @color-grey-d4;
}

.groupe-illustration--small .imageillustration {
  text-align: center;
}

.groupe-illustration--small .imageillustration img {
  display: inline;
}

.footnotecall, .endnotecall {
  font-family: @font-notecall;
  margin-left: .2em;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  & when not (@notecall-brackets = true) {
    font-size: .8em;
    vertical-align: super;
    line-height: 0;
  }

  & when (@notecall-brackets = true) {
    .note-brackets();
  }
}


// APPENDIX
// ========

.article__appendix-contents {
  display: block;
  font-family: @font-text;
  line-height: @text-line-height;
  margin-top: 2rem;
  .font-size(appendix);
}

// ARTICLE BIBLIOGRAPHY
// ====================

.article__biblio-contents {
  font-family: @font-text;
  line-height: @text-line-height;
  display: block;
  text-align: left;
  .font-size(biblio);
}

@media (min-width : @screen-sm) {
  .article__biblio-contents {
    columns: 2;
    column-gap: 2rem;
  }
}

.article__biblio-contents p:first-child {
  margin-top: 0;
}

.article__biblio-contents p {
  orphans: 2;
  widows: 2;
}

// NOTES
// =====

.article__footnotes-contents, .article__endnotes-contents {
  font-family: @font-text;
  line-height: @text-line-height;
  .font-size(footnotes);
}

.FootnoteSymbol, .EndnoteSymbol {
  font-family: @font-notecall;
  margin-right: .5ch;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  & when not (@notecall-brackets = true) {
    &::after {
      content: ". ";
      display: inline-block;
      color: @color-grey-d4;
    }
  }

  & when (@notecall-brackets = true) {
    .note-brackets();
  }
}


// TABLE DES ILLUSTRATIONS
// =======================

.illustrations__list {
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
}

.illustration {
  padding: 0;
  padding-bottom: 2rem;
  font-family: @font-captions;
}

.illustration + .illustration  {
  border-top: 1px solid @color-border;
  padding-top: 2rem;
}

.illustration p {
  margin: .5rem 0;
  padding: 0;
  .font-size(m);
}

.illustration p.titreillustration {
  margin-top: 0;
}

// SIDENOTES
// =========

.article__sidenotes {
  text-align: left;
  .font-size(s);
  font-family: @font-text;
}

.article__sidenotes p {
  line-height: @text-line-height;
  opacity: 0;
  transition: opacity .5s linear, color .3s linear;
  color: @color-grey-d5;
  text-align: left;
}

.article__sidenotes p:hover {
  color: @color-grey-d1;
}

.article__sidenotes p[style] {
  opacity: 1;
}

.article__sidenotes a {
  overflow-wrap: anywhere;
}

// POUR CITER
// ==========

.article__quotation-contents h3 {
  font-size: 1em;
  font-weight: bold;
}

.article__quotation-contents p + h3 {
  margin-top: 2rem;
}

// INFOS AUTEURS
// =============

.article__person + .article__person {
  margin-top: 3rem;
}

.article__person-description {
  margin: 0;
}

.article__person-idnos, .article__person-related {
  .font-size(m);
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 4px solid @color-border;

  h4 {
    font-weight: bold;
    font-size: 1em;
  }
}

.article__person-idnos + .article__person-related {
  margin-top: 0;
  padding-top: 2rem;
}

.article__person-idnos-list {
  list-style: none;
  padding: 0;
  display: flex;
  margin: 1rem 0 0 0;
}

.article__person-idno:not(:first-child) {
  margin-left: 1.5rem;
}

.article__person-idno-icon {
  width: auto;
  height: 24px;
  filter: grayscale(1);
  opacity: .8;
  transition: filter linear .2s, opacity linear .2s;
}

.article__person-idno-icon:hover {
  opacity: 1;
  filter: grayscale(0);
}

.article__person-related .toc__contents {
  margin-top: 1rem;
}

.article__person-related .toc__li {
  margin: 1rem 0;
}

// INDEXES
// =======

.alphabet {
  margin: 4rem 0;
  border-top: 1px solid @color-border;
  border-bottom: 1px solid @color-border;
}

.alphabet .btn-group {
  display: block;
  padding: 0;
  margin: 0;
}

.alphabet__btn {
  .font-size(m);
}

.index-list {
  margin-top: 4rem;
}

.index-list__list {
  padding: 0;
  list-style: none;
}

.index-list__letter {
  .font-size(xxl);
  font-weight: normal;
}

.index-list__letter a {
  color: @color-grey-d5;
}

.index-list__count {
  color: @color-grey-d5;
  .font-size(s);
  font-family: @font-default;
}

.index-list__list--hierarchique .index-list__list {
  margin-left: 20px;
  padding: 0;

  .index-list__list {
    margin-left: 30px;
  }

  li {
    margin-left: 10px;
    border-left: 2px solid @color-border;
  }

  li:last-child {
    border-left: none;
  }

  li:before {
    width: 10px;
    height: 20px;
    margin-right: 10px;
    border-bottom: 2px solid @color-border;
    content: "";
    display: inline-block;
  }

  li:last-child:before {
    border-left: 2px solid @color-border;
  }
}

// TPL NUMEROS
// ===========

.issues {
  list-style: none;
  padding: 0;
}

.issue {
  padding: 2rem 0 4rem 0;
}

.issue + .issue {
  border-top: 1px solid @color-border;
}

.issue .main-title {
  .font-size(xxl);
}

.issue .publi__introduction {
  margin-top: 2rem;
}

.issue__button {
  display: inline-block;
  margin-top: 1rem;
}

@media (max-width : @screen-sm) {
  .issue__accroche .accroche__img {
    max-height: 200px;
  }
}

// TPL IMAGE
// =========

.image__thumbnail {
  width: 350px;
  margin-bottom: 2rem;
}

.image__caption, .image__description, .image__author, .image__credits, .image__file {
  font-family: @font-captions;
}

// TPL LIEN
// ========

.lien__date {
  color: @color-grey-d3;
}

.lien__capture {
  max-width: 300px;
  margin: 2rem 0;
}

.lien-rss__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 4rem;
}

// TPL SEARCH
// ==========

.main-content .search-form {
  .form-control {
    border: 4px solid @color-grey-l4;
  }

  .input-group-append {
    margin-left: 0;
  }
}

// PAGES D'ERREUR
// ==============

.error {
  margin-bottom: 2rem;
}

// INCLUSION DES STYLES DE PERSONNALISATION
// IMPORTANT : ne rien ajouter après cette ligne.
// ==============================================
@import (optional) "custom.less";