/* =============================================================================
   Portail DGSF — socle
   Réinitialisation, html/body, typographie de base, utilitaires (sr-only, lien d'évitement).
   Ordre de chargement (setup.typoscript › includeCSS) : tokens, base, layout,
   subpages, chatbot, components, data, modules, puis drs-portal et workflow.
   ============================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--warm-white);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===== Phase 0 — socle typographique =====
   - Pas de gras simulé : DM Serif Display n'existe qu'en 400 ; sans cela le
     navigateur « épaissit » les titres h1-h3 (gras par défaut) → empâtement.
   - Les contrôles de formulaire héritent de la police du site (sinon Arial). */
html { font-synthesis-weight: none; }
button, input, select, textarea { font-family: inherit; }
/* Dans les pages internes, .page-content h2/h3 (700) l'emportait sur les titres serif. */
.page-content .section-title, .page-content .publications-title,
.page-content .motdg-name, .page-content .stats-section-title { font-weight: 400; }


.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
/* Un élément de contenu pleine largeur (tableau de bord, carte…) posé dans le gabarit garde sa
   propre .container : pas de double marge latérale (48 px de chaque côté sur mobile). */
.container .container { padding-inline: 0; }
/* Utilitaire : il doit l'emporter sur toute règle de composant (.page-content h2…). */
.sr-only {
  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;
}
/* L'attribut hidden l'emporte sur le display déclaré par un composant (bouton en grid…). */
[hidden] { display: none !important; }

/* ===== Focus clavier (WCAG 2.4.7) =====
   Un anneau partout, sans attendre que chaque composant le prévoie : or foncé sur
   fond clair (≥ 4,7:1), or vif dans les zones marine (≥ 6,7:1). Un composant peut
   toujours préciser le sien, sa règle est plus spécifique. */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.site-header, .site-footer, .news-slider, .hero, .directions, .feed-news, .page-hero,
.drs-widget-pro, .chatbot-header { --focus-ring: var(--gold); }
.nav-dropdown { --focus-ring: var(--gold-ink); }

/* ===== Bouton pause / lecture des contenus qui défilent seuls (WCAG 2.2.2) =====
   Le script (site.js › dgsfMotionToggle) bascule .is-paused et le libellé. */
.motion-toggle { cursor: pointer; }
.motion-toggle-play, .motion-toggle.is-paused .motion-toggle-pause { display: none; }
.motion-toggle.is-paused .motion-toggle-play { display: block; }

.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--gold); color: var(--navy); padding: 8px 16px;
  border-radius: var(--radius-sm); font-weight: 600; z-index: var(--z-skip);
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ===== Mouvement réduit : filet de sécurité global =====
   Les pulsations, lueurs et fondus s'arrêtent net ; les composants qui ont besoin
   d'un état de repos particulier (bandeau BRVM, logos) le déclarent eux-mêmes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}