@charset "utf-8";

@font-face{
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family: "Bricolage Grotesque repli";
  src: local("Segoe UI Semibold"), local("Segoe UI"),
       local("Helvetica Neue"), local("Helvetica"),
       local("DejaVu Sans"), local("Liberation Sans"), local("Arial");
  size-adjust: 101.75%;
  ascent-override: 91.40%;
  descent-override: 26.54%;
  line-gap-override: 0%;
}
@font-face{
  font-family: "Geist Mono";
  src: url("fonts/geist-mono/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Geist Mono repli";
  src: local("Consolas"), local("Cascadia Mono"),
       local("SF Mono"), local("Menlo"),
       local("DejaVu Sans Mono"), local("Liberation Mono"), local("Courier New");
  size-adjust: 109.13%;
  ascent-override: 92.09%;
  descent-override: 27.03%;
  line-gap-override: 0%;
}

:root{

  --lum-angle:   180deg;
  --lum-teinte:  214;
  --lum-temp:    6500;
  --lum-rvb:     206 218 234;

  --lum-i:       0.10;
  --lueur-1:     calc(var(--lum-i) * 1);
  --lueur-2:     calc(var(--lum-i) * 0.46);
  --lueur-3:     calc(var(--lum-i) * 0.18);

  --s-0:         #0E1013;
  --s-1:         #14171B;
  --s-2:         #1A1E23;
  --s-3:         #21262C;
  --s-4:         #262B31;
  --s-5:         #343B43;

  --lum-fin:     #090A0D;

  --fond:        var(--s-0);
  --surface-1:   var(--s-1);
  --surface-2:   var(--s-2);
  --panneau:     var(--s-3);
  --filet:       var(--s-4);
  --filet-2:     var(--s-5);

  --craie:       #E4E7EB;
  --encre-2:     #A2ACB5;

  --encre-3:     #ADB7C1;

  --soufre:      #F2D23A;

  --force-b:     #F2D23A;
  --soufre-bas:  #6B5E1C;
  --iris:        #D673F0;
  --iris-bas:    #5D2A78;

  --gris-mesure: #9DA8B2;

  --fig-accent: #F97B4F;

  --planche:        #E7E4DC;
  --planche-encre:  #15181C;
  --planche-encre2: #3E444B;
  --planche-filet:  #B9B4A6;
  --planche-soufre: #5A5340;
  --planche-iris:   #5D2A78;

  --f-titre: "Bricolage Grotesque", "Bricolage Grotesque repli", sans-serif;
  --f-prose: "Bricolage Grotesque", "Bricolage Grotesque repli", sans-serif;
  --f-nombre: "Geist Mono", "Geist Mono repli", monospace;

  --e-1: 0.375rem;
  --e-2: 0.75rem;
  --e-3: 1.5rem;
  --e-4: 2.25rem;
  --e-5: 3.75rem;
  --e-6: 6rem;
  --filet-w: 1px;

  --t-0: clamp(0.78rem, 0.755rem + 0.11vw, 0.86rem);
  --t-1: clamp(0.95rem, 0.92rem + 0.14vw, 1.05rem);
  --t-2: clamp(1.08rem, 1.02rem + 0.26vw, 1.26rem);
  --t-3: clamp(1.32rem, 1.18rem + 0.6vw, 1.72rem);
  --t-4: clamp(1.72rem, 1.4rem + 1.4vw, 2.7rem);
  --t-5: clamp(2.3rem, 1.6rem + 3vw, 4.4rem);
  --t-6: clamp(3.4rem, 1.7rem + 7.2vw, 8.6rem);

  --l-lecture: 64ch;
  --l-prose:   50rem;
  --l-note:    78rem;
  --l-large:   96rem;
  --gouttiere: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);

  --pas: clamp(0.38rem, 0.15rem + 1.9vw, 2rem);
  --h-cote: clamp(0.75rem, 0.6rem + 0.5vw, 1.05rem);

  --r: 0;

  --r-pilule: 999px;

  --d-0:  50ms;
  --d-1:  80ms;
  --d-2: 150ms;
  --d-3: 260ms;
  --d-4: 340ms;
  --d-5: 400ms;
  --c-entree: cubic-bezier(0.18, 0.76, 0.26, 1);
  --c-sortie: cubic-bezier(0.42, 0, 0.82, 0.28);

  --fin-lumiere: 62rem;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");
  --hachures: repeating-linear-gradient(45deg, var(--filet-2) 0 2px, transparent 2px 6px);

  --ombre-contact-1: 0 1px 0 0 rgb(0 0 0 / 0.55);
  --ombre-contact-2: 0 3px 8px -2px rgb(0 0 0 / 0.45);

  --verre-flou:  12px;
  --verre-tete:  rgb(14 16 19 / 0.82);
  --verre-bloc:  rgb(33 38 44 / 0.74);
  --verre-filet: rgb(228 231 235 / 0.09);

  color-scheme: dark;
}

@supports (color: oklch(0.5 0.1 200)){
  :root{
    --soufre:  oklch(0.8662 0.1626 96.57);
    --force-b: oklch(0.8662 0.1626 96.57);
    --iris:    oklch(0.7141 0.1987 318.95);
    --craie:   oklch(0.9268 0.0063 255.48);
  }
}

*, *::before, *::after{ box-sizing: border-box }

*{ align-content: start }

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

body{

  margin-block: 0; margin-inline: 0;
  background-color: var(--fond);
  color: var(--craie);

  background-image:
    var(--grain),
    linear-gradient(var(--lum-angle),
      rgb(var(--lum-rvb) / var(--lueur-1)) 0,
      rgb(var(--lum-rvb) / var(--lueur-2)) 9rem,
      rgb(var(--lum-rvb) / var(--lueur-3)) 17rem,
      rgb(var(--lum-rvb) / 0) 27rem),
    linear-gradient(var(--lum-angle), var(--s-2) 0, var(--s-1) 24rem, var(--fond) var(--fin-lumiere), var(--lum-fin) 100%);
  background-attachment: scroll, fixed, fixed;
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 180px 180px, 100% 100%, 100% 100%;
  font-family: var(--f-prose);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  line-height: 1.62;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: break-word;
}

svg{ max-width: 100% }
img{ max-width: 100% }
a{ color: inherit }
b, strong{ font-weight: 600 }
:focus-visible{ outline: 3px solid var(--soufre); outline-offset: 2px }

h1, h2, h3, h4{
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-block: 0 var(--e-2);
  margin-inline: 0;
  text-wrap: balance;
}
h1{ font-size: var(--t-5); letter-spacing: -0.03em; line-height: 1.02 }
h2{ font-size: var(--t-4); letter-spacing: -0.022em }
h3{ font-size: var(--t-3) }
h4{ font-size: var(--t-2) }

p, ul, ol, dl, figure, table, blockquote{ margin-block: 0 var(--e-3); margin-inline: 0 }
p:last-child, ul:last-child, ol:last-child, dl:last-child{ margin-block-end: 0 }
p{ max-inline-size: var(--l-lecture) }
li{ margin-block: 0 var(--e-1) }
figure{ max-inline-size: 100% }

