/* Ajouts propres au site (mise en page de l'accueil), sur les tokens du design system.
   Consignés dans design/CORRECTIFS.md, « Ajouts propres au site ».
   Tailles de texte : les styles typographiques de tokens.json (label, body-sm, code) ne sont pas émis en
   variables CSS ; leurs valeurs sont reprises telles quelles, avec le nom du style en commentaire. */

/* Remise à zéro de la page : le corps garde par défaut sa marge de 8 px et un fond transparent, ce qui laissait
   deux bandes de 8 px de la couleur du navigateur de part et d'autre du contenu (très visible en thème sombre). */
html, body { margin: 0; background: var(--bg); }

/* Lien d'évitement : invisible jusqu'au focus clavier. */
.site-skip { position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--brand); color: var(--on-brand); font: 500 14px/1.5 var(--font-sans); /* style body-sm */ transform: translateY(-200%); min-height: 40px; display: inline-flex; align-items: center; }
.site-skip:focus { transform: none; }
.site-skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Cible du lien d'évitement : focusable par programme (tabindex=-1) pour que Tab reparte du contenu ; pas d'anneau sur le conteneur. */
main[tabindex="-1"]:focus { outline: none; }

/* Conteneur 1240px, gouttières space-8 / space-4. */
.site-container { width: 100%; max-width: calc(var(--lr-maxw) + 2 * var(--space-8)); margin-inline: auto; padding-inline: var(--space-8); }

/* Sections espacées de space-40 (space-24 sur mobile), titre → contenu space-16. */
.site-section { margin-block-start: var(--space-40); scroll-margin-top: var(--space-24); }
.site-section__body { margin-block-start: var(--space-16); display: grid; gap: var(--space-8); }
.site-band { margin-block-start: var(--space-24); }
main > :last-child { margin-block-end: var(--space-40); }
.lr-cta { scroll-margin-top: var(--space-24); }

/* Grilles. */
.site-grid { display: grid; gap: var(--space-6); }
.site-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
.site-timeline { display: grid; gap: var(--space-4); align-content: start; }
.site-subhead, .site-snippet__label { margin: 0; font: 500 12px/16px var(--font-mono); /* style label */ letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.site-note { display: grid; gap: var(--space-2); max-width: 66ch; }
.site-note p { margin: 0; color: var(--ink-muted); }
.site-more { display: flex; justify-content: flex-start; }

/* Tuiles bento : pile de tags, hôte du lien. */
.site-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-tags__tip { border-radius: var(--radius-xs); }
.site-host { margin-top: auto; font: 400 14px/1.6 var(--font-mono); /* style code */ color: var(--brand-ink); }

/* Carte réseau du hero dans un cadre de panneau. */
.site-map .lr-map { padding: var(--space-4); }

/* Adresse e-mail copiable dans le bloc contact. */
.site-snippet { display: grid; gap: var(--space-2); max-width: 100%; }
.lr-cta .site-snippet__label { color: inherit; }

/* Texte réservé aux lecteurs d'écran (titre de la grille de projets, niveau h2 entre le h1 et les cartes h3). */
.site-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Pages projets : conteneur de page, fil d'Ariane, en-tête de fiche. */
.site-page { padding-block: var(--space-12) var(--space-40); display: grid; gap: var(--space-12); }
.site-page > .site-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
main > .site-page:last-child { margin-block-end: 0; }
.site-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: 500 12px/16px var(--font-mono); /* style label */ letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.site-crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--line-strong); }
.site-crumbs a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; color: var(--ink-muted); text-decoration: none; } /* cible tactile 40px (tâche 8) */
.site-crumbs a:hover, .site-crumbs a:focus-visible { color: var(--brand-ink); text-decoration: underline; }
.site-crumbs [aria-current] { color: var(--ink); overflow-wrap: anywhere; }
.site-project__head { display: grid; gap: var(--space-6); }
.site-project__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Mots longs (« conteneurisation », « Integrationsprojekt ») : coupure autorisée (lang posé sur <html>), aucun élément de grille
   ne s'élargit au-delà de la colonne. Titre de fiche, titres et résumés des cartes, fil d'Ariane, corps. */
.site-page .lr-sh, .site-page .lr-sh__title, .site-page .lr-sh__intro, .site-page .lr-project, .site-page .lr-project__info,
.site-page .lr-project__title, .site-page .lr-project__summary, .site-page .lr-project__media, .site-prose { min-width: 0; }
.site-page .lr-sh__title, .site-page .lr-project__title, .site-page .lr-project__summary, .site-page .lr-sh__intro, .site-prose, .site-crumbs { overflow-wrap: anywhere; }

/* Visuel de fiche : motif réseau du ProjectCard (trois tuiles 4:3 = bandeau 4:1, sans rognage), radius-lg, décoratif. */
.site-cover { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); aspect-ratio: 4 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--brand-deep); }
.site-cover > svg { width: 100%; height: 100%; }

