/* =========================================
   VARIABLES & GLOBAL
   ========================================= */

:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f8f9fa;
  --color-border: #eff3f4;
  --color-border-strong: #e0d8dc;
  --color-text: #0f1419;
  --color-muted: #6c757d;
  --color-accent: #007aff;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  /* spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.75rem;

  /* unified spacing */
  --gutter: 1rem;

    /* layout paddings (unified) */
  --layout-pad-x: var(--gutter);
  --layout-pad-y: var(--gutter);
  --header-pad-y: var(--gutter);
  --header-pad-x: var(--gutter);
  --content-pad-top: var(--gutter);

    /* section gaps (unified) */
  --section-gap: var(--gutter);
}

/* =========================================
   BASE
   ========================================= */

html,
body {
  height: 100%;
}

body {
  overflow-y: scroll;
  background-color: #f2ecee;
  color: var(--color-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Ne pas tuer l’underline globalement : on le gère par composants */
a {
  color: var(--color-text);
}

/* Liens “texte” : underline visible (meilleure UX) */
.content a:not(.btn):not(.nav-link):not(.intent-pill):not(.item-card-link) {
  text-decoration: none;
}

ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

h1, h2 {
  font-size: 1.25rem;
  font-weight: bold;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Utilitaire “visually hidden” (si pas déjà via Bootstrap) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================
   Responsive spacing
   ========================================= */
@media (max-width: 575.98px){
  :root{
    --gutter: .5rem;
  }
}

@media (min-width: 576px) and (max-width: 991.98px){
  :root{
    --gutter: .75rem;
  }
}