/* ==========================================================================
   utilities.css — Classes utilitaires ADIR-PI
   ========================================================================== */

/* ---- Layout ---- */
.grid { display: grid; gap: var(--space-6); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.flex { display: flex; gap: var(--space-4); }
.flex--col { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--end { align-items: flex-end; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ---- Espacements ---- */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-inline: auto; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.pb-6 { padding-bottom: var(--space-6); }
.px-5 { padding-inline: var(--space-5); }
.py-8 { padding-block: var(--space-8); }

/* ---- Typographie ---- */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-muted); }
.text-accent { color: var(--accent); }
.text-gold { color: var(--gold-ink); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.font-heading { font-family: var(--font-heading); }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.lead { font-size: var(--text-lg); color: var(--color-muted); }

/* ---- Titres ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--leading-tight); }
h1 { font-size: var(--text-5xl); margin-bottom: var(--space-5); }
h2 { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
h4 { font-size: var(--text-xl); margin-bottom: var(--space-3); }

/* ---- Arrière-plans ---- */
.bg-surface { background: var(--color-surface); }
.bg-alt { background: var(--color-surface-alt); }
.bg-accent { background: var(--accent); color: var(--on-accent); }
.bg-accent-soft { background: var(--accent-soft); color: var(--on-accent-soft); }

/* ---- Bordures ---- */
.border { border: 1px solid var(--color-border); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ---- Ombres ---- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ---- Accessibilité & visibilité ---- */
.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;
}
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-md);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--transition-base);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- Liens ---- */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

/* ---- Focus visible global ---- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Sélection ---- */
::selection { background: var(--accent-soft); color: var(--on-accent-soft); }

/* ---- Scrollbar discrète ---- */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
}

/* ---- Listes sans puces ---- */
[role="list"], .list-unstyled { margin: 0; padding: 0; list-style: none; }

/* ---- Responsive utilitaires ---- */
@media (max-width: 64em) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-9); }
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
}

/* ---- CTA mobile collant (pages longues : Danisme, Tribus & Dan) ---- */
.sticky-cta { display: none; }
@media (max-width: 40em) {
  .sticky-cta {
    position: fixed;
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--gold-bright);
    color: var(--on-gold);
    font-weight: 700;
    font-size: var(--text-sm);
    border-radius: var(--radius-full);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  }
  .sticky-cta:hover { color: var(--on-gold); }
}

/* ---- Impression ---- */
@media print {
  .site-header, .site-footer, .back-to-top, .theme-toggle,
  .nav-toggle, .toast-stack, .skip-link, .sticky-cta { display: none !important; }
  body { background: #fff; color: #000; }
}