/* =========================================================================
   MOMA — Styles globaux
   Fond, focus, selection, utilitaires transverses.
   ========================================================================= */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

/* --- Focus --------------------------------------------------------------
   Un seul style de focus pour tout le site par defaut : l'anneau ocre,
   pense pour le fond sombre et pour le hero photographique (mobile), ou il
   reste lisible (6,70:1 sur --bg-dark, mesure au pixel sur la photo en
   D-25/D-27).
   Correctif D-29 (revue accessibility-lead, bloquant) : cet anneau ocre par
   defaut n'a JAMAIS ete conforme sur un fond clair neutre — deja avant ce
   changement de palette, #E8952B sur --bg-page ne faisait que 2,12:1 (et la
   nouvelle valeur #F7A825 tombe a 1,78:1), tres sous le seuil 3:1 exige par
   WCAG 2.4.11/2.4.13 pour un indicateur de focus. Le halo box-shadow seul
   passe de justesse (~3,5:1) mais ne suffit pas a documenter la conformite
   de l'anneau lui-meme. Corrige en etendant le pattern deja utilise par
   .is-warm aux sections claires sans fond sombre ni chaud : en-tete, pied
   de page, Philosophie, hero desktop (>=64em, voir responsive.css) et pages
   legales (~12-13:1 avec --c-green-darkest).
   Aucune regle ne doit faire `outline: none` sans remplacement equivalent. */
:focus-visible {
  outline: var(--focus-w) solid var(--c-ocre);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 calc(var(--focus-w) + 2px) rgba(27, 40, 33, 0.55);
}

/* Sur fond sombre, on inverse le liseré exterieur pour rester lisible. */
.is-dark :focus-visible {
  box-shadow: 0 0 0 calc(var(--focus-w) + 2px) rgba(241, 234, 213, 0.45);
}

/* Sur fond chaud clair (Epicerie, Traiteur — D-17) : l'anneau ocre par
   defaut se confondrait avec le fond. Anneau fonce dedie, deja a 6.3:1+
   contre ces deux fonds (voir variables.css). */
.is-warm :focus-visible {
  outline-color: var(--c-green-darkest);
  box-shadow: 0 0 0 calc(var(--focus-w) + 2px) rgba(241, 234, 213, 0.55);
}

/* Fonds clairs neutres sans classe de section dediee (D-29, correctif
   bloquant ci-dessus) : en-tete, pied de page, Philosophie, pages legales.
   Le hero desktop (>=64em) recoit le meme correctif dans responsive.css,
   ou vivent deja ses autres overrides clairs — le hero mobile (<64em, fond
   photo) garde l'anneau ocre par defaut, deja verifie lisible. */
.site-header :focus-visible,
.site-footer :focus-visible,
.histoire :focus-visible,
.page-legal :focus-visible {
  outline-color: var(--c-green-darkest);
}

::selection {
  background-color: var(--c-ocre);
  color: var(--c-green-darkest);
}

/* --- Lien d'evitement ---------------------------------------------------
   Visible uniquement au focus clavier, au-dessus de tout le reste.
   ------------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: calc(var(--z-overlay) + 10);
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--c-ocre);
  color: var(--c-green-darkest);
  font-weight: 650;
  font-size: var(--t-sm);
  text-decoration: none;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);

  /* Hors ecran tant qu'il n'a pas le focus, sans display:none
     (qui le rendrait inatteignable au clavier). */
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- Utilitaires --------------------------------------------------------- */

/* Masque visuellement tout en restant lu par les technologies d'assistance. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  width: 100%;
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections sombres : bascule des couleurs de texte d'un seul coup. */
.is-dark {
  background-color: var(--bg-dark);
  color: var(--on-dark);
}

.is-dark h1,
.is-dark h2,
.is-dark h3 {
  color: var(--on-dark);
}

/* Fonds chauds clairs (Epicerie, Traiteur) : le fond est fixe par la classe
   de section elle-meme (.epicerie / .traiteur dans sections.css) ; .is-warm
   ne fixe que le texte, jamais la variante "soft" attenuee (contraste
   insuffisant sur ces fonds plus satures — voir variables.css). */
.is-warm {
  color: var(--ink-on-warm);
}

.is-warm h1,
.is-warm h2,
.is-warm h3,
.is-warm .eyebrow,
.is-warm .prose {
  color: var(--ink-on-warm);
}