/* ============================================
   Header. Pas de glassmorphism, fond plein, séparateur fin.
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

.site-header--scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--color-line);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header--scrolled {
    background: var(--color-paper);
  }
}

/* Header clair : posé sur un hero/footer sombre, reste transparent et en blanc même au scroll. */
.site-header--light,
.site-header--light.site-header--scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Variante light-top : blanc tant qu'on est en haut, redevient normal (navy) au scroll. */
.site-header--light-top:not(.site-header--scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Double logo : blanc en haut, navy au scroll */
.site-header__logo-dark {
  display: none;
}

.site-header--light-top.site-header--scrolled .site-header__logo-light {
  display: none;
}

.site-header--light-top.site-header--scrolled .site-header__logo-dark {
  display: block;
}

.site-header--light .nav-toggle span,
.site-header--light-top:not(.site-header--scrolled) .nav-toggle span {
  background: var(--color-paper);
}

@media (min-width: 1024px) {
  .site-header--light .site-nav__list > li > .site-nav__link,
  .site-header--light-top:not(.site-header--scrolled) .site-nav__list > li > .site-nav__link {
    color: var(--color-paper);
  }

  .site-header--light .site-nav__list > li > .site-nav__link[aria-current="page"],
  .site-header--light-top:not(.site-header--scrolled) .site-nav__list > li > .site-nav__link[aria-current="page"] {
    color: var(--color-paper);
  }

  .site-header--light .site-nav__list > li > .site-nav__link:hover,
  .site-header--light-top:not(.site-header--scrolled) .site-nav__list > li > .site-nav__link:hover {
    color: var(--color-accent);
  }

  .site-header--light .site-nav__list > li:has(.site-nav__sub)::after,
  .site-header--light-top:not(.site-header--scrolled) .site-nav__list > li:has(.site-nav__sub)::after {
    border-color: var(--color-paper);
  }

  .site-header--light .site-nav__list > li:has(.site-nav__sub):hover::after,
  .site-header--light-top:not(.site-header--scrolled) .site-nav__list > li:has(.site-nav__sub):hover::after {
    border-color: var(--color-accent);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--space-m);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
}

.site-header__logo img {
  max-height: 50px;
  width: auto;
}

.site-header__logo:hover {
  color: var(--color-ink);
}

/* ============================================
   Nav
   ============================================ */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2xs);
  z-index: 51;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span {
  background: var(--color-paper);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.site-nav {
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--container-pad);
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
  z-index: 49;
}

.site-nav[data-open="true"] {
  transform: translateX(0);
}

.site-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.site-nav__link {
  font-family: var(--font-sans);
  font-size: var(--step-4);
  color: var(--color-paper);
  text-decoration: none;
  display: inline-block;
  letter-spacing: -0.02em;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
}

.site-nav__sub {
  list-style: none;
  padding-left: var(--space-m);
  margin-top: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-nav__sub .site-nav__link {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--color-stone-2);
  font-weight: 400;
  letter-spacing: 0;
}

.site-nav__sub--disabled .site-nav__link {
  color: var(--color-stone-3);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    background: transparent;
    color: var(--color-ink);
    padding: 0;
    transform: none;
    flex-direction: row;
    align-items: center;
  }

  .site-nav__list {
    flex-direction: row;
    gap: var(--space-xl);
  }

  .site-nav__list > li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .site-nav__link {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    color: var(--color-ink);
    font-weight: 500;
    letter-spacing: 0;
    position: relative;
    padding-block: var(--space-2xs);
    transition: color var(--t-fast) var(--ease);
  }

  .site-nav__list > .site-nav__link::after,
  .site-nav__list > li > .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease);
  }

  .site-nav__list > li > .site-nav__link:hover {
    color: var(--color-accent);
  }

  .site-nav__list > li > .site-nav__link[aria-current="page"] {
    color: var(--color-ink);
  }

  .site-nav__list > li > .site-nav__link:hover::after,
  .site-nav__list > li > .site-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* Chevron discret sur les items avec sous-menu */
  .site-nav__list > li:has(.site-nav__sub)::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1px solid var(--color-ink);
    border-bottom: 1px solid var(--color-ink);
    transform: rotate(45deg) translate(-2px, -3px);
    transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
    flex-shrink: 0;
  }

  .site-nav__list > li:has(.site-nav__sub):hover::after,
  .site-nav__list > li:has(.site-nav__sub):focus-within::after {
    transform: rotate(-135deg) translate(1px, 1px);
    border-color: var(--color-accent);
  }

  /* Dropdown panel au survol */
  .site-nav__sub {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: -12px;
    margin-top: var(--space-2xs);
    padding: var(--space-2xs);
    min-width: 200px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    box-shadow: 0 12px 32px rgba(14, 31, 51, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 200ms var(--ease),
      transform 200ms var(--ease),
      visibility 0s linear 200ms;
    z-index: 60;
  }

  .site-nav__list > li:hover > .site-nav__sub,
  .site-nav__list > li:focus-within > .site-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity 220ms var(--ease),
      transform 220ms var(--ease),
      visibility 0s;
  }

  .site-nav__sub .site-nav__link {
    display: block;
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-s);
    font-family: var(--font-sans);
    font-size: var(--step--1);
    color: var(--color-ink);
    font-weight: 400;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }

  .site-nav__sub .site-nav__link::after {
    display: none;
  }

  .site-nav__sub .site-nav__link:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent-deep);
  }

  .site-nav__sub--disabled .site-nav__link {
    color: var(--color-stone-3);
  }

  .site-nav__sub--disabled .site-nav__link:hover {
    background: transparent;
    color: var(--color-stone-3);
  }
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--color-ink);
  color: var(--color-stone-2);
  padding-block: var(--space-2xl);
  margin-top: var(--space-3xl);
}

