/* AR Hypnose — base.
   Element-level defaults. Most of the visual quality lives here, not in components.
   If you find yourself adding a class to style a heading, fix it here instead. */

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

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

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

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

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: var(--duration-reduced) !important;
      animation-iteration-count: 1 !important;
      transition-duration: var(--duration-reduced) !important;
      scroll-behavior: auto !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation-duration: var(--duration-reduced) !important;
    }
  }
}

@layer base {
  html {
    background: var(--c-paper);
    color: var(--c-ink);
    -webkit-font-smoothing: antialiased;
    scroll-padding-block-start: var(--header-height);
  }

  html.lenis,
  html.lenis body {
    height: auto;
  }

  .lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
  }

  .lenis [data-lenis-prevent],
  .lenis [data-lenis-prevent-wheel],
  .lenis [data-lenis-prevent-touch],
  .lenis [data-lenis-prevent-vertical],
  .lenis [data-lenis-prevent-horizontal] {
    overscroll-behavior: contain;
  }

  .lenis.lenis-smooth iframe {
    pointer-events: none;
  }

  .lenis.lenis-autoToggle {
    transition-property: overflow;
    transition-duration: var(--duration-discrete);
    transition-behavior: allow-discrete;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-text);
    font-synthesis: none;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  /* ---- Titres ----------------------------------------------------------
     Hiérarchie par la taille et l'espace. Deux graisses seulement.
     Instrument Serif se resserre légèrement dans les grands corps. */

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
    max-width: 20ch;
  }

  h2 {
    max-width: var(--measure-section-title);
    font-size: var(--fs-section-title);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
  }

  h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
  }

  h4 {
    font-size: var(--fs-body);
    line-height: var(--lh-heading);
  }

  /* ---- Texte courant ---------------------------------------------------- */

  p, ul, ol, dl, blockquote, table {
    max-width: var(--measure);
  }

  p { text-wrap: pretty; }

  strong {
    font-weight: var(--weight-regular);
    font-style: italic;
  }
  em { font-style: italic; }

  /* ---- Liens ------------------------------------------------------------ */

  a {
    color: var(--c-accent);
    text-decoration: underline;
    text-decoration-thickness: var(--line-width);
    text-underline-offset: var(--underline-offset);
    transition: opacity var(--transition);
  }

  a:hover {
    opacity: var(--opacity-link-hover);
  }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: var(--line-width-strong) solid var(--c-accent-deep);
    outline-offset: var(--outline-offset);
  }

  /* ---- Listes ----------------------------------------------------------- */

  ul, ol {
    padding-inline-start: var(--list-indent);
  }

  li + li { margin-block-start: var(--space-2xs); }

  /* ---- Tableaux --------------------------------------------------------
     Filets horizontaux uniquement. Pas de bordure extérieure, pas de zébrures. */

  table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  caption {
    text-align: start;
    font-size: var(--fs-caption);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-ui);
    text-transform: uppercase;
    color: var(--c-ink-muted);
    padding-block-end: var(--space-s);
  }

  th, td {
    text-align: start;
    padding-block: var(--space-s);
    border-block-end: var(--rule);
    vertical-align: baseline;
  }

  th {
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-ui);
    text-transform: uppercase;
    color: var(--c-ink-muted);
    font-size: var(--fs-caption);
  }

  td:last-child, th:last-child { text-align: end; }

  /* ---- Citations -------------------------------------------------------- */

  blockquote {
    font-family: var(--font-display);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    letter-spacing: var(--tracking-heading);
  }

  cite {
    display: block;
    font-style: normal;
    font-size: var(--fs-caption);
    color: var(--c-ink-muted);
    margin-block-start: var(--space-s);
  }

  /* ---- Détails / FAQ ---------------------------------------------------- */

  details { border-block-end: var(--rule); }

  summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    padding-block: var(--space-m);
    display: flex;
    justify-content: space-between;
    gap: var(--space-m);
  }

  summary::-webkit-details-marker { display: none; }

  summary::after {
    content: "+";
    font-weight: var(--weight-regular);
    color: var(--c-ink-muted);
    flex: none;
  }

  details[open] summary::after { content: "\2212"; }

  details > *:not(summary) {
    max-width: var(--measure);
    padding-block-end: var(--space-m);
  }

  /* ---- Adresses --------------------------------------------------------- */

  address {
    font-style: normal;
  }

  hr {
    border: 0;
    border-block-start: var(--rule);
    margin-block: var(--space-xl);
  }
}