/*
 * style.css — single stylesheet for the site.
 * Base adapted from Pico CSS v2.1.1 (MIT, https://picocss.com), trimmed to
 * what this site uses: no forms/tables, no class-based components except
 * .container, custom nav/header/cards.
 *
 * Sections:
 *   1. Theme variables (light/dark)
 *   2. Reset & base
 *   3. Typography
 *   4. Links
 *   5. Buttons
 *   6. Accordion (<details>)
 *   7. Cards (<article>)
 *   8. Elements (code, img, hr, misc)
 *   9. Layout (body, header/nav, container, footer)
 *  10. Home & events
 *  11. Utilities
 *  12. Accessibility
 */

/* ============================================================
 * 1. Theme variables
 * ============================================================ */

:root {
  --font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);
  --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);
  --font-family: var(--font-family-sans-serif);
  --line-height: 1.5;
  --font-weight: 400;
  --font-size: 100%;
  --border-radius: 0.25rem;
  --border-width: 0.0625rem;
  --outline-width: 0.125rem;
  --transition: 0.2s ease-in-out;
  --spacing: 1rem;
  --typography-spacing-vertical: 1rem;
  --block-spacing-vertical: var(--spacing);
  --block-spacing-horizontal: var(--spacing);
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* Brand: the logo's hot magenta, darkened one step so white button text
     reaches AA contrast (4.5:1); the pure #D83EC6 stays on the logo itself.
     Links stay neutral; the nav bar uses the logo's dark plum instead. */
  --primary: #B835A8;
  --primary-hover: #9C2D8F;
  --primary-background: var(--primary);
  --primary-border: var(--primary);
  --primary-focus: rgba(184, 53, 168, 0.5);
  --primary-inverse: #fff;
  --text-selection-color: rgba(184, 53, 168, 0.25);
}

/* Fluid type scale */
@media (min-width: 576px) { :root { --font-size: 106.25%; } }
@media (min-width: 768px) { :root { --font-size: 112.5%; } }
@media (min-width: 1024px) { :root { --font-size: 118.75%; } }
@media (min-width: 1280px) { :root { --font-size: 125%; } }
@media (min-width: 1536px) { :root { --font-size: 131.25%; } }

/* Light scheme (default) */
:root:not([data-theme=dark]) {
  color-scheme: light;
  --background-color: #fff;
  --color: #373c44;
  --muted-color: #646b79;
  --muted-border-color: rgb(231, 234, 239.5);
  --h1-color: #2d3138;
  --h2-color: #373c44;
  --h3-color: #424751;
  --h4-color: #4d535e;
  /* Footer band: a whisper of the brand plum */
  --footer-background-color: #F7EFF4;
  --footer-separator-color: rgba(46, 8, 24, 0.2);
  --mark-background-color: rgba(216, 62, 198, 0.1);
  --mark-color: #B835A8;
  --code-background-color: rgb(243, 244.5, 246.75);
  --code-color: #646b79;
  --card-background-color: var(--background-color);
  --card-border-color: transparent;
  --card-sectioning-background-color: rgb(251, 251.5, 252.25);
  --accordion-close-summary-color: var(--color);
  --accordion-open-summary-color: var(--muted-color);
  --accordion-active-summary-color: var(--primary-hover);
  --box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
}

/* Dark scheme: follows the system, or [data-theme=dark] to force it */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --background-color: rgb(28, 33, 44);
    --color: #c9cfd9;
    --muted-color: #8b94a7;
    --muted-border-color: #2e3745;
    --h1-color: #f0f1f3;
    --h2-color: #e0e3e7;
    --h3-color: #c2c7d0;
    --h4-color: #b3b9c5;
    --mark-background-color: rgba(233, 112, 215, 0.15);
    --mark-color: #F0A0E4;
    --code-background-color: rgb(35, 41, 55);
    --code-color: #98a2b3;
    --card-background-color: rgb(38, 44, 58);
    --card-border-color: #2e3745;
    --card-sectioning-background-color: rgb(38, 44, 58);
    --accordion-close-summary-color: var(--color);
    --accordion-open-summary-color: var(--muted-color);
    --accordion-active-summary-color: var(--primary-hover);
    --box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
    /* Brand: lighter variants in the dark */
    --primary: #E970D7;
    --primary-hover: #F0A0E4;
    --primary-focus: rgba(233, 112, 215, 0.375);
    --text-selection-color: rgba(233, 112, 215, 0.1875);
    /* Buttons keep the light magenta fill in the dark: plum text instead of
       white (2.7:1 → 6.7:1) */
    --primary-inverse: #2E0818;
    /* Footer band: plum-tinted dark, distinct from the blue-grey base */
    --footer-background-color: #261925;
    --footer-separator-color: rgba(255, 255, 255, 0.12);
  }
}

