/* Base : règles globales et cadre de page. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Spécificité nulle : la couleur d'un lien posée par une classe l'emporte toujours,
   y compris sur a:hover. */
:where(a) { color: var(--ink); }
:where(a:hover) { color: var(--muted); }

::selection { background: var(--acc); color: var(--acci); }

input, textarea, button { font: inherit; }

/* Focus clavier par défaut (spécificité nulle : les contours propres aux composants l'emportent).
   Accent bordeaux sur fond clair ; rose clair sur les aplats sombres ; de nouveau bordeaux dans
   les cartes claires posées sur un aplat sombre. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
}
:where(.section--dark, .footer, .card--dark) :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline-color: var(--hld);
}
:where(.section--dark, .footer) :where(.card:not(.card--dark)) :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline-color: var(--acc);
}

[hidden] { display: none !important; }

/* Cadre de page : conteneur de requêtes (les unités cqw et les @container page s'y rapportent,
   largeurs : bureau ≥ 992, compact 768 à 991, mobile < 768). */
.page {
  container: page / inline-size;
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Repère de défilement : la barre passe en « défilée » quand il sort de l'écran. */
.page__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 80px;
}

/* Sections */
.section { padding: var(--section-pad) var(--gutter); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--dark); color: var(--on); }

.container { max-width: var(--container); margin: 0 auto; }

/* Deux colonnes : colonne de titre (collante pour Métier et Méthode) et colonne principale. */
.split {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--split-gap);
}
.split__aside { flex: 1 1 360px; }
.split__sticky { position: sticky; top: 124px; }
.split__main { flex: 1.6 1 560px; min-width: 0; }

/* En-tête de section en deux parties (Réalisations, Tarifs). */
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 64px;
}

/* Ancres et focus clavier : rien ne passe sous la barre collante (77 px), ni, sur mobile,
   sous le bouton fixe « Recevoir mon audit gratuit » ou « Écrire sur WhatsApp » (56 px + 16 px de marge). */
html { scroll-padding-top: 77px; }
@media (max-width: 767px) {
  html { scroll-padding-bottom: 96px; }
}

/* Lien d'évitement : premier arrêt de tabulation, visible seulement au focus. */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--dark);
  color: var(--on);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; outline: 3px solid var(--acc); outline-offset: 3px; }
.skip-link:hover { color: var(--on); }