.site-footer--flush {
  margin-top: 0;
}

.site-footer a {
  color: var(--color-paper);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-accent);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.site-footer__brand h2 {
  color: var(--color-paper);
  font-size: var(--step-3);
  margin-bottom: var(--space-s);
}

.site-footer__brand p {
  color: var(--color-stone-2);
  max-width: 42ch;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__disabled {
  color: var(--color-stone-3);
  cursor: not-allowed;
}

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-accent);
  margin-bottom: var(--space-s);
  font-weight: 400;
}

.site-footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-stone-3);
}

@media (min-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}

.site-footer__legal a {
  color: var(--color-stone-3);
}

.site-footer__legal a:hover {
  color: var(--color-accent);
}

/* ============================================
   Buttons. Coins légèrement arrondis.
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: var(--radius-m);
  letter-spacing: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-paper);
}

.btn--primary:hover {
  background: var(--color-accent-deep);
  color: var(--color-paper);
}

.btn--ink {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn--ink:hover {
  background: var(--color-ink-2);
  color: var(--color-paper);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}

.btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn--text {
  padding: 0;
  background: transparent;
  color: var(--color-ink);
  border-radius: 0;
  border-bottom: 1px solid var(--color-ink);
  padding-block: var(--space-3xs);
}

.btn--text:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ============================================
   Badge / pill. Pour catégories opposées et étiquettes.
   Inspiré directement de la bâche WIP : Usual AE Team / Group Sigma methodo / VS / Added Values / Architect / AE Team.
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  border-radius: var(--radius-pill);
  letter-spacing: 0;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge--ink {
  background: var(--color-ink);
  color: var(--color-paper);
}

.badge--accent {
  background: var(--color-accent);
  color: var(--color-paper);
}

.badge--accent-soft {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.badge--outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.badge--circle {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--radius-circle);
  justify-content: center;
  font-weight: 600;
  font-size: var(--step-0);
}

/* ============================================
   Check list. Inspiré des consultants check verts dans "One Local Partner".
   ============================================ */
.check-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.check-list li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--step-0);
  color: inherit;
}

.check-list {
  counter-reset: check;
}

.check-list li {
  position: relative;
  transition: color var(--t-fast) var(--ease);
}

.check-list li::before {
  content: counter(check, decimal-leading-zero);
  counter-increment: check;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-accent);
  color: var(--color-paper);
  border-radius: var(--radius-circle);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  flex-shrink: 0;
}

/* ============================================
   Numbered list : ajout de l'underline orange sous le numéro.
   ============================================ */
.numbered-list__num {
  position: relative;
  display: inline-block;
}

.numbered-list__num::after {
  content: "";
  position: absolute;
  left: 0;
  right: 30%;
  bottom: -4px;
  height: 2px;
  background: var(--color-accent);
}

/* ============================================
   Section variants additionnels.
   ============================================ */
.section--gradient {
  background: var(--gradient-page);
}

.section--gradient-soft {
  background: var(--gradient-page-soft);
}

/* Lock scroll when menu open : position fixed pour bloquer aussi le scroll tactile iOS. */
body[data-nav-open="true"] {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* ============================================
   Project Timeline Layered (ptl).
   Reprend exactement le rythme du visuel GS :
   4 premières phases dans un encadré navy foncé arrondi (Added Values),
   2 dernières phases à l'extérieur en gris muet.
   ============================================ */
.ptl-section {
  background: var(--gradient-ink);
  color: var(--color-stone-2);
  padding-block: var(--space-3xl);
}

.ptl-section__head {
  margin-bottom: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: end;
}

.ptl-section__title {
  font-size: var(--step-5);
  letter-spacing: -0.025em;
  color: var(--color-paper);
  margin: 0;
}

.ptl-section__lede {
  color: var(--color-paper);
  max-width: 60ch;
  margin: 0;
}

@media (min-width: 1024px) {
  .ptl-section__head {
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }
}

.ptl {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

.ptl__early {
  position: relative;
  background: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-l) var(--space-2xl);
}

.ptl__added-value {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.ptl__late {
  padding: var(--space-xl) var(--space-l);
}

.ptl__phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.ptl__phase {
  display: grid;
  grid-template-rows: auto 2.6em 80px auto;
  row-gap: var(--space-s);
  position: relative;
  align-items: start;
}

.ptl__phase[data-jump] {
  cursor: pointer;
}

.ptl__phase[data-jump] .ptl__icon {
  transition: transform var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.ptl__phase[data-jump]:hover .ptl__icon {
  transform: translateY(-3px);
  color: var(--color-accent);
}

.ptl__phase > .ptl__num { grid-row: 1; }
.ptl__phase > .ptl__title { grid-row: 2; }
.ptl__phase > .ptl__icon { grid-row: 3; }
.ptl__phase > .ptl__services { grid-row: 4; }

.ptl__desc {
  font-size: var(--step--1);
  color: var(--color-stone-2);
  line-height: 1.45;
  margin: 0;
  max-width: 34ch;
}


.ptl__num {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: -0.02em;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-m);
  width: max-content;
}

.ptl__num::after {
  content: "";
  position: absolute;
  left: 0;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
}



.ptl__title {
  font-size: var(--step--1);
  color: var(--color-paper);
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  align-self: start;
}


.ptl__icon {
  display: inline-flex;
  align-items: end;
  justify-content: start;
  width: 80px;
  height: 80px;
  color: var(--color-paper);
}

.ptl__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  display: block;
}


.ptl__services {
  list-style: none;
  padding: var(--space-s) 0 0 0;
  margin: var(--space-m) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  border-top: 1px solid var(--color-accent);
  align-self: start;
  width: 100%;
}

.ptl__services li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  display: flex;
  gap: var(--space-2xs);
}

