/*!
 * content.css — pages intérieures : grille éditoriale, fil d'Ariane, contenu rédactionnel, étapes,
 * cadre téléphone, carte article, citation, page 404. Pages : toutes sauf l'accueil.
 * À charger APRÈS styles.css (qui déclare l'ordre des couches). Documentation : docs/portfolio-design-system.md
 */
@layer layout {
  .sidebar { display: flex; flex-wrap: wrap; gap: var(--sidebar-gap, var(--space-l)); }
  .sidebar > :first-child { flex-basis: var(--side, 18rem); flex-grow: 1; }
  .sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: 55%; }

  .switcher { display: flex; flex-wrap: wrap; gap: var(--space-m); }
  .switcher > * { flex-grow: 1; flex-basis: calc((var(--switch-at, 40rem) - 100%) * 999); }

  .frame { aspect-ratio: var(--ratio, 4 / 3); overflow: hidden; }
  .frame > img, .frame > picture > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* Grille éditoriale « breakout » : colonnes nommées content / popout / full */
  .editorial {
    --content: min(var(--measure), 100% - 2 * var(--gutter));
    --popout: minmax(0, 7rem);
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [popout-start] var(--popout)
      [content-start] var(--content) [content-end]
      var(--popout) [popout-end]
      minmax(var(--gutter), 1fr) [full-end];
  }
  .editorial > * { grid-column: content; }
  .editorial > .popout { grid-column: popout; }
  .editorial > .full-bleed { grid-column: full; }
}

