/* ==========================================================================
   FB Tech — composants et sections
   Règle : aucune couleur ni espacement en dur, uniquement des var(--fb-…).
   Toutes les classes sont préfixées « fb- ». Base scopée sur body.fb-page.
   ========================================================================== */

/* ---------- Base ---------- */
.fb-page {
  margin: 0;
  background: var(--fb-color-bg-default);
  color: var(--fb-color-text-secondary);
  font-family: var(--fb-font-sans);
  font-size: var(--fb-font-size-body);
  line-height: var(--fb-line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.fb-page *,
.fb-page *::before,
.fb-page *::after {
  box-sizing: border-box;
}

.fb-page :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) {
  margin: 0;
}

.fb-page :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.fb-page :where(img, svg) {
  display: block;
  max-width: 100%;
}

.fb-page :where(img) {
  height: auto;
}

.fb-page :where(a) {
  color: inherit;
}

.fb-page :where(button) {
  font: inherit;
  color: inherit;
}

.fb-page :where(a, button, [tabindex]):focus-visible {
  outline: var(--fb-focus-width) solid var(--fb-color-border-focus);
  outline-offset: var(--fb-focus-width);
}

:root:has(body.fb-page) {
  scroll-behavior: smooth;
}

.fb-page :where([id]) {
  scroll-margin-top: var(--fb-nav-height);
}

.fb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fb-skip-link {
  position: absolute;
  top: var(--fb-spacing-2);
  left: var(--fb-spacing-2);
  z-index: 100;
  padding: var(--fb-spacing-2) var(--fb-spacing-3);
  border-radius: var(--fb-radius-pill);
  background: var(--fb-color-bg-default);
  color: var(--fb-color-text-primary);
  font-weight: var(--fb-font-weight-medium);
  transform: translateY(-200%);
}

.fb-skip-link:focus {
  transform: none;
}

/* ---------- Layout ---------- */
.fb-container {
  width: 100%;
  max-width: calc(var(--fb-content-max) + 2 * var(--fb-gutter));
  margin-inline: auto;
  padding-inline: var(--fb-gutter);
}

.fb-section {
  padding-block: var(--fb-section-padding);
  background: var(--fb-color-bg-default);
}

.fb-section--subtle {
  background: var(--fb-color-bg-subtle);
}

.fb-section--inverse {
  background: var(--fb-color-bg-inverse);
  color: var(--fb-color-text-disabled);
}

.fb-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fb-spacing-3);
}

.fb-stack--lg {
  gap: var(--fb-spacing-6);
}

.fb-stack--xl {
  gap: var(--fb-spacing-7);
}

.fb-stack--md {
  gap: var(--fb-spacing-4);
}

.fb-stack--sm {
  gap: var(--fb-spacing-2);
}

.fb-stack--fill {
  align-items: stretch;
}

/* Deux colonnes : titre 380 px + contenu (Contexte, Rôle) */
.fb-split {
  display: grid;
  grid-template-columns: var(--fb-column-aside) minmax(0, 1fr);
  gap: var(--fb-spacing-9);
  align-items: start;
}

/* ---------- Typographie ---------- */
.fb-label {
  font-family: var(--fb-font-label);
  font-size: var(--fb-font-size-label);
  font-weight: var(--fb-font-weight-semibold);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-brand);
}

.fb-section--inverse .fb-label,
.fb-case-hero .fb-label,
.fb-hero .fb-label {
  color: var(--fb-color-text-brand-inverse);
}

.fb-display {
  max-width: var(--fb-measure-hero);
  font-size: var(--fb-font-size-display);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-display);
  color: var(--fb-color-text-inverse);
  text-wrap: balance;
}

.fb-display em,
.fb-h1 em {
  font-style: normal;
  color: var(--fb-color-text-brand-inverse);
}

.fb-h1 {
  max-width: var(--fb-measure-case-title);
  font-size: var(--fb-font-size-h1);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-h1);
  color: var(--fb-color-text-inverse);
  text-wrap: balance;
}

