/* ==========================================================================
   Brandt Energy — base.css : reset léger, typographie, focus, utilitaires.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-16)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--text-body-weight);
  color: var(--brandt-carbon);
  background: var(--brandt-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* --- Styles de texte : 5 par format, jamais de taille en dur ailleurs ---- */
.t-h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); font-weight: var(--text-h1-weight); letter-spacing: 0; }
.t-h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); font-weight: var(--text-h2-weight); letter-spacing: 0; }
.t-body { font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--text-body-weight); }
.t-legend { font-size: var(--text-legend-size); line-height: var(--text-legend-lh); font-weight: var(--text-legend-weight); }
.t-cta { font-size: var(--text-cta-size); line-height: var(--text-cta-lh); font-weight: var(--text-cta-weight); }

/* Couleurs de texte : uniquement par ces classes ou par le contexte (section sombre). */
.c-muted { color: var(--brandt-carbon-muted); }
.c-red { color: var(--brandt-red); }
.on-dark { color: var(--brandt-white); }
.on-dark .c-muted { color: var(--brandt-white); } /* pas de blanc atténué dans la palette : secondaire = blanc sur fond sombre */

/* --- Focus : toujours visible, anneau 2 px carbone avec espace blanc ----- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-12); }
.on-dark :focus-visible, .on-photo :focus-visible { box-shadow: var(--focus-ring-inverse); }

/* --- Lien dans un texte : souligné, survol rouge ---------------------------- */
.text-link { text-decoration: underline; text-underline-offset: var(--space-4); border-radius: var(--radius-12); transition: color var(--transition); }
.text-link:hover { color: var(--brandt-red); }

/* --- Utilitaires ----------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-16); top: var(--space-16); z-index: calc(var(--z-overlay) + 1);
  transform: translateY(calc(-100% - var(--space-32))); /* hors écran tant qu'il n'a pas le focus */
  padding: var(--space-12) var(--space-16); background: var(--brandt-carbon); color: var(--brandt-white);
  border-radius: var(--radius-12);
}
.skip-link:focus-visible { transform: none; }
[hidden] { display: none !important; }

/* --- Entrée au défilement (une seule fois, IntersectionObserver, motion.js) ---
   Uniquement si JS actif et mouvement autorisé : sinon tout est visible d'emblée. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(var(--space-16)); filter: blur(var(--reveal-blur));
    transition: opacity var(--duration-enter) var(--ease), transform var(--duration-enter) var(--ease), filter var(--duration-enter) var(--ease);
    transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger)); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
}