/* AR Hypnose — layout primitives.
   Composition only. Nothing here sets a colour or a font. */

@layer layout {

  body:not(.has-header-overlay) main {
    padding-block-start: var(--header-height);
  }

  /* ---- Conteneur -------------------------------------------------------- */

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

  /* ---- Flux vertical ---------------------------------------------------
     Le seul mécanisme de rythme vertical du site.
     Les composants ne déclarent jamais leurs propres marges. */

  .u-flow > * + * {
    margin-block-start: var(--flow-space, var(--space-m));
  }

  .u-flow > h2 { --flow-space: var(--space-xl); }
  .u-flow > h3 { --flow-space: var(--space-l); }
  .u-flow > h2 + *,
  .u-flow > h3 + * { --flow-space: var(--space-s); }

  /* ---- Sections : chapitres verticaux ---------------------------------
     L'espace appartient clairement à chaque section. Les titres précèdent
     le contenu, qui reste légèrement décalé sur les grands écrans. */

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

  .l-section--surface {
    background: var(--c-card);
  }

  .l-section__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--space-l);
  }

  .l-section__header,
  .l-section__body {
    grid-column: 1 / -1;
  }

  .l-section__body {
    width: 100%;
    max-width: var(--measure);
  }

  .l-section__body--wide {
    max-width: none;
  }

  .l-section__body.u-flow {
    --flow-space: var(--space-l);
  }

  @media (min-width: 48rem) {
    .l-section__inner {
      row-gap: var(--space-xl);
    }

    .l-section__body {
      grid-column: 4 / 10;
    }

    .l-section__body--wide {
      grid-column: 1 / -1;
    }
  }

  .l-sequence {
    border-block-start: var(--rule);
  }

  .l-sequence__item {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--space-l);
    padding-block: var(--space-xl);
    border-block-end: var(--rule);
  }

  .l-sequence__item > * {
    grid-column: 1 / -1;
  }

  @media (min-width: 48rem) {
    .l-sequence__item > :not(h2):not(h3) {
      grid-column: 4 / 10;
    }
  }

  /* ---- Ouverture : une phrase, beaucoup d'air -------------------------- */

  .l-opener {
    padding-block: var(--section-space-default) var(--section-space-feature);
  }

  .l-opener--compact {
    padding-block: var(--section-space-compact);
  }

  .l-opener__sentence {
    font-family: var(--font-display);
    font-size: var(--fs-opener);
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
    max-width: var(--measure-title);
    text-wrap: balance;
  }

  .l-opener__sentence + * {
    margin-block-start: var(--space-xl);
  }

  .l-opener--compact .l-opener__sentence + * {
    margin-block-start: var(--space-l);
  }

  .l-opener > .c-breadcrumb + .l-opener__sentence {
    margin-block-start: var(--space-l);
  }

  .l-opener__intro {
    width: 100%;
    max-width: var(--measure-lead);
    margin-inline: auto;
  }

  .l-reading {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
  }

  .l-reading--wide {
    max-width: calc(var(--measure) + var(--space-3xl));
  }

  .l-support {
    display: grid;
    gap: var(--space-xl);
  }

  @media (min-width: 48rem) {
    .l-support {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ---- Compatibilité verticale ----------------------------------------
     Les anciennes sections l-split restent empilées pendant la migration. */

  .l-split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--space-l);
  }

  .l-split > * {
    grid-column: 1 / -1;
  }

  @media (min-width: 48rem) {
    .l-split > :not(h2):not(h3) {
      grid-column: 4 / 10;
    }
  }

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

  .u-measure { max-width: var(--measure); }

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

  .u-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    letter-spacing: var(--tracking-text);
  }

  .u-visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: var(--visually-hidden-size);
    width: var(--visually-hidden-size);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  body > .u-visually-hidden:focus {
    position: fixed;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    z-index: calc(var(--z-header) + 1);
    padding: var(--space-xs) var(--space-s);
    background: var(--c-paper);
    color: var(--c-ink);
  }

}