/* Nom du projet en sur-ligne, accroche dessous */
.fb-h1 em {
  display: block;
}

.fb-h2 {
  max-width: var(--fb-measure-heading);
  font-size: var(--fb-font-size-h2);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-h2);
  color: var(--fb-color-text-primary);
  text-wrap: balance;
}

.fb-section--inverse .fb-h2 {
  color: var(--fb-color-text-inverse);
}

.fb-h2--col {
  font-size: var(--fb-font-size-h2-col);
  line-height: var(--fb-line-height-h2-col);
}

/* Titre de bloc (ex. légende d'une galerie) */
.fb-h3 {
  font-size: var(--fb-font-size-card-title);
  font-weight: var(--fb-font-weight-regular);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-primary);
}

/* Texte long (pages légales) : largeur de lecture */
.fb-prose--measure {
  max-width: var(--fb-measure-case-lead);
}

.fb-prose--measure .fb-h3 {
  margin-top: var(--fb-spacing-4);
}

/* Liste à puces dans un texte courant */
.fb-page .fb-list {
  padding-left: var(--fb-spacing-4);
  list-style: disc;
}

/* Galerie : titre + visuel, empilés */
.fb-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-7);
  width: 100%;
}

.fb-gallery__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fb-spacing-3);
}

.fb-lead {
  max-width: var(--fb-measure-hero-lead);
  font-size: var(--fb-font-size-lead);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-lead);
  color: var(--fb-color-text-disabled);
}

.fb-subtitle {
  max-width: var(--fb-measure-lead);
  font-size: var(--fb-font-size-lead-s);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-lead-s);
  color: var(--fb-color-text-secondary);
}

.fb-body {
  font-size: var(--fb-font-size-body);
  line-height: var(--fb-line-height-body);
  color: var(--fb-color-text-secondary);
}

.fb-section--inverse .fb-body {
  color: var(--fb-color-text-disabled);
}

.fb-prose {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-4);
}

.fb-link {
  color: var(--fb-color-text-brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--fb-border-width);
}

.fb-section--inverse .fb-link,
.fb-hero .fb-link {
  color: var(--fb-color-text-brand-inverse);
}

.fb-link:hover {
  text-decoration-thickness: var(--fb-focus-width);
}

/* ---------- Icônes ---------- */
.fb-icon {
  flex: none;
  width: var(--fb-icon-size);
  height: var(--fb-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fb-icon--s {
  width: var(--fb-icon-size-s);
  height: var(--fb-icon-size-s);
}

/* ---------- Boutons ---------- */
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fb-spacing-2);
  padding: var(--fb-spacing-3) var(--fb-spacing-4);
  border: var(--fb-border-width) solid transparent;
  border-radius: var(--fb-radius-pill);
  font-family: var(--fb-font-sans);
  font-size: var(--fb-font-size-button);
  line-height: var(--fb-line-height-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fb-duration-fast) var(--fb-ease), color var(--fb-duration-fast) var(--fb-ease),
    border-color var(--fb-duration-fast) var(--fb-ease);
}

.fb-btn--primary {
  background: var(--fb-color-bg-brand);
  color: var(--fb-color-text-inverse);
  font-weight: var(--fb-font-weight-bold);
}

.fb-btn--primary:hover {
  background: var(--fb-color-bg-brand-hover);
}

.fb-btn--outline-inverse {
  border-color: var(--fb-color-border-inverse);
  background: transparent;
  color: var(--fb-color-text-inverse);
  font-weight: var(--fb-font-weight-medium);
}

.fb-btn--outline-inverse:hover {
  background: var(--fb-color-bg-default);
  color: var(--fb-color-text-primary);
}

.fb-btn--small {
  padding: var(--fb-spacing-2) var(--fb-spacing-3);
  font-size: var(--fb-font-size-button-s);
}

.fb-btn .fb-icon {
  width: var(--fb-icon-size-s);
  height: var(--fb-icon-size-s);
}