.ptl__services li::before {
  content: counter(srv, decimal-leading-zero) ".";
  counter-increment: srv;
  flex-shrink: 0;
  color: var(--color-accent);
}

.ptl__services {
  counter-reset: srv;
}

.ptl__late .ptl__services {
  border-top-color: var(--color-stone-3);
}

.ptl__late .ptl__services li,
.ptl__late .ptl__services li::before {
  color: var(--color-stone-2);
}

/* Flèche entre phases */
.ptl__phase:not(:last-child)::after {
  content: "";
  display: none;
}

@media (min-width: 720px) and (max-width: 1023px) {
  .ptl__phases {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l);
  }

  .ptl__early .ptl__services--shared {
    grid-column: 1 / span 2;
  }
}

@media (max-width: 719px) {
  .ptl__early .ptl__phases {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-m);
    row-gap: var(--space-l);
  }

  .ptl__early .ptl__services--shared {
    grid-column: 1 / span 2;
  }

  .ptl__early .ptl__phase:nth-of-type(3),
  .ptl__early .ptl__phase:nth-of-type(4) {
    grid-column: 1 / span 2;
  }
}

@media (min-width: 1024px) {
  .ptl {
    grid-template-columns: 4fr 2fr;
    gap: var(--space-m);
    align-items: stretch;
  }

  .ptl__early .ptl__phases,
  .ptl__late .ptl__phases {
    height: 100%;
    align-items: stretch;
    align-content: start;
  }

  /* Subgrid : phase 01 spanne 2 colonnes, son bloc services aussi.
     Num / title / icon de chaque phase restent dans 1 colonne. */
  .ptl__early .ptl__phases {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 2.6em 80px auto;
    column-gap: var(--space-m);
    row-gap: var(--space-s);
  }

  .ptl__early .ptl__phase {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    grid-row: 1 / -1;
    row-gap: 0;
  }

  .ptl__early .ptl__phase:nth-of-type(1) { grid-column: 1; }
  .ptl__early .ptl__phase:nth-of-type(2) { grid-column: 2; }
  .ptl__early .ptl__phase:nth-of-type(3) { grid-column: 3; }
  .ptl__early .ptl__phase:nth-of-type(4) { grid-column: 4; }

  .ptl__early .ptl__phase > .ptl__num,
  .ptl__early .ptl__phase > .ptl__title,
  .ptl__early .ptl__phase > .ptl__icon {
    grid-column: 1;
  }
  .ptl__early .ptl__phase > .ptl__num    { grid-row: 1; }
  .ptl__early .ptl__phase > .ptl__title  { grid-row: 2; }
  .ptl__early .ptl__phase > .ptl__icon   { grid-row: 3; }
  .ptl__early .ptl__phase > .ptl__services {
    grid-row: 4;
    grid-column: 1;
  }

  /* Services partagés de phases 01 + 02, span 2 cols, dernière row */
  .ptl__early .ptl__services--shared {
    grid-column: 1 / span 2;
    grid-row: 4;
    margin-top: calc(var(--space-m) - 6px);
  }

  .ptl__late {
    padding: var(--space-xl) 0 var(--space-xl) var(--space-l);
  }

  .ptl__late .ptl__phases {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 2.6em 80px auto;
    column-gap: var(--space-m);
    row-gap: var(--space-s);
  }

  .ptl__late .ptl__phase {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    grid-row: 1 / -1;
    grid-column: span 1;
    row-gap: 0;
  }

  .ptl__late .ptl__phase > .ptl__num    { grid-row: 1; grid-column: 1; }
  .ptl__late .ptl__phase > .ptl__title  { grid-row: 2; grid-column: 1; }
  .ptl__late .ptl__phase > .ptl__icon   { grid-row: 3; grid-column: 1; }
  .ptl__late .ptl__phase > .ptl__services { grid-row: 4; grid-column: 1; }

  /* Flèches longues entre les icônes (depuis le bord droit de l'icône
     jusqu'à juste avant l'icône suivante, ligne fine + chevron). */
  .ptl__icon {
    position: relative;
  }

  .ptl__early .ptl__phase:not(:last-of-type) .ptl__icon::after,
  .ptl__late .ptl__phase:not(:last-of-type) .ptl__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    width: 86px;
    height: 1.5px;
    background: var(--color-stone-3);
    transform: translateY(-50%);
  }

  .ptl__early .ptl__phase:not(:last-of-type) .ptl__icon::before,
  .ptl__late .ptl__phase:not(:last-of-type) .ptl__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 14px + 84px);
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--color-stone-3);
    border-right: 1.5px solid var(--color-stone-3);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
  }

  /* Flèche entre phase 04 (last of early) et phase 05 (first of late) :
     plus longue, en orange. */
  .ptl__early .ptl__phase:last-of-type .ptl__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    width: calc(var(--space-l) + var(--space-m) + 60px);
    height: 1.5px;
    background: var(--color-accent);
    transform: translateY(-50%);
    z-index: 2;
  }

  .ptl__early .ptl__phase:last-of-type .ptl__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 14px + var(--space-l) + var(--space-m) + 56px);
    width: 9px;
    height: 9px;
    border-top: 1.5px solid var(--color-accent);
    border-right: 1.5px solid var(--color-accent);
    transform: translateY(-50%) rotate(45deg);
    z-index: 3;
  }
}