@layer components {
  /* ---------- Deux colonnes (titre | contenu) et encadré : identiques à home.css ---------- */
  .note { margin-block-start: var(--space-l); padding: var(--space-s) var(--space-m); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-m); font-size: var(--step--1); color: var(--c-text-2); }
  .split { display: grid; gap: var(--space-l); }
  @media (min-width: 64em) { .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--space-2xl); align-items: start; } .split--sticky > :first-child { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-l)); } }

  /* ---------- Fil d'Ariane ---------- */
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; padding: 0; color: var(--c-text-2); }
  .breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
  .breadcrumb li + li::before { content: "/"; color: var(--c-text-3); }
  .breadcrumb a { display: inline-flex; min-block-size: 2rem; align-items: center; text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb [aria-current="page"] { color: var(--c-text); }

  /* ---------- Contenu rédactionnel (articles, pages légales) ---------- */
  .prose { max-inline-size: var(--measure); font-size: var(--step-0); line-height: 1.7; }
  .prose > * + * { margin-block-start: 1.1em; }
  .prose h2 { font-size: var(--step-3); margin-block-start: 2.2em; }
  .prose h3 { font-size: var(--step-2); margin-block-start: 1.8em; }
  .prose h4 { font-size: var(--step-1); margin-block-start: 1.5em; }
  .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-block-start: 0.6em; }
  .prose ul, .prose ol { padding-inline-start: 1.3em; }
  .prose li + li { margin-block-start: 0.4em; }
  .prose li::marker { color: var(--c-accent-text); }
  .prose a { text-decoration-color: var(--c-accent); text-decoration-thickness: 1.5px; }
  .prose a:hover { color: var(--c-accent-text); }
  .prose blockquote { padding-inline-start: 1.25em; border-inline-start: 2px solid var(--c-accent); font-family: var(--font-serif); font-style: italic; font-size: var(--step-2); line-height: 1.35; }
  .prose figure figcaption { margin-block-start: 0.6rem; font-family: var(--font-mono); font-size: var(--text-label); color: var(--c-text-2); }
  .prose table { inline-size: 100%; font-size: var(--step--1); }
  .prose th, .prose td { padding: 0.6rem 0.75rem; text-align: start; border-block-end: 1px solid var(--c-line); vertical-align: top; }
  .prose th { font-weight: 600; }
  .prose code { padding: 0.1em 0.35em; border-radius: var(--radius-xs); background: var(--c-tint); }
  .prose hr { margin-block: 2.5em; }
  .prose .note { padding: 1rem 1.15rem; border: 1px solid var(--c-line); border-inline-start: 3px solid var(--c-accent); border-radius: var(--radius-s); background: var(--c-raised); font-size: var(--step--1); }

  /* ---------- Étapes / frise (méthode) ---------- */
  .steps { display: grid; gap: 0; list-style: none; padding: 0; counter-reset: step; }
  .step { position: relative; display: grid; gap: 0.5rem; padding: 0 0 var(--space-l) 3.75rem; }
  .step::before { content: ""; position: absolute; inset-block: 2.75rem 0; inset-inline-start: 1.375rem; inline-size: 1px; background: var(--c-line-strong); }
  .step:last-child::before { display: none; }
  .step__num { position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); background: var(--c-raised); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; }
  .step__title { font-size: var(--step-1); padding-block-start: 0.45rem; }
  .step__text { color: var(--c-text-2); font-size: var(--step--1); }
  .step__meta { display: grid; gap: 0.2rem; margin-block-start: 0.25rem; font-family: var(--font-mono); font-size: var(--text-label); color: var(--c-text-2); }
  .step__meta b { font-weight: 500; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.06em; }
  @media (min-width: 64em) {
    .steps--row { grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); gap: var(--space-s); }
    .steps--row .step { padding: 4rem 0 0; }
    .steps--row .step::before { inset: 1.375rem 0 auto 2.75rem; inline-size: auto; block-size: 1px; }
    .steps--row .step:last-child::before { display: none; }
  }

  /* Cadre téléphone, carte article */
  .card--article .card__title { font-size: var(--step-2); }
  .card--article .card__meta { display: flex; gap: 0.75rem; }
  .device--phone { inline-size: min(100%, 15rem); border: 0.4rem solid var(--ink-900); border-radius: 2.25rem; background: var(--ink-900); box-shadow: var(--shadow-2); }
  .device--phone .device__screen { aspect-ratio: 9 / 19.5; border-radius: 1.85rem; }
  .device--phone::before { content: ""; position: absolute; inset-block-start: 0.55rem; inset-inline-start: 50%; translate: -50% 0; z-index: 2; inline-size: 30%; block-size: 1.15rem; border-radius: var(--radius-pill); background: var(--ink-900); }

  /* ---------- Citation / témoignage ---------- */
  .quote { position: relative; display: grid; gap: var(--space-s); margin: 0; padding: var(--space-l); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-raised); }
  .quote__text { font-family: var(--font-serif); font-style: italic; font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.005em; }
  .quote__text::before { content: "«\00a0"; color: var(--c-accent-text); }
  .quote__text::after { content: "\00a0»"; color: var(--c-accent-text); }
  .quote__author { display: flex; align-items: center; gap: 0.75rem; }
  .quote__avatar { inline-size: 3rem; block-size: 3rem; border-radius: 50%; object-fit: cover; }
  .quote__name { font-weight: 600; font-style: normal; }
  .quote__role { display: block; font-family: var(--font-mono); font-size: var(--text-label); color: var(--c-text-2); letter-spacing: 0.02em; }
  .quote--plain { padding: 0; border: 0; background: none; }

}

@layer pages {
  /* ---------- 404 ---------- */
  .err { display: grid; gap: var(--space-xl); min-block-size: 60vh; align-content: center; }
  @media (min-width: 64em) { .err { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--space-2xl); align-items: center; } }
  .err__code { font-family: var(--font-mono); font-size: clamp(4rem, 2rem + 10vi, 10rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.06em; color: var(--c-text); }
  .err__code span { color: var(--c-accent-text); }
  .err__signal { color: var(--c-text-3); }
  .err__links { display: grid; gap: 0; list-style: none; padding: 0; border-block-start: 1px solid var(--c-line); }
  .err__links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 3.25rem; border-block-end: 1px solid var(--c-line); text-decoration: none; font-weight: 550; }
  .err__links a:hover { color: var(--c-accent-text); }
  .err__links small { font-size: var(--step--1); font-weight: 400; color: var(--c-text-3); text-align: end; }
}