/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/polices/k3kQo8UDI-1M0wlSfdboLmvDIaK18A.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/polices/k3kQo8UDI-1M0wlSfdfoLmvDIaK18A.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/polices/k3kQo8UDI-1M0wlSfdnoLmvDIaI.woff2) format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/4iCr6K5wfMRRjxp0DA6-2CLnB45HhqcL71QxtQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/4iCr6K5wfMRRjxp0DA6-2CLnB41HhqcL71QxtQ.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/4iCr6K5wfMRRjxp0DA6-2CLnB4NHhqcL71Q.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/m8JXjfVPf62XiF7kO-i9YL1la0GA1dOkDw.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/m8JXjfVPf62XiF7kO-i9YLNla0GA1dM.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/polices/m8JUjfVPf62XiF7kO-i9aAhAfmKi2PmeBvYdbA.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/polices/m8JUjfVPf62XiF7kO-i9aAhAfmyi2PmeBvY.woff2) format('woff2');
  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;
}

/* ============ e-PISTE — pages de droit ============
   Mêmes jetons que la page d'accueil : c'est le même produit, pas une
   annexe. Sobre, lisible, imprimable. Aucune ressource distante. */
:root{
  color-scheme:light;
  --paper:#F7F6F3; --panel:#FFFFFF; --panel-2:#EFEDE8;
  --ink:#171512; --smoke:#6E6A63;
  --line:rgba(23,21,18,.16); --line-soft:rgba(23,21,18,.08);
  --red:#E02D12; --red-ink:#FFFFFF; --red-soft:rgba(224,45,18,.09);
  --green:#1B7A47; --green-soft:rgba(27,122,71,.12);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#151517; --panel:#1D1D20; --panel-2:#242427;
    --ink:#F0EEE9; --smoke:#9B978F;
    --line:rgba(240,238,233,.18); --line-soft:rgba(240,238,233,.09);
    --red:#FF503C; --red-ink:#151517; --red-soft:rgba(255,80,60,.12);
    --green:#46C98B; --green-soft:rgba(70,201,139,.14);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#151517; --panel:#1D1D20; --panel-2:#242427;
  --ink:#F0EEE9; --smoke:#9B978F;
  --line:rgba(240,238,233,.18); --line-soft:rgba(240,238,233,.09);
  --red:#FF503C; --red-ink:#151517; --red-soft:rgba(255,80,60,.12);
  --green:#46C98B; --green-soft:rgba(70,201,139,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Archivo","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-stretch:100%; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:var(--red-ink)}
a{color:inherit}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mono{font-family:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--red);color:var(--red-ink);padding:10px 16px}

/* barre du haut */
.top{border-bottom:1px solid var(--line-soft);background:var(--panel)}
.top-in{max-width:1080px;margin:0 auto;padding:0 24px;height:62px;
        display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:baseline;gap:5px;text-decoration:none;
      font-stretch:122%;font-weight:820;font-size:1.2rem;letter-spacing:.02em}
.logo i{width:10px;height:10px;background:var(--red);display:inline-block}
.top nav{margin-left:auto;display:flex;gap:20px;font-size:.92rem;color:var(--smoke)}
.top nav a{text-decoration:none}

/* corps */
.page{max-width:1080px;margin:0 auto;padding:0 24px 96px}
.hd{padding:56px 0 40px;border-bottom:1px solid var(--line);margin-bottom:44px}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:"Fragment Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);
}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--red);flex:none}
h1{font-stretch:118%;font-weight:760;letter-spacing:-.025em;line-height:1.05;
   font-size:clamp(2.2rem,5.4vw,3.6rem);margin:18px 0 0;text-wrap:balance}
.lede{margin-top:18px;font-size:1.1rem;color:var(--smoke);max-width:42rem}
.stamp{margin-top:22px;font-family:"Fragment Mono",ui-monospace,monospace;
       font-size:.72rem;letter-spacing:.06em;color:var(--smoke)}

