/* ============================================================================
   FONTS
   ========================================================================= */
@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PT_Serif/PTSerif-Regular.woff2") format("woff2"),
    url("../fonts/PT_Serif/PTSerif-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PT_Serif/PTSerif-BoldItalic.woff2") format("woff2"),
    url("../fonts/PT_Serif/PTSerif-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PT_Serif/PTSerif-Italic.woff2") format("woff2"),
    url("../fonts/PT_Serif/PTSerif-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PT_Serif/PTSerif-Bold.woff2") format("woff2"),
    url("../fonts/PT_Serif/PTSerif-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   CSS RESET
   ========================================================================= */
*, *::after, *::before {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
h1, h2, h3, h4,
p, figure, blockquote,
dl, dd {
  /* margin-block-end: 0; */
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-wrap: balance;
}

p:first{
  margin-bottom: 0rem;
}

p{
  margin-bottom: 1.5rem;
  text-wrap: pretty;

  hyphens: auto;
  max-width: 75ch;
  hyphenate-limit-chars: 6 3 2;
}
/* ============================================================================
   CUSTOM PROPERTIES
   ========================================================================= */
:root {
  /* Spacing */
  --padding: 1.5rem;
  
  /* Colors */
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #777;
  --color-light: #efefef;
  --color-gray-700: hsl(0, 0%, calc(45% + 0%));
  --prose-color-text: var(--color-black);
  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-code-light-grey);
  
  /* Code colors */
  --color-code-light-grey: rgb(240, 240, 240);
  --color-code-comment: #a9aaad;
  --color-code-white: #c5c9c6;
  --color-code-red: #d16464;
  --color-code-orange: #de935f;
  --color-code-yellow: #f0c674;
  --color-code-green: #a7bd68;
  --color-code-aqua: #8abeb7;
  --color-code-blue: #7e9abf;
  --color-code-purple: #b294bb;
  
  /* Gray scale */
  --color-gray-100: hsl(0, 0%, calc(98% + 0%));
  --color-gray-200: hsl(0, 0%, calc(94% + 0%));
  --color-gray-250: #e8e8e8;
  --color-gray-300: hsl(0, 0%, calc(88% + 0%));
  --color-gray-400: hsl(0, 0%, calc(80% + 0%));
  --color-gray-500: hsl(0, 0%, calc(70% + 0%));
  --color-gray-600: hsl(0, 0%, calc(60% + 0%));
  --color-gray-800: hsl(0, 0%, calc(30% + 0%));
  --color-gray-900: hsl(0, 0%, calc(15% + 0%));
  
  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    Courier, monospace;
  --font-family-serif: "PT Serif";
  
  --text-xs: 0.75rem; /* 0.75rem (12px) */
  --text-sm: 0.875rem; /* 0.875rem (14px) */
  --text-md: 1rem; /* 1rem (16px) */
  --text-lg: 1.125rem; /* 1.125rem (18px) par default*/
  --text-xl: 1.25rem; /* 1.25rem (20px) */
  --text-2xl: 1.5rem; /* 1.5rem (24px) */
  --text-3xl: 1.75rem; /* 1.875rem (30px) */
  --text-4xl: 2.5rem; /* 2.25rem (36px) */
  --text-5xl: 3rem; /* 3rem (48px) */
  --text-6xl: 4rem; /* 3.75rem (60px) */

  --leading-normal: 1.5;
  --text-base: var(--text-md);
  --font-size-tiny: var(--text-xs);
  --font-size-small: var(--text-sm);
  --font-size-medium: var(--text-base);
  --font-size-large: var(--text-xl);
  --font-size-huge: var(--text-2xl);
  --font-size-monster: var(--text-3xl);

  --spacing-0: 0; /* 0px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-24: 6rem; /* 96px */
  --spacing-36: 9rem; /* 144px */
  --spacing-48: 12rem; /* 192px */
  --spacing-px: 1px; /* 1px */
  --spacing-2px: 2px; /* 2px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-20: 5rem; /* 80px */

  /* notes */
  --sn-width: 15rem;
}

/* ============================================================================
   BASE STYLES
   ========================================================================= */
html {
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background-color: #fbf8f4;
}

body {
  margin: unset !important;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}

strong, b {
  font-weight: 600;
}

small {
  font-size: inherit;
  color: var(--color-text-grey);
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

/* ============================================================================
   LAYOUT - GRID SYSTEM
   ========================================================================= */
.container {
  margin: 0 auto;
}

main {
  padding: var(--padding);
  max-width: 70rem;
  margin: 0 auto;
}

.grid {
  --columns: 12;
  --gutter: 1.5rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}

.grid.narrow {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.grid.wide {
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
}

.grid figure {
  margin-bottom: var(--gutter) !important;
}

.grid > .column {
  margin-bottom: var(--gutter);
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

@media screen and (min-width: 60rem) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }
}

/* ============================================================================
   HEADER & NAVIGATION
   ========================================================================= */
.container {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--color-gray-400);
  z-index: 3;
  background-color: #fbf8f4;
}

main.container,
.container.footer {
  position: unset !important;
  top: unset !important;
  border-bottom: 0px solid var(--color-gray-400);
  z-index: 3;
}

.header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: -1rem;
  margin-left: -1rem;
  text-transform: uppercase;
  max-width: 70rem;
  margin: 0 auto;
  padding-left: var(--padding);
  padding-right: var(--padding);
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
  z-index: 3;
}

