/* ==========================================================================
   02-LAYOUT — en-t\u00eate, navigation, chapitres, grille \u00e9ditoriale, pied de page
   ========================================================================== */

.chapter {
  /* Transparent, comme le reste : depuis le 23-09-2026 le fond du site est un
     noir pur, porté par `body` et `html` (01-base). Un aplat de --bg ici
     peindrait par-dessus ce noir sans rien apporter, et marquerait un bord. */
  background: transparent;
  color: var(--fg);
  padding-block: var(--section-y);
  position: relative;
}

.chapter--sm {
  padding-block: var(--section-y-sm);
}

.chapter--flush-top {
  padding-top: 0;
}

/* LES TROIS MATIÈRES DE CHAPITRE — nuit, mousse, jour
   Le générateur pose `chapter--dark` ou `chapter--moss` sur le `<body>` des
   fiches projet (champ `theme` de src/data/projects.json : 4 fiches de nuit,
   6 de mousse, 5 de jour — celles-ci ne portent aucune classe ; Bota Bota,
   ajoutée le 29-09-2026, porte la mousse). Depuis que le
   fond du site est un noir pur, ces variantes ne peignent plus aucune surface :
   elles ne règlent que des rôles de couleur. Restait à savoir lesquelles — les
   teintes de matière (encre olivâtre, mousse, pierre) ont été retirées le
   23-09-2026 avec les couches qu'elles coloraient, et remplacées par les deux
   accents de la plaque : le bleu de la fleur et la lavande de son cadre. Les
   trois noms de matière restent des étiquettes d'origine — `theme` ne change
   plus aucune surface, seulement les deux accents. */

/* Chapitre « nuit » : les rôles de couleur sont inversés, rien de plus. Il
   portait un voile fondu jusqu'au 23-09-2026 ; sur un fond noir pur, un voile
   qui assombrit ne fait plus que dessiner son bord. */
.chapter--dark {
  /* Aucun aplat, aucune lumière, aucun voile : le chapitre est ouvert sur le
     fond de la page, seul son lettrage monte d'un cran. */
  color: var(--c-blanc);
  --bg: var(--c-noir);
  --fg: var(--c-blanc);
  --fg-muted: rgba(255, 255, 255, 0.8);
  --fg-faint: rgba(255, 255, 255, 0.62);
  --rule: rgba(255, 255, 255, 0.16);
  --rule-strong: rgba(255, 255, 255, 0.32);
  /* L'accent n'est pas redéfini : il vient de la plaque (00-tokens). */
}

/* Chapitre « mousse » : la mousse n'existe plus dans la palette. Ces six
   fiches (Magog, Val-David, Hawkesbury, Balnea, Jardin Chinois, Bota Bota)
   gardent la
   seule variation de couleur qui reste au site : les deux accents échangent
   leur place. La lavande porte
   l'emphase, le bleu éclairci numérote les repères. Le nom de la classe est
   historique — voir la note ci-dessus. */
.chapter--moss {
  color: var(--c-blanc);
  --bg: var(--s-1);
  --fg: var(--c-blanc);
  --fg-muted: rgba(255, 255, 255, 0.8);
  --fg-faint: rgba(255, 255, 255, 0.6);
  --rule: rgba(255, 255, 255, 0.16);
  --rule-strong: rgba(255, 255, 255, 0.3);
  --accent: var(--c-sable);
  --accent-2: var(--c-laiton-clair);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.5rem);
}

.grid > * {
  min-width: 0;
}

.col-1 { grid-column-end: span 1; }
.col-2 { grid-column-end: span 2; }
.col-3 { grid-column-end: span 3; }
.col-4 { grid-column-end: span 4; }
.col-5 { grid-column-end: span 5; }
.col-6 { grid-column-end: span 6; }
.col-7 { grid-column-end: span 7; }
.col-8 { grid-column-end: span 8; }
.col-9 { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-12 { grid-column-end: span 12; }

.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10 {
    grid-column-end: span 6;
  }
  .col-start-2, .col-start-3, .col-start-4, .col-start-5,
  .col-start-6, .col-start-7, .col-start-8, .col-start-9 {
    grid-column-start: auto;
  }
  .md-span-3 { grid-column-end: span 3; }
  .md-span-6 { grid-column-end: span 6; }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10,
  .md-span-3, .md-span-6 {
    grid-column-end: span 4;
  }
  .sm-span-2 { grid-column-end: span 2; }
  .sm-span-4 { grid-column-end: span 4; }
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: calc(var(--z-nav) + 5);
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: var(--c-laiton);
  opacity: 0.9;
}