[data-theme=dark] {
  color-scheme: dark;
  --background-color: rgb(28, 33, 44);
  --color: #c9cfd9;
  --muted-color: #8b94a7;
  --muted-border-color: #2e3745;
  --h1-color: #f0f1f3;
  --h2-color: #e0e3e7;
  --h3-color: #c2c7d0;
  --h4-color: #b3b9c5;
  --mark-background-color: rgba(233, 112, 215, 0.15);
  --mark-color: #F0A0E4;
  --code-background-color: rgb(35, 41, 55);
  --code-color: #98a2b3;
  --card-background-color: rgb(38, 44, 58);
  --card-border-color: #2e3745;
  --card-sectioning-background-color: rgb(38, 44, 58);
  --accordion-close-summary-color: var(--color);
  --accordion-open-summary-color: var(--muted-color);
  --accordion-active-summary-color: var(--primary-hover);
  --box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
  /* Brand: lighter variants in the dark */
  --primary: #E970D7;
  --primary-hover: #F0A0E4;
  --primary-focus: rgba(233, 112, 215, 0.375);
  --text-selection-color: rgba(233, 112, 215, 0.1875);
  /* Buttons keep the light magenta fill in the dark: plum text instead of
     white (2.7:1 → 6.7:1) */
  --primary-inverse: #2E0818;
  /* Footer band: plum-tinted dark, distinct from the blue-grey base */
  --footer-background-color: #261925;
  --footer-separator-color: rgba(255, 255, 255, 0.12);
}

/* ============================================================
 * 2. Reset & base
 * ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:root {
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  background-color: var(--background-color);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--font-family);
  text-underline-offset: 0.1rem;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  hyphens: auto;
  tab-size: 4;
}

/* ============================================================
 * 3. Typography
 * ============================================================ */

h1,
h2,
h3,
h4 {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
  color: var(--color);
  font-family: "Bagnard";
  font-weight: 700;
  font-size: var(--font-size);
  line-height: var(--line-height);
}

h1 {
  --font-size: 2rem;
  --line-height: 1.125;
  --color: var(--h1-color);
}

h2 {
  --font-size: 1.75rem;
  --line-height: 1.15;
  --color: var(--h2-color);
}

h3 {
  --font-size: 1.5rem;
  --line-height: 1.175;
  --color: var(--h3-color);
}

h4 {
  --font-size: 1.25rem;
  --line-height: 1.2;
  --color: var(--h4-color);
}

h2 {
  margin-top: 3rem;
}

p,
ul {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
}

:where(ul) li {
  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}

ul li {
  list-style: square;
}

strong {
  font-weight: bolder;
}

mark {
  padding: 0.2rem 0.5rem;
  border-radius: var(--border-radius);
  background-color: var(--mark-background-color);
  color: var(--mark-color);
  vertical-align: baseline;
}

::selection {
  background-color: var(--text-selection-color);
}

/* ============================================================
 * 4. Links
 * ============================================================ */

/* Neutral links: text color + underline. The magenta stays on interaction,
   the nav bar and buttons. */
a {
  outline: none;
  background-color: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.125em;
  transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
}

a:hover {
  color: var(--primary);
}

/* ============================================================
 * 5. Buttons
 * ============================================================ */

button {
  appearance: button;
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: visible;
  border: var(--border-width) solid var(--primary-border);
  border-radius: var(--border-radius);
  background-color: var(--primary-background);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color: var(--primary-inverse);
  font-family: inherit;
  font-weight: var(--font-weight);
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

button:focus {
  box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
}

/* Links styled as buttons (also used by the nav's current-page marker) */
.button {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: var(--border-width) solid var(--primary-border);
  border-radius: var(--border-radius);
  background-color: var(--primary-background);
  color: var(--primary-inverse);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

/* The generic `a:hover` color (0,1,1) would beat `.button` (0,1,0) and turn
   the label magenta-on-magenta: reassert the inverse color on hover */
.button:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-inverse);
}

.button:focus-visible {
  box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
  outline: none;
}

/* Touch screens: 44px minimum tap targets (WCAG 2.5.5) — mouse pointers keep
   the compact size, the extra height would unbalance the desktop nav */
@media (pointer: coarse) {
  .button {
    padding-block: 0.75rem;
  }
}

/* ============================================================
 * 6. Accordion (<details>)
 * ============================================================ */

details {
  display: block;
  margin-bottom: var(--spacing);
}

details summary {
  line-height: 1rem;
  list-style-type: none;
  cursor: pointer;
  transition: color var(--transition);
}