/* Lien texte avec flèche (LinkedIn →, ← Retour) */
.fb-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fb-spacing-2);
  font-family: var(--fb-font-sans);
  font-weight: var(--fb-font-weight-medium);
  text-decoration: none;
  color: var(--fb-color-text-inverse);
}

.fb-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.fb-text-link--muted {
  font-size: var(--fb-font-size-caption);
  color: var(--fb-color-text-disabled);
}

.fb-text-link--muted:hover {
  color: var(--fb-color-text-inverse);
}

.fb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fb-spacing-3);
}

/* ---------- Chips (filtres, compétences) ---------- */
.fb-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--fb-chip-height);
  padding: var(--fb-spacing-2) var(--fb-spacing-3);
  border: 0;
  border-radius: var(--fb-radius-pill);
  background: var(--fb-color-bg-subtle);
  color: var(--fb-color-text-secondary);
  font-family: var(--fb-font-label);
  font-size: var(--fb-font-size-chip);
  font-weight: var(--fb-font-weight-semibold);
  line-height: var(--fb-line-height-tight);
  white-space: nowrap;
}

button.fb-chip {
  cursor: pointer;
  transition: background-color var(--fb-duration-base) var(--fb-ease), color var(--fb-duration-base) var(--fb-ease),
    transform var(--fb-duration-fast) var(--fb-ease);
}

button.fb-chip:active {
  transform: scale(var(--fb-scale-press));
}

button.fb-chip:hover {
  background: var(--fb-color-border-default);
  color: var(--fb-color-text-primary);
}

.fb-chip--active,
.fb-chip[aria-pressed="true"],
button.fb-chip[aria-pressed="true"]:hover {
  background: var(--fb-color-bg-inverse);
  color: var(--fb-color-text-inverse);
}

.fb-chip--accent {
  background: var(--fb-color-bg-accent-subtle);
  color: var(--fb-color-text-accent);
}

.fb-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fb-spacing-2);
}

/* ---------- Tag (hero d'étude de cas, sur fond sombre) ---------- */
.fb-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--fb-spacing-1) var(--fb-spacing-3);
  border: var(--fb-border-width) solid var(--fb-color-border-tag-inverse);
  border-radius: var(--fb-radius-pill);
  color: var(--fb-color-text-disabled);
  font-family: var(--fb-font-label);
  font-size: var(--fb-font-size-chip);
  font-weight: var(--fb-font-weight-semibold);
  line-height: var(--fb-line-height-tag);
  white-space: nowrap;
}

/* ---------- Navigation ---------- */
.fb-header-slot {
  min-height: var(--fb-nav-height);
  background: var(--fb-color-bg-overlay);
}

.fb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fb-color-bg-overlay);
}

.fb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fb-spacing-4);
  min-height: var(--fb-nav-height);
  padding-block: var(--fb-spacing-3);
}

.fb-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--fb-spacing-2);
  text-decoration: none;
}

.fb-nav__logo {
  width: var(--fb-logo-size);
  height: var(--fb-logo-size);
}

.fb-nav__tagline {
  font-size: var(--fb-font-size-caption);
  font-weight: var(--fb-font-weight-light);
  color: var(--fb-color-text-disabled);
  white-space: nowrap;
}

.fb-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--fb-spacing-5);
}

.fb-nav__links {
  display: flex;
  align-items: center;
  gap: var(--fb-spacing-5);
}

.fb-nav__link {
  display: inline-block;
  padding-block: var(--fb-spacing-2);
  font-family: var(--fb-font-label);
  font-size: var(--fb-font-size-chip);
  font-weight: var(--fb-font-weight-semibold);
  color: var(--fb-color-text-disabled);
  text-decoration: none;
  transition: color var(--fb-duration-fast) var(--fb-ease);
}

.fb-nav__link:hover {
  color: var(--fb-color-text-inverse);
}

.fb-nav__link[aria-current] {
  color: var(--fb-color-text-brand-inverse);
}