.n, .q, .v, .val, .pt, .gros, .pdev, .bp, .b-val, .hh, .fr, .cpt b, .k b, time{
  font-family: var(--f-nombre);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.vh{
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin-block: -1px; margin-inline: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saut{
  position: absolute; inset-block-start: -100vh; inset-inline-start: 0;
  background: var(--soufre); color: #14120A; z-index: 40; font-weight: 600;
  padding-block: var(--e-2); padding-inline: var(--e-3);
}
.saut:focus{ inset-block-start: 0 }

main{ display: block }

section{
  padding-block: var(--e-5);
  padding-inline: 0;
  position: relative;
}
section + section{ border-block-start: var(--filet-w) solid var(--filet) }

.wrap{
  inline-size: 100%;
  max-inline-size: var(--l-note);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.wrap.large{ max-inline-size: var(--l-large) }

.wrap.lecture{ max-inline-size: var(--l-prose) }
.wrap.lecture p, .wrap.lecture dd, .wrap.lecture li{ max-inline-size: 72ch }

@media (min-width: 1024px){ section{ padding-block: var(--e-6) } }
@media (max-width: 560px){ section{ padding-block: var(--e-4) } }

.tete{
  position: sticky; inset-block-start: 0; z-index: 30;
  padding-block: 0.5rem;
  background: transparent;
  pointer-events: none;
}
.tete-in{
  pointer-events: auto;
  inline-size: calc(100% - 2 * var(--gouttiere));
  max-inline-size: var(--l-large);
  margin-inline: auto;
  padding-inline: var(--e-3);
  display: flex; align-items: center; gap: var(--e-3);
  block-size: 3rem;
  border-radius: var(--r-pilule);

  background: var(--panneau);
  border: var(--filet-w) solid var(--filet);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .tete-in{
    background: var(--verre-tete);
    -webkit-backdrop-filter: blur(var(--verre-flou));
    backdrop-filter: blur(var(--verre-flou));
    border-color: var(--verre-filet);
  }
}
:target{ scroll-margin-block-start: 4.5rem }

.marque{
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-1);
  letter-spacing: 0.14em; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--e-2); color: var(--craie);
  min-block-size: 44px;
}
.mk{
  inline-size: 0.85rem; block-size: 0.85rem; display: inline-block;
  background: var(--soufre);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 62%);
}
.mk-c{ background: var(--iris) }

.nav{ display: flex; gap: var(--e-3); flex: 1 1 auto; min-inline-size: 0; overflow: hidden }
.nav a{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--encre-2); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; block-size: 2.9rem;
  border-block-end: 2px solid transparent;
}
.nav a:hover{ color: var(--craie); border-block-end-color: var(--filet-2) }
.nav a[aria-current]{ color: var(--soufre); border-block-end-color: var(--soufre) }
.tete .menu{ display: none }
.stamp{
  margin-block: 0; margin-inline-start: auto;
  font-size: var(--t-0); color: var(--encre-3); white-space: nowrap;
  flex: 0 1 auto; min-inline-size: 0; overflow: hidden;
}
.stamp b{ color: var(--craie); font-family: var(--f-nombre) }
.long{ display: none }
@media (min-width: 1660px){ .long{ display: inline } }

@media (max-width: 900px){
  .tete-in > .nav{ display: none }
  .tete .menu{ display: block; margin-inline-start: auto }
  .tete .menu > summary{
    font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer; color: var(--encre-2); list-style: none;
    display: flex; align-items: center; block-size: 3.4rem;
  }
  .tete .menu > summary::-webkit-details-marker{ display: none }

  .tete .menu:not([open]) > .nav{ display: none }
  .tete .menu[open] > .nav{
    position: absolute; inset-inline: 0; inset-block-start: 3.5rem;
    background: var(--surface-1);
    border-block-end: var(--filet-w) solid var(--filet);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--gouttiere);

    max-block-size: calc(100vh - 3.5rem);
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    padding-block-end: var(--e-2);
  }
  @supports (max-block-size: 100dvh){
    .tete .menu[open] > .nav{ max-block-size: calc(100dvh - 4rem) }
  }
  .tete .menu[open] > .nav a{ block-size: 2.75rem }

  .tete .menu[open] > .nav > .sur-menu,
  .tete .menu[open] > .nav > .somm-menu{ grid-column: 1 / -1 }
  .tete .menu[open] > .nav > .somm-menu a{ block-size: 2.75rem }
  .stamp{ display: none }
}

.piste{
  display: grid;
  grid-template-columns: repeat(var(--cols, 200), minmax(0, 1fr));
  align-items: center;
  position: relative;
  min-block-size: var(--h-cote);
}

.piste > .pont{
  grid-row: 1;
  grid-column: var(--cmin, 100) / var(--cmax, 101);
  block-size: 0.5rem;
  background-image: linear-gradient(90deg, var(--soufre-bas) 0, var(--soufre) 100%);
  border-radius: 999px;
}
.piste > .tk{
  grid-row: 1;
  grid-column: var(--c, 100);
  justify-self: center; align-self: center;
  inline-size: 1.1rem; block-size: 1.1rem;
  overflow: visible; z-index: 1;
}
.piste > .tk > .chev{
  inline-size: 1.1rem; block-size: 1.1rem; max-inline-size: none;
}

.seuil{
  justify-self: start;
  max-inline-size: 100%;
  display: grid;

  grid-template-columns:
    [neg] calc(var(--negn, 0) * var(--pas))
    [zero] 2px
    [pos] minmax(0, max-content);
  align-items: center;
  position: relative;

  background-image:
    repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px var(--pas));
  background-position-x: calc(var(--negn, 0) * var(--pas));
}

.seuil::before, .seuil::after{
  content: ""; position: absolute; pointer-events: none;
}
.seuil::before{
  inset-block: -0.45rem; inline-size: 2px;
  inset-inline-start: calc(var(--negn, 0) * var(--pas));
  background: var(--craie); opacity: 0.85;
}
.seuil::after{
  inset-block: -0.3rem; inline-size: 1px;
  inset-inline-end: -1px; background: var(--soufre); opacity: 0.7;
}

.seuil > .cote{
  grid-column: pos; justify-self: start;
  min-inline-size: calc(var(--n, 1) * var(--pas));
  block-size: var(--h-cote);
  background-image: linear-gradient(90deg, var(--soufre-bas) 0, var(--soufre) 100%);
  position: relative; z-index: 1;
}

