/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   styles.css — consomme design-tokens.css
   Aucune couleur ni police en dur : tout via var(--mf-*).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Réinitialisation minimale ───────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
}

/* ── Base ────────────────────────────────────────────────────── */

body {
  margin: 0;
  background:  var(--mf-color-bg);
  color:       var(--mf-color-text);
  font-family: var(--mf-font-sans);
  font-size:   var(--mf-text-base);
  line-height: var(--mf-leading-normal);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--mf-layout-max-w);
  margin:    0 auto;
  padding:   0 var(--mf-layout-gutter);
}

section {
  padding:    var(--mf-section-pad) 0;
  border-top: 1px solid var(--mf-color-border);
}
section:first-of-type { border-top: none; }

/* ── Typographie ─────────────────────────────────────────────── */

h1, h2, h3 {
  font-family:     var(--mf-font-mono);
  letter-spacing:  var(--mf-tracking-tight);
}

h1 {
  font-size:   var(--mf-text-h1);
  line-height: var(--mf-leading-tight);
  margin: 18px 0 0;
}
h1 em { font-style: normal; color: var(--mf-color-accent); }

h2 {
  font-size: var(--mf-text-h2);
  margin: 0 0 6px;
}

h3 { font-size: var(--mf-text-lg); margin: 0; }

.section-sub {
  color:     var(--mf-color-text-muted);
  margin: 0 0 30px;
  max-width: 68ch;
}

/* ── Accessibilité ───────────────────────────────────────────── */

/* Skip-link — premier élément focusable */
.skip-link {
  position:      absolute;
  left:          var(--mf-space-3);
  top:           -60px; /* valeur fonctionnelle : doit sortir du viewport */
  z-index:       10;
  background:    var(--mf-color-surface);
  color:         var(--mf-color-text);
  border:        1px solid var(--mf-color-border);
  border-radius: var(--mf-radius-sm);
  padding:       var(--mf-space-2) 14px;
  transition:    top var(--mf-transition);
}
.skip-link:focus-visible { top: var(--mf-space-3); }

/* Anneau de focus clavier — jamais supprimé */
a:focus-visible,
button:focus-visible {
  outline:        var(--mf-focus-width) solid var(--mf-focus-color);
  outline-offset: var(--mf-focus-offset);
}

/* ── Hero ────────────────────────────────────────────────────── */

#hero {
  position:         relative;
  min-height:       92vh;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  overflow:         hidden;
  padding:          var(--mf-space-18) 0 var(--mf-space-20);
  background:
    radial-gradient(ellipse 50% 50% at   0%   0%, var(--mf-color-accent-glow-07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, var(--mf-color-accent-glow-05) 0%, transparent 60%);
}

/* Chevron décoratif bas-de-hero */
#hero::after {
  content:       '';
  position:      absolute;
  bottom:        var(--mf-space-7);
  left:          50%;
  width:         18px;
  height:        18px;
  border-right:  2px solid var(--mf-color-text-muted);
  border-bottom: 2px solid var(--mf-color-text-muted);
  transform:     translateX(-50%) rotate(45deg);
  opacity:       0.35;
  pointer-events: none;
}

#hero .container {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  position:       relative;
  z-index:        1;
}

/* Halo derrière le logo */
.logo-wrap {
  position: relative;
  display:  inline-block;
}
.logo-wrap::before {
  content:        '';
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  width:          140%;
  height:         200%;
  background:     radial-gradient(ellipse at center, var(--mf-color-accent-glow-12) 0%, transparent 65%);
  pointer-events: none;
}

.logo {
  display:       block;
  height:        auto;
  max-width:     400px;
  width:         100%;
  border-radius: var(--mf-radius-sm);
  position:      relative;
  z-index:       1;
}

.hero-desc {
  margin:    18px 0 0;
  font-size: var(--mf-text-hero-desc);
  max-width: 66ch;
  color:     var(--mf-color-text-muted);
}

.hero-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
  margin:    26px 0 0;
}
#hero .hero-chips { justify-content: center; }

.chip {
  font-family:   var(--mf-font-mono);
  font-size:     var(--mf-text-xs);
  background:    var(--mf-color-surface);
  border:        1px solid var(--mf-color-border);
  border-radius: var(--mf-radius-pill);
  padding:       6px 14px;
  color:         var(--mf-color-text-muted);
}
.chip strong { color: var(--mf-color-text); }