.fb-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--fb-spacing-6);
  height: var(--fb-spacing-6);
  padding: 0;
  border: var(--fb-border-width) solid var(--fb-color-border-subtle-inverse);
  border-radius: var(--fb-radius-md);
  background: transparent;
  color: var(--fb-color-text-inverse);
  cursor: pointer;
}

.fb-nav__toggle-close {
  display: none;
}

.fb-nav__toggle[aria-expanded="true"] .fb-nav__toggle-open {
  display: none;
}

.fb-nav__toggle[aria-expanded="true"] .fb-nav__toggle-close {
  display: block;
}

@media (max-width: 980px) {
  .fb-nav__toggle {
    display: inline-flex;
  }

  .fb-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--fb-spacing-4);
    padding: var(--fb-spacing-3) var(--fb-gutter) var(--fb-spacing-5);
    border-top: var(--fb-border-width) solid var(--fb-color-border-subtle-inverse);
    background: var(--fb-color-bg-overlay);
  }

  .fb-nav__menu.is-open {
    display: flex;
  }

  .fb-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .fb-nav__link {
    display: block;
    padding-block: var(--fb-spacing-3);
    font-size: var(--fb-font-size-caption);
  }

  .fb-nav__menu .fb-btn {
    align-self: flex-start;
  }
}

/* ---------- Hero ---------- */
.fb-hero {
  padding-block: var(--fb-hero-padding);
  background: var(--fb-color-bg-inverse);
}

.fb-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fb-spacing-5);
}

.fb-hero .fb-actions {
  padding-top: var(--fb-spacing-3);
}

/* Hero d'étude de cas */
.fb-case-hero {
  padding-block: var(--fb-case-hero-padding);
  background: var(--fb-color-bg-inverse);
}

.fb-case-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fb-spacing-4);
}

.fb-case-hero .fb-lead {
  max-width: var(--fb-measure-case-lead);
}

.fb-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fb-spacing-2);
}

.fb-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fb-spacing-4);
  width: 100%;
  padding-top: var(--fb-spacing-5);
  border-top: var(--fb-border-width) solid var(--fb-color-border-subtle-inverse);
}

.fb-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-2);
}

.fb-meta__label {
  font-family: var(--fb-font-label);
  font-size: var(--fb-font-size-meta);
  font-weight: var(--fb-font-weight-semibold);
  color: var(--fb-color-text-disabled);
}

.fb-meta__value {
  font-size: var(--fb-font-size-body-m);
  color: var(--fb-color-text-inverse);
}

/* ---------- Visuels ---------- */
.fb-media {
  overflow: hidden;
  border-radius: var(--fb-radius-2xl);
  background: var(--fb-color-bg-subtle);
}

.fb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fb-media--md {
  border-radius: var(--fb-radius-lg);
}

.fb-media--narrow {
  width: 100%;
  max-width: var(--fb-media-narrow);
  margin-inline: auto;
}

.fb-media--portrait {
  width: 100%;
  max-width: var(--fb-media-portrait);
  margin-inline: auto;
}

.fb-section--visual {
  padding-top: var(--fb-spacing-7);
  padding-bottom: var(--fb-spacing-6);
}

/* ---------- Travaux : filtres + grille ---------- */
.fb-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fb-spacing-2);
}

.fb-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fb-spacing-5) var(--fb-spacing-4);
}

.fb-project-grid [hidden] {
  display: none;
}

/* ---------- Motion des filtres (View Transitions API, voir js/fb-site.js) ----------
   Les noms view-transition-name sont posés par le JS pendant la transition.
   Navigateurs sans support : filtrage instantané, comme avant. */
.fb-project-grid > li {
  view-transition-class: fb-card;
}

::view-transition-group(*.fb-card) {
  animation-duration: var(--fb-duration-slow);
  animation-timing-function: var(--fb-ease);
}

::view-transition-old(*.fb-card),
::view-transition-new(*.fb-card) {
  animation-duration: var(--fb-duration-fast);
  animation-timing-function: var(--fb-ease);
}

/* Carte qui disparaît */
::view-transition-old(*.fb-card):only-child {
  animation-name: fb-card-out;
}