/* ============================================
   Tabs (ARIA tabs pattern)
   ============================================ */
.tabs {
  display: block;
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-l);
  padding: 0;
  list-style: none;
}

.tabs__tab {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--color-stone-3);
  padding: var(--space-s) 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-bottom: -1px;
  transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}

.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tabs__tab:hover {
  color: var(--color-ink);
}

.tabs__tab[aria-selected="true"] {
  color: var(--color-ink);
  font-weight: 500;
}

.tabs__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.tabs__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tabs__panel {
  display: block;
  animation: tabs-panel-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tabs__panel > .lead {
  margin-bottom: var(--space-l);
}

.tabs__panel[hidden] {
  display: none;
}

@keyframes tabs-panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabs__panel {
    animation: none;
  }
}

/* Mobile : tabs en scroll horizontal avec bord-perdu, plutôt que wrap sur plusieurs lignes */
@media (max-width: 720px) {
  .tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--container-pad);
    /* Permet au dernier tab de déborder visuellement à droite */
    padding-right: var(--container-pad);
    margin-right: calc(-1 * var(--container-pad));
    -webkit-overflow-scrolling: touch;
  }

  .tabs__list::-webkit-scrollbar {
    display: none;
  }

  .tabs__tab {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ============================================
   Phase layout : nav verticale sticky + contenu en cascade.
   Utilisé sur our-expertise (un seul niveau de tabs au lieu de deux).
   ============================================ */
.phase-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* min-width:0 : empêche le contenu (tabs en nowrap) d'étirer la colonne au-delà du viewport. */
.phase-content {
  min-width: 0;
}

/* Le stepper sticky est un confort desktop : masqué sous 1024px. */
@media (max-width: 1023px) {
  .phase-nav {
    display: none;
  }
}

.phase-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  position: relative;
}

/* Ligne verticale qui relie les pastilles (connecteur de stepper) */
.phase-nav__list::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 29px;
  bottom: 29px;
  width: 1px;
  background: var(--color-line);
  z-index: 0;
}

.phase-nav__list li {
  position: relative;
  z-index: 1;
}

.phase-nav__list a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-stone-3);
  width: max-content;
  transition: color var(--t-fast) var(--ease);
}

/* Pastille ronde avec icône + numéro */
.phase-nav__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-circle);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  color: var(--color-stone-3);
  flex-shrink: 0;
  z-index: 2;
  transition: background 260ms var(--ease), border-color 260ms var(--ease), color 260ms var(--ease);
}

.phase-nav__icon {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
}

.phase-nav__num {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-stone-3);
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  transition: background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
}

/* Label : tooltip discret qui se déploie après la bulle (animation séquentielle) */
.phase-nav__label {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  padding: 0;
  height: 32px;
  white-space: nowrap;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(14, 31, 51, 0.08);
  /* Sortie de hover : rapide, pas de delay */
  transition:
    max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 200ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease-out,
    margin-left 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.phase-nav__list li:hover .phase-nav__label {
  max-width: 320px;
  opacity: 1;
  margin-left: var(--space-s);
  padding: 0 var(--space-s);
  /* Entrée au hover : delay 260ms pour laisser la bulle s'animer d'abord */
  transition:
    max-width 420ms cubic-bezier(0.22, 1, 0.36, 1) 260ms,
    padding 300ms cubic-bezier(0.22, 1, 0.36, 1) 260ms,
    opacity 280ms ease-out 320ms,
    margin-left 300ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
}

.phase-nav__list li:hover .phase-nav__pill {
  border-color: var(--color-stone-3);
  color: var(--color-ink);
}

.phase-nav__list li.is-active .phase-nav__pill,
.phase-nav__list li:has(a[aria-current="true"]) .phase-nav__pill {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.phase-nav__list li.is-active .phase-nav__num,
.phase-nav__list li:has(a[aria-current="true"]) .phase-nav__num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-paper);
}

@media (prefers-reduced-motion: reduce) {
  .phase-nav__label,
  .phase-nav__pill {
    transition: none;
  }
}

.phase-section {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-line);
  scroll-margin-top: var(--space-2xl);
}