.menu {
  display: flex;
}

.menu a {
  padding: 1rem;
  display: block;
  text-decoration: none;
  font-weight: normal;
}

.menu a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.menu a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

/* Burger Menu */
#burger {
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.1s ease-out;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: none;
}

#burger path {
  stroke-width: 2px;
  stroke: #000;
}

.burger-close {
  display: none;
}

#burger.expanded .burger-close {
  display: block;
}

#burger.expanded .burger-bars {
  display: none;
}

@media (min-width: 60rem) {
  #burger {
    display: none;
  }
}

@media (max-width: 60rem) {
  #burger + #nav {
    display: none;
  }

  #burger.expanded + #nav {
    position: fixed;
    background: #fbf8f4;
    inset: 0;
    height: 100vh;
    width: 100vw;
    flex-direction: column;
    display: flex;
    margin: 0;
    justify-content: center;
    align-items: center;
    z-index: 2;
  }

  #burger.expanded + #nav > * {
    margin: calc(var(--baseline) / 2);
  }

  .header {
    align-items: center;
    height: 65px;
    background: #fbf8f4;
    position: sticky;
    top: 0;
  }

  #nav {
    flex-direction: column;
    align-items: center;
  }

  #nav a {
    padding: 0.5rem 1rem;
    text-align: center;
    width: 100%;
  }
}

/* Social links */
.social {
  display: flex;
  padding: 0 0.5rem;
}

.social a {
  padding: 1rem 0.5rem;
}

/* ============================================================================
   TYPOGRAPHY
   ========================================================================= */
h1 {
  font-size: var(--text-2xl);
  line-height: 1.272727;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-xl);
  /* font-weight: bold; */
}

/* ============================================================================
   TEXT CONTENT BLOCKS
   ========================================================================= */
.text {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.text .left {
  text-align: left;
}

.text .right {
  text-align: right;
}

.text .center {
  text-align: center;
}

.text .capitalize {
  text-transform: capitalize;
}

.text .uppercase {
  text-transform: uppercase;
}

.text .lowercase {
  text-transform: lowercase;
}

.sticky {
  position: sticky !important;
  top: 64px;
  height: max-content;
}

.text a {
  text-decoration: none;
  color: var(--prose-color-text);
}

.text a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  color: var(--color-black);
}

.text:first-child {
  margin-top: 0;
}

.text:last-child {
  margin-bottom: 0;
}