/* Carte qui apparaît (délai de décalage injecté par le JS) */
::view-transition-new(*.fb-card):only-child {
  animation-name: fb-card-in;
  animation-duration: var(--fb-duration-base);
  animation-fill-mode: both;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--fb-duration-base);
}

@keyframes fb-card-out {
  to {
    opacity: 0;
    transform: scale(var(--fb-scale-exit));
  }
}

@keyframes fb-card-in {
  from {
    opacity: 0;
    transform: translateY(var(--fb-motion-rise));
  }
}

.fb-empty {
  padding: var(--fb-spacing-6) var(--fb-spacing-4);
  border: var(--fb-border-width) dashed var(--fb-color-border-strong);
  border-radius: var(--fb-radius-lg);
  text-align: center;
  color: var(--fb-color-text-secondary);
}

.fb-project-card {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-3);
  height: 100%;
  border-radius: var(--fb-radius-xl);
  color: inherit;
  text-decoration: none;
}

.fb-project-card__media {
  overflow: hidden;
  aspect-ratio: 384 / 293;
  border-radius: var(--fb-radius-xl);
  background: var(--fb-color-bg-subtle);
}

.fb-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fb-duration-base) var(--fb-ease);
}

.fb-project-card:hover .fb-project-card__media img {
  transform: scale(1.03);
}

.fb-project-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-1);
}

.fb-project-card__tags {
  font-family: var(--fb-font-label);
  font-size: var(--fb-font-size-meta);
  font-weight: var(--fb-font-weight-semibold);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-secondary);
}

.fb-project-card__title {
  font-size: var(--fb-font-size-project-title);
  font-weight: var(--fb-font-weight-regular);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-primary);
}

.fb-project-card:hover .fb-project-card__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--fb-border-width);
}

/* ---------- Expertises ---------- */
.fb-expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fb-spacing-4);
}

.fb-expertise-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fb-spacing-3);
  padding: var(--fb-spacing-5);
  border: var(--fb-border-width) solid var(--fb-color-border-default);
  border-radius: var(--fb-radius-lg);
  background: var(--fb-color-bg-default);
}

.fb-icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--fb-icon-pill-size);
  height: var(--fb-icon-pill-size);
  border-radius: var(--fb-radius-md);
  background: var(--fb-color-bg-brand-subtle);
  color: var(--fb-color-text-brand);
}

.fb-icon-pill--s {
  width: var(--fb-icon-pill-size-s);
  height: var(--fb-icon-pill-size-s);
  border-radius: var(--fb-radius-sm);
}

.fb-icon-pill--accent {
  background: var(--fb-color-bg-accent-subtle);
  color: var(--fb-color-text-accent);
}

.fb-card-title {
  font-size: var(--fb-font-size-card-title);
  font-weight: var(--fb-font-weight-regular);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-primary);
}

.fb-card-text {
  font-size: var(--fb-font-size-body-s);
  line-height: var(--fb-line-height-body-s);
  color: var(--fb-color-text-secondary);
}

.fb-expertise-card .fb-chip-list {
  margin-top: auto;
}

/* ---------- À propos ---------- */
.fb-about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--fb-color-bg-inverse);
}

.fb-about__photo {
  position: relative;
  min-height: 100%;
}

.fb-about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 25%;
}

.fb-about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fb-spacing-4);
  padding: var(--fb-spacing-9) var(--fb-spacing-10);
}

.fb-about__content .fb-h2 {
  color: var(--fb-color-text-inverse);
}

.fb-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-4);
  font-size: var(--fb-font-size-lead-s);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-lead-s);
  color: var(--fb-color-text-disabled);
}

/* ---------- Bandeau Parcours ---------- */
.fb-banner {
  padding-block: var(--fb-spacing-7);
  background: var(--fb-color-bg-subtle);
}

.fb-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fb-spacing-4);
}

.fb-banner__title {
  font-size: var(--fb-font-size-h2-col);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-h2-col);
  color: var(--fb-color-text-primary);
}