.phase-section:first-child {
  padding-top: 0;
}

.phase-section:last-child {
  border-bottom: 0;
}

.phase-section__heading {
  font-size: var(--step-2);
  margin-bottom: var(--space-m);
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-weight: 500;
}

.phase-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

.phase-section__num {
  display: inline-block;
  width: max-content;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: -0.02em;
  line-height: 1;
  position: relative;
  padding-bottom: var(--space-2xs);
}

.phase-section__num::after {
  content: "";
  position: absolute;
  left: 0;
  right: 40%;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
}

.phase-section__title {
  font-size: var(--step-3);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  line-height: 1.1;
}

@media (min-width: 1024px) {
  .phase-layout {
    grid-template-columns: 80px 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  .phase-nav {
    position: sticky;
    top: calc(var(--header-h) + 30px);
    align-self: start;
    width: 80px;
    z-index: 10;
  }

  .phase-nav__list a {
    /* Au survol, le label se déploie au-delà de la nav (over le content) */
    position: relative;
  }

  .phase-section {
    scroll-margin-top: calc(var(--header-h) + var(--space-l));
  }
}

/* Sub-tabs (niveau 2, dans un tab panel) : visuel plus discret */
.tabs--sub {
  margin-top: var(--space-l);
}

.tabs--sub .tabs__list {
  border-bottom: 0;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
}

.tabs--sub .tabs__tab {
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--step--1);
  border-radius: var(--radius-pill);
  border-bottom: 0;
  background: var(--color-paper);
  color: var(--color-stone-3);
  border: 1px solid var(--color-line);
  margin-bottom: 0;
  font-family: var(--font-mono);
  letter-spacing: 0;
  font-weight: 500;
  text-transform: uppercase;
}

.tabs--sub .tabs__tab:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.tabs--sub .tabs__tab[aria-selected="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

/* Service detail (image + texte + bullets) dans un sub-tab panel */
.service-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: start;
}

.service-detail__media {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-stone-1);
}

.service-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-detail__body h3 {
  font-size: var(--step-2);
  color: var(--color-ink);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-s);
  font-weight: 500;
}

.service-detail__body .lead {
  margin-bottom: var(--space-m);
}

.service-detail__body p {
  color: var(--color-stone-4);
  margin-bottom: var(--space-s);
  max-width: 56ch;
  line-height: 1.6;
}

.service-detail__body p:last-child {
  margin-bottom: 0;
}

.service-detail__body ul {
  list-style: none;
  padding: 0;
  margin: var(--space-s) 0 0 0;
}

.service-detail__body li {
  position: relative;
  padding-left: var(--space-m);
  padding-block: var(--space-3xs);
  color: var(--color-stone-4);
  font-size: var(--step-0);
  line-height: 1.5;
}

.service-detail__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

.service-detail__body strong {
  color: var(--color-ink);
  font-weight: 600;
}

.service-detail__body h4 {
  font-size: var(--step-0);
  color: var(--color-ink);
  margin-top: var(--space-m);
  margin-bottom: var(--space-2xs);
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
}

@media (min-width: 1024px) {
  .service-detail {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-2xl);
  }
}

/* ============================================
   Timeline horizontale desktop / verticale mobile.
   Reprend le rythme de la bâche : icône + numéro souligné + titre.
   ============================================ */
.timeline-h2v {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

.timeline-h2v__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: start;
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-line);
}

.timeline-h2v__step:last-child {
  border-bottom: 0;
}

.timeline-h2v__step[data-jump] {
  cursor: pointer;
}

.timeline-h2v__step[data-jump] .timeline-h2v__icon,
.timeline-h2v__step[data-jump] .timeline-h2v__title {
  transition: transform var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.timeline-h2v__step[data-jump]:hover .timeline-h2v__icon {
  transform: translateX(4px);
  color: var(--color-accent);
}

.timeline-h2v__step[data-jump]:hover .timeline-h2v__title {
  color: var(--color-accent);
}

.timeline-h2v__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  color: var(--color-ink-3);
  flex-shrink: 0;
}

.timeline-h2v__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.timeline-h2v__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.timeline-h2v__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-stone-3);
  position: relative;
  display: inline-block;
  width: max-content;
  padding-bottom: 4px;
}

.timeline-h2v__num::after {
  content: "";
  position: absolute;
  left: 0;
  right: 40%;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
}

.timeline-h2v__title {
  font-size: var(--step-1);
  color: var(--color-ink);
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0;
}

.timeline-h2v__desc {
  font-size: var(--step--1);
  color: var(--color-stone-4);
  line-height: 1.5;
  max-width: 36ch;
  margin: 0;
}

/* Desktop : horizontal, subgrid pour aligner num/title/desc entre les 6 phases */
@media (min-width: 1024px) {
  .timeline-h2v {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 0;
    border-top: 1px solid var(--color-line);
    padding-top: var(--space-xl);
    align-items: start;
  }

  .timeline-h2v__step {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    border-bottom: 0;
    padding-block: 0;
    padding-inline: var(--space-s);
    position: relative;
    row-gap: var(--space-2xs);
  }

  .timeline-h2v__icon {
    grid-row: 1;
    margin-bottom: var(--space-m);
  }

  .timeline-h2v__body {
    display: contents;
  }

  .timeline-h2v__num {
    grid-row: 2;
    align-self: start;
  }

  .timeline-h2v__title {
    grid-row: 3;
    align-self: start;
  }

  .timeline-h2v__desc {
    grid-row: 4;
    align-self: start;
  }
}