.cols{display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start}
/* Sans min-width:0, une piste de grille se dimensionne sur son contenu le
   plus large : le tableau (min-width 520px) élargissait TOUTE la colonne,
   et à 360px la page entière débordait sur le côté au lieu de laisser le
   seul tableau défiler dans son cadre. */
.cols > *{min-width:0}
@media (max-width:900px){.cols{grid-template-columns:1fr;gap:32px}}

/* sommaire */
.toc{position:sticky;top:24px;font-size:.88rem}
.toc p{font-family:"Fragment Mono",ui-monospace,monospace;font-size:.66rem;
       letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);
       padding-bottom:10px;border-bottom:1px solid var(--line-soft);margin-bottom:12px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:9px;counter-reset:t}
.toc a{color:var(--smoke);text-decoration:none;display:flex;gap:10px}
.toc a::before{counter-increment:t;content:counter(t,decimal-leading-zero);
               font-family:"Fragment Mono",ui-monospace,monospace;font-size:.7rem;
               color:var(--red);flex:none;padding-top:2px}
.toc a:hover{color:var(--ink)}
@media (max-width:900px){.toc{position:static}}

/* texte */
article{max-width:44rem;min-width:0}
article section{padding:34px 0;border-top:1px solid var(--line-soft)}
article section:first-child{border-top:0;padding-top:0}
h2{font-stretch:112%;font-weight:720;letter-spacing:-.015em;line-height:1.2;
   font-size:1.55rem;margin-bottom:16px;text-wrap:balance;scroll-margin-top:24px}
h3{font-stretch:106%;font-weight:680;font-size:1.08rem;margin:22px 0 8px}
p{margin-bottom:14px}
p:last-child{margin-bottom:0}
ul,ol.plain{list-style:none;display:flex;flex-direction:column;gap:11px;margin:4px 0 16px}
/* Le carré rouge est POSÉ à côté du texte, il n'en est pas un morceau.
   En faisant de <li> une boîte flex, le <strong> d'ouverture devenait une
   colonne à lui seul et la phrase se cassait en deux blocs côte à côte
   (vu sur les mentions légales, section 4). Le texte doit couler. */
li{position:relative;padding-inline-start:19px}
li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
           width:7px;height:7px;background:var(--red)}
strong{font-weight:700}
.small{font-size:.9rem;color:var(--smoke)}

/* encarts */
.card{background:var(--panel);border:1px solid var(--line);padding:24px 26px;margin:6px 0 22px}
.card.key{border-top:4px solid var(--red)}
.card.ok{border-top:4px solid var(--green)}
.card h3{margin-top:0}
.card ul{margin-bottom:0}
.card.ok li::before{background:var(--green)}
.toc li{padding-inline-start:0}
.toc li::before{content:none}

/* tableaux */
.tw{overflow-x:auto;margin:6px 0 20px;border:1px solid var(--line);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
th,td{text-align:start;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:"Fragment Mono",ui-monospace,monospace;font-size:.66rem;
   letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);
   background:var(--panel-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.dur{font-family:"Fragment Mono",ui-monospace,monospace;font-size:.82rem;white-space:nowrap}

/* mention a completer : visible, jamais silencieuse */
.todo{background:var(--red-soft);border:1px dashed var(--red);color:var(--ink);
      padding:14px 16px;margin:6px 0 18px;font-size:.94rem}
.todo b{color:var(--red)}

footer{border-top:1px solid var(--line);background:var(--panel);padding:40px 0}
.foot-in{max-width:1080px;margin:0 auto;padding:0 24px;
         display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
         font-family:"Fragment Mono",ui-monospace,monospace;
         font-size:.68rem;letter-spacing:.08em;color:var(--smoke)}
.foot-in a{text-decoration:none}

@media print{
  .top,.toc,footer{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .cols{grid-template-columns:1fr}
  a{text-decoration:none;color:#000}
}