/* ---------- Étude de cas : contenus ---------- */
.fb-objectives {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fb-spacing-3);
  width: 100%;
}

.fb-callout {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-2);
  width: 100%;
  padding: var(--fb-spacing-4);
  border-radius: var(--fb-radius-lg);
  background: var(--fb-color-bg-subtle);
}

.fb-callout__title {
  font-size: var(--fb-font-size-subtitle);
  font-weight: var(--fb-font-weight-medium);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-primary);
}

.fb-callout__text {
  font-size: var(--fb-font-size-body-s);
  line-height: var(--fb-line-height-body-s);
  color: var(--fb-color-text-secondary);
}

.fb-callout--ai {
  background: var(--fb-color-bg-accent-subtle);
}

.fb-callout--ai .fb-callout__title {
  color: var(--fb-color-text-accent);
}

.fb-responsibilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fb-spacing-3);
  width: 100%;
}

.fb-responsibility {
  display: flex;
  align-items: flex-start;
  gap: var(--fb-spacing-2);
  padding: var(--fb-spacing-3);
  border: var(--fb-border-width) solid var(--fb-color-border-default);
  border-radius: var(--fb-radius-md);
}

.fb-responsibility__body {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-1);
}

.fb-responsibility__title {
  font-size: var(--fb-font-size-subtitle-s);
  font-weight: var(--fb-font-weight-medium);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-primary);
}

.fb-responsibility__text {
  font-size: var(--fb-font-size-caption);
  line-height: var(--fb-line-height-caption);
  color: var(--fb-color-text-secondary);
}

/* Étapes */
.fb-steps {
  width: 100%;
  counter-reset: fb-step;
}

.fb-step {
  display: flex;
  align-items: flex-start;
  gap: var(--fb-spacing-6);
  padding-block: var(--fb-spacing-5);
  border-top: var(--fb-border-width) solid var(--fb-color-border-strong);
}

.fb-step__number {
  flex: none;
  width: var(--fb-step-number-width);
  font-size: var(--fb-font-size-step);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-brand);
}

.fb-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-2);
}

.fb-step__title {
  font-size: var(--fb-font-size-card-title);
  font-weight: var(--fb-font-weight-regular);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-primary);
}

.fb-step__text {
  font-size: var(--fb-font-size-body-m);
  line-height: var(--fb-line-height-body-m);
  color: var(--fb-color-text-secondary);
}

/* Acquis / livrables : grille 2 colonnes, séparateur haut */
.fb-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fb-spacing-5) var(--fb-spacing-6);
  width: 100%;
}

.fb-outcome {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-2);
  padding-top: var(--fb-spacing-4);
  border-top: var(--fb-border-width) solid var(--fb-color-border-default);
}

.fb-outcome__title {
  font-size: var(--fb-font-size-subtitle-s);
  font-weight: var(--fb-font-weight-medium);
  line-height: var(--fb-line-height-tight);
  color: var(--fb-color-text-primary);
}

.fb-outcome__text {
  font-size: var(--fb-font-size-body-s);
  line-height: var(--fb-line-height-body-s);
  color: var(--fb-color-text-secondary);
}

.fb-section--inverse .fb-outcome {
  border-top-color: var(--fb-color-border-subtle-inverse);
}

.fb-section--inverse .fb-outcome__title {
  color: var(--fb-color-text-inverse);
}

.fb-section--inverse .fb-outcome__text {
  color: var(--fb-color-text-disabled);
}

/* Chiffres clés */
.fb-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--fb-spacing-4);
  width: 100%;
}

.fb-stat {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-2);
}

.fb-stat__value {
  font-size: var(--fb-font-size-stat);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-stat);
  color: var(--fb-color-text-brand-inverse);
  white-space: nowrap;
}

.fb-stat__unit {
  font-size: var(--fb-font-size-stat-unit);
  font-weight: var(--fb-font-weight-regular);
}

.fb-stat__label {
  font-size: var(--fb-font-size-caption);
  line-height: var(--fb-line-height-caption);
  color: var(--fb-color-text-disabled);
}

