:root{
  --fond:#070c0a; --carte:#0d1512; --carte2:#0f1714; --trait:#1c2723;
  --encre:#e4f4ec; --gris:#7fa595; --gris2:#5c7c6e; --vert:#00c983;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);
  font:16px/1.6 "Bricolage Grotesque","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--vert);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:1060px;margin:0 auto;padding:28px 20px 64px}
section{margin-bottom:44px}
h1{font-size:clamp(26px,4.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 10px}
h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
p{color:var(--gris);margin:0 0 14px;max-width:70ch}

.tete{border-bottom:1px solid var(--trait);padding:14px 20px;display:flex;align-items:center;
  gap:22px;flex-wrap:wrap;max-width:1060px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:var(--encre);font-weight:800;
  font-size:19px;letter-spacing:-.03em}
.logo:hover{text-decoration:none}
.signe{width:30px;height:30px;flex:0 0 auto}
.tete nav{display:flex;gap:18px;margin-left:auto;font-size:14px}
.tete nav a{color:var(--gris)}

.accroche h1{max-width:20ch}
.chiffres{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chiffres div{background:var(--carte);border:1px solid var(--trait);border-radius:10px;
  padding:11px 15px;display:flex;flex-direction:column;gap:3px}
.chiffres b{font-family:var(--mono);font-size:19px;font-weight:500;color:var(--vert);line-height:1}
.chiffres span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2)}

.note-methode{font-size:13.5px;color:var(--gris2)}
.entete-page .fil{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:8px}

table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2);font-weight:400;
  padding:0 10px 9px;border-bottom:1px solid var(--trait)}
td{padding:9px 10px;border-bottom:1px solid var(--trait)}
tbody tr:hover{background:var(--carte)}
.rang{font-family:var(--mono);color:var(--gris2);width:44px}
.nom a{color:var(--encre);font-weight:700}
.div,.org{color:var(--gris);font-size:13.5px}
.note{text-align:right;font-family:var(--mono);white-space:nowrap}
.note b{color:var(--vert);font-weight:500;font-size:15px}
.note span{color:var(--gris2);font-size:11.5px;margin-left:5px}
.cbt{text-align:right;font-family:var(--mono);color:var(--gris2);width:52px}

.grille-div{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.carte-div{background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.carte-div:hover{border-color:var(--vert);text-decoration:none}
.carte-div .titre{font-weight:800;letter-spacing:-.02em;color:var(--encre)}
.carte-div .chef{font-size:13.5px;color:var(--vert)}
.carte-div .cnt{font-family:var(--mono);font-size:10.5px;color:var(--gris2)}

.fiche-tete{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid var(--trait);padding-bottom:22px;margin-bottom:22px}
.ft-gauche{flex:1 1 300px}
.rangs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.badge{background:var(--carte);border:1px solid var(--trait);border-radius:999px;
  padding:4px 12px;font-family:var(--mono);font-size:11.5px;color:var(--vert)}
.bilan{font-family:var(--mono);font-size:13px;color:var(--gris)}
.ft-note{text-align:right;font-family:var(--mono);line-height:1.15}
.ft-note b{display:block;font-size:42px;font-weight:500;color:var(--vert);letter-spacing:-.02em}
.ft-note span{color:var(--gris);font-size:13px}
.ft-note em{display:block;font-style:normal;color:var(--gris2);font-size:11px;margin-top:4px}

.meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.meta div{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:10px 13px}
.meta span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2);margin-bottom:3px}
.meta b{font-size:14px;font-weight:500}

.scroll{overflow-x:auto}
.historique{min-width:760px}
.historique .dt{font-family:var(--mono);color:var(--gris2);font-size:12.5px;white-space:nowrap}
.historique .is{font-family:var(--mono);font-weight:500;width:26px;text-align:center}
.i-v .is{color:var(--vert)}
.i-d .is{color:#c2564f}
.i-n .is{color:var(--gris2)}
.historique .ad a{color:var(--encre)}
.historique .me{color:var(--gris);font-size:13px;white-space:nowrap}
.historique .me span{color:var(--gris2);font-family:var(--mono);font-size:11px}
.historique .ev{color:var(--gris2);font-size:12.5px}
.historique .sc{font-family:var(--mono);text-align:right;width:48px}
.historique .do{font-family:var(--mono);font-size:12px;color:var(--gris);
  white-space:nowrap;text-align:right;width:110px}
.barre{display:inline-block;width:46px;height:6px;border-radius:3px;background:var(--trait);
  position:relative;margin-right:7px;vertical-align:middle;overflow:hidden}
.barre i{position:absolute;inset:0 auto 0 0;background:var(--vert)}
.vide{color:var(--gris2)}

.texte h2{margin-top:30px}
.texte pre{background:var(--carte);border:1px solid var(--trait);border-radius:10px;
  padding:14px 16px;font-family:var(--mono);font-size:14px;color:var(--encre);overflow-x:auto}
.mini{max-width:460px;margin-top:6px}
.mini td{font-size:14px}
.mini td:last-child{font-family:var(--mono);text-align:right;color:var(--vert)}

.pied{border-top:1px solid var(--trait);max-width:1060px;margin:0 auto;padding:20px;
  display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
  font-family:var(--mono);font-size:12px;color:var(--gris2)}

@media(max-width:640px){
  .div,.org{display:none}
  .tete nav{width:100%;margin-left:0}
  .ft-note{text-align:left}
}