.seuil > .cote.neg{
  grid-column: neg; justify-self: end;
  background-image: linear-gradient(90deg, var(--soufre) 0, var(--soufre-bas) 100%);
}
.seuil > .cote.d-neg{ background-image: linear-gradient(90deg, var(--iris-bas) 0, var(--iris) 100%) }
.seuil > .cote.d-neg.neg{ background-image: linear-gradient(90deg, var(--iris) 0, var(--iris-bas) 100%) }
.seuil > .cote.neutre{ background-image: linear-gradient(90deg, #333A42 0, var(--gris-mesure) 100%) }
.seuil > .cote.neutre.neg{ background-image: linear-gradient(90deg, var(--gris-mesure) 0, #333A42 100%) }
.seuil > .cote.hach{ background-image: var(--hachures) }

.seuil > .cote.zero{
  grid-column: zero;
  min-inline-size: 0;
  inline-size: 3px;
  background-image: none;
  background: var(--craie);
}

.rang-seuil{
  display: grid;
  grid-template-columns: [nom] minmax(5rem, 9ch) [seuil] minmax(0, max-content) [val] minmax(3.5rem, max-content);
  align-items: center;
  gap: var(--e-2);
  padding-block: var(--e-1);
  border-block-end: var(--filet-w) solid var(--filet);
  text-decoration: none;
}
.rang-seuil:last-child{ border-block-end: 0 }
.rang-seuil:hover{ background: var(--surface-1) }
.rang-seuil .dev{
  font-family: var(--f-nombre); font-size: var(--t-0); letter-spacing: 0.04em;
  color: var(--craie); white-space: nowrap;
}
.rang-seuil .q{ font-size: var(--t-0); color: var(--encre-2); text-align: end; white-space: nowrap }
.seuil-tete{
  display: grid;

  grid-template-columns: [nom] minmax(5rem, 9ch) [seuil] max-content [val] minmax(3.5rem, max-content);
  gap: var(--e-2);
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3);
  padding-block: 0 var(--e-1);
  border-block-end: var(--filet-w) solid var(--filet-2);
}

@media (max-width: 720px){

  .rang-seuil{ grid-template-columns: [nom] minmax(0, 1fr) [val] max-content; row-gap: var(--e-1) }

  .rang-seuil .seuil{
    grid-column: 1 / -1;
    inline-size: 100%;

    grid-template-columns: repeat(16, minmax(0, 1fr)) 2px repeat(16, minmax(0, 1fr));
    background-image:
      repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 3.125%);
    background-position-x: 0;
  }
  .rang-seuil .seuil::before{ inset-inline-start: 50% }
  .rang-seuil .seuil > .cote{
    min-inline-size: 0; inline-size: auto; grid-column: 18 / span var(--n, 1);
  }
  .rang-seuil .seuil > .cote.neg{ grid-column: span var(--n, 1) / 17 }
  .rang-seuil .seuil > .cote.zero{ grid-column: 17 / 18; inline-size: 3px }
  .planche .rang-seuil .seuil{
    background-image:
      repeating-linear-gradient(90deg, var(--planche-filet) 0 1px, transparent 1px 6.25%);
  }
  .seuil-tete{ display: block }
  .seuil-tete > span{ display: inline; margin-inline-end: var(--e-2) }
}

.heros{ padding-block-start: var(--e-5) }
.sur{
  font-family: var(--f-nombre); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--soufre); margin-block: 0 var(--e-2);
  display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap;
}
.sur .n{ color: var(--encre-3) }
.verdict{
  font-family: var(--f-titre); font-size: var(--t-4); font-weight: 600;
  line-height: 1.16; letter-spacing: -0.02em;
  max-inline-size: 34ch; margin-block: 0 var(--e-3); text-wrap: balance;
}
.verdict-f{ color: var(--soufre) }
.chapo{
  font-size: var(--t-2); color: var(--encre-2); line-height: 1.6;
  max-inline-size: var(--l-lecture); margin-block: 0 var(--e-3);
}
.chapo b{ color: var(--craie) }
.aveu{
  font-size: var(--t-0); color: var(--encre-3);
  border-inline-start: 2px solid var(--filet-2);
  padding-inline-start: var(--e-2); max-inline-size: 66ch; margin-block: 0 var(--e-3);
}
.gros{
  font-size: var(--t-6); line-height: 0.86; letter-spacing: -0.04em;
  color: var(--soufre); display: block; margin-block: 0;
  font-family: var(--f-nombre); font-weight: 600;
}
.gros .u{ font-size: var(--t-3); color: var(--encre-2); letter-spacing: 0 }
.heros-grille{
  display: grid; gap: var(--e-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px){
  .heros-grille{ grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr) }
}

.heros .grille{
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr));
  border-block: var(--filet-w) solid var(--filet);
  padding-block: var(--e-3);
}
@media (max-width: 560px){
  .heros .grille{ grid-template-columns: minmax(0, 1fr); grid-template-rows: none }
}

.heros .grille{ grid-template-rows: auto auto auto }
.heros .grille > .bloc{
  display: grid; gap: var(--e-1); align-content: start;
  padding: 0; border: 0; background: none;
}
@supports (grid-template-rows: subgrid){
  @media (min-width: 561px){
    .heros .grille > .bloc{ grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--e-1) }
  }
}
.heros .grille .lab{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3); margin-block: 0;
}
.heros .grille .cote{
  grid-column: auto; min-inline-size: 0; block-size: auto;
  background-image: none;
  font-family: var(--f-nombre); font-size: var(--t-3); color: var(--craie);
  line-height: 1.1;
}

.bloc{

  background: var(--panneau);
  border: var(--filet-w) solid var(--filet);
  padding: var(--e-3);
  display: grid; align-content: start; gap: var(--e-2);
  box-shadow: var(--ombre-contact-1), var(--ombre-contact-2);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .bloc{
    background: var(--verre-bloc);
    -webkit-backdrop-filter: blur(var(--verre-flou));
    backdrop-filter: blur(var(--verre-flou));
  }
}
.bloc:hover{ border-color: var(--filet-2) }

.temps{
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-2);
}
.temps > li{
  grid-column: span var(--sp, 6);
  border-inline-start: var(--filet-w) solid var(--filet-2);
  padding: 0 0 0 var(--e-2);
  display: grid; align-content: start; gap: var(--e-1);
}
.temps > li > h3{ margin: 0 }
.temps .t-n{
  margin: 0; display: flex; align-items: baseline; gap: 0.5ch;
  font-family: var(--f-mono);
}
.temps .t-n > b{ font-size: var(--t-3); color: var(--soufre); font-weight: 500 }
.temps .t-n > span{ font-size: var(--t-0); color: var(--encre-3) }
.temps > li > p{ margin: 0 }
@media (max-width: 900px){
  .temps > li{ grid-column: span 12 }
}

.mur > li, .evt, .seuil, .rang-seuil, .branche, .f-couloir, .anat{
  box-shadow: var(--ombre-contact-1), var(--ombre-contact-2);
}
.lab{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3); margin-block: 0;
}
.sous{ font-size: var(--t-1); color: var(--encre-2); margin-block: 0 }
.note{
  font-size: var(--t-0); color: var(--encre-3); line-height: 1.5;
  max-inline-size: 76ch; margin-block: var(--e-2) 0;
}
.note-bruit{ border-inline-start: 2px solid var(--filet-2); padding-inline-start: var(--e-2) }
.orig, .source-ligne, .parution, .m-t, .t0, .t-c, .t-l, .t-mi, .t-deb, .t-fin, .pt-o{
  font-size: var(--t-0); color: var(--encre-3);
}
.avert{
  border: var(--filet-w) solid var(--soufre-bas);
  background: rgba(242, 210, 58, 0.06);
  padding: var(--e-3); font-size: var(--t-1); margin-block: 0 var(--e-3);
}
.honnete{
  border-block-start: 2px solid var(--iris-bas);
  padding-block-start: var(--e-2); font-size: var(--t-1); color: var(--encre-2);
}
.hors-semaine{ opacity: 0.74 }
.retrait{ padding-inline-start: var(--e-3) }

.sep{
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block-start: var(--e-2);
  margin-block: var(--e-3) 0;
  font-size: var(--t-1); color: var(--encre-2);
}
.sep > b{ color: var(--craie); font-weight: 400 }
hr.sep{
  block-size: var(--filet-w); background: var(--filet);
  border: 0; padding: 0; margin-block: var(--e-3);
}

.grille, .tuiles, .fenetres, .codes, .routes, .ponts, .compar{
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr));
}
@media (max-width: 900px){
  .grille, .tuiles, .fenetres, .codes, .routes, .ponts, .compar{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .grille, .tuiles, .fenetres, .codes, .routes, .ponts, .compar{
    grid-template-columns: minmax(0, 1fr);
  }
}

.faits{ list-style: none; padding: 0; margin-block: var(--e-3) 0; display: grid }

.refus{ list-style: none; padding: 0; margin-block: var(--e-3) 0; display: grid }
.refus > li{
  display: grid; gap: var(--e-1); align-content: start;
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block: var(--e-2); margin-block: 0;
  max-inline-size: var(--l-lecture);
}
.refus .k{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--soufre);
}
.refus p{ margin-block: 0; color: var(--encre-2) }
.metriques{ list-style: none; padding: 0; margin-block: var(--e-3) 0; display: grid }
.faits > li, .metriques > li{
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: var(--e-3); row-gap: var(--e-1);
  align-items: baseline; align-content: start;
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block: var(--e-2); margin-block: 0;
}