/* ============================================
   Page hero : variante réutilisable pour les pages internes.
   Image bord-perdu à droite sur desktop, en dessous sur mobile.
   ============================================ */
.page-hero {
  position: relative;
  padding-block: 0 var(--space-2xl);
  background: var(--gradient-page-soft);
  border-bottom: 1px solid var(--color-line);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Sous 1024px le hero passe en 1 colonne : hauteur naturelle pour voir l'image plus tôt. */
@media (max-width: 1023px) {
  .page-hero,
  .page-hero--flush {
    min-height: auto;
  }
}

.page-hero__text {
  padding-top: calc(var(--header-h) + var(--space-l));
}

.page-hero--flush {
  border-bottom: none;
  min-height: 74vh;
  min-height: 74dvh;
}

/* Padding-bottom suffisant pour que le panneau timeline (-112px) ne chevauche pas le texte. */
.page-hero--flush .page-hero__text {
  padding-bottom: var(--space-4xl);
}

/* Panneau qui remonte et chevauche le bas du hero (effet teasing). */
.section--pull-up {
  margin-top: calc(-1 * var(--space-3xl));
  position: relative;
  z-index: 2;
  background: var(--color-paper);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -16px 44px rgba(14, 31, 51, 0.1);
  padding-top: 0;
}

.page-hero__roles {
  list-style: none;
  padding: 0;
  margin: var(--space-m) 0 var(--space-l);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
}

/* Onglets de navigation interne dans un hero : scroll vers une section. */
.hero-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.hero-jump__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}

.hero-jump__item::after {
  content: "\2193";
  font-size: 1em;
  transition: transform var(--t-med) var(--ease);
}

.hero-jump__item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.hero-jump__item:hover::after {
  transform: translateY(2px);
}

/* Décalage d'ancre pour ne pas passer sous le header fixe. */
section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-l));
}

.page-hero__roles li {
  font-family: var(--font-sans);
  font-size: var(--step-1);
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--color-line);
}

.page-hero > .page-hero__grid {
  flex: 1;
}

.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: stretch;
  padding-inline: var(--container-pad);
}

.page-hero__text {
  align-self: center;
  max-width: 60ch;
}

.page-hero__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-stone-3);
  margin-bottom: var(--space-l);
  display: inline-block;
}

.page-hero__label span {
  color: var(--color-accent);
  margin-right: var(--space-2xs);
}

.page-hero__title {
  font-size: var(--step-6);
  margin-bottom: var(--space-l);
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 16ch;
  font-weight: 500;
}

.page-hero__lede {
  font-size: var(--step-1);
  color: var(--color-stone-4);
  margin-bottom: var(--space-l);
  max-width: 56ch;
  line-height: 1.5;
}

.page-hero__media {
  min-height: 320px;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.page-hero__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .page-hero {
    padding-right: 0;
    padding-block: 0;
  }

  .page-hero__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-3xl);
    padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
    padding-right: 0;
    align-items: stretch;
    min-height: 560px;
  }

  .page-hero__text {
    padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
  }

  .page-hero__media {
    min-height: 560px;
    height: auto;
    align-self: stretch;
    /* Décale l'image bord-perdu sous le header fixe (desktop uniquement). */
    padding-top: var(--header-h);
  }
}

/* Variante miroir : image à gauche bord-perdu, texte à droite. */
/* Variante media-full : image à droite, pleine hauteur du viewport, démarrant sous le menu. */
.page-hero--media-full {
  padding-bottom: var(--space-l);
}

.page-hero--media-full .page-hero__text {
  padding-block: calc(var(--header-h) + var(--space-l)) var(--space-l);
}

.page-hero--media-full .page-hero__facts {
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .page-hero--media-full .page-hero__grid {
    grid-template-columns: 1fr;
  }

  .page-hero--media-full .page-hero__text {
    max-width: 46ch;
  }

  /* Image positionnée en absolu : colonne droite, de sous le menu au bas du hero. */
  .page-hero--media-full .page-hero__media {
    position: absolute;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: 46%;
    height: auto;
    min-height: 0;
    padding-top: 0;
    z-index: 0;
  }
}

/* Bloc key-facts intégré en bas du hero : pleine largeur, contenu aligné au container. */
.page-hero__facts {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  margin-top: var(--space-l);
}

.key-facts--hero {
  background: var(--color-paper);
  padding: var(--space-2xs) var(--space-s);
  box-shadow: 0 12px 40px rgba(10, 28, 48, 0.28);
}

.key-facts--hero .key-fact {
  padding-block: var(--space-s);
  padding-inline: var(--space-m);
  gap: var(--space-2xs);
}

.key-facts--hero .key-fact__number {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  border-bottom-width: 2px;
  padding-bottom: 2px;
}

.key-facts--hero .key-fact__caption {
  font-size: var(--step--1);
  line-height: 1.4;
}

@media (min-width: 720px) {
  .key-facts--hero .key-fact {
    padding-inline: var(--space-l);
  }
}