.text :not(figcaption):not(.no-text-style) > p
.text  p,
.text ul,
.text ol {
  margin-bottom: 1.5rem;
  text-wrap: pretty;
  color: var(--prose-color-text);
  hyphens: auto;
  font-family: var(--font-family-serif);
  font-size: var(--text-lg);
}

.text ul,
.text ol {
  margin-left: 1rem;
}

.text ul p,
.text ol p {
  margin-bottom: 0;
}

.text ul > li {
  list-style: disc;
}

.text ol > li {
  list-style: decimal;
}

.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}

.text h1,
.h1,
.intro {
  font-size: 2rem;
  margin-bottom: 3rem;
  line-height: 1.25em;
}

.text h2,
.h2 {
  font-size: 1.25rem;
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.text h3,
.h3 {
  font-weight: 600;
}

.text code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: var(--color-light);
  padding: 0 0.5rem;
  display: inline-block;
  color: var(--color-black);
}

.text pre {
  margin: 3rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}

.text pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.text dt {
  font-weight: 600;
}

.text blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-black);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
  text-wrap: pretty;
}

.text blockquote footer {
  font-size: 0.875rem;
  font-style: italic;
}

.text figure {
  margin: 0 0;
}

.text figure ul {
  line-height: 0;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.text figure ul li {
  list-style: none;
}

@media screen and (min-width: 60rem) {
  .text {
    line-height: var(--leading-normal);
  }
}

/* ============================================================================
   BLOCKS & CONTENT
   ========================================================================= */
.block,
.block-type-image {
  margin-top: var(--gutter) !important;
}

.block:first-child {
  margin-top: 0 !important;
}

.section {
  padding: 3rem 0;
}

.intro {
  max-width: 40rem;
}

.intro *:not(:last-child) {
  margin-bottom: 1em;
}

/* ============================================================================
   IMAGES & MEDIA
   ========================================================================= */
picture.container_img {
  position: relative !important;
  width: auto !important;
  margin: 0 !important;
  border: 0 !important;
  max-height: 455px !important;
}

.container_img img {
  max-height: 455px;
  width: unset !important;
  max-width: 100% !important;
  height: auto;
}

.img {
  position: relative;
  display: block;
  --w: 11;
  --h: 17;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: transparent;
}

.img img,
.video iframe {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  object-fit: contain;
  border: 0;
}

.img[data-contain] img {
  object-fit: contain;
}

figcaption {
  margin-top: var(--spacing-2);
  line-height: 1.5em;
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

/* Video */
iframe {
  --fit: contain;
  --ratio: 16 / 9;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  width: 100%;
  height: 100%;
  height: auto;
  z-index: 2;
  border: unset;
}

video {
  width: 100%;
  right: 0;
  position: relative;
}

/* Audio */
.audio-wrapper,
audio {
  /* width: 100% !important; */
}

/* Map */
.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}

.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================================
   TEMPLATE: HOME
   ========================================================================= */
body.home {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-width: unset !important;
}

.home .container.footer {
  display: none !important;
}

/* ============================================================================
   TEMPLATE: OEUVRES
   ========================================================================= */
main.oeuvres {
  max-width: unset !important;
}

.container.oeuvres {
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}

.oeuvres img.cover {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.oeuvres h2 {
  font-size: var(--text-md) !important;
  font-weight: 400 !important;
  margin-top: var(--spacing-3) !important;
}

/* ============================================================================
   TEMPLATE: LIVRES
   ========================================================================= */
.livres h2 {
  font-size: var(--text-md) !important;
  font-weight: 400 !important;
  margin-top: var(--spacing-3) !important;
}

.livres a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  color: var(--color-black);
}

/* ============================================================================
   TEMPLATE: TEXTES
   ========================================================================= */
.lettres-conversations div,
.textes-critiques div {
  margin-bottom: calc(var(--gutter) / 2);
}

.lettres-conversations div:last-child,
.textes-critiques div:last-child {
  margin-bottom: 0;
}

.textes {
  display: flex;
  flex-wrap: wrap;
  padding: 0.4rem 0;
  line-height: 120%;
}

.textes .date {
  width: 12%;
  text-align: left;
  order: 2;
  margin-bottom: 0;
}

.textes .title {
  width: 80%;
  font-weight: 600;
  order: 2;
  margin-bottom: 0.1rem;
}

.textes:hover .title {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.textes .contexte {
  order: 2;
  margin-left: 12%;
  width: 100%;
}

.textes .adresse {
  order: 3;
  margin-right: 0px;
  margin-left: 12%;
  width: 100%;
}

/* ============================================================================
   TEMPLATE: ACTUALITES & TALKS
   ========================================================================= */
.list {
  width: 100%;
  max-width: 100%;
}

.card {
  display: flex;
  flex-wrap: wrap;
  padding: 0.8rem 0;
}

.card .date {
  width: 30%;
  text-align: right;
  order: 2;
}

.card .title {
  width: 70%;
  font-weight: bold;
  order: 1;
}

.card:hover .title {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.card .category {
  order: 2;
  margin-right: 16px;
}

.card .location {
  order: 2;
  margin-right: 16px;
}

.card .city {
  order: 3;
  margin-right: 0px;
  width: 100%;
}

.card .category,
.card .location,
.card .city {
  text-transform: capitalize;
}

.card .location p {
  margin: 0;
  padding: 0;
}

.card .date,
.card .title {
  margin-bottom: 0.2rem;
}

@media screen and (min-width: 60rem) {
  .card {
    display: flex;
    flex-wrap: wrap;
    padding: 0.4rem 0;
    max-width: 100%;
  }

  .card .date {
    width: 8%;
    text-align: left;
    order: 1;
  }

  .card .title {
    width: 30%;
    font-weight: bold;
    order: 1;
  }

  .card .category,
  .card .location,
  .card .city,
  .card .contexte,
  .car .adresse {
    order: 1;
    margin-right: unset;
    font-size: var(--font-size-small);
  }

  .card .category {
    width: 25%;
  }

  .card .location {
    width: 28%;
  }

  .card .adresse {
    width: 28%;
  }

  .card .city {
    width: auto;
  }

  .card .adresse {
    width: auto;
  }

  .card .date,
  .card .title {
    margin-bottom: unset;
  }
}

/* ============================================================================
   TABS (A PROPOS)
   ========================================================================= */
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 0px 0px 25px 0px;
  border-bottom: 0;
  cursor: pointer;
  color: var(--color-grey);
  margin-right: 40px;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 100%;
  height: 2px;
}

input:focus-visible + label {}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
  color: var(--color-black);
}

.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: var(--prose-color-text);
}