.faits > li.fait-liste{ grid-template-columns: minmax(0, 1fr) }

@media (max-width: 560px){
  .faits > li, .metriques > li{ grid-template-columns: minmax(0, 1fr) }
}
.faits .k{
  display: grid; gap: var(--e-1);
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--encre-3);
}
.faits .k i, .metriques .k i, .fenetre .k i{
  display: block; font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--encre-3); font-size: var(--t-0); line-height: 1.45;
  max-inline-size: 62ch;
}
.faits .v{
  font-family: var(--f-nombre); font-size: var(--t-3); color: var(--craie); line-height: 1.1;
  text-align: end; justify-self: end;
}
.classement{
  display: grid; gap: 0; padding: 0; margin-block: var(--e-1) 0;
  grid-template-columns: minmax(0, 1fr);
}
.classement > li{
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) max-content;
  gap: var(--e-2); align-items: baseline; margin-block: 0;
  padding-block: var(--e-1);
  border-block-end: var(--filet-w) solid var(--filet);
  font-family: var(--f-nombre); font-size: var(--t-1);
}
.classement > li:last-child{ border-block-end: 0 }
.classement > li > b{ color: var(--encre-3); font-weight: 400 }
.classement > li > span{ color: var(--craie); letter-spacing: 0.04em }
.classement > li > em{ font-style: normal; color: var(--soufre); text-align: end }

.metriques .k, .fenetre .k{
  display: grid; gap: var(--e-1);
  font-size: var(--t-0); color: var(--encre-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.metriques .v, .fenetre .v{
  display: grid; gap: var(--e-1);
  font-family: var(--f-nombre); font-size: var(--t-3); color: var(--craie); line-height: 1.1;
}

.metriques .v{ text-align: end; justify-self: end }
.metriques .u{ text-align: end }
.metriques .u, .fenetre .u{
  display: block;
  font-family: var(--f-prose); letter-spacing: 0;
  font-size: var(--t-0); color: var(--encre-3);
}

.queue{
  grid-column: 1 / -1;
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block-start: var(--e-2);
  font-size: var(--t-0); color: var(--encre-3);
}

.jauge{
  display: block;
  block-size: var(--h-cote); background: var(--surface-2);
  border: var(--filet-w) solid var(--filet); position: relative; overflow: hidden;
  margin-block: var(--e-2);
}
.jauge > i{
  display: block; block-size: 100%;
  inline-size: calc(var(--p, 0) * 1%);
  background-image: linear-gradient(90deg, var(--soufre-bas) 0, var(--soufre) 100%);
}
.jauge.creuse > i{ background-image: var(--hachures) }
.jauge-lab{ font-family: var(--f-nombre); font-size: var(--t-0); color: var(--encre-2) }

.couloir{ position: relative; margin-block: var(--e-3) var(--e-2) }
.bandes{
  display: grid; grid-template-columns: repeat(var(--cols, 200), minmax(0, 1fr));
  align-items: center; min-block-size: 5.2rem; position: relative;
  background: var(--surface-2);
}
.b-large{
  grid-column: calc(100 - var(--c2) * var(--kp)) / calc(100 + var(--c2) * var(--kp));
  grid-row: 1; block-size: 4.4rem;
  background-image: linear-gradient(90deg,
    rgba(214, 115, 240, 0) 0,
    rgba(214, 115, 240, 0.34) 26%,
    rgba(214, 115, 240, 0.34) 74%,
    rgba(214, 115, 240, 0) 100%);
}
.b-median{
  grid-column: calc(100 - var(--c1) * var(--kp)) / calc(100 + var(--c1) * var(--kp));
  grid-row: 1; block-size: 2.9rem;
  border-inline: var(--filet-w) solid var(--iris);
  background-image: repeating-linear-gradient(45deg,
    rgba(214, 115, 240, 0.30) 0 2px, transparent 2px 7px);
}
.b-val{
  grid-column: calc(100 + var(--v) * var(--kp)) / span 1; grid-row: 1;
  justify-self: center; position: relative;
  block-size: 5.2rem; inline-size: 2px; background: var(--craie);
}
.b-val > b{
  position: absolute; inset-block-start: -0.15rem; inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--craie); color: var(--fond);
  padding: 0.12rem 0.4rem; font-size: var(--t-0);
  font-family: var(--f-nombre); font-weight: 400; white-space: nowrap;
}

.b-val.b-deb > b{ inset-inline-start: 0; transform: none }
.b-val.b-fin > b{ inset-inline-start: auto; inset-inline-end: 0; transform: none }
.b-froid > b{ background: var(--gris-mesure) }
.regle-p{
  display: grid; grid-template-columns: repeat(var(--cols, 200), minmax(0, 1fr));
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block-end: 1.4rem; margin-block-start: -1px;
}

.regle-p .t{
  grid-column: var(--g) / span 1; justify-self: center;
  inline-size: 1px; block-size: 0.5rem;
  position: relative; display: block;
}
.regle-p .t::before{
  content: ""; position: absolute; inset: 0; background: var(--filet-2);
}
.regle-p .t.t0{ block-size: 0.8rem }
.regle-p .t.t0::before{ background: var(--encre-3) }
.regle-p .t > b{
  position: absolute; inset-block-start: calc(100% + 0.2rem); inset-inline-start: 50%;
  transform: translateX(-50%);
  font-family: var(--f-nombre); font-size: var(--t-0); font-weight: 400;
  color: var(--encre-3); white-space: nowrap;
}
.regle-p .t.t-deb > b{ inset-inline-start: 0; transform: none }
.regle-p .t.t-fin > b{ inset-inline-start: auto; inset-inline-end: 0; transform: none }

@media (max-width: 560px){
  .regle-p .t:not(.t0):not(.t-deb):not(.t-fin) > b{ display: none }
}
.f-couloir, .f-contour, .fig-cadre, .anat, .anat-fig,
.demo-piste, .demo-barre, .demo-formes, .hex-demo{
  border: var(--filet-w) solid var(--filet);
  padding: var(--e-3); background: var(--surface-1);
  display: grid; gap: var(--e-2);
}

.f-r{
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.bande{
  display: grid; gap: var(--e-2); padding: 0; list-style: none;
  grid-template-columns: minmax(0, 1fr); margin-block: var(--e-3) 0;
}
@media (min-width: 900px){
  .bande{ grid-template-columns: repeat(5, minmax(0, 1fr)) }
}
.bande > li{
  display: grid; gap: var(--e-1); margin-block: 0;
  border-block-start: 2px solid var(--filet-2); padding-block-start: var(--e-2);
}
.bande .j, .bande > li > .j{
  font-size: var(--t-1); border-block-end: 0; padding-block-end: 0;
}
.bande ul{ display: grid; gap: var(--e-1); padding: 0; list-style: none; margin-block: 0 }

.bande ul li{
  font-size: var(--t-0); color: var(--encre-3); margin-block: 0;
  display: grid; gap: 0.1rem; justify-items: start;
}

.partition{
  display: flex; block-size: 1.35rem; overflow: hidden;
  border: var(--filet-w) solid var(--filet); background: var(--surface-2);
}
.partition > span{
  display: block; flex: 0 0 calc(var(--p, 0) * 1%);
  background: var(--soufre); opacity: 0.92;
  border-inline-end: var(--filet-w) solid var(--fond);
}
.partition > span.b2{ background: var(--iris) }
.partition > span.b3{ background: var(--gris-mesure) }
.partition > span.b4{ background-image: var(--hachures); background-color: var(--surface-2) }

.tige{ block-size: var(--h-cote); background-image: linear-gradient(90deg, var(--soufre-bas) 0, var(--soufre) 100%) }
.jeton{ inline-size: 0.8rem; block-size: 0.8rem; background: var(--craie); display: inline-block }
.bruit{ background-image: var(--hachures); block-size: var(--h-cote); opacity: 0.7 }
.hach{ background-image: var(--hachures) }
.chev{ inline-size: 0.9em; block-size: 0.9em; vertical-align: -0.08em }
.fort{ color: var(--soufre) }
.faible{ color: var(--gris-mesure) }
.neutre{ color: var(--encre-2) }
.vise{ outline: 2px solid var(--iris); outline-offset: 2px }
.axe, .pont, .piste-pont, .poles, .bnom-axe{ display: grid }

.branches{
  display: grid; gap: var(--e-3);
  grid-template-columns: minmax(0, 1fr);
  margin-block: var(--e-3) 0; padding: 0; list-style: none;
}
@media (min-width: 900px){ .branches{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.branche{
  border: var(--filet-w) solid var(--filet);
  border-inline-start: 3px solid var(--soufre-bas);
  background: var(--surface-1); padding: var(--e-3);
  display: grid; gap: var(--e-2); align-content: start;
}
.branche.br-t{ border-inline-start-color: var(--iris-bas) }
.branche.br-n{ border-inline-start-color: var(--filet-2) }
.btete{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) }
.bp{ font-family: var(--f-nombre); font-size: var(--t-3); color: var(--soufre); line-height: 1 }
.bnom{ font-family: var(--f-titre); font-weight: 600; font-size: var(--t-2); margin-block: 0 }
.br-p, .br-n-lab{ font-size: var(--t-0); color: var(--encre-3) }
.branche dt{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3); margin-block: var(--e-2) 0;
}
.branche dd{ margin-inline: 0; margin-block: 0; font-size: var(--t-1) }
.branche .quand, .quand{ color: var(--soufre); font-family: var(--f-nombre); font-size: var(--t-0) }

.rail{
  border: var(--filet-w) solid var(--filet);
  background: var(--surface-1);
  padding: var(--e-3);
  margin-block: var(--e-3) 0;
}

.rail-t{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-2); margin-block: var(--e-3) var(--e-1);
}
.rail-t:first-child{ margin-block-start: 0 }
.rail-v{ font-family: var(--f-nombre); font-size: var(--t-1); color: var(--craie); margin-block: 0 }
.rail-n{ font-size: var(--t-0); color: var(--encre-2); margin-block: var(--e-1) 0 }
.rail-l{ list-style: none; padding: 0; margin-block: 0; display: grid; gap: var(--e-1) }
.rail-l > li{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) }