.hero-actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--mf-space-3);
  margin-top: 30px;
}
#hero .hero-actions { justify-content: center; }

/* ── Boutons ─────────────────────────────────────────────────── */

.btn-primary,
.btn-ghost {
  display:        inline-block;
  font-family:    var(--mf-font-mono);
  font-size:      var(--mf-text-sm);
  padding:        11px var(--mf-space-5);
  border-radius:  var(--mf-radius-sm);
  text-decoration: none;
  border:         1px solid transparent;
  transition:     background var(--mf-transition), border-color var(--mf-transition);
}

.btn-primary {
  background: var(--mf-color-accent);
  color:      var(--mf-color-on-accent);
}
.btn-primary:hover { background: var(--mf-color-accent-hover); }

.btn-ghost {
  border-color: var(--mf-color-accent);
  color:        var(--mf-color-accent);
}
.btn-ghost:hover { background: var(--mf-color-accent-dim); }

/* ── Ateliers ────────────────────────────────────────────────── */

.ateliers-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:                   18px;
}

.atelier-card,
.app-card {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  background:     var(--mf-color-surface);
  border:         1px solid var(--mf-color-border);
  border-radius:  var(--mf-radius-card);
  padding:        22px;
  color:          var(--mf-color-text);
  text-decoration: none;
  transition:     border-color var(--mf-transition), transform var(--mf-transition);
}
.atelier-card:hover,
.app-card:hover {
  border-color: var(--mf-color-accent);
  transform:    translateY(-2px);
}

.atelier-card p,
.app-card p {
  margin:    0;
  color:     var(--mf-color-text-muted);
  font-size: var(--mf-text-sm);
}

.atelier-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  flex-wrap:       wrap;
}

.atelier-cta {
  font-family: var(--mf-font-mono);
  font-size:   var(--mf-text-xs);
  color:       var(--mf-color-accent);
  margin-top:  auto;
}

/* ── Badges — niveaux d'ouverture ───────────────────────────── */

.badge {
  font-family:    var(--mf-font-mono);
  font-size:      var(--mf-text-2xs);
  letter-spacing: var(--mf-tracking-wide);
  border-radius:  var(--mf-radius-pill);
  padding:        3px 10px;
  white-space:    nowrap;
}

.badge-open {
  background:   var(--mf-color-accent-dim);
  color:        var(--mf-color-accent-hover);
  border:       1px solid var(--mf-color-accent);
}
.badge-live {
  background:   var(--mf-color-badge-live-bg);
  color:        var(--mf-color-info);
  border:       1px solid var(--mf-color-badge-live-border);
}
.badge-demo {
  background:   var(--mf-color-badge-demo-bg);
  color:        var(--mf-color-warn);
  border:       1px solid var(--mf-color-badge-demo-border);
}
.badge-interne {
  background:   var(--mf-color-surface-2);
  color:        var(--mf-color-text-muted);
  border:       1px solid var(--mf-color-border);
}

/* ── Applications ────────────────────────────────────────────── */

.apps-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   var(--mf-space-4);
}

/* ── Rail / Gouvernance ──────────────────────────────────────── */

.gov-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:                   var(--mf-space-4);
}

.gov-card {
  background:    var(--mf-color-surface);
  border:        1px solid var(--mf-color-border);
  border-radius: var(--mf-radius-card);
  padding:       18px var(--mf-space-5);
}

.gov-name {
  font-family: var(--mf-font-mono);
  font-size:   var(--mf-text-sm);
  color:       var(--mf-color-accent);
}

.gov-subtitle {
  margin:    var(--mf-space-2) 0 0;
  color:     var(--mf-color-text-muted);
  font-size: var(--mf-text-sm);
}

/* ── Pied de page ────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--mf-color-border);
  padding:    34px 0 var(--mf-space-11);
}

footer p {
  color:     var(--mf-color-text-muted);
  font-size: var(--mf-text-xs);
  max-width: 78ch;
  margin:    0;
}

/* ── Responsive mobile-first ─────────────────────────────────── */

@media (max-width: 560px) {
  section  { padding: var(--mf-section-pad-sm) 0; }
  #hero    { padding: var(--mf-section-pad-sm) 0 var(--mf-space-18); }

  .hero-actions              { flex-direction: column; }
  .btn-primary, .btn-ghost   { text-align: center; }
}