/* ============================================================================
   FOOTNOTES
   ========================================================================= */
:where(sup) {
  top: -0.5em;
}

.text :where(sup) a {
  text-decoration: none;
}

:where(sup, sub) {
  position: relative;
  line-height: 0;
  vertical-align: baseline;
  font-size: 75%;
}

.footnotes-container {
  margin-top: 2em;
  padding-top: 1em;
}

.footnotes-container:before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-black);
  margin-bottom: 1.5rem;
}

.footnotes-container ol {
  font-size: 0.85rem;
  line-height: 135%;
  padding: 0;
  margin-left: 1rem;
}

.footnotes-container ol li {
  padding-bottom: 1em;
}

li.footnote-item {
  list-style: none;
  position: relative;
  padding-top: 1em;
}

li.footnote-item::marker {
  content: unset;
  list-style: none;
  display: none;
  font-size: 0;
}

li.footnote-item::before {
  content: counter(list-item);
  position: absolute;
  left: -1.5em;
  color: black;
  padding: 0.1em 0.5em;
  font-size: 9pt;
}

.footnotereverse svg {
  width: 1.7ch;
  background-color: unset;
  fill: var(--color-grey);
  display: inline;
}

.footnotereverse:hover svg {
  background-color: unset;
  fill: var(--color-black);
}

.footnotereverse a {
  width: 1.7ch;
  color: var(--color-grey);
  background-color: unset;
  text-decoration: none;
}

