/* ==========================================================================
   PANOSTEO — Base : reset léger, typographie, listes, focus, utilitaires
   ========================================================================== */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--po-header-h) + 8px);
  background: var(--po-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font: 400 var(--po-fs-body) / 1.6 var(--po-font-body);
  color: var(--po-text);
  background: var(--po-bg);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }

h1, h2 {
  font-family: var(--po-font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 36;
  color: var(--po-text-title);
  text-wrap: balance;
}
h1 { font-size: var(--po-fs-h1); line-height: 1.08; letter-spacing: -.01em; }
h2 { font-size: var(--po-fs-h2); line-height: 1.15; letter-spacing: -.005em; }
h3 { font-family: var(--po-font-body); font-weight: 600; font-size: var(--po-fs-h3); line-height: 1.3; color: var(--po-text); }
h4 { font-family: var(--po-font-body); font-weight: 600; font-size: var(--po-fs-h4); line-height: 1.4; color: var(--po-text); }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a {
  color: var(--po-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgb(var(--po-corticale-rgb) / .4);
  transition: text-decoration-color var(--po-t-fast) var(--po-ease);
}
a:hover { text-decoration-color: currentColor; }
.po-dark a { text-decoration-color: rgb(var(--po-corticale-trait-rgb) / .5); }

strong, b { font-weight: 600; }
small { font-size: var(--po-fs-small); }
em { font-style: italic; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--po-border-strong); cursor: help; }

img, svg, canvas, video { display: block; max-width: 100%; height: auto; }
svg { overflow: visible; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--po-border);
  margin: var(--po-s-6) 0;
}

::selection { background: rgb(var(--po-corticale-rgb) / .18); }
.po-dark ::selection { background: rgb(var(--po-os-rgb) / .22); }

:focus-visible {
  outline: 2px solid var(--po-focus);
  outline-offset: 3px;
  border-radius: var(--po-r-1);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Listes de la charte : chevron ▸ Minéral, puis point médian Ardoise ---- */
.po-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--po-s-3);
}
.po-list > li {
  position: relative;
  padding-left: 1.25em;
}
.po-list > li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--po-accent);
  font-family: var(--po-font-body);
  line-height: inherit;
}
.po-list .po-list { margin-top: var(--po-s-2); gap: var(--po-s-2); }
.po-list .po-list > li::before {
  content: "\00B7";
  color: var(--po-text-2);
  font-weight: 700;
}

/* ---- Utilitaires ---- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-nowrap { white-space: nowrap; }
.u-mono { font-family: var(--po-font-mono); }
.u-text-2 { color: var(--po-text-2); }
.u-center { text-align: center; }

/* Lien d'évitement */
.po-skip {
  position: fixed;
  top: var(--po-s-3);
  left: var(--po-s-3);
  z-index: var(--po-z-skip);
  padding: var(--po-s-3) var(--po-s-4);
  background: var(--po-corticale);
  color: #fff;
  border-radius: var(--po-r-2);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--po-t-fast) var(--po-ease);
}
.po-skip:focus-visible { transform: none; outline-color: var(--po-mineral); }

/* ---- Impression ---- */
@media print {
  .po-dark { background: #fff !important; color: #000 !important; }
  .po-header, .po-footer__cols, .po-drawer, .po-hero__field, .po-skip, .po-lang, .po-burger { display: none !important; }
  a { color: inherit; }
}

/* ---- Sprite SVG (motifs et symboles partagés) ---- */
.po-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.po-trab__dot { fill: var(--po-corticale-trait); }
.po-trab__dot--light { fill: var(--po-trabecule); }