@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --nuit:#0D1B3E;      /* bleu nuit du site */
  --nuit2:#1E2D5A;     /* cartes sur fond nuit */
  --orange:#E8621A;    /* accent du site */
  --turquoise:#4ABFB0; /* second accent du site */
  --ciel:#F2F5FA;      /* fond des encarts */
  --encre:#14203F;     /* texte */
  --gris:#5B6785;      /* texte secondaire */
  --filet:#D9E0EC;     /* traits fins */
  --brume:#B9C4DD;     /* texte clair sur nuit */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#E4E8F0;color:var(--encre);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
h1,h2,h3{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;color:var(--nuit);line-height:1.08;letter-spacing:-.01em}
p,li{font-size:10.4pt;line-height:1.55}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.page{width:210mm;min-height:297mm;margin:8mm auto;background:#fff;position:relative;overflow:hidden;padding:17mm 17mm 22mm}
.page.fixe{height:297mm}
.repere{font-family:'IBM Plex Mono',monospace;font-size:7.6pt;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.repere.t{color:var(--turquoise)} .repere.c{color:var(--brume)}
.pied{position:absolute;left:17mm;right:17mm;bottom:9mm;display:flex;justify-content:space-between;align-items:center;font-size:8pt;color:var(--gris);border-top:1px solid var(--filet);padding-top:2.5mm}
.pied b{color:var(--nuit);font-weight:700}
.pied .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.08em}

ul.p{list-style:none}
ul.p li{position:relative;padding-left:5mm;margin-bottom:1.8mm}
ul.p li::before{content:"";position:absolute;left:0;top:2.2mm;width:2.4mm;height:1px;background:var(--orange)}

@page{size:A4;margin:0}
@media print{
  html,body{background:#fff}
  .page{margin:0;break-after:page}
  .ecran{display:none!important}
  *{box-shadow:none!important;text-shadow:none!important;filter:none!important}
}
@media screen and (max-width:820px){
  .page{width:auto;min-height:0;height:auto!important;margin:0 0 12px;padding:22px 16px 60px}
}