/*!
 * home.css — sections propres à l'accueil (index.html, en/index.html). À charger APRÈS styles.css.
 * Refonte v2 (3 octobre 2026) : 6 sections, thème clair. Documentation : docs/portfolio-design-system.md §7.5
 */
@layer pages {
  /* Les deux sections qui suivent le héros sont mises en page avec le premier affichage (moins de travail juste après) */
  .hero + .section, .hero + .section + .section { content-visibility: visible; }

  /* ---------- Héros ---------- */
  .hero { padding-block: var(--space-l-2xl) var(--space-l); --grid-at: 78% 30%; }
  .hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 64em) { .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); column-gap: var(--space-2xl); } }
  .hero__title { margin-block-start: var(--space-m); font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.045em; max-inline-size: 11.5em; }
  .hero__lead { margin-block-start: var(--space-m); font-size: var(--text-lead); line-height: 1.5; color: var(--c-text-2); max-inline-size: 34rem; }
  .hero__actions { margin-block-start: var(--space-l); }
  @media (max-width: 29.99em) { .hero__actions > .btn { flex: 1 1 100%; } }
  .hero__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin-block-start: var(--space-m); font-size: var(--step--1); color: var(--c-text-2); }
  .hero__meta span:not(:last-child)::after { content: "·"; margin-inline: 0.55em; color: var(--c-text-3); }
  .hero__signal { position: relative; margin-block-start: var(--space-xl); }
  .hero__signal .led { position: absolute; inset-inline-end: -0.25rem; inset-block-start: calc(50% - 0.25rem); }

  /* Portrait annoté : 3 annotations au plus, à gauche du cadre */
  .datasheet { --side: clamp(6.5rem, 27%, 9rem); position: relative; margin: 0; padding-inline-start: var(--side); }
  .datasheet__frame { position: relative; padding: 0.5rem; border: 1px solid var(--c-line-strong); background: var(--c-raised); }
  .datasheet__frame img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--c-surface); }
  .callouts { list-style: none; padding: 0; }
  .callout { position: absolute; inset-inline-start: calc(-1px - var(--side)); inset-block-start: var(--y); inline-size: var(--side); display: grid; gap: 0.1rem; padding-inline-end: 1.1rem; text-transform: none; letter-spacing: 0.02em; line-height: 1.25; }
  .callout::after { content: ""; position: absolute; inset: 0.6rem -0.2rem auto calc(100% - 1.1rem); block-size: 1px; background: var(--c-line-strong); }
  .callout::before { content: ""; position: absolute; z-index: 1; inset: 0.3rem -0.55rem auto auto; inline-size: 0.6rem; block-size: 0.6rem; border: 1px solid var(--c-text); border-radius: 50%; background: var(--c-accent); }
  .callout b { order: -1; font-weight: 600; font-size: clamp(0.75rem, 3.2vw, 0.875rem); color: var(--c-text); }
  .callout span { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); }
  @media (max-width: 47.99em) { .datasheet { max-inline-size: 28rem; margin-inline: auto; } }

  /* ---------- Ce que je fais : 4 cartes ---------- */
  .offer { display: grid; gap: var(--space-s); list-style: none; padding: 0; }
  @media (min-width: 40em) { .offer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 70em) { .offer { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .offer .card { gap: var(--space-s); padding-block-end: var(--space-l); }
  .offer .card__icon { color: var(--c-accent-text); }
  .offer .card__title { margin-block-start: var(--space-2xs); }
  .offer__arrow { position: absolute; inset: auto var(--space-m) var(--space-m) auto; color: var(--c-text-3); transition: translate var(--dur-2) var(--ease-out), color var(--dur-2); }
  .offer .card:hover .offer__arrow { translate: 3px 0; color: var(--c-text); }

  /* ---------- Réalisations choisies ---------- */
  .section-head > .badge { justify-self: start; }
  .projects { display: grid; gap: var(--space-xl) var(--space-l); list-style: none; padding: 0; }
  @media (min-width: 48em) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .projects > li:nth-child(even) { margin-block-start: var(--space-xl); } }
  .project-card__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem var(--space-m); }
  .project-card__demo { position: relative; z-index: 4; display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: var(--text-ui); color: var(--c-text-2); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 0.3em; }
  .project-card__demo:hover { color: var(--c-text); text-decoration-color: var(--c-accent); }


  /* ---------- Je développe avec l'IA ---------- */
  .ai { display: grid; gap: var(--space-l); }
  @media (min-width: 64em) { .ai { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--space-2xl); align-items: start; } }
  .ai__head { display: grid; gap: var(--space-s); justify-items: start; }
  .ai__head .link-arrow { margin-block-start: var(--space-2xs); }
  .ai__list { list-style: none; padding: 0; border-block-start: 1px solid var(--c-line); }
  .ai__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-s); padding-block: var(--space-m); border-block-end: 1px solid var(--c-line); }
  .ai__item > .icon { inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.1rem; color: var(--c-accent-text); }
  .ai__item h3 { font-size: var(--step-1); }
  .ai__item p { margin-block-start: 0.35rem; color: var(--c-text-2); max-inline-size: 34em; }

  /* ---------- Pourquoi je fais ce métier ---------- */
  .why { display: grid; gap: var(--space-m); }
  @media (min-width: 64em) { .why { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); column-gap: var(--space-2xl); } }
  .why__title { font-size: var(--step-3); }
  .why__body { display: grid; gap: var(--space-m); justify-items: start; }
  .why__text { font-size: var(--step-2); line-height: 1.32; letter-spacing: -0.02em; max-inline-size: 26em; }
  .why__text:first-child { color: var(--c-text-2); }
}