.rail-l b{ font-family: var(--f-nombre); color: var(--soufre); white-space: nowrap }
.rail-l span{ font-size: var(--t-0); color: var(--encre-2) }
.echelle-1{ margin-block: 0 }
.rail .rang-seuil{ grid-template-columns: [nom] minmax(0, 1fr) [val] max-content; row-gap: var(--e-1) }

.rail .rang-seuil .seuil, .seuil-c{
  grid-column: 1 / -1; inline-size: 100%;
  grid-template-columns: repeat(16, minmax(0, 1fr)) 2px repeat(16, minmax(0, 1fr));
  background-image: repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 3.125%);
  background-position-x: 0;
}
.rail .rang-seuil .seuil::before, .seuil-c::before{ inset-inline-start: 50% }
.rail .rang-seuil .seuil > .cote, .seuil-c > .cote{

  min-inline-size: 0; inline-size: auto; justify-self: stretch;
  grid-column: 18 / span var(--n, 1);
}
.rail .rang-seuil .seuil > .cote.neg, .seuil-c > .cote.neg{

  grid-column: span var(--n, 1) / 17; justify-self: stretch;
}
.rail .rang-seuil .seuil > .cote.zero, .seuil-c > .cote.zero{
  grid-column: 17 / 18; inline-size: 3px;
}

.reglure-v{ max-inline-size: var(--l-note); margin-block: 0 }
.seuil-v{ --h-cote: 0.9rem }
.seuil-v > .cote.zero{ inline-size: 4px }
.graduations .g-z{ inset-inline-start: 50%; transform: translateX(-50%) }

@media (min-width: 1024px){
  .fiche-col{
    display: grid;

    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--e-5);
    max-inline-size: var(--l-note);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
    align-items: start;
  }
  .rail{
    align-self: start;
    border: 0; border-inline-end: var(--filet-w) solid var(--filet);
    background: none; padding: 0; margin-block: 0;
  }
  .rail-in{
    position: sticky; inset-block-start: 4.5rem;
    padding-block: var(--e-5) var(--e-4);
    padding-inline-end: var(--e-4);
  }

  .fiche-prose > section > .wrap{ padding-inline: 0; max-inline-size: none }
  .fiche-prose p, .fiche-prose dd, .fiche-prose li{ max-inline-size: 72ch }
  .fiche-prose .chapo, .fiche-prose .note{ max-inline-size: 72ch }
}
@media (min-width: 1280px){
  .fiche-col{ grid-template-columns: 19rem minmax(0, 1fr) }
}

.manchette .sur{ margin-block-end: var(--e-2) }
.manchette h1{
  max-inline-size: 22ch;
  margin-block: 0 var(--e-4);
  text-wrap: balance;
}
.grand-nombre{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2);
  margin-block: 0 var(--e-1); max-inline-size: none;
}

.grand-nombre .chiffre, .chiffre{ max-inline-size: 100%; overflow-wrap: anywhere }
.compteurs b, .bp, .rail-v{ overflow-wrap: anywhere; min-inline-size: 0 }
.grand-nombre .chiffre{
  font-family: var(--f-nombre); font-size: var(--t-6); line-height: 0.86;
  color: var(--soufre); font-variant-numeric: tabular-nums;
}
.grand-nombre .surseuil{
  font-family: var(--f-nombre); font-size: var(--t-2); color: var(--encre-2);
}

.reglure{
  position: relative;
  block-size: 0.9rem;
  max-inline-size: var(--l-note);
  margin-block: 0;
  background-image: repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 6.25%);
  border-block-end: var(--filet-w) solid var(--filet-2);
  border-inline-end: 2px solid var(--soufre);
}
.reglure > .tr{
  display: block; block-size: 100%;
  inline-size: calc(var(--n, 0) * 6.25%);
  background: var(--soufre);
}