details summary::-webkit-details-marker,
details summary::marker {
  display: none;
}

details summary::after {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
  float: right;
  transform: rotate(-90deg);
  background-image: var(--icon-chevron);
  background-position: right center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  content: "";
  transition: transform var(--transition);
}

details summary:focus {
  outline: none;
  color: var(--accordion-active-summary-color);
}

details summary:focus-visible {
  outline: var(--outline-width) solid var(--primary-focus);
  outline-offset: calc(var(--spacing, 1rem) * 0.5);
  color: var(--primary);
}

details[open] > summary {
  margin-bottom: var(--spacing);
}

details[open] > summary:not(:focus) {
  color: var(--accordion-open-summary-color);
}

details[open] > summary::after {
  transform: rotate(0);
}

/* ============================================================
 * 7. Cards (<article>)
 * ============================================================ */

article {
  margin: 3rem 0;
  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
  border: var(--border-width) solid var(--card-border-color);
  border-radius: var(--border-radius);
  background: var(--card-background-color);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

/* ============================================================
 * 8. Elements (code, img, hr, misc)
 * ============================================================ */

code {
  display: inline-block;
  padding: 0.375rem;
  border-radius: var(--border-radius);
  background: var(--code-background-color);
  color: var(--code-color);
  font-family: var(--font-family-monospace);
  font-weight: var(--font-weight);
  font-size: 0.875em;
  line-height: initial;
}

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  border-style: none;
}

hr {
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--muted-border-color);
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* ============================================================
 * 9. Layout (body, header/nav, container, footer)
 * ============================================================ */

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

main {
  display: block;
  flex-grow: 1;
}

body > main,
body > footer {
  padding-block: var(--block-spacing-vertical);
}

body > header {
  /* Sticky instead of fixed: the header stays in the flow, so no fixed
     padding-top compensation is needed and the nav can be as tall as it
     wants on mobile (buttons wrap on narrow screens) */
  position: sticky;
  top: 0;
  z-index: 100;
  margin-top: 0;
  padding: 0;
  transition: transform 0.3s ease;
}

/* Hidden while scrolling down (nav-cachee toggled by the inline script);
   -110% covers subpixel rounding so no sliver stays visible */
body > header.nav-cachee {
  transform: translateY(-110%);
}

section {
  margin-bottom: var(--block-spacing-vertical);
}

header nav {
  display: flex;
  width: 100%;
  height: 4rem;
  padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  align-items: center;
  gap: 0.75rem;
  overflow: visible;
  /* Dark plum taken from the logo's darkest tone: the magenta logo disc
     stands out on it, and white text reaches AA contrast */
  background: #2E0818;
  color: white;
  font-size: 0.8rem;
  font-weight: 400;
}

header nav .site-logo {
  flex: none;
  height: 2.5rem;
  width: auto;
  border-radius: 50%;
}

/* Right of the logo: title on the left, nav buttons on the right (desktop);
   stacked in two lines on mobile */
header nav .nav-column {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

header nav .site-title {
  font-family: "Bagnard";
}

header nav a {
  color: white;
  text-decoration: underline !important;
}

header nav a:hover {
  color: white;
}

header nav ul {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

header nav li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Ghost buttons: white outline on the dark plum nav bar */
header nav a.button {
  text-decoration: none !important;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}

header nav a.button:hover,
header nav a.button:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: white;
  color: white;
}

/* Current page in the nav: same box as .button, filled to mark where you are */
header nav .button.current {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: white;
  color: white;
  cursor: default;
}

/* Breathing room under the sticky header, banner or not */
.layout-content {
  padding-top: 2.5rem;
}

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

/* No gutters on wider screens (max-width 600px provides the measure) */
@media (min-width: 576px) {
  .container {
    padding-right: 0;
    padding-left: 0;
  }
}

.head-banner {
  margin-bottom: 3rem;
}

footer {
  margin-top: 3rem;
  padding-block: 2rem calc(2rem + env(safe-area-inset-bottom));
  background-color: var(--footer-background-color);
}

@font-face {
  font-family: "Bagnard";
  src: url("/Bagnard.otf");
}

@media only screen and (min-width: 600px) {
  header nav {
    font-size: 1.1rem;
  }

  .evenements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 100%;
    justify-content: center;
  }

  .evenements-list article {
    max-width: 350px;
    overflow: hidden;
  }

  .evenements-list img.poster-evenement {
    border-radius: var(--border-radius);
  }
}

/* Mobile/narrow: two columns — the logo fills the nav height on the left,
   title and nav buttons stack on the right. Buttons wrap on narrow screens:
   the sticky header keeps the content below it, whatever its height. */