/* =================================================================== EN-T\u00caTE */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  color: var(--c-blanc);
  border-bottom: var(--hairline) solid transparent;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}

/* Le contenu de la barre passe AU-DESSUS du voile. `::before` est positionné
   (absolu, z-index auto) : il se peint donc après les descendants restés dans
   le flux. La marque, qui est statique, se retrouvait sous les 70 % de noir du
   voile — son filet crème tombait de 240 à 70 de luminance, et la plus grande
   taille du site se lisait comme une vignette sale. Les liens, eux, échappaient
   au voile par accident (`.nav-link` est `position: relative` pour son filet) :
   c'est cet écart entre le mot et la marque qui a mis sur la piste. */
.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: var(--header-h);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0));
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

.site-header[data-header="plain"] {
  color: var(--fg);
}

.site-header[data-header="plain"]::before,
.site-header.is-solid::before {
  opacity: 0;
}

/* Depuis la revue du 21-09-2026, l'en-tête opaque est une vitre de nuit :
   le blanc sur fond sombre remplace l'encre sur ivoire. Depuis celle du
   23-09-2026, elle n'a PLUS DE FILET BAS : la ligne d'un pixel qui la
   separait de la page etait la seule separation franche qui restait a
   l'ecran. Le verre et son ombre suffisent a la detacher. */
.site-header.is-solid {
  color: var(--fg);
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: saturate(130%) blur(18px);
  backdrop-filter: saturate(130%) blur(18px);
}

.site-header.is-hidden {
  transform: translate3d(0, -100%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .site-header.is-hidden {
    transform: none;
  }
}

/* La marque de l'en-tête est la plaque livrée le 23-09-2026 : elle porte
   elle-même le mot JASMIN, la mention « l'Art du Paysage » et la fleur de
   l'oiseau de paradis. Le lockup typographique — « Jasmin » en DM Serif
   Display, « Design de Jardins » en Jost, écrit à côté de la marque depuis le
   22-09-2026 — est donc retiré : le nom n'a plus à être écrit deux fois, une
   fois dans le dessin et une fois à côté de lui. Le jeton --font-brand reste
   dans 00-tokens.css pour tout autre emploi du mot-symbole (affiche,
   papeterie), là où la plaque ne descend pas à la taille voulue. */
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  padding-block: 0.35rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.3rem);
}