.page-hero--reverse {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .page-hero--reverse {
    padding-left: 0;
    padding-right: 0;
  }

  .page-hero--reverse .page-hero__grid {
    grid-template-columns: 1fr 1.05fr;
    padding-left: 0;
    padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  }

  .page-hero--reverse .page-hero__media {
    order: -1;
  }
}

/* Variante éditoriale : pleine largeur, sans image, typo dominante. */
.page-hero--editorial {
  padding-block: var(--space-4xl) var(--space-3xl);
}

.page-hero--editorial .page-hero__grid {
  grid-template-columns: 1fr;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

.page-hero--editorial .page-hero__text {
  max-width: none;
}

.page-hero--editorial .page-hero__title {
  max-width: 14ch;
  letter-spacing: -0.035em;
}

.page-hero--editorial .page-hero__lede {
  max-width: 50ch;
}

@media (min-width: 1024px) {
  .page-hero--editorial {
    padding-right: var(--container-pad);
  }

  .page-hero--editorial .page-hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-3xl);
    padding-left: var(--container-pad);
    padding-right: 0;
  }
}

/* Variante asymétrique : image dominante à droite, texte concis à gauche. */
.page-hero--asym {
  padding-block: var(--space-3xl);
}

@media (min-width: 1024px) {
  .page-hero--asym .page-hero__grid {
    grid-template-columns: 0.8fr 1.5fr;
    gap: var(--space-3xl);
  }

  .page-hero--asym .page-hero__media {
    min-height: 620px;
  }
}

/* Variante compacte : pas d'image, padding réduit, info-dense. */
.page-hero--compact {
  padding-block: calc(var(--header-h) + var(--space-l)) var(--space-xl);
  border-bottom: 1px solid var(--color-line);
  min-height: auto;
}

.page-hero--compact .page-hero__text {
  padding-top: 0;
}

.page-hero--compact .page-hero__grid {
  min-height: auto;
  flex: 0 1 auto;
}

.page-hero--compact .page-hero__grid {
  grid-template-columns: 1fr;
  align-items: end;
  gap: var(--space-l);
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

.page-hero--compact .page-hero__title {
  margin-bottom: var(--space-m);
}

.page-hero--compact .page-hero__lede {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .page-hero--compact {
    padding-right: var(--container-pad);
  }

  .page-hero--compact .page-hero__grid {
    grid-template-columns: 1.2fr 1fr;
    padding-left: var(--container-pad);
    padding-right: 0;
  }
}

/* ============================================
   Section head : eyebrow + h2 + lead.
   ============================================ */
.section-head {
  margin-bottom: var(--space-2xl);
  max-width: 60ch;
}

.section-head h2 {
  font-size: var(--step-5);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-m);
}

.section--ink .section-head h2 {
  color: var(--color-paper);
}

/* ============================================
   Numbered list pattern (réutilisable : timeline, phases, expertises).
   Le numéro reçoit un soulignement orange court, inspiré de la bâche WIP.
   ============================================ */
.numbered-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.numbered-list--ink {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.numbered-list > li {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: 4ch 1fr;
  column-gap: var(--space-l);
  align-items: start;
}

.numbered-list--ink > li {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.numbered-list__num {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--color-stone-3);
  line-height: 1;
  font-weight: 400;
  padding-top: var(--space-3xs);
}

.numbered-list--ink .numbered-list__num {
  color: var(--color-accent);
}

.numbered-list__title {
  font-size: var(--step-2);
  margin-bottom: var(--space-2xs);
  color: var(--color-ink);
  letter-spacing: -0.015em;
}

.numbered-list--ink .numbered-list__title {
  color: var(--color-paper);
}

.numbered-list__desc {
  color: var(--color-stone-4);
  font-size: var(--step-0);
  line-height: 1.55;
  max-width: 60ch;
}

.numbered-list--ink .numbered-list__desc {
  color: var(--color-stone-2);
}

.numbered-list__sub {
  margin-top: var(--space-m);
  padding-left: 1.2em;
  color: var(--color-stone-4);
  font-size: var(--step-0);
  line-height: 1.6;
}

.numbered-list--ink .numbered-list__sub {
  color: var(--color-stone-2);
}

.numbered-list__sub li {
  margin-bottom: var(--space-3xs);
}

@media (min-width: 1024px) {
  .numbered-list > li {
    grid-template-columns: 8ch 1fr 1fr;
    column-gap: var(--space-2xl);
  }
}

/* ============================================
   Split block : texte + média côte à côte.
   ============================================ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.split__text p {
  margin-bottom: var(--space-m);
  max-width: 56ch;
}

.split__text p:last-child {
  margin-bottom: 0;
}

.split__media {
  min-height: 320px;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }

  .split--reverse .split__text {
    order: 2;
  }

  .split__media {
    min-height: 480px;
  }
}

/* ============================================
   Placeholder image. À remplacer par les vraies photos.
   Utilisation :
     <figure class="placeholder" data-label="Image / Caption" data-size="1200×1500" style="aspect-ratio: 4/5;"></figure>
   ============================================ */
.placeholder {
  background: var(--color-stone-1);
  border: 1px solid var(--color-line);
  position: relative;
  display: block;
  overflow: hidden;
  background-image: linear-gradient(135deg, transparent 49.5%, var(--color-line) 49.5%, var(--color-line) 50.5%, transparent 50.5%);
  background-size: 32px 32px;
}

.placeholder--ink {
  background-color: var(--color-ink-2);
  border-color: rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(135deg, transparent 49.5%, rgba(255, 255, 255, 0.06) 49.5%, rgba(255, 255, 255, 0.06) 50.5%, transparent 50.5%);
}

.placeholder::before {
  content: attr(data-label);
  position: absolute;
  top: var(--space-m);
  left: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-stone-3);
  background: var(--color-paper);
  padding: var(--space-3xs) var(--space-2xs);
  z-index: 2;
}

