/* base.css : reset, typographie, grille, utilitaires.
   Toutes les valeurs viennent de tokens.css (design.md §11). */

/* Valeurs de composant sans token dans design.md : définies ici une seule fois */
:root {
  --focus-offset: 3px;          /* §7.1 : outline 2 px Ambre, offset 3 px */
  --reveal-shift: var(--space-4); /* §9 : apparition translateY(16px) → 0 */
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* L'attribut hidden l'emporte toujours sur un display de composant */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button { font: inherit; color: inherit; }

::selection { background: var(--color-ambre); color: var(--color-encre); }

/* ---------- Focus (§7.1, §13) ---------- */
/* Outline Ambre 2 px, offset 3 px. Sur fond clair, un halo Encre 1 px
   à l'extérieur de l'outline le rend lisible (l'Ambre seul fait 2,6:1). */

:focus { outline: none; }
:focus-visible {
  outline: var(--stroke-accent) solid var(--color-ambre);
  outline-offset: var(--focus-offset);
  box-shadow: /* taste-skill-ignore : design.md §2.3, §4.4, §7.1 */
    0 0 0 var(--focus-offset) var(--color-bg),
    0 0 0 calc(var(--focus-offset) + var(--stroke-accent) + var(--stroke-hairline)) var(--color-encre);
}
.section--dark :focus-visible,
.mobile-menu :focus-visible { box-shadow: none; } /* taste-skill-ignore */

/* ---------- Typographie (§3.1) ---------- */
/* v1.2 : Display, H1 et H2 en Manrope 500, voix éditoriale (inspiration Cursor et ElevenLabs) */

.display,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-family: var(--font-title);
  color: var(--color-text);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

.lead {
  font-family: var(--font-text);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  max-width: var(--measure);
  color: var(--color-text-muted);
}
.section--dark .lead { color: var(--color-text); }

p { max-width: var(--measure); text-wrap: pretty; }

/* Rythme interne (§4.2) : titre → chapô 24 px, chapô → action 32 px */
:is(.display, h1, .h1) + :is(p, .lead) { margin-top: var(--gap-title-lead); }
:is(p, .lead) + :is(.btn-group, .btn, .link-arrow) { margin-top: var(--gap-lead-action); }
p + p { margin-top: 1em; }

.caption,
.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.section--dark .caption,
.section--dark .small { color: var(--color-text-subtle); }

strong { font-weight: 600; }

/* Listes de contenu : 12 px entre deux éléments (§4.2) */
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-3); }

.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Mise en page (§4) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

.section { padding-block: var(--section-gap); }

/* Deux sections sur le même fond : un seul écart de 160 px entre elles, pas deux (§4.2) */
:is(.hero, .section):not(.section--alt, .section--dark, .section--amber, .section--white) + .section:not(.section--alt, .section--dark, .section--amber, .section--white) { padding-top: 0; }

/* Titre de section → contenu : 64 px desktop, 48 px mobile (§4.2) */
.section__head + * { margin-top: var(--gap-head-content); }

.section--alt { background: var(--color-bg-alt); }

/* Section Blanche (page Nos offres, demande du propriétaire du 20/10/2026) :
   une marche de ton au-dessus de l'Ivoire. Les blocs posés dessus passent en Ivoire. */
.section--white { background: var(--color-surface); }

/* Aplat Ambre : une seule fois par page, en conclusion (design.md §2.5, v1.7).
   Texte toujours en Encre (6,8:1), jamais de texte secondaire gris dessus. */
.section--amber { background: var(--color-ambre); color: var(--color-encre); }

.section--dark {
  background: var(--color-bg);
  color: var(--color-text);
}

.measure { max-width: var(--measure); }

/* Un mot composé (« avance-t-il ») ne se coupe pas sur ses traits d'union */
.keep-together { white-space: nowrap; }

/* ---------- Accessibilité ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--color-encre);
  color: var(--color-ivoire);
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; box-shadow: none; } /* taste-skill-ignore */

/* ---------- Apparition au défilement (§9) ---------- */
/* Masqué seulement si JS tourne ; main.js ajoute .is-visible une seule fois. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * var(--stagger));
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}