/* ============================================================================
   Base — reset, fontes, coquille de page, primitives typographiques.
   ========================================================================= */

/* ── Fontes ────────────────────────────────────────────────────────────────
   Variable sous-ensemblée : wdth épinglé à 100, wght borné 400-700,
   opsz borné 12-30 (seules plages employées par la maquette) → 48,5 Ko.
   Les overrides de métriques sont posés sur la VRAIE fonte aussi : ils
   neutralisent les écarts hhea/typo entre plateformes et rendent la
   compensation `text-box-trim` déterministe.                              */
@font-face {
  font-family: "Helvetica Now Var";
  src: url("../assets/fonts/helvetica-now-var-subset.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 87.5%;
  descent-override: 20.8%;
  line-gap-override: 0%;
}

/* Coupes « larges » — réservées à l'effet de proximité du hero.
   Elles conservent l'axe `wdth` et une plage de graisse étendue, ce que la
   coupe courante n'a pas : elle est épinglée sur ce dont le reste du site a
   besoin, et la garder mince protège le premier rendu.
   Elles ne sont donc PAS référencées par défaut. `js/hero-type.js` bascule la
   famille du titre une fois les deux fichiers chargés — 106 Ko n'ont rien à
   faire sur le chemin critique pour une interaction facultative.
   L'inclinaison n'est pas un axe de la variable : l'italique est un second
   fichier, sélectionné par `font-style` comme n'importe quelle fonte. */
@font-face {
  font-family: "HN Wide";
  src: url("../assets/fonts/helvetica-now-wide.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  ascent-override: 87.5%;
  descent-override: 20.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "HN Wide";
  src: url("../assets/fonts/helvetica-now-wide-italic.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
  ascent-override: 87.5%;
  descent-override: 20.8%;
  line-gap-override: 0%;
}

/* Fallback métriquement aligné : Arial redimensionné pour égaler la chasse
   moyenne d'Helvetica Now (0.5265 em vs 0.4817 em → 109.31 %).
   Les overrides sont exprimés relativement à la taille ajustée (× 100/109.31). */
@font-face {
  font-family: "HN Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 109.31%;
  ascent-override: 80.05%;
  descent-override: 19.03%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Chivo Mono";
  src: url("../assets/fonts/chivo-mono-300-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Chivo Mono";
  src: url("../assets/fonts/chivo-mono-300-latin-ext.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Menlo a exactement la même chasse (0.6021 em vs 0.6) — 99.66 % suffit. */
@font-face {
  font-family: "CM Fallback";
  src: local("Menlo"), local("Consolas");
  size-adjust: 99.66%;
  ascent-override: 94%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Sélection : « Background / Label » sur texte crème clair. Règle isolée — un
   navigateur qui ne connaîtrait pas `::selection` jetterait tout le bloc si on
   l'accompagnait d'un sélecteur préfixé. */
::selection {
  background: var(--c-label);
  color: var(--c-white);
}

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

html {
  overflow-x: clip; /* le filet de `body` ne se propage pas toujours à la fenêtre */
}

body {
  background: var(--c-cream);
  color: var(--c-brown);
  font-family: var(--ff-display);
  font-variation-settings: "wght" var(--fw-regular), "opsz" var(--opsz-display);
  font-optical-sizing: none; /* opsz piloté explicitement, comme dans Figma */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* filet de sécurité : rien ne doit déborder horizontalement */
}

/* ── Accessibilité ─────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-brown);
  outline-offset: 3px;
  border-radius: 2px;
}

.is-dark :focus-visible,
.is-dark:focus-visible {
  outline-color: var(--c-cream);
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--sp-8);
  inset-inline-start: var(--sp-8);
  z-index: var(--z-overlay);
  padding: var(--sp-12) var(--sp-16);
  background: var(--c-brown);
  color: var(--c-cream);
  font-family: var(--ff-mono);
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-tag);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ── Coquille ──────────────────────────────────────────────────────────── */
.shell {
  inline-size: 100%;
  max-inline-size: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block-start: var(--sp-inter);
}

/* Ancres de la navigation : le navigateur cale le haut de la section en haut de
   l'écran, donc le titre arrive sous tout le padding (200 px sur grand écran).
   On remonte l'arrivée pour que le contenu se pose à 100 px du haut ; sur
   mobile le padding (96 px) est déjà plus court, rien ne change. */
#cas,
#offres {
  scroll-margin-block-start: calc(-1 * max(0px, var(--sp-inter) - 100px));
}

/* Entre deux sections de même fond, le haut de la seconde porte les 200 px
   (la première n'a aucun padding bas). Quand le fond change — crème → sombre,
   sombre → crème — chaque côté de l'arête prend `--sp-edge` (160 px) : le
   contenu ne paraît jamais collé à la rupture.

   Les sélecteurs ciblent la rupture elle-même plutôt qu'une section nommée :
   si l'ordre des sections change un jour, la règle suit. */
.section:not(.section--dark):has(+ .section--dark),
.section--dark:not(:has(+ .section--dark)),
.section:last-of-type {
  padding-block-end: var(--sp-edge);
}

.section:not(.section--dark) + .section--dark,
.section--dark + .section:not(.section--dark) {
  padding-block-start: var(--sp-edge);
}

/* ── Primitives typographiques ─────────────────────────────────────────── */
/* Texte/X-Large — la liste des secteurs, seule occurrence du 64. */
.t-xl {
  font-size: var(--fs-xl);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-h1);
}

.t-h1 {
  font-size: var(--fs-h1);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  text-box: trim-both cap alphabetic;
  /* Pas de `text-wrap: balance` : Figma coupe en mode glouton
     (« Comprendre quand et comment / on vous accompagne. »), l'équilibrage
     déplacerait la césure et casserait la fidélité. */
}

/* Sous 1024 la maquette n'existe pas : on s'autorise `pretty`, qui évite
   les lignes finales orphelines sans jamais toucher à la césure de 1440. */
@media (max-width: 1023px) {
  .t-h1 {
    text-wrap: pretty;
  }
}

/* Dimensionnement tactile piloté par le type de pointeur, pas par la largeur :
   une tablette de 1024 px se touche autant qu'un téléphone. Écart assumé —
   le bouton passe de 41 à 44 px et l'en-tête d'accordéon de 14 à 44 px. */
@media (pointer: coarse) {
  .btn {
    min-block-size: 44px;
  }
}

.t-h2 {
  font-size: var(--fs-h2);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  text-box: trim-both cap alphabetic;
}

.t-h3 {
  font-size: var(--fs-h3);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  text-box: trim-both cap alphabetic;
}

/* Les titres d'étape de la modale sont en interligne serré, contrairement
   au nom d'offre qui reste en interligne 1. */
.t-h3--tight {
  line-height: var(--lh-tight);
}

.t-lg {
  font-size: var(--fs-lg);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}

/* Texte/Medium est la SEULE occurrence de la coupe « Text » (opsz 12). */
.t-md {
  font-size: var(--fs-md);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-text);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}

.t-sm {
  font-size: var(--fs-sm);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}

.t-body {
  font-size: var(--fs-body);
  font-variation-settings: "wght" var(--fw-regular), "opsz" var(--opsz-display);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

.t-body-sm {
  font-size: var(--fs-body-sm);
  font-variation-settings: "wght" var(--fw-regular), "opsz" var(--opsz-display);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

.t-tag {
  font-family: var(--ff-mono);
  font-weight: 300;
  font-size: var(--fs-tag);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tag);
}

.t-tag--x {
  line-height: var(--lh-body); /* variante Label/Tag (X-Height) */
}

/* Repli pour les navigateurs sans `text-box-trim` (< Chrome 133 / Safari 18.2).
   On reproduit le rognage à la main : voir la dérivation dans tokens.css. */
@supports not (text-box: trim-both cap alphabetic) {
  /* `.is-split` porte déjà le rognage sur ses lignes : ne pas l'appliquer deux fois. */
  .t-h1:not(.is-split) {
    display: block;
    margin-block: calc(-1 * var(--trim-cap-lh09)) calc(-1 * var(--trim-base-lh09));
  }

  .t-h3 {
    display: block;
    margin-block: calc(-1 * var(--trim-cap-lh10)) calc(-1 * var(--trim-base-lh10));
  }
}

/* ── Puce de section (barre + étiquette) ───────────────────────────────── */
.chip {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.chip__bar {
  inline-size: 12px;
  block-size: 25px;
  background: var(--c-label);
  opacity: 0.6;
}

.chip__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  background: var(--c-label);
  color: var(--c-cream);
  /* Le style Label/Tag est en capitales dans toute la maquette. Les libellés
     déjà saisis en majuscules ne changent pas ; ceux saisis en minuscules,
     comme « la cosmeek team », s'alignent enfin sur les autres. */
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--card .chip__label {
  background: var(--c-label-deep);
}

/* Sur fond sombre la puce s'inverse : aplat crème, texte couleur label. */
.chip--inverse .chip__bar,
.chip--inverse .chip__label {
  background: var(--c-cream);
}

.chip--inverse .chip__label {
  color: var(--c-label);
}

/* ── Bouton ────────────────────────────────────────────────────────────
   Fond orange, angles vifs (aucun rayon), typographie mono.

   Hover : le chevron entre par la gauche, le libellé glisse pour lui faire
   place, et un volet #6b2315 traverse dans le même sens. Les trois mouvements
   partagent la même direction — c'est ce qui donne l'impression d'une seule
   intention, pas de trois effets empilés.

   La largeur du bouton ne bouge pas : le chevron est posé en absolu DANS le
   padding gauche, donc rien n'est animé en layout. */
.btn {
  /* Rapprochement au survol, écrit par `.cta` : le bouton glisse vers la
     vignette pendant qu'elle glisse vers lui. */
  --btn-pull: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-btn-block) var(--pad-btn-inline);
  background: var(--c-orange);
  color: var(--c-white);
  font-family: var(--ff-mono);
  font-weight: 300;
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  letter-spacing: var(--ls-tag);
  text-decoration: none;
  transform: translate3d(var(--btn-pull), 0, 0);
  transition:
    transform var(--d-micro) var(--e-out),
    background-color var(--d-micro) var(--e-out),
    color var(--d-micro) var(--e-out);
  isolation: isolate;
}

/* Fond de survol : un calque qui change d'opacité plutôt qu'un `background-color`
   qui se repeint. L'opacité est animée par le compositeur, donc le bouton ne
   clignote plus quand la page est chargée (WebGL, vignettes) au premier survol. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cta-hover-bg, #2a2423);
  opacity: 0;
  transition: opacity var(--d-micro) var(--e-out);
}

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

.btn[aria-disabled="true"] {
  background: var(--c-label-deep);
  color: var(--c-ink-inv-3);
  pointer-events: none;
}

/* Un seul étage, aucun masque : l'interligne 1 laisse déjà passer les accents. */
.btn__label {
  display: block;
  white-space: nowrap;
}

/* ── CTA : vignette + bouton ───────────────────────────────────────────
   Node 3170:31956. Deux états. Au repos, la vignette et le bouton sont
   séparés de 6 et le portrait est teinté d'orange. Au survol, l'écart se
   referme, le bouton change de couleur (blanc ou encre selon le fond) et le
   portrait retrouve ses couleurs. `:active` double `:hover` : au doigt il
   n'y a pas de survol, l'effet n'existerait pas sans lui.

   Rien n'anime la mise en page : l'écart ne se referme pas en réduisant le
   `gap` — qui relancerait un calcul de mise en page à chaque image — mais en
   faisant glisser les deux moitiés l'une vers l'autre de la moitié de
   l'écart. L'aplat, lui, ne change pas de taille : il est posé une fois aux
   bonnes dimensions et joue en `scale`. */
.cta {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin: 0;
  isolation: isolate;
}

/* Couleurs du bouton au survol : on inverse le fond. Sur fond clair le bouton
   passe à l'encre #2a2423 en texte blanc ; sur fond sombre (`.cta--dark`) il
   passe au blanc en texte encre. */
.cta {
  --cta-hover-bg: #2a2423;
  --cta-hover-fg: var(--c-white);
}

.cta--dark {
  --cta-hover-bg: var(--c-white);
  --cta-hover-fg: #2a2423;
}

.cta:hover .btn,
.cta:focus-within .btn,
.cta:active .btn {
  color: var(--cta-hover-fg);
}

.cta:hover .btn::before,
.cta:focus-within .btn::before,
.cta:active .btn::before {
  opacity: 1;
}

.cta:hover .avatar,
.cta:focus-within .avatar,
.cta:active .avatar {
  transform: translate3d(var(--cta-bleed), 0, 0);
}

/* Le bouton ne se rapproche que s'il a une vignette dont se rapprocher : seul,
   il n'a pas d'écart à refermer, et se décaler décentrerait l'aplat. */
.cta:hover .avatar ~ .btn,
.cta:focus-within .avatar ~ .btn,
.cta:active .avatar ~ .btn {
  --btn-pull: calc(-1 * var(--cta-bleed));
}

/* Le portrait sort de l'orange. Quand le shader (js/cta-shader.js) est là, c'est
   lui qui s'efface case par case et la teinte CSS lui laisse la place. */
.cta:hover .avatar:not(.has-shader)::after,
.cta:focus-within .avatar:not(.has-shader)::after,
.cta:active .avatar:not(.has-shader)::after {
  opacity: 0;
}

.avatar.has-shader::after {
  display: none;
}

/* Calque du shader : orange en fusion « screen » par-dessus le portrait. */
.cta-shader {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Sur petit écran le bouton s'étire : le libellé doit rester centré. */
@media (max-width: 640px) {
  .btn {
    justify-content: center;
  }
}

/* ── Pastille d'angle (Ellipse 1868) ───────────────────────────────────── */
.dot {
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--c-label-deep);
}

/* Les libellés en capitales de la maquette sont saisis en bas de casse dans le
   HTML : c'est la mise en forme qui les capitalise, pas le contenu — les
   lecteurs d'écran énoncent alors des mots, pas des sigles. */
.u-upper {
  text-transform: uppercase;
}

/* ── Vignette de contact ────────────────────────────────────────────────
   Un carré orange où le portrait se fond en `screen`. Le fichier porte déjà
   sa plaque claire : le détourage nu laisserait passer l'orange pur là où la
   maquette montre un aplat rosé.
   Elle mesure la hauteur nette du bouton voisin — 41 dans Figma, 40 ici, à la
   suite de l'arbitrage typographique sur les boutons. La largeur est posée
   explicitement plutôt que déduite : sans contenu en flux, la base flex vaut
   zéro et `aspect-ratio` n'a rien d'où partir. */
.avatar {
  position: relative;
  inline-size: var(--size-btn);
  aspect-ratio: 1;
  background: var(--c-orange);
  overflow: clip;
  /* Le calque de teinte fusionne avec le portrait, pas avec la page. */
  isolation: isolate;
  /* Couche stable : sans elle, la vignette (portrait + canvas en `screen`) est
     promue au premier survol, et la reconstruction se voit comme un éclair. */
  will-change: transform;
  transition: transform var(--d-micro) var(--e-out);
}

/* Teinte orange en fusion « screen ». C'était l'image qui portait la fusion :
   déplacée ici, elle donne exactement le même rendu — `screen` est commutatif —
   mais s'efface en opacité, ce qu'un `mix-blend-mode` ne sait pas faire. */
.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-orange);
  mix-blend-mode: screen;
  transition: opacity var(--d-micro) var(--e-out);
}

/* Hors flux : sinon la taille intrinsèque de l'image (300 px) servirait de
   base au calcul, et la vignette n'aurait plus rien à voir avec le bouton. */
.avatar img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  will-change: transform;
  transition: transform 0.5s var(--e-spring);
}

/* Léger zoom du portrait au survol, comme sur le CTA de la hero. */
.cta:hover .avatar img,
.cta:focus-within .avatar img,
.cta:active .avatar img {
  transform: scale(1.1);
  transition-duration: 0.9s;
}

/* Le bloc sombre nomme « Texte/Body » un 15 px là où les sections claires
   nomment ainsi un 13 px (voir tokens.css). La FAQ emploie le premier : on lui
   donne enfin sa primitive, plutôt qu'un troisième réglage à la main.
   À reprendre : `.sectors__lede` et `.tm-slide__meta` refont ces deux lignes. */
.t-body-lg {
  font-size: var(--fs-body-lg);
  font-variation-settings: "wght" var(--fw-regular), "opsz" var(--opsz-display);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

/* Liens en ligne (« Malt ↗ », « Voir le projet ↗ »).

   Trait : il se trace de gauche à droite sous le lien au survol, et se retire
   par la droite en sortie (le point d'ancrage bascule d'un côté à l'autre).

   Flèche ↗ : le tracé de la maquette, repris en masque pour qu'elle hérite de
   la couleur du texte. Au survol elle sort par le coin haut droit de sa case
   pendant qu'une seconde revient du coin bas gauche : deux pseudo-éléments
   dans une case qui rogne. */
.blocage__lien,
.tm-slide__link,
.ctm__link {
  background:
    linear-gradient(currentcolor, currentcolor) 100% 100% / 0 1px no-repeat;
  padding-block-end: 2px;
  text-decoration: none;
  transition: background-size 0.4s var(--e-out);
}

.blocage__lien:hover,
.blocage__lien:focus-visible,
.tm-slide__link:hover,
.tm-slide__link:focus-visible,
.ctm__link:hover,
.ctm__link:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
  text-decoration: none;
}

.ico-ne {
  position: relative;
  display: inline-block;
  inline-size: 0.7em;
  block-size: 0.7em;
  margin-inline-start: 0.25em;
  vertical-align: -0.08em;
  overflow: hidden;
}

.ico-ne::before,
.ico-ne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentcolor;
  -webkit-mask: url("../assets/icons/arrow-ne.svg") center / contain no-repeat;
  mask: url("../assets/icons/arrow-ne.svg") center / contain no-repeat;
  transition: transform 0.35s var(--e-out);
}

/* La seconde flèche attend, hors case, dans le coin bas gauche. */
.ico-ne::after {
  transform: translate3d(-110%, 110%, 0);
}

a:hover > .ico-ne::before,
a:focus-visible > .ico-ne::before {
  transform: translate3d(110%, -110%, 0);
}

a:hover > .ico-ne::after,
a:focus-visible > .ico-ne::after {
  transform: translate3d(0, 0, 0);
  transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .blocage__lien,
  .tm-slide__link,
  .ctm__link,
  .ico-ne::before,
  .ico-ne::after {
    transition-duration: 1ms;
    transition-delay: 0s;
  }
}

/* ── Doigt ─────────────────────────────────────────────────────────────
   Cibles tactiles d'au moins 44 px, sans toucher à l'aspect : on agrandit la
   zone sensible, pas le dessin. */
@media (pointer: coarse) {
  /* Liens en ligne : le remplissage vertical agrandit la zone sensible sans
     bouger le texte (il n'entre pas dans la mise en page d'un élément en ligne),
     et le trait reste calé sur le texte plutôt que sur ce remplissage. */
  .blocage__lien,
  .tm-slide__link,
  .ctm__link {
    padding-block: 10px;
    background-origin: content-box;
  }

  /* Les liens des cartes « blocages » sont des items de flex : leur
     remplissage compte dans la mise en page (contrairement à un lien en
     ligne) et écartait les deux liens de 20 px. Une marge négative rend cet
     espace ; la zone sensible reste de 36 px de haut. */
  .blocage__lien {
    margin-block: -8px;
  }

  .nav__link {
    min-block-size: 44px;
  }

  .trio__pole::after,
  .tm__arrow::after,
  .blocages__bouton::after {
    content: "";
    position: absolute;
    inset: -8px;
  }

  .tm__arrow,
  .blocages__bouton {
    position: relative;
  }

  html {
    -webkit-tap-highlight-color: transparent;
  }
}