.placeholder--ink::before {
  background: var(--color-ink);
  color: var(--color-stone-2);
}

.placeholder::after {
  content: attr(data-size);
  position: absolute;
  bottom: var(--space-m);
  right: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-stone-3);
  background: var(--color-paper);
  padding: var(--space-3xs) var(--space-2xs);
  z-index: 2;
}

.placeholder--ink::after {
  background: var(--color-ink);
  color: var(--color-stone-2);
}

/* ============================================
   Signature : bloc de clôture en fin de chaque page.
   ============================================ */
.signature {
  text-align: left;
  background: var(--color-paper);
  padding-block: var(--space-4xl);
  border-top: 1px solid var(--color-line);
}

.signature__title {
  font-size: var(--step-6);
  margin-bottom: var(--space-l);
  max-width: 20ch;
  letter-spacing: -0.03em;
  line-height: 1;
  font-weight: 500;
}

.signature__sub {
  color: var(--color-stone-3);
  margin-bottom: var(--space-xl);
  font-size: var(--step-1);
  max-width: none;
}

.signature__actions {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}

/* ============================================
   Value section : comparaison Usual AE Team vs Group Sigma.
   Bloc partagé entre home et who-we-are.
   ============================================ */
.value-section {
  background: var(--gradient-page-soft);
  color: var(--color-stone-4);
}

.value-section h2 {
  color: var(--color-ink);
  font-size: var(--step-5);
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin-bottom: var(--space-xl);
}

.value-section .lead {
  max-width: 56ch;
}

.value-section .label {
  color: var(--color-accent);
}

.comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  position: relative;
  margin-top: var(--space-xl);
}

.comparison__col {
  padding: var(--space-xl);
  border-radius: var(--radius-l);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
}

.comparison__col--sigma {
  background: var(--gradient-ink);
  color: var(--color-stone-2);
  border-color: var(--color-ink);
}

.comparison__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
  flex-wrap: wrap;
}

.comparison__title {
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2xs);
  color: var(--color-ink);
}

.comparison__col--sigma .comparison__title {
  color: var(--color-paper);
}

.comparison__intro {
  color: var(--color-stone-4);
  margin-bottom: var(--space-l);
  max-width: 36ch;
}

.comparison__col--sigma .comparison__intro {
  color: var(--color-stone-2);
}

.comparison__partners {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
  counter-reset: partner;
}

.comparison__partners li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--color-stone-4);
}

.comparison__partners li::before {
  content: counter(partner);
  counter-increment: partner;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--color-ink);
  color: var(--color-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  flex-shrink: 0;
}

.comparison__caption {
  font-style: italic;
  color: var(--color-accent);
  font-size: var(--step--1);
}

.comparison__col--sigma .check-list li {
  color: var(--color-paper);
}

.comparison__cube-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: var(--space-l) auto;
  aspect-ratio: 837.5 / 966.6;
}

.comparison__cube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cube-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.cube-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--color-accent);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transition: padding 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms var(--ease);
  box-shadow: 0 2px 6px rgba(14, 31, 51, 0.4);
}

.cube-badge__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  font-variant-numeric: tabular-nums;
}

.cube-badge__label {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0;
  transition:
    max-width 580ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 360ms ease-out 200ms,
    margin-left 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cube-badge[data-active] {
  padding: 0 14px;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(14, 31, 51, 0.5);
}

.cube-badge[data-active] .cube-badge__label {
  max-width: 220px;
  opacity: 1;
  margin-left: 0.6em;
}

@media (prefers-reduced-motion: reduce) {
  .cube-badge,
  .cube-badge__label {
    transition: none;
  }
}

@media (max-width: 720px) {
  .cube-badge {
    font-size: 0.7rem;
    height: 24px;
    padding: 0 7px;
  }
}

.cube-piece {
  fill: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  transition: opacity var(--t-med) var(--ease);
}

.cube-envelope,
.cube-shell-inner {
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}

.cube-interactive[data-active] .cube-piece:not([data-piece-active]) {
  opacity: 0.18;
}

.cube-interactive[data-active] .cube-envelope {
  opacity: 0.18;
}

.cube-interactive[data-active] .cube-shell-inner {
  opacity: 0.4;
}

.cube-piece[data-piece-active] {
  opacity: 1;
}

.cube-badges:has(.cube-badge[data-active]) .cube-badge:not([data-active]) {
  opacity: 0.35;
}

.comparison__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-s);
}

@media (min-width: 1024px) {
  .comparison {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-m);
    align-items: stretch;
  }

  .comparison__vs {
    padding: 0;
  }
}