.graduations{
  position: relative; block-size: 2.25rem; margin-block: 0 var(--e-3);
  max-inline-size: var(--l-note); font-family: var(--f-nombre);
  font-size: var(--t-0); color: var(--encre-3);
}
.graduations .g{ position: absolute; inset-block-start: 0.2rem; white-space: nowrap }
.graduations .g-0{ inset-inline-start: 0 }
.graduations .g-i{ inset-inline-start: calc(var(--gi, 50) * 1%); transform: translateX(-50%) }
.graduations .g-p{ inset-inline-end: 0; color: var(--soufre) }
.manchette .verdict{ font-size: var(--t-2); max-inline-size: var(--l-lecture) }
.compteurs{
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; padding: 0; margin-block: var(--e-4) var(--e-3);
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block-start: var(--e-3);
}
@media (min-width: 900px){ .compteurs{ grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.compteurs > li{ display: grid; gap: 0.15rem; justify-items: start }
.compteurs b{
  font-family: var(--f-nombre); font-size: var(--t-4); line-height: 1; color: var(--craie);
}
.compteurs span{ font-size: var(--t-0); color: var(--encre-2) }
.compteurs .c-actif b{ color: var(--soufre) }

.rdv{
  margin-block: var(--e-4) 0;
  padding-block-start: var(--e-3);
  border-block-start: var(--filet-w) solid var(--filet);
}
.rdv-tete{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2);
  margin-block: 0; font-size: var(--t-2);
}
.rdv-tete .hh{ font-family: var(--f-nombre); color: var(--soufre) }
.rdv-tete .dv{
  font-family: var(--f-nombre); font-size: var(--t-0); color: var(--encre-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.rdv .evts{
  font-size: var(--t-0); color: var(--encre-3); margin-block: var(--e-1) 0;
  max-inline-size: var(--l-lecture);
}

.bsens{
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-block: 0; max-inline-size: none; font-size: var(--t-0);
}
.bsens .d{
  display: inline-flex; align-items: baseline; gap: 0.4ch;
  border: var(--filet-w) solid var(--filet-2);
  padding: 0.15rem 0.5rem; color: var(--encre-2);
}
.bsens .d b{ font-family: var(--f-nombre); color: var(--craie) }
.bsens .d::before{
  content: ""; inline-size: 0.5rem; block-size: 0.5rem; flex: 0 0 auto;
  align-self: center; background: currentColor;
}
.bsens .s-monte{ color: var(--craie) }
.bsens .s-monte::before{ clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.bsens .s-baisse{ color: var(--craie) }
.bsens .s-baisse::before{ clip-path: polygon(0 0, 100% 0, 50% 100%) }
.bsens .s-plat{ color: var(--encre-3) }
.bsens .s-plat::before{ clip-path: inset(42% 0 42% 0) }
.bstruct{ margin-block: 0 }

.grille.g-2{ grid-template-columns: minmax(0, 1fr) }
@media (min-width: 720px){ .grille.g-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.bsur{ font-size: var(--t-0); color: var(--encre-3); font-family: var(--f-nombre) }

@media (min-width: 900px) and (max-width: 1279px){
  .branches{ grid-template-columns: minmax(0, 1fr) }
}
.branche dd{ max-inline-size: var(--l-lecture) }

.fiche-prose .branches{ grid-template-columns: minmax(0, 1fr) }

.pq, .b-deb, .pour-deb{ font-size: var(--t-1); color: var(--encre-2) }
.r-h, .r-b, .r-n{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em; color: var(--encre-3);
}

.reactions{
  display: grid; gap: var(--e-1);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  margin-block: var(--e-2) 0; padding: 0; list-style: none;
}

.reactions > li{
  display: grid; gap: 0.15rem; align-content: start;
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block: var(--e-1);
}
.reactions > li > span{ font-size: var(--t-0); color: var(--encre-2) }
.reactions > li > span.fr{ color: var(--encre-3) }

.mur .t{ display: grid; gap: 0.15rem }
.mur .t > .q{ font-size: var(--t-0); color: var(--encre-3) }
.pt-tete{
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3); margin-block: var(--e-2) 0;
}
.evt .n, .mur .n{ display: grid; gap: 0.15rem; justify-items: start }
.t-tete{ display: flex; align-items: baseline; gap: var(--e-1); flex-wrap: wrap }
summary > b + span{ margin-inline-start: 0.6ch }
.t-l{
  display: flex; justify-content: space-between; gap: var(--e-2);
  font-size: var(--t-0); color: var(--encre-3);
  padding-block: 0.15rem;
}
.t-l > b{ color: var(--craie); font-weight: 400; font-family: var(--f-nombre) }
.r{
  display: flex; align-items: baseline; gap: var(--e-1);
  font-size: var(--t-0); font-family: var(--f-nombre);
  border: var(--filet-w) solid var(--filet);
  padding-block: var(--e-1); padding-inline: var(--e-2);
  background: var(--surface-2);
}
.r .code, .r .dev-tag{ color: var(--craie); font-weight: 600 }
.r .fr{ color: var(--encre-3); margin-inline-start: auto }
.c-chaud, .c-froid, .p-chaud, .p-froid, .v-froid, .b-froid{ color: var(--encre-2) }

.mur{ display: grid; margin-block: var(--e-3) 0; padding: 0; list-style: none }
.mur > li{
  display: grid; gap: var(--e-1);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--e-2);
  border-block-end: var(--filet-w) solid var(--filet);
}
@media (min-width: 900px){
  .mur > li{ grid-template-columns: minmax(9rem, 15ch) minmax(0, 1fr); gap: var(--e-3) }
}
.mur > li:last-child{ border-block-end: 0 }
.mur .t, .t-tete{
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-1);
  color: var(--craie); margin-block: 0;
}

.mur .r{
  border: 0; background: none; padding: 0;
  display: grid; gap: 0.15rem; justify-items: start;
  font-family: var(--f-prose); font-size: var(--t-1); color: var(--encre-2);
}
.mur .r > .g{ font-size: var(--t-0); color: var(--encre-3) }
.mur .q{ font-family: var(--f-nombre); color: var(--craie) }
.mur-court > li{ grid-template-columns: minmax(0, 1fr) }
.fait-liste{ list-style: none; padding: 0 }
.lire, .pt-lire{ display: grid; gap: var(--e-1) }
.pt-lire dt{
  font-size: var(--t-0); color: var(--encre-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pt-lire dd{ margin-inline: 0; margin-block: 0 var(--e-2); font-size: var(--t-1) }
.lex dt{
  font-family: var(--f-titre); font-weight: 600; color: var(--craie);
  margin-block: var(--e-3) 0;
}
.lex dd{ margin-inline: 0; margin-block: 0 var(--e-2); color: var(--encre-2) }

.jours{ display: grid; gap: var(--e-4); margin-block: var(--e-3) 0; padding: 0; list-style: none }
.jour{ display: grid; gap: var(--e-2) }
.j{
  font-family: var(--f-titre); font-size: var(--t-3); color: var(--craie);
  border-block-end: var(--filet-w) solid var(--filet-2);
  padding-block-end: var(--e-1); margin-block: 0;
}
.evts{ display: grid; padding: 0; list-style: none; margin-block: 0 }
.evt{
  display: grid; gap: var(--e-1);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--e-2); padding-inline-start: var(--e-3);
  border-block-end: var(--filet-w) solid var(--filet);
  border-inline-start: 3px solid var(--filet-2);
}
@media (min-width: 900px){
  .evt{ grid-template-columns: 5.5rem 3.5rem minmax(0, 1fr); gap: var(--e-3); align-items: baseline }
}
@media (min-width: 900px){
  .evt > *{ grid-column: 3 }

  .evt > .h, .evt > .hh{ grid-column: 1 }
  .evt > .code, .evt > .dev{ grid-column: 2 }
}
.evt .h, .evt .hh{
  font-family: var(--f-nombre); color: var(--craie); font-size: var(--t-1);
  display: grid; gap: 0.1rem; justify-items: start;
}

.evt .h > span, .evt .hh > span, .pt-c .hh > span{
  font-family: var(--f-prose); font-size: var(--t-0); color: var(--encre-3);
}

.evt .n{ font-family: var(--f-prose); display: grid; gap: 0.15rem; justify-items: start }
.evt .code, .evt .dev{ font-family: var(--f-nombre); color: var(--encre-2); font-size: var(--t-0) }
.evt .t{ font-size: var(--t-1); color: var(--craie); margin-block: 0 }
.evt .r{
  border: 0; background: none; padding: 0; display: block;
  font-size: var(--t-0); color: var(--encre-3); font-family: var(--f-prose);
}

.evt-high{ border-inline-start-color: var(--soufre) }
.evt-med{ border-inline-start-color: var(--soufre-bas) }
.evt-cite{ border-inline-start-style: dashed }
.evt-hol{ border-inline-start-color: var(--filet); background-image: var(--hachures); background-size: 8px 8px }

.evts{
  border-inline-start: var(--filet-w) solid var(--filet);
  padding-inline-start: var(--e-2);

  row-gap: var(--e-2);
}
.evt{ position: relative }
.evt::before{
  content: ""; position: absolute;
  inset-inline-start: calc(var(--e-2) * -1 - var(--e-3) - 1px);
  inset-block-start: 1.05em;
  inline-size: var(--e-2); block-size: 1px; background: var(--filet-2);
}
.evt-high::before{ background: var(--soufre); inline-size: var(--e-3) }
.jour{ border-inline-start: 0 }
.j{ border-block-start: 2px solid var(--filet-2); padding-block-start: var(--e-2) }

.moment, .grp-moment{ display: grid; gap: var(--e-2) }
.somm, .sommaire-seuils, .codes, .legende-axe, .rangee-paires, .filtre, .routes{
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-block: var(--e-3); padding: 0; list-style: none;
}
.somm a, .sommaire-seuils a, .codes a, .filtre a, .filtre label,
.legende-axe a, .rangee-paires a, .routes a{
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--e-2); font-size: var(--t-0); font-family: var(--f-nombre);
  border: var(--filet-w) solid var(--filet); color: var(--encre-2); text-decoration: none;
}
.somm a:hover, .sommaire-seuils a:hover, .codes a:hover, .filtre a:hover, .filtre label:hover,
.legende-axe a:hover, .rangee-paires a:hover, .routes a:hover{
  border-color: var(--soufre); color: var(--craie);
}
.ici{ color: var(--soufre); border-color: var(--soufre) }

.rangee-paires > .sur, .somm > .sur, .codes > .sur, .routes > .sur, .filtre > .sur{
  flex: 0 0 100%;
  align-self: start;
}

.cpt, .cpt-ligne, .bande-calendrier{
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  font-size: var(--t-0); color: var(--encre-3);
  margin-block: var(--e-3) 0; padding: 0; list-style: none;
}
.cpt > li, .cpt-ligne > li{
  display: flex; align-items: baseline; gap: var(--e-1); margin-block: 0;
}
.cpt b{ color: var(--soufre); font-size: var(--t-2); margin-inline-end: var(--e-1) }
.chapo-cpt{ display: block; font-size: var(--t-2); color: var(--encre-2) }
.chapo-cpt b{ color: var(--craie) }

.choix{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--e-1); align-items: start;
  margin-block: var(--e-3); padding: 0; list-style: none;
}
.choix > .sur, .choix > .grp-moment{ grid-column: 1 / -1 }
.choix > .grp-moment{
  margin-block: var(--e-2) 0;
  font-family: var(--f-nombre); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--soufre);
  border-block-start: var(--filet-w) solid var(--filet); padding-block-start: var(--e-2);
}
.choix > .grp-moment:first-child{ margin-block-start: 0; border-block-start: 0; padding-block-start: 0 }
.choix a{
  display: flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--e-2); padding-block: var(--e-1);
  font-size: var(--t-0); border: var(--filet-w) solid var(--filet);
  color: var(--encre-2); text-decoration: none; background: var(--surface-1);
  max-inline-size: 100%;
}
.choix a:hover{ border-color: var(--soufre); color: var(--craie) }
@media screen{
  .panneaux .pan{ display: none }
  .panneaux .pan-defaut{ display: grid }
  .panneaux .pan:target{ display: grid }
  .panneaux .pan:target ~ .pan-defaut{ display: none }
}
.panneaux{ display: grid }
.pan{ gap: var(--e-3); scroll-margin-block-start: 4.5rem }
.pan-r{ font-size: var(--t-0); color: var(--encre-3) }
.col{ display: grid; gap: var(--e-2) }