.fb-stat--highlight .fb-stat__value {
  color: var(--fb-color-text-accent-inverse);
}

/* Encart « Ce que ce projet dit de moi » */
.fb-quote {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-2);
  width: 100%;
  padding: var(--fb-spacing-5);
  border: var(--fb-border-width) solid var(--fb-color-border-subtle-inverse);
  border-radius: var(--fb-radius-lg);
}

.fb-quote__text {
  font-size: var(--fb-font-size-lead);
  font-weight: var(--fb-font-weight-light);
  line-height: var(--fb-line-height-lead);
  color: var(--fb-color-text-inverse);
}

/* ---------- Footer ---------- */
.fb-footer {
  padding-top: var(--fb-spacing-9);
  padding-bottom: var(--fb-spacing-6);
  background: var(--fb-color-bg-inverse);
  color: var(--fb-color-text-disabled);
}

.fb-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--fb-spacing-7);
}

.fb-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fb-spacing-5);
}

.fb-footer__contact .fb-h2 {
  max-width: var(--fb-measure-lead);
  color: var(--fb-color-text-inverse);
}

.fb-footer__contact .fb-label {
  color: var(--fb-color-text-brand-inverse);
}

.fb-footer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fb-spacing-4);
}

.fb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fb-spacing-3);
  padding-top: var(--fb-spacing-4);
  border-top: var(--fb-border-width) solid var(--fb-color-border-subtle-inverse);
  font-size: var(--fb-font-size-footnote);
}

.fb-footer__legal {
  color: var(--fb-color-text-disabled);
}

.fb-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fb-spacing-2) var(--fb-spacing-3);
}

.fb-footer__links a {
  color: var(--fb-color-text-disabled);
  text-decoration: none;
}

.fb-footer__links a:hover {
  color: var(--fb-color-text-inverse);
  text-decoration: underline;
}

.fb-footer__links li + li::before {
  content: "·";
  margin-right: var(--fb-spacing-3);
  color: var(--fb-color-text-secondary);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .fb-project-grid,
  .fb-expertise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fb-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--fb-spacing-5);
  }

  .fb-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--fb-spacing-6);
  }

  .fb-about__content {
    padding: var(--fb-spacing-7) var(--fb-gutter);
  }

  .fb-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .fb-split,
  .fb-about,
  .fb-objectives,
  .fb-responsibilities,
  .fb-outcomes {
    grid-template-columns: minmax(0, 1fr);
  }

  .fb-split {
    gap: var(--fb-spacing-5);
  }

  .fb-about__photo {
    aspect-ratio: 4 / 3;
  }

  .fb-step {
    gap: var(--fb-spacing-4);
  }

  .fb-step__number {
    width: auto;
  }

  .fb-footer {
    padding-top: var(--fb-spacing-7);
  }

  .fb-footer__inner {
    gap: var(--fb-spacing-6);
  }
}

@media (max-width: 480px) {
  .fb-project-grid,
  .fb-expertise-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fb-stats,
  .fb-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fb-step {
    flex-direction: column;
    gap: var(--fb-spacing-2);
  }

  .fb-expertise-card {
    padding: var(--fb-spacing-4);
  }

  .fb-nav__tagline {
    display: none;
  }

  .fb-hero .fb-actions .fb-btn,
  .fb-footer__actions .fb-btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb-page *,
  .fb-page *::before,
  .fb-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  :root:has(body.fb-page) {
    scroll-behavior: auto;
  }

  .fb-project-card:hover .fb-project-card__media img {
    transform: none;
  }

  button.fb-chip:active {
    transform: none;
  }

  /* Filtres : aucun déplacement, fondu court uniquement */
  ::view-transition-group(*) {
    animation: none !important;
  }

  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-name: fb-fade !important;
    animation-duration: var(--fb-duration-reduced) !important;
    animation-delay: 0s !important;
  }

  ::view-transition-old(*) {
    animation-direction: reverse !important;
  }
}

@keyframes fb-fade {
  from {
    opacity: 0;
  }
}