.nav-link {
  position: relative;
  display: inline-block;
  /* Les liens de la barre quittent le corps des étiquettes (0,68–0,75 rem) :
     à 13 px, ils se lisent sans effort sur la photographie comme sur la nuit,
     et l'interlettre se resserre d'autant. L'opacité passe de 0,86 à 0,94 :
     le survol et le rang courant gardent le dernier mot, mais la barre ne
     s'efface plus au repos. */
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  opacity: 0.94;
  transition: opacity var(--dur-1) var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  opacity: 1;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-link[aria-current="page"] {
  opacity: 1;
}

.nav-link[aria-current="page"]::after {
  background: var(--c-laiton);
}

/* Le lien de l'en-tête portait un cadre et se remplissait de laiton au survol.
   SIXIÈME PASSE, 26-09-2026 : il n'a plus de boîte. C'est la seule action de la
   barre, elle est au laiton, et son filet sous le mot dit le reste — la même
   langue que .btn et .link-arrow.
   29-09-2026, à la demande de la maison : le filet s'en va à son tour, et le mot
   doit se distinguer des deux liens de section. Sans boîte et sans teinte — la
   palette est au noir et blanc purs depuis le 26-09-2026 — il reste trois
   écarts : la graisse et l'interlettrage, déclarés dans la dernière couche
   (06-refonte, section 10 : écrits ici, 05-brand les reprenait), et la flèche du
   geste, celle de .btn__arrow, qui avance de 0,22 em au survol (une
   transformation, donc aucun décalage pour les voisins).
   Sa boîte, elle, est celle de .nav-link — même corps, même padding vertical,
   et surtout le même contexte : le bouton est devenu le dernier item de
   `.site-nav__list` le 29-09-2026 (voir la coquille, src/partials/
   page-shell.html). `padding: 0.35rem 0 0.5rem`, essayé d'abord, remontait son
   texte de 1,2 px au-dessus des autres ; resté frère de la liste, il gardait un
   centre 1,3 px trop haut, parce qu'un frère flexible se centre sur la ligne du
   parent et non sur celle des `<li>`. Voir README §48. */
.site-nav__cta {
  display: none;
}

@media (min-width: 1180px) {
  .site-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-size: 0.8rem;
    padding-block: 0.4rem;
    color: var(--c-blanc);
    transition: color var(--dur-1) var(--ease);
  }

  .site-nav__cta::after {
    content: "\2192";
    line-height: 1;
    transition: transform var(--dur-1) var(--ease);
  }

  .site-nav__cta:hover::after,
  .site-nav__cta:focus-visible::after {
    transform: translate3d(0.22em, 0, 0);
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-toggle__bars {
  position: relative;
  width: 1.7rem;
  height: 0.6rem;
  display: block;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}

.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child { bottom: 0; }

body.nav-open .nav-toggle__bars span:first-child {
  transform: translateY(0.3rem) rotate(45deg);
}

body.nav-open .nav-toggle__bars span:last-child {
  transform: translateY(-0.3rem) rotate(-45deg);
}

@media (max-width: 1023px) {
  .site-nav__list,
  .site-nav__cta {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
}

/* Menu mobile plein \u00e9cran
   LE RIDEAU EST UN MASQUE, PAS UN ROGNAGE - 29-09-2026.
   Le rideau \u00e9tait un `clip-path` pos\u00e9 sur l'overlay lui-m\u00eame. Or
   `clip-path` rogne aussi la ZONE DE TOUCHE : tant que le rideau n'\u00e9tait pas
   descendu jusqu'\u00e0 un lien, le tap sur ce lien tombait sur la page du dessous
   - et sur certains navigateurs mobiles la zone de touche reste fig\u00e9e sur
   l'\u00e9tat ferm\u00e9, si bien que le lien ne r\u00e9pond plus du tout. Le menu
   devenait inutilisable par intermittence (signal\u00e9 depuis un t\u00e9l\u00e9phone).
   La dur\u00e9e du rideau est de 1,2 s (`--dur-3`) : la fen\u00eatre pendant
   laquelle un tap se perdait \u00e9tait large.
   `mask-image` / `mask-size` peignent exactement le m\u00eame rideau, du haut
   vers le bas, sans jamais toucher \u00e0 la zone de touche : l'overlay r\u00e9pond
   d\u00e8s la premi\u00e8re image de l'ouverture, alors m\u00eame qu'il est encore
   invisible. V\u00e9rifi\u00e9 \u00e0 la sonde : `elementFromPoint` au centre
   d'un lien renvoie le lien (tools\qa-menu.ps1). */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--c-noir);
  color: var(--c-blanc);
  display: grid;
  align-content: start;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000, #000);
  mask-image: linear-gradient(to bottom, #000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top;
  mask-position: top;
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  visibility: hidden;
  transition:
    -webkit-mask-size var(--dur-3) var(--ease),
    mask-size var(--dur-3) var(--ease),
    visibility 0s linear var(--dur-3);
}

.nav-overlay[data-open="true"] {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  visibility: visible;
  transition:
    -webkit-mask-size var(--dur-3) var(--ease),
    mask-size var(--dur-3) var(--ease),
    visibility 0s;
}

.nav-overlay__list {
  display: grid;
}

.nav-overlay__link {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  /* Le tap n'attend plus de savoir s'il s'agit d'un double-tap de zoom : sur
     les liens du menu, cela supprime le d\u00e9lai qui fait perdre les taps
     rapides. */
  touch-action: manipulation;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 6.4vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  padding-block: 0.18em;
  border-bottom: var(--hairline) solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.nav-overlay__link > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--dur-3) var(--ease);
}

.nav-overlay[data-open="true"] .nav-overlay__link > span {
  transform: none;
}

/* `.nav-overlay__link .idx` — le rang du lien (00 → 03) — a été retiré le
   23-09-2026 : le menu plein écran dit ses quatre mots, sans numérotation. */

.nav-overlay__foot {
  margin-top: clamp(2rem, 6vw, 4rem);
  display: grid;
  gap: 0.4rem;
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.66);
}

.nav-overlay__foot a:hover {
  color: var(--c-blanc);
}

