/* ============================================================
   base.css — Reset, elements de base, helpers typographiques, a11y
   Design system « Engineered Calm » (R&S Telecom / PRT)
   Ordre de chargement : fonts.css -> tokens.css -> base.css -> layout.css -> components.css
   Niveau element + utilitaires uniquement (aucun composant ds-*, aucun shell).
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper-bg);
  color: var(--ink-default);
  font-family: var(--font-sans);
  font-size: var(--text-body); line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-synthesis: style;
  font-feature-settings: "ss01";
}
button, input, select, textarea { font: inherit; }

/* ---- Titres : Bricolage porte l'identité, IBM Plex reste la voix d'interface. ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h4, h5, h6 { font-family: var(--font-sans); }
p { text-wrap: pretty; }

/* Bootstrap fournit une rampe fluide par défaut. Le produit garde des rôles fixes. */
.ds-content :where(h1, .h1) { font-family: var(--font-display); font-size: var(--text-page); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.ds-content :where(h2, .h2) { font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-semibold); line-height: 1.2; }
.ds-content :where(h3, .h3) { font-family: var(--font-display); font-size: var(--text-section); font-weight: var(--weight-semibold); line-height: 1.25; }
.ds-content :where(h4, .h4) { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: var(--leading-ui); }
.ds-content :where(h5, .h5) { font-family: var(--font-sans); font-size: var(--text-body-dense); font-weight: var(--weight-semibold); line-height: var(--leading-ui); }
.ds-content :where(h6, .h6) { font-family: var(--font-sans); font-size: var(--text-control); font-weight: var(--weight-semibold); line-height: var(--leading-ui); }

/* ---- Helper typographique (le seul defini par la maquette) ---- */
.ds-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; font-weight: var(--weight-medium); }
table { font-variant-numeric: tabular-nums lining-nums; }
[x-cloak] { display: none !important; }

/* ---- Selection ---- */
::selection { background: var(--signal-azure-soft); color: var(--ink-strong); }

/* ---- Anneau de focus (focus-visible) ---- */
/* Anneau reserve aux boutons / liens / elements tabindex (focus clavier).
   PAS sur les champs de saisie : ils ont leur propre focus a bordure unique
   (.ds-input/.ds-search-field/...). Sinon l'anneau s'ajoutait a la bordure du
   champ -> effet « double bordure » sur tous les filtres autocomplete. */
:focus-visible { outline: none; }
button:focus-visible,
a:focus-visible,
/* :not(.modal) : le conteneur de modale (tabindex=-1) est focalise par Bootstrap a
   l'ouverture. Sans l'exclusion, position:relative + z-index:2 le sortent de son flux
   (il s'affiche en bas de page puis saute au centre) et le placent SOUS le backdrop
   (contenu « lave »). Il conserve ainsi sa position:fixed + son z-index Bootstrap. */
[tabindex]:focus-visible:not(.modal) {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--signal-azure);
  border-radius: var(--r-sm);
  position: relative; z-index: 2;
}

/* ---- Scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Accessibilite : contenu reserve aux lecteurs d'ecran ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Accessibilite : lien d'evitement (skip-link) ---- */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 14px;
  background: var(--signal-azure); color: var(--on-azure);
  font-size: var(--text-control); font-weight: 600; text-decoration: none;
  border-radius: var(--r-md); box-shadow: var(--shadow-floating);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 8px; }

/* ---- Icones SVG inline ----
   Remplacent des glyphes de police d'icones sans toucher aux selecteurs qui
   ciblent le <i> porteur : la taille suit font-size, la couleur currentColor. */
.ds-ico { width: 1em; height: 1em; display: block; flex: 0 0 auto; }

/* ---- Mouvement reduit ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}