/* ==========================================================================
   Sillage — Base: reset, typography, layout primitives, accessibility
   ========================================================================== */

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

  html {
    interpolate-size: allow-keywords;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
    hanging-punctuation: first last;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body.is-locked {
    overflow: hidden;
  }

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

  img {
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ---- Typography ------------------------------------------------------- */
  h1,
  h2,
  h3,
  h4,
  .h1,
  .h2,
  .h3,
  .h4,
  .display {
    font-family: var(--font-display);
    color: var(--color-heading);
    font-weight: 700;
    text-wrap: balance;
  }

  .display {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: 800;
  }

  h1,
  .h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
    font-weight: 800;
  }

  h2,
  .h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
  }

  h3,
  .h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
    font-weight: 650;
  }

  h4,
  .h4 {
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    letter-spacing: -0.01em;
    font-weight: 650;
  }

  p {
    text-wrap: pretty;
  }

  .lead {
    font-size: var(--text-lead);
    line-height: 1.55;
    color: var(--color-text);
  }

  small,
  .text-small {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  .caption {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    line-height: 1.4;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  strong,
  b {
    font-weight: 650;
    color: var(--color-heading);
  }

  a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  ::selection {
    background: var(--signal-400);
    color: var(--ink-950);
  }

  address {
    font-style: normal;
  }

  hr {
    border: 0;
    border-top: var(--border-width) solid var(--color-border);
    margin: var(--space-7) 0;
  }

  /* ---- Accessibility ---------------------------------------------------- */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    z-index: calc(var(--z-dialog) + 1);
    padding: var(--space-3) var(--space-4);
    background: var(--ink-950);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform var(--transition-fast);
  }

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

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

  [hidden] {
    display: none !important;
  }

  /* Hidden SVG sprite */
  .icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon--sm {
    width: 1em;
    height: 1em;
  }

  .icon--lg {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Photographic grade shared by every photo of the theme */
  .photo {
    filter: saturate(0.88) contrast(1.03);
  }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container-width));
    margin-inline: auto;
  }

  .container--wide {
    width: min(100% - 2 * var(--gutter), var(--container-wide));
  }

  .container--narrow {
    width: min(100% - 2 * var(--gutter), var(--container-narrow));
  }

  .section {
    position: relative;
    padding-block: var(--section-space);
    background: var(--color-bg);
    color: var(--color-text);
  }

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

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

  .section--flush-top {
    padding-top: 0;
  }

  .section--bordered {
    border-top: var(--border-width) solid var(--color-border);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
  }

  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-5));
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  @media (min-width: 640px) {
    .grid--2,
    .grid--3,
    .grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .grid--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* Asymmetric two-column split (text / media) */
  .split {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }

  @media (min-width: 1024px) {
    .split {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-9);
    }

    .split--reverse {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .split--reverse > :first-child {
      order: 2;
    }

    .split--even {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split--top {
      align-items: start;
    }
  }
}

/* V1 · Atelier Web — le carrousel « Vos contenus » s'étend jusqu'au bord de
   l'écran (calcul en 100vw, barre de défilement comprise) : on coupe ce qui
   dépasse pour ne jamais afficher de défilement horizontal. La coupure est
   posée sur <main> et non sur <body>, dont l'overflow serait reporté sur la
   fenêtre et y deviendrait un simple « hidden ». `clip` ne crée pas de
   conteneur de défilement : les éléments sticky continuent de fonctionner. */
@layer base {
  main {
    overflow-x: clip;
  }
}