.footnotereverse:hover {
  color: var(--color-black);
}

/* ============================================================================
   PDF BLOCK
   ========================================================================= */
.pdf-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  background: none;
  padding: 8px 12px 8px 0px;
  text-decoration: none;
  color: inherit;
}

.pdf-block svg {
  width: 24px;
  margin-right: 0.5rem;
}

.pdf-empty {
  padding: 10px;
  text-align: center;
  color: #777;
}

/* ============================================================================
   NAVIGATION & PAGINATION
   ========================================================================= */
.prevnext {
  display: flex;
  margin-bottom: var(--spacing-24);
  gap: var(--spacing-6);
  line-height: var(--leading-normal);
}

.prevnext a {
  flex-grow: 1;
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--rounded);
}

.prevnext-next {
  align-items: flex-end;
  text-align: right;
}

.prevnext-label {
  font-size: var(--text-xs);
  color: var(--color-gray-700);
}

.prevnext-title {
  font-size: var(--text-lg);
}

.pagination {
  display: flex;
  padding-top: 6rem;
}

.pagination > span {
  color: var(--color-text-grey);
}

.pagination > * {
  padding: 0.5rem;
  width: 3rem;
  text-align: center;
  border: 2px solid currentColor;
  margin-right: 1.5rem;
}

.pagination > a:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* ============================================================================
   FOOTER
   ========================================================================= */
.footer {
  padding: 9rem 0 6rem;
  line-height: 1.5em;
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

.footer:before {
  /* content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-black);
  margin-bottom: 1.5rem; */
}

.footer a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* ============================================================================
   UTILITY CLASSES
   ========================================================================= */
.bg-light {
  background-color: var(--color-light);
}

.color-grey {
  color: var(--color-text-grey);
}

.align-center {
  text-align: center;
}

/* Margin utilities */
.margin-s {
  margin-bottom: 0.75rem;
}

.margin-m {
  margin-bottom: 1.5rem;
}

.margin-l {
  margin-bottom: 3rem;
}

.margin-xl {
  margin-bottom: 4.5rem;
}

.margin-xxl {
  margin-bottom: 6rem;
}

/* Width utilities */
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }

/* ============================================================================
   KIRBY PANEL
   ========================================================================= */
.k-activation {
  display: none;
}

/* ============================================================================
   CODE MORT / UNUSED CODE (À VÉRIFIER AVANT SUPPRESSION)
   ========================================================================= */

/*
POTENTIELLEMENT INUTILISÉ - À VÉRIFIER :

1. .cta - Pas trouvé dans les templates
2. .box - Pas trouvé dans les templates
3. .note-excerpt - Semble être pour un ancien template "note"
4. .note-excerpt-title
5. .note-excerpt-date
6. .livre-excerpt - Variable utilisée mais classe vide
7. .text hr - Les hr ont déjà un style de base
8. .text .codeblock - Utilisé ?

STYLES COMMENTÉS (déjà désactivés) :
- .footer:before
- .mentions h1, .mentions h2 - Commenté
- *+h2, *+h3 - Commenté
- Liens externes ::after - Commenté

CLASSES PROBABLEMENT OBSOLÈTES :
- .oeuvre a - Avec max-height commenté
- .note-* (tout ce qui concerne "note")

CODE À CONSERVER MAIS VÉRIFIER :
- Tous les styles de .card dans les media queries
- Les styles de video/iframe (plusieurs définitions)
*/

/* Classes potentiellement obsolètes - À vérifier */

.cta {
  background: var(--color-black);
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-black);
}

.box {
  background: var(--color-light);
  padding: 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-light);
}

.livre-excerpt {}

.note-excerpt {
  line-height: 1.5em;
}

.note-excerpt header {
  margin-bottom: 1.5rem;
}

.note-excerpt figure {
  margin-bottom: 0.5rem;
}

.note-excerpt-title {
  font-weight: 600;
}

.note-excerpt-date {
  color: var(--color-text-grey);
}