/* ==================================================================== ACTIONS
   Le bouton était une boîte : un cadre d'un pixel, et un remplissage de laiton
   qui montait du bas au survol. SIXIÈME PASSE, 26-09-2026 — LE GESTE SANS
   BOÎTE. La demande était double : retirer les carrés, et trouver autre chose
   pour dire « ceci est un geste ». La réponse était déjà dans le site — les
   liens fléchés (.link-arrow, plus bas) parlent cette langue depuis le début :
   capitales espacées, filet sous le mot, flèche qui glisse au survol. Le
   bouton s'y range.

   Ce qui remplace la boîte :
     1. le filet, toujours présent — c'est lui qui dit « on peut cliquer » ;
     2. la couleur : le laiton pour l'action principale (.btn--solid), le blanc
        pour la seconde (.btn--ghost-light) ;
     3. la flèche, qui glisse de 0,28 em au survol comme à la prise de focus.

   Ce qui disparaît : le cadre, le remplissage de laiton et son animation. Le
   contraste n'y perd rien : le laiton tient 11,9:1 sur l'obsidienne, et le
   texte noir posé sur laiton n'était que l'envers du même couple. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0 0 0.5rem;
  border: 0;
  border-bottom: var(--hairline) solid currentColor;
  font-size: var(--t-label);
  color: inherit;
  transition: color var(--dur-1) var(--ease), gap var(--dur-1) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  gap: 1.15em;
  color: var(--c-laiton-clair);
}

.btn:focus-visible {
  outline: 2px solid var(--c-laiton);
  outline-offset: 5px;
}

/* L'action principale est au laiton : c'est la seule couleur du site qui
   demande un geste (voir la note « Couleurs de rôle », 00-tokens). */
.btn--solid {
  color: var(--c-laiton);
}

/* La seconde action reste blanche : présente, mais sans l'accent. */
.btn--ghost-light {
  color: rgba(255, 255, 255, 0.88);
}

.btn__arrow {
  transition: transform var(--dur-2) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translate3d(0.28em, 0, 0);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: var(--hairline) solid currentColor;
  transition: gap var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  gap: 1.15em;
  color: var(--accent);
}

/* ================================================================ VISUELS */
.frame {
  position: relative;
  overflow: hidden;
  /* Le cadre d'attente était en pierre claire : sur un site de nuit, il
     clignotait blanc avant l'arrivée de l'image. Il prend le pas le plus
     relevé des matières sombres. */
  background: var(--s-3);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}

.frame--3x2 { aspect-ratio: 3 / 2; }
.frame--4x3 { aspect-ratio: 4 / 3; }
.frame--1x1 { aspect-ratio: 1 / 1; }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--10x7 { aspect-ratio: 10 / 7; }
.frame--21x9 { aspect-ratio: 21 / 9; }

.frame--zoom:hover img,
a:hover .frame--zoom img {
  transform: scale(1.045);
}

.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.figure {
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.figure__caption {
  font-size: var(--t-small);
  color: var(--fg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
  align-items: baseline;
}

.figure__caption b {
  font-weight: 400;
  color: var(--fg-muted);
}

/* Bandeau par\u00e9tallaxe plein cadre */
.parallax-band {
  position: relative;
  overflow: hidden;
  min-height: clamp(22rem, 30vw + 8rem, 44rem);
  display: grid;
  place-items: center;
  background: var(--c-encre);
}

.parallax-band__media {
  position: absolute;
  inset: -12% 0;
  will-change: transform;
}

.parallax-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
}

.parallax-band__content {
  position: relative;
  z-index: 2;
  color: var(--c-blanc);
  max-width: 62ch;
  text-align: center;
  padding: 3rem var(--gutter);
}

/* ===================================================================== PIED */
.site-footer {
  /* Le pied de page n'a plus de fond : ni voile, ni pierre. Il portait un
     voile de nuit fondu (`::before`) jusqu'au 23-09-2026 ; sous le noir pur
     du site, il n'en a plus besoin — voir 04-immersive, « FOND — LE NOIR
     NU ». */
  position: relative;
  isolation: isolate;
  color: rgba(255, 255, 255, 0.72);
  padding-top: var(--section-y-sm);
  font-size: var(--t-small);
  --rule: rgba(255, 255, 255, 0.14);
  --fg-faint: rgba(255, 255, 255, 0.45);
  --accent: var(--c-laiton-clair);
}

.site-footer h2,
.site-footer h3 {
  color: var(--c-blanc);
}

/* Trois colonnes depuis le 26-09-2026 : la colonne « Services » du pied de page
   est partie avec la page qu'elle détaillait (README §35). Le gabarit suivait
   quatre colonnes — la marque et ses trois listes ; il en suit trois, la
   marque gardant sa part plus large. */
.footer__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: var(--hairline) solid var(--rule);
}

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.06;
  color: var(--c-blanc);
  max-width: 16ch;
}

.footer__tagline {
  margin-top: 1rem;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.6);
}

.footer__col-title {
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.35rem;
}

.footer__list {
  display: grid;
  gap: 0.65rem;
}

.footer__list a {
  display: inline-block;
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease);
}

.footer__list a:hover,
.footer__list a:focus-visible {
  color: var(--c-blanc);
  padding-left: 0.35rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.8rem 2.2rem;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.footer__bottom a:hover {
  color: var(--c-blanc);
}