.planche{
  background: var(--planche);
  color: var(--planche-encre);
  border-block: var(--filet-w) solid var(--planche-filet);

  --craie:       var(--planche-encre);
  --encre-2:     var(--planche-encre2);
  --encre-3:     var(--planche-encre2);
  --gris-mesure: var(--planche-encre2);

  --fig-accent: #8A3410;

  --soufre:      var(--planche-soufre);
  --iris:        var(--planche-iris);

  --filet:       var(--planche-filet);
  --filet-2:     var(--planche-filet);

  --fond:        var(--planche);
  --lum-fin:     var(--planche);
  --surface-1:   rgba(21, 24, 28, 0.05);
  --surface-2:   rgba(21, 24, 28, 0.08);
  --panneau:     rgba(21, 24, 28, 0.05);
  --verre-bloc:  rgba(21, 24, 28, 0.05);
}
.planche .cote{ background-image: linear-gradient(90deg, #A2965C 0, var(--planche-soufre) 100%) }
.planche .seuil > .cote.d-neg{ background-image: linear-gradient(90deg, #9A79B0 0, var(--planche-iris) 100%) }
.planche .seuil{ background-image: repeating-linear-gradient(90deg, var(--planche-filet) 0 1px, transparent 1px var(--pas)) }
.planche .seuil::before{ background: var(--planche-filet) }
.planche .seuil::after{ background: var(--planche-soufre) }
.planche .jauge > i{ background-image: linear-gradient(90deg, #A2965C 0, var(--planche-soufre) 100%) }

.planche a{ color: var(--planche-iris) }
.planche :focus-visible{ outline-color: var(--planche-iris) }

.pied{
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block: var(--e-5);
  background-image: linear-gradient(180deg, transparent 0, rgba(9, 10, 13, 0.6) 100%);
}
.pied p{ font-size: var(--t-0); color: var(--encre-3); max-inline-size: 78ch }
.pied h2{ font-size: var(--t-3) }
.pied a{ color: var(--encre-2) }
.pied a:hover{ color: var(--soufre) }

main p a, .pied p a, .note a, .chapo a{
  color: var(--soufre); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  padding-block: 0;
}
main p a:hover, .pied p a:hover, .note a:hover, .chapo a:hover{ color: var(--craie) }
.planche p a, .planche .note a{ color: var(--planche-iris) }

.verrou{
  display: inline-grid; gap: var(--e-1);
  border: var(--filet-w) solid var(--iris-bas);
  background: rgba(214, 115, 240, 0.07);
  padding-block: var(--e-2); padding-inline: var(--e-3);
}
.verrou .lab{ color: var(--iris) }
.verrou .q{ font-size: var(--t-2); color: var(--craie) }
.bouton{
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-block-size: 44px; padding-inline: var(--e-3); padding-block: var(--e-2);
  background: var(--soufre); color: #14120A; font-weight: 600;
  font-size: var(--t-1); text-decoration: none;
  border: var(--filet-w) solid var(--soufre);
}
.bouton:hover{ background: var(--craie); border-color: var(--craie) }
.bouton:active{ transform: scale(0.97) }
.bouton-2{ background: none; color: var(--iris); border-color: var(--iris-bas) }
.bouton-2:hover{ background: rgba(214, 115, 240, 0.12); color: var(--craie); border-color: var(--iris) }
.appels{ display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-block: var(--e-3) 0 }

.tk, .pt-tete, .pt-mot, .pt-h, .pt-m, .pt-c, .fam, .conteste, .regles,
.regle-p, .g, .h, .rg, .sj, .tt, .fenetre, .bnom-2, .pt-nom{ font-size: var(--t-1) }

.pt-nom > .rg{
  margin-inline-start: 0.6ch;
  font-size: var(--t-0); color: var(--encre-3); letter-spacing: 0.06em;
}
.fenetre{ display: grid; gap: var(--e-1) }
.c-actif{ font-family: var(--f-nombre); color: var(--craie) }
.pli-seuil{ color: var(--soufre) }

.pli-seuil > summary{
  display: flex; align-items: baseline; gap: var(--e-2);
  padding-block: var(--e-1); cursor: pointer;
}
.pli-seuil > summary::-webkit-details-marker{ display: none }
.pli-seuil > summary::before{
  content: ""; flex: 0 0 auto; inline-size: 0; block-size: 0;
  border-block-start: 0.32em solid transparent;
  border-block-end: 0.32em solid transparent;
  border-inline-start: 0.46em solid currentColor;
  transition: transform var(--d-2) linear;
}
.pli-seuil[open] > summary::before{ transform: rotate(90deg) }
.pli-seuil > summary > span{
  margin-inline-start: auto; text-align: end;
  color: var(--encre-3); font-size: var(--t-0);
}
@media (prefers-reduced-motion: reduce){
  .pli-seuil > summary::before{ transition: none }
}
.d-neg{ color: var(--iris) }

.moteurs-en-pause *,
.moteurs-en-pause *::before,
.moteurs-en-pause *::after{
  animation-play-state: paused !important;
  transition: none !important;
}

.forme-lg{ display: flex; align-items: center; gap: var(--e-2) }
.forme-lg > .chev{ inline-size: 1.1rem; block-size: 1.1rem; flex: 0 0 auto }

.br-courte{ padding-block: var(--e-1); gap: 0 }
.br-courte .bl1{
  margin-block: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-1) var(--e-2); font-size: var(--t-0);
}
.br-courte .bp{ font-family: var(--f-nombre); font-size: var(--t-1); color: var(--soufre) }
.br-courte .bsur{ color: var(--encre-3) }

.br-courte .bnom{ color: var(--craie) }
.br-courte .d{ color: var(--encre-2) }
.br-courte .quand{ font-family: var(--f-nombre); color: var(--encre-3) }

.grandeur{
  font-family: var(--f-nombre); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.09em;

  color: var(--encre-2); margin-block: var(--e-1) var(--e-2);
}

.verrous{
  list-style: none; padding: 0; margin-block: var(--e-2) 0;
  display: grid; gap: var(--e-1);
}
.verrous > li{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2);
  padding-block: var(--e-1);
  border-block-end: var(--filet-w) solid var(--filet);
}
.verrous > li:last-child{ border-block-end: 0 }
.verrous .q{ font-family: var(--f-nombre); color: var(--craie) }
.verrous .dv{ font-size: var(--t-0); color: var(--encre-3) }
.verrous > .v-1 .q{ color: var(--soufre) }
.verrous > .v-1{ border-inline-start: 3px solid var(--soufre); padding-inline-start: var(--e-2) }

.choix a{ display: grid; gap: var(--e-1); align-content: start; text-align: start }
.choix a .ch-t{ font-family: var(--f-nombre); color: var(--craie) }
.choix a .ch-p{ font-size: var(--t-0); color: var(--soufre) }
.choix a .bsens{ margin-block: 0 }
.choix a .bsens .d{ font-size: var(--t-0) }
@media (min-width: 900px){ .choix a{ max-inline-size: 22rem } }

.moment .branches .bsens{ margin-block: var(--e-1) 0 }

@media (prefers-reduced-motion: no-preference){
  .nav a, .rang-seuil, .bloc, .choix a, .bouton, .somm a, .branche{
    transition: color var(--d-1) var(--c-entree),
                border-color var(--d-2) var(--c-entree),
                background-color var(--d-2) var(--c-entree);
  }
  @supports (animation-timeline: view()){
    .seuil .cote{
      animation: decouvrir var(--d-5) var(--c-entree) both;
      animation-timeline: view();
      animation-range: entry calc(6% + var(--n, 1) * 1.4%) cover 24%;
    }
    @keyframes decouvrir{
      from{ clip-path: inset(0 100% 0 0) }
      to{ clip-path: inset(0 0 0 0) }
    }

  }
}

@media (prefers-reduced-motion: reduce){

  .seuil .cote{ animation: none }
  .nav a, .rang-seuil, .bloc, .choix a, .bouton, .somm a, .branche{ transition-duration: var(--d-0) }
}

@media print{
  body{ background: #FFFFFF; color: #000000; background-image: none }
  .tete, .saut, .filtre{ display: none }
  .panneaux .pan{ display: grid }
}

@media (forced-colors: active){
  .seuil > .cote, .tige, .jauge > i, .partition > span, .b-large, .b-median,
  .reglure > .tr, .piste > .pont{
    forced-color-adjust: none !important;
    background: Highlight !important; background-image: none !important;
    border: 1px solid CanvasText !important;
  }
  .seuil > .cote.hach, .bruit, .hach, .evt-hol, .jauge.creuse > i{
    forced-color-adjust: none !important; background: Canvas !important;
    background-image: none !important;
    border: 1px dashed CanvasText !important;
  }

  .seuil > .cote.zero{
    forced-color-adjust: none !important; background: CanvasText !important;
    background-image: none !important;
    border: 0 !important; inline-size: 3px !important;
  }
  .bloc, .branche, .rang-seuil, .seuil-tete, .mur > li, .evt, .seuil, .jauge,
  .choix a, .somm a, .verrou, .bouton, .f-couloir, .fig-cadre, .anat, .r,
  .temps > li{
    border: 1px solid CanvasText !important;
  }

  .mur > li, .evt, .seuil, .rang-seuil, .branche, .f-couloir, .anat, .bloc{
    box-shadow: none !important;
  }
  .seuil{ background-image: none !important }
  .planche{ background: Canvas !important; color: CanvasText !important }
  .gros, .sur, .verdict-f, .fort, .marque, .stamp b{ color: CanvasText !important }
  .bouton{ background: ButtonFace !important; color: ButtonText !important }
  body{ background-image: none !important }
}

.manchette{
  position: relative;
  isolation: isolate;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}
.manchette > .wrap{ position: relative; z-index: 5 }

.scene-fond{
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 100svh;
  z-index: 0;
  pointer-events: none;
  opacity: var(--scene-o, 1);
  transform: scale(var(--scene-z, 1));
  transform-origin: 50% 38%;
  background-color: var(--lum-fin);
  background-image: url("scene-ouverture.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 42%;
}

@media (max-width: 1439px){
  .scene-fond{ background-image: url("scene-ouverture-390.png") }
}

.scene-vive .scene-fond{
  background-image: radial-gradient(128% 96% at 50% 104%,
                    var(--s-1) 0%, var(--lum-fin) 72%);
}

.scene-grain{
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 100svh;
  z-index: 2;
  pointer-events: none;
  opacity: var(--scene-o, 1);
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 180px 180px;
}

.scene-toile{
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100svh;
  pointer-events: none;
  opacity: var(--scene-o, 1);
  transform: scale(var(--scene-z, 1));
  transform-origin: 50% 38%;
}

.no-js .scene-toile{ display: none }

.scene-pause{
  position: absolute;
  z-index: 6;
  inset-block-start: 1.1rem;
  inset-inline-end: 1.1rem;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0.55rem 0.9rem;
  font-family: var(--f-nombre);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--encre-2);
  background: var(--verre-tete);
  backdrop-filter: blur(var(--verre-flou));
  border: var(--filet-w) solid var(--verre-filet);
  border-radius: var(--r);
  cursor: pointer;
}
.scene-pause:hover{ color: var(--craie) }
.no-js .scene-pause{ display: none }

@media (max-width: 599px){
  .scene-pause{
    position: static;
    display: block;
    inline-size: fit-content;
    margin-block: 1.1rem 0.2rem;
    margin-inline: auto var(--gouttiere);
  }
}

@media (prefers-reduced-motion: reduce){
  .scene-toile{ display: none }

  .scene-pause{ display: none }
}

@media (forced-colors: active){
  .scene-fond, .scene-toile, .scene-grain{ display: none !important }
  .manchette{ min-block-size: 0 !important }
}