/* ==========================================================================
   02-base.css — polices, remise à zéro, typographie de base, utilitaires.
   Dépend de 01-tokens.css. Aucune valeur en dur : tout vient des tokens.
   ========================================================================== */

@font-face { font-family: "Young Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/young-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/source-sans-3-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/source-sans-3-700.woff2") format("woff2"); }
@font-face { font-family: "Imaginary Friend"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/imaginary-friend.woff2") format("woff2"); }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: var(--space-2xl);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-block-size: 100svh;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--ctx-fg);
  background-color: var(--color-surface);
  background-image:
    radial-gradient(ellipse 60% 5% at 18% 16%, color-mix(in srgb, var(--color-highlight) 6%, transparent), transparent),
    radial-gradient(ellipse 50% 4% at 84% 48%, color-mix(in srgb, var(--color-highlight) 5%, transparent), transparent),
    radial-gradient(ellipse 55% 4% at 24% 78%, color-mix(in srgb, var(--color-highlight) 5%, transparent), transparent),
    var(--texture-grain);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { display: block; max-inline-size: 100%; }
img { block-size: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p, li { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; }
a[href^="tel:"] { white-space: nowrap; }   /* numéro de téléphone insécable */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--space-sm); inset-block-start: var(--space-sm);
  z-index: 100; padding: var(--space-xs) var(--space-md);
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: var(--radius); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Surtitre, trait à main levée, conifère : décor tiré des tokens. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--ctx-eyebrow);
}
.eyebrow--glyph { display: inline-flex; align-items: center; gap: var(--space-xs); }


.rule {
  display: block;
  block-size: var(--space-2xs);
  inline-size: 100%;
  background: currentColor;
  -webkit-mask: var(--mask-rule) repeat-x left center / auto 100%;
  mask: var(--mask-rule) repeat-x left center / auto 100%;
}

.glyph {
  display: inline-block;
  flex: none;
  inline-size: 0.7em;
  block-size: 1em;
  background: currentColor;
  color: var(--color-highlight);
  -webkit-mask: var(--mask-glyph) no-repeat center / contain;
  mask: var(--mask-glyph) no-repeat center / contain;
}

/* ---------- Primitives de mise en page (utilisables telles quelles : .stack, .grid-12, .section-head) ---------- */
/* Colonne verticale : un seul gabarit pour tous les blocs « texte en colonne ». */
.stack, .flake-list, .hero__text, .experience__item, .menu__intro, .about__text, .visit__intro, .groups__text { display: flex; flex-direction: column; gap: var(--space-md); }
/* Grille : base mobile (1 colonne), puis 12 colonnes dès 64 rem. Les écarts propres à chaque bloc restent dans 04-pages.css. */
.grid-12, .about__grid, .menu__grid, .visit__grid, .groups__grid, .reserve__grid, .public__grid, .site-footer__grid { display: grid; gap: var(--space-xl); }
@container sec (min-width: 64rem) {
  .grid-12, .about__grid, .menu__grid, .visit__grid, .groups__grid, .public__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
}
/* En-tête de section : surtitre, titre. */
.section-head, .experience__head, .testimonials__head, .reserve__head { display: flex; flex-direction: column; gap: var(--space-sm); max-inline-size: var(--measure-head); }