/* Corps Markdown d'une fiche : colonne de lecture, titres h2/h3, listes, code. */
.site-prose { max-width: 62ch; /* ≤ 80 caractères par ligne (tâche 8) */ display: grid; gap: var(--space-4); font: 400 17px/1.7 var(--font-sans); /* style body */ color: var(--ink); }
.site-prose > * { margin: 0; }
.site-prose h2 { margin-block-start: var(--space-8); font: 700 28px/1.2 var(--font-display); letter-spacing: -0.01em; }
.site-prose h3 { margin-block-start: var(--space-4); font: 700 20px/1.3 var(--font-display); }
.site-prose h4 { font: 700 17px/1.4 var(--font-display); }
.site-prose ul, .site-prose ol { padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); }
.site-prose strong { font-weight: 600; }
.site-prose a { color: var(--brand-ink); text-underline-offset: 3px; }
.site-prose :not(pre) > code { padding: 1px var(--space-1); border-radius: var(--radius-xs); background: var(--brand-soft); font: 400 .9em var(--font-mono); /* style code */ overflow-wrap: anywhere; }
.site-code { max-width: 100%; overflow-x: auto; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font: 400 14px/1.6 var(--font-mono); /* style code */ }
.site-code code { white-space: pre; }
.site-next { display: grid; gap: var(--space-6); margin-block-start: var(--space-12); }

/* Index : filtres (liens ancrés), grille en cascade. */
.site-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-8); }
.site-filters a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-muted); text-decoration: none; font: 500 14px/1.5 var(--font-sans); /* style body-sm */ transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.site-filters a:hover, .site-filters a:focus-visible { color: var(--ink); border-color: var(--line-strong); }
.site-filters a[aria-current="true"] { background: var(--brand-soft); border-color: var(--brand-ink); color: var(--brand-ink); }
.site-projects__anchor { display: block; height: 0; }
.site-projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.site-projects__item { min-width: 0; }
.site-projects__item[hidden] { display: none; }
.site-projects__item > .lr-reveal, .site-projects__item .lr-project { height: 100%; }
/* Sans JS : le filtre s'applique par l'ancre ciblée (:target), toutes les cartes restent visibles sinon. */
html:not(.js) .site-projects:has(#pro:target) .site-projects__item:not([data-context="pro"]),
html:not(.js) .site-projects:has(#ecole:target) .site-projects__item:not([data-context="ecole"]),
html:not(.js) .site-projects:has(#perso:target) .site-projects__item:not([data-context="perso"]) { display: none; }

@media (max-width: 960px) {
  .site-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-split { grid-template-columns: minmax(0, 1fr); }
  .site-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Coupure avec trait d'union seulement sur écran étroit (langue de la page posée sur <html>). */
  .site-page .lr-sh__title, .site-page .lr-project__title, .site-page .lr-project__summary, .site-page .lr-sh__intro, .site-prose { hyphens: auto; }
  .site-cover { grid-template-columns: minmax(0, 1fr); aspect-ratio: 4 / 3; }
  .site-cover > svg:nth-child(n + 2) { display: none; }
  /* Bulle de tooltip (bento) : sur écran étroit, calée dans sa carte au lieu d'être centrée sur le tag (centrage par deux
     transform, repos et survol, qui ne peuvent changer que de pair). */
  .lr-bento__card { position: relative; }
  .lr-bento__card .lr-tip { position: static; }
  .lr-bento__card .lr-tip__bubble { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: none; white-space: normal; text-align: center; transform: translateY(4px); }
  .lr-bento__card .lr-tip:hover .lr-tip__bubble, .lr-bento__card .lr-tip:focus-within .lr-tip__bubble { transform: none; }
  .site-container { padding-inline: var(--space-4); }
  .site-section { margin-block-start: var(--space-24); }
  main > :last-child { margin-block-end: var(--space-24); }
  .site-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .site-projects__grid { grid-template-columns: minmax(0, 1fr); }
  .site-page { padding-block: var(--space-8) var(--space-24); }
  .site-prose { font-size: 16px; }
  .site-prose h2 { font-size: 24px; }
}

/* Défilement doux vers les ancres (menu ⌘K, navigation), uniquement sans préférence de mouvement réduit. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Page 404 trilingue : statique, sans JavaScript (aucune révélation à l'apparition). */
.site-404 { min-height: 100vh; display: grid; align-content: center; gap: var(--space-16); padding-block: var(--space-16); }
.site-404__block { display: grid; gap: var(--space-4); justify-items: start; min-width: 0; padding-block-end: var(--space-12); border-bottom: 1px solid var(--line); }
.site-404__block:last-child { border-bottom: 0; padding-block-end: 0; }
.site-404__code { margin: 0; font: 500 12px/16px var(--font-mono); /* style label */ letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.site-404__title { margin: 0; max-width: 18ch; font: 650 clamp(32px, 5vw, 56px)/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.site-404__text { margin: 0; max-width: 60ch; color: var(--ink-muted); }