@media only screen and (max-width: 700px) {
  header nav {
    height: auto;
    align-items: stretch;
    padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.625rem max(1rem, env(safe-area-inset-left));
    gap: 0.75rem;
  }

  /* Definite height (≈ the two text lines) centered vertically: a stretched
     auto-height <img> would contribute its intrinsic 808px to the flex line
     and blow the nav up to the raw image size */
  header nav .site-logo {
    height: 5rem;
    align-self: center;
  }

  header nav .nav-column {
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
  }

  header nav .site-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  header nav ul {
    flex-wrap: wrap;
  }
}

/* ============================================================
 * 10. Home & events
 * ============================================================ */

/* Home call-to-action under the latest events */
.home-cta {
  text-align: center;
  margin-top: 2rem;
}

/* Contact block under the event (part of home.md after the --- separator) */
.home-contact {
  margin-top: 3rem;
}

/* Liens de contact et réseaux du footer (toutes pages) */

/* La première liste (footer-nav : Accueil, Tous les évènements) reçoit la
   classe footer-links pour partager tout le style ; on ne rajoute que
   l'écart avec la liste de contact qui suit */
.footer-nav {
  margin-bottom: 1.25rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  list-style: none;
}

/* Pas de déclaration de couleur ici : la règle a la même spécificité que
   `a:hover` (section 4) et, venant après, l'écraserait — le hover des liens
   du footer ne marchait pas. L'héritage suffit. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-links svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Petite icône « nouvelle fenêtre » en bout des liens externes du footer
   (cible le lien Codeberg de la ligne <small> aussi) */
footer .icon-externe {
  width: 0.75em;
  height: 0.75em;
  flex: none;
}

/* Mobile : pile verticale — chaque lien garde une hauteur de cible correcte */
@media only screen and (max-width: 599px) {
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
}

/* Séparateur ajouté entre les deux listes : la teinte muted du hr global
   (#E7EAF0) est invisible sur le fond clair du footer, on utilise une
   teinte prune adaptée à chaque thème */
footer hr {
  margin: 1.25rem 0;
  border-top-color: var(--footer-separator-color);
}

footer small {
  display: block;
  margin-top: 2rem;
  color: var(--muted-color);
  font-size: 0.875rem;
}

/* Fil d'Ariane (page Tous les évènements). La couleur muted est posée sur la
   liste, pas sur les liens : une règle `.breadcrumb a` écraserait `a:hover`
   (même spécificité, déclarée après) et casserait le hover, comme pour les
   liens du footer. */
.breadcrumb {
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--muted-color);
  font-size: 0.875rem;
}

.breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;
  list-style: none;
}

.breadcrumb li + li::before {
  margin-right: 0.45rem;
  content: "›";
}

.breadcrumb li + li {
  margin-left: 0.45rem;
}

/* Home: spacing for the "Derniers évènements" section title */
.home-events-title {
  margin-top: 4rem;
}

/* Event card titles: smaller than page-level headings (Bagnard is wide).
   margin-top: 0 kills the page-level h2 spacing (3rem) inside the cards */
.evenements-list h2,
.evenements-list h3 {
  --font-size: 1.25rem;
  --line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* Mobile: flat editorial event list — card boxes don't make sense on one column
   and their padding eats width. Boxes return on ≥600px with the 2-col grid. */
@media only screen and (max-width: 599px) {
  .evenements-list article {
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 2.5rem 0;
  }

  .evenements-list article + article {
    border-top: 1px solid var(--muted-border-color);
    padding-top: 2.5rem;
  }
}

img.poster-evenement {
  max-width: min(100%, 300px);
  margin: 1rem 0;
}

/* Posters use the full column on mobile (300px cap stays on larger screens) */
@media only screen and (max-width: 599px) {
  img.poster-evenement {
    max-width: 100%;
  }
}

img.cursor-zoom-in {
  cursor: zoom-in;
}

/* ============================================================
 * 11. Utilities
 * ============================================================ */

/* Visually hidden but read by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * 12. Accessibility
 * ============================================================ */

/* Skip link: off-screen until keyboard-focused, then pinned above the nav */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  background: #2E0818;
  color: white;
  font-weight: 500;
  transform: translateY(-200%);
}

.skip-link:hover,
.skip-link:focus {
  color: white;
  transform: none;
}

/* Skip link lands the focus below the sticky header, not under it */
#contenu {
  scroll-margin-top: 4.5rem;
}

a,
button,
summary {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  *:not([aria-busy=true]),
  :not([aria-busy=true])::before,
  :not([aria-busy=true])::after {
    background-attachment: initial !important;
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}