/* components.css : boutons, eyebrows, badges, cartes, tableau, KPI, header, menu mobile, footer.
   Spécifications : design.md §7. Valeurs : tokens.css. */

/* Dimensions de composant sans token dans design.md §11 */
:root {
  --button-height: 48px;      /* §7.1 */
  --target-min: 44px;         /* §13 : cibles tactiles */
  --icon-size: 20px;          /* §8 */
  --dot-size: 8px;            /* §6 : point de repère */
  --dot-size-sm: 6px;         /* §7.5, §7.6 : point de badge, lien actif */
  --badge-height: 28px;       /* §7.5 */
  --row-height: 56px;         /* §7.3 */
  --progress-height: 4px;     /* §7.4 */
  --accent-rule: 24px;        /* §2.3 / §7.4 : trait Ambre 24 px */
  --card-lift: -2px;          /* §7.2 : translation au survol */
  /* Logo du header au plus grand que permet le header de 72 px (design.md §5) :
     112 px de large, 60 px de haut, 6 px de marge. À 96 px, « CONSULTING »
     ne faisait que 4 px de haut et devenait flou sur un écran standard. */
  --logo-header: 112px;       /* largeur */
  --logo-footer: 144px;       /* largeur */
  --captcha-height: 65px;     /* hauteur fixe du widget Turnstile */
}

/* ============ Icônes ============ */

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============ Boutons (§7.1) ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--space-5);
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-button);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
/* Flèche fixe au survol : seul le fond change (CLAUDE.md §1, flèches animées à éviter) */

/* État appuyé (§7.1) : descente de 1 px, sans transition */
.btn:active,
.link-arrow:active { transform: translateY(1px); }

.btn--primary { background: var(--color-ambre); color: var(--color-encre); }
.btn--primary:hover { background: var(--color-ambre-hover); }

.btn--secondary {
  background: transparent;
  color: var(--color-encre);
  border-color: var(--color-encre);
}
.btn--secondary:hover { background: var(--color-encre); color: var(--color-ivoire); }

.btn--on-dark { background: var(--color-miel); color: var(--color-encre); }
.btn--on-dark:hover { background: var(--color-ambre); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
@media (min-width: 1024px) {
  .btn-group { gap: var(--space-4); }
}

/* Lien fléché : texte Encre, flèche Ambre.
   inline-block plutôt que flex : si le libellé passe sur deux lignes,
   la flèche suit le dernier mot au lieu de partir au bord droit. */
.link-arrow {
  display: inline-block;
  padding-block: calc((var(--target-min) - var(--fs-ui) * var(--lh-h4)) / 2);
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-button);
  color: var(--color-text);
  text-decoration: none;
}
/* Le dernier mot et la flèche restent ensemble */
.link-arrow__end { white-space: nowrap; }
.link-arrow .icon {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: -0.3em;
  color: var(--color-ambre);
}
.link-arrow span {
  text-decoration: underline transparent;
  text-decoration-thickness: var(--stroke-accent);
  text-underline-offset: var(--underline-offset);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover span { text-decoration-color: var(--color-ambre); }

/* ============ Eyebrow (§3.2) : casse de phrase partout (v1.7), sans point ni trait devant (v1.5) ============ */

.eyebrow {
  display: block;
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: var(--lh-small);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text);
}
.eyebrow + :is(h1, h2, h3, .display) { margin-top: var(--gap-eyebrow-title); }

/* ============ Badge de statut (§7.5) ============ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--badge-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  color: var(--color-encre);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: var(--dot-size-sm);
  height: var(--dot-size-sm);
  border-radius: 50%;
  background: var(--status-done);
}
.badge--current::before { background: var(--status-current); }
.badge--upcoming::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--stroke) var(--status-upcoming); /* taste-skill-ignore : design.md §2.3, §4.4, §7.1 */
}

/* ============ Carte de pilotage (§7.2) ============ */

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--stroke-hairline) solid var(--color-line);
  border-radius: var(--radius-md);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.card__head,
.card__body,
.card__foot { padding: var(--space-5); }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.card__body,
.card__foot { border-top: var(--stroke-hairline) solid var(--color-line); }
.card__title { margin: 0; }
.card__title + * { margin-top: var(--space-2); }
.card__meta {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
/* Barre Ambre de 3 px à gauche (design.md §2.3) */
.card--highlight { box-shadow: inset var(--underline-accent) 0 0 var(--color-ambre); } /* taste-skill-ignore */
@media (min-width: 1024px) {
  .card__head, .card__body, .card__foot { padding-inline: var(--space-6); }
}
a.card, .card--link { color: inherit; text-decoration: none; }
a.card:hover, .card--link:hover {
  border-color: var(--color-line-strong);
  transform: translateY(var(--card-lift));
}

/* Barre de progression (§7.4) */
.progress {
  height: var(--progress-height);
  background: var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.progress__bar {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--color-ambre);
  transition: width var(--dur-draw) var(--ease-draw);
}

/* ============ Tableau de suivi (§7.3) ============ */

.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
}
.table thead th {
  height: var(--row-height);
  padding: 0 var(--space-4);
  background: var(--color-bg-alt);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted);
}
.table td,
.table tbody th {
  height: var(--row-height); /* hauteur minimale : la ligne grandit avec le texte (§7.3) */
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--color-bg-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============ Indicateur KPI (§7.4) ============ */

.kpi__value {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-title);
  font-size: var(--fs-kpi);
  font-weight: 800;
  line-height: var(--lh-kpi);
  letter-spacing: var(--ls-kpi);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.kpi__value::before {
  content: "";
  display: block;
  width: var(--accent-rule);
  height: var(--underline-accent);
  margin-bottom: var(--space-4);
  background: var(--color-ambre);
}
.kpi__context {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.section--dark .kpi__value { color: var(--color-accent-text); }
.section--dark .kpi__value::before { display: none; }
.section--dark .kpi__context { color: var(--color-text-subtle); }

/* ============ Header et navigation (§7.6) ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: var(--color-bg);
  border-bottom: var(--stroke-hairline) solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--color-line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  flex: none;
}
.site-logo img { width: var(--logo-header); height: auto; }

.site-nav { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  color: var(--color-text);
  white-space: nowrap;
  text-decoration: underline transparent;
  text-decoration-thickness: var(--stroke-accent);
  text-underline-offset: var(--underline-offset);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
/* Lien actif : le soulignement Ambre du survol reste affiché (retour du propriétaire,
   22/10/2026, à la place du point Ocre de §7.6). Le bouton « Vous voulez… » le porte
   aussi quand la page courante est dans son menu. */
.site-nav__link:hover,
.site-nav__link:is([aria-current], .is-current) { text-decoration-color: var(--color-ambre); }

/* Menu déroulant « Vous voulez… » : bouton de divulgation, panneau Blanc à filet.
   main.js l'ouvre au clic. Sans JS, il s'ouvre au survol et au focus. */
.site-nav__item { position: relative; }
.site-nav__toggle {
  gap: var(--space-1);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }

.site-nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(var(--space-4) * -1);
  z-index: 1;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--color-surface);
  border: var(--stroke-hairline) solid var(--color-line);
  border-radius: var(--radius-sm);
}
.js .site-nav__toggle[aria-expanded="true"] + .site-nav__submenu,
:root:not(.js) .site-nav__item:is(:hover, :focus-within) .site-nav__submenu { display: block; }

.site-nav__sublink {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: 0 var(--space-4);
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  color: var(--color-text);
  white-space: nowrap;
  text-decoration: underline transparent;
  text-decoration-thickness: var(--stroke-accent);
  text-underline-offset: var(--underline-offset);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.site-nav__sublink:hover,
.site-nav__sublink[aria-current] { text-decoration-color: var(--color-ambre); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-header__cta { display: none; }
/* Le bouton du header est secondaire : le hero garde la seule action primaire de l'écran (§7.1) */

/* Burger : deux filets */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: var(--target-min);
  height: var(--target-min);
  margin-right: calc(var(--space-3) * -1);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-toggle__line {
  display: block;
  width: var(--accent-rule);
  height: var(--stroke);
  background: var(--color-encre);
}

@media (min-width: 1024px) {
  .site-nav { display: block; }
  /* 3 liens + bouton tiennent dans les 896 px utiles à 1024 px */
  .site-header__inner,
  .site-nav__list { gap: var(--space-5); }
  .site-header__cta { display: inline-flex; }
  .menu-toggle { display: none; }
}
@media (min-width: 1440px) {
  .site-header__inner,
  .site-nav__list { gap: var(--space-6); }
}

/* ============ Menu mobile plein écran (§7.6) ============ */

.mobile-menu {
  --color-bg: var(--color-encre);
  --color-text: var(--color-ivoire);
  --color-line: var(--color-dark-line);
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Enfant flex : sans largeur explicite, .container se réduit à son contenu */
.mobile-menu > .container { width: 100%; }

.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: var(--header-height);
}

.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  margin-right: calc(var(--space-3) * -1);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ivoire);
  cursor: pointer;
}

.mobile-menu__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.mobile-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--stroke-hairline) solid var(--color-line);
}
.mobile-menu__list li { border-bottom: var(--stroke-hairline) solid var(--color-line); }

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding-block: var(--space-4);
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-ivoire);
  text-decoration: none;
}
.mobile-menu__link[aria-current]::before {
  content: "";
  width: var(--dot-size-sm);
  height: var(--dot-size-sm);
  border-radius: 50%;
  background: var(--color-ocre);
}

/* Groupe « Vous voulez… » : libellé discret, trois liens d'un palier plus petit */
.mobile-menu__label {
  padding-top: var(--space-4);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-small);
  color: var(--color-text-subtle);
}
.mobile-menu__sublist {
  margin: 0;
  padding: var(--space-2) 0 var(--space-3);
  list-style: none;
}
.mobile-menu__list .mobile-menu__sublist li { border-bottom: 0; }
.mobile-menu__link--sub {
  padding-block: var(--space-2);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

.mobile-menu__cta { margin-top: var(--space-7); align-self: flex-start; }

/* Défilement bloqué pendant que le menu est ouvert */
.has-menu-open { overflow: hidden; }

/* ============ Footer (§7.8) ============ */
/* Fond Ivoire séparé par un filet, liens en texte secondaire, titres de colonne
   en casse normale (v1.2, inspiration Cursor et ElevenLabs). */

.site-footer {
  border-top: var(--stroke-hairline) solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-text);
  padding-top: var(--space-9);
  padding-bottom: var(--space-6);
}

.site-footer__grid { row-gap: var(--space-7); }

.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand img { width: var(--logo-footer); height: auto; }
.site-footer__tagline {
  margin-top: var(--space-5);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}

/* Deux colonnes titrées (§7.8) : les trois situations, puis le reste du site.
   Empilées sur mobile, côte à côte dès 640 px. Sur ordinateur, elles se calent
   sur le bord droit, comme « Mentions légales » en dessous. */
.site-footer__nav {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-6);
}
.site-footer__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text);
}
.site-footer__list { margin: 0; padding: 0; list-style: none; }

@media (min-width: 640px) {
  .site-footer__nav {
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--space-8);
  }
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
  text-decoration: underline transparent;
  text-decoration-thickness: var(--stroke-accent);
  text-underline-offset: var(--underline-offset);
  transition:
    color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}
.site-footer__link:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-ambre);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--stroke-hairline) solid var(--color-line);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}

.site-footer__legal {
  color: inherit;
  text-decoration: underline transparent;
  text-decoration-thickness: var(--stroke-accent);
  text-underline-offset: var(--underline-offset);
  transition:
    color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}
.site-footer__legal:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-ambre);
}

@media (min-width: 1024px) {
  .site-footer { padding-top: var(--space-10); }
  .site-footer__brand { grid-column: 1 / span 4; }
  .site-footer__nav { grid-column: 5 / -1; justify-self: end; }
}

/* ============ Jalons (§6 : points et ligne de connexion) ============ */
/* Composant disponible pour la section 04 (démonstration) ou la timeline de mission. */
/* Fait = point Encre · En cours = point Ocre · À venir = cercle vide.
   Le statut est toujours écrit en toutes lettres (§13). */

.milestones {
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestone {
  --milestone-line: calc(var(--fs-ui) * var(--lh-small));
  position: relative;
  display: grid;
  grid-template-columns: var(--dot-size) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-3);
  padding-block: var(--space-3);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
}

/* Point, aligné sur la première ligne du libellé */
.milestone::before {
  content: "";
  position: relative;
  z-index: 1;
  width: var(--dot-size);
  height: var(--dot-size);
  margin-top: calc((var(--milestone-line) - var(--dot-size)) / 2);
  border-radius: 50%;
  background: var(--status-done);
}
.milestone--current::before { background: var(--status-current); }
.milestone--upcoming::before {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 var(--stroke) var(--status-upcoming); /* taste-skill-ignore : cercle vide « à venir », design.md §2.5 */
}

/* Ligne de connexion : du centre de ce point au centre du suivant */
.milestone:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc((var(--dot-size) - var(--stroke)) / 2);
  top: calc(var(--space-3) + var(--milestone-line) / 2);
  width: var(--stroke);
  height: 100%;
  background: var(--color-line-strong);
}
.milestone--done:not(:last-child)::after { background: var(--color-encre); }

.milestone__status {
  font-size: var(--fs-small);
  line-height: var(--milestone-line);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ============ Hero (design.md §12, composition A + cible) ============ */
/* Le symbole de teo en grand, recadré à droite : une cible. Elle se forme une
   fois au chargement : l'anneau Ambre se trace, puis le « o » Encre, puis le
   point Ocre apparaît au centre. Sous le texte en mobile, à droite dès 1024 px.
   L'anneau est un cercle à trait épais, de même géométrie que celui du logo
   (rayons 210,79 et 250). Le « o » garde son dessin : un masque le dévoile. */

.hero {
  --target-size: 12rem;
  position: relative;
  overflow: hidden;
  padding-top: var(--hero-top);
  padding-bottom: calc(var(--target-size) + var(--space-7));
}
.hero > .container { position: relative; z-index: 1; }

.hero__target {
  position: absolute;
  z-index: 0;
  width: var(--target-size);
  height: var(--target-size);
  right: calc(var(--target-size) * -0.3);
  bottom: var(--space-5);
}
.hero__target-ring {
  fill: none;
  stroke: var(--color-ambre);
  stroke-width: 39.21;
}
.hero__target-o { fill: var(--color-encre); }
.hero__target-reveal {
  fill: none;
  stroke: var(--color-surface); /* blanc : la zone visible du masque */
  stroke-width: 84;
}
.hero__target-point {
  fill: var(--color-ocre);
  transform-box: fill-box;
  transform-origin: center;
}

/* Tracé une seule fois : l'anneau, puis le « o », puis le point */
.js .hero__target-ring,
.js .hero__target-reveal {
  animation: hero-draw var(--dur-draw) var(--ease-draw) both;
}
.js .hero__target-reveal { animation-delay: calc(var(--dur-draw) * 0.8); }
.js .hero__target-point {
  animation: hero-point var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--dur-draw) * 1.7);
}

/* Le pointillé est retiré à la fin : sinon une fine couture reste visible en haut */
@keyframes hero-draw {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; }
  99.9% { stroke-dasharray: 1; stroke-dashoffset: 0; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@keyframes hero-point { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero__target-ring,
  .js .hero__target-reveal,
  .js .hero__target-point { animation: none; }
}

@media (min-width: 640px) {
  .hero { --target-size: 20rem; }
}

/* De 1024 à 1439 px, le titre occupe presque toute la largeur : la cible se
   place sous lui, à droite du texte. Elle peut déborder un peu sous le hero. */
@media (min-width: 1024px) {
  .hero {
    --target-size: 30rem;
    padding-bottom: var(--section-gap);
    overflow: clip;
    overflow-y: visible;
  }
  .hero__target {
    bottom: auto;
    top: calc(var(--hero-top) + var(--fs-display) * 2 + var(--space-7));
  }
}

/* Dès 1440 px, la cible remonte à hauteur du texte, son centre face au chapô */
@media (min-width: 1440px) {
  .hero { --target-size: 32.5rem; }
  .hero__target { top: calc(var(--hero-top) + var(--space-8)); }
}

.hero__grid { row-gap: var(--gap-title-lead); }

.hero__head,
.hero__intro { grid-column: 1 / -1; }

/* Une phrase par ligne : la coupure tombe entre les deux phrases */
.hero__line { display: block; }

.hero__intro .lead + p { margin-top: 1em; }
.hero__text { color: var(--color-text-muted); }
.hero__strong { color: var(--color-text); }


@media (min-width: 1024px) {
  .hero__intro { grid-column: 1 / span 6; }
}

/* ============ Situations (section 02, composition D sans numéro) ============ */
/* Une ligne par situation : la phrase du dirigeant domine, l'explication suit en
   texte secondaire. Filets entre les lignes, pas de cartes. */

.situations__title { grid-column: 1 / -1; }

.situations {
  padding: 0;
  list-style: none;
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}

.situation {
  row-gap: var(--space-3);
  padding-block: var(--gap-index-row);
  border-top: var(--stroke-hairline) solid var(--color-line);
}

.situation__quote,
.situation__text { grid-column: 1 / -1; }

/* La parole du dirigeant en Source Serif 4 (design.md §3, v1.7) : une voix
   rapportée, distincte des titres de l'interface */
.situation__quote {
  margin: 0;
  font-family: var(--font-quote);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}
/* La coupure de ligne tombe entre deux phrases, jamais au milieu */
.situation__phrase { display: inline-block; }

.situation__text {
  margin: 0;
  color: var(--color-text-muted);
}

/* Constat final : la seule touche Ivoire de la section */
.situations__close {
  margin-top: var(--gap-head-content);
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
}
.situations__close-text { color: var(--color-text-muted); }
.situations__close-line {
  margin: var(--space-4) 0 0;
  max-width: 24em;
}

@media (min-width: 640px) {
  .situations__close { padding: var(--space-7) var(--space-6); }
}

@media (min-width: 1024px) {
  .situations__title { grid-column: 1 / span 8; }
  .situation { align-items: baseline; }
  .situation__quote { grid-column: 1 / span 7; }
  .situation__text { grid-column: 9 / span 4; }
  .situations__close { padding: var(--space-7); }
}

/* ============ Notre différence (section 04 : manifeste sur fond Encre) ============ */
/* Deux colonnes asymétriques : la conviction à gauche (5 colonnes), les quatre
   engagements à droite (6 colonnes), séparés par des filets sombres. Ni carte, ni
   picto, ni animation : la typographie et la grille portent la section. */

.manifesto__head,
.manifesto__body { grid-column: 1 / -1; }

.manifesto__intro { margin-top: var(--gap-title-lead); }

.manifesto__body { margin-top: var(--gap-head-content); }

.manifesto__list {
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}

.manifesto__item {
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr);
  padding-block: var(--gap-index-row);
  border-top: var(--stroke-hairline) solid var(--color-line);
}

/* Numéro : Ambre en texte, autorisé sur Encre (§2.3), aligné sur la première ligne du titre */
.manifesto__num {
  padding-top: calc((var(--fs-h4) * var(--lh-h4) - var(--fs-small) * var(--lh-small)) / 2);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-ambre);
  font-variant-numeric: tabular-nums;
}

.manifesto__title { margin: 0; }

.manifesto__text {
  margin-top: var(--space-3);
  color: var(--color-text-subtle); /* 5,1:1 sur Encre */
}

.manifesto__cta { margin-top: var(--space-6); }

/* Contraste renforcé : sur Encre, le texte secondaire passe en Ivoire */
@media (prefers-contrast: more) {
  .section--dark { --color-text-subtle: var(--color-ivoire); }
}

@media (min-width: 1024px) {
  /* 6 colonnes pour le titre entre 1024 et 1439 px : en 5, il passerait sur trois lignes */
  .manifesto__head { grid-column: 1 / span 6; align-self: start; }
  .manifesto__body { grid-column: 8 / span 5; margin-top: 0; }
  .manifesto__item { grid-template-columns: var(--space-8) minmax(0, 1fr); }
}
@media (min-width: 1440px) {
  .manifesto__head { grid-column: 1 / span 5; }
  .manifesto__body { grid-column: 7 / span 6; }
}

/* ============ En pratique (section 05 : frise en trois étapes) ============ */
/* Une frise de trois segments (onglets ARIA), une seule zone de lecture dessous,
   Précédent / Suivant. Les trois panneaux occupent la même cellule de grille : la
   zone garde la hauteur du plus long, la page ne saute pas quand on change d'étape. */

.practice__head,
.practice__intro,
.steps { grid-column: 1 / -1; }

.practice__intro { margin-top: var(--gap-title-lead); }
.practice__intro .lead { color: var(--color-text); }
.practice__intro .lead + p { margin-top: var(--space-3); color: var(--color-text-muted); }

.steps { margin-top: var(--gap-head-content); }
/* Lien vers la page Améliorer votre organisation, dont l'exemple est le cas type */
.practice__more { grid-column: 1 / -1; margin-top: var(--space-6); }

/* Frise : trois segments égaux, numéro, intitulé, trait de progression */
.steps__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.steps__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-height: var(--target-min);
  padding: 0 0 var(--space-4);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.steps__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--underline-accent);
  background: var(--color-line);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.steps__num {
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.steps__label {
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.steps__label-long { display: none; }
.steps__tab:hover .steps__label { color: var(--color-text); }
.steps__tab:hover::after { background: var(--color-line-strong); }
/* Étapes déjà parcourues : trait Encre. Étape active : trait Ambre, texte Encre. */
.steps__tab.is-done::after { background: var(--color-encre); }
.steps__tab[aria-selected="true"] .steps__num,
.steps__tab[aria-selected="true"] .steps__label { color: var(--color-text); font-weight: 600; }
.steps__tab[aria-selected="true"]::after { background: var(--color-ambre); }

/* Zone de lecture : aplat Ivoire, angles droits (§4.4) */
.steps__panels {
  margin-top: var(--space-6);
  background: var(--color-surface);
  border: var(--stroke-hairline) solid var(--color-line);
}
.steps__panel {
  display: grid;
  align-content: start; /* la hauteur commune ne doit pas écarter les blocs */
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
}
.steps__panel + .steps__panel { border-top: var(--stroke-hairline) solid var(--color-line); }

.steps__title { margin: 0; }
.steps__lead { margin-top: var(--space-3); }

.steps__points { border-top: var(--stroke-hairline) solid var(--color-line); }
.steps__point {
  padding-block: var(--space-4);
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}
.steps__point-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: 0;
}
.steps__point-text {
  margin-top: var(--space-1);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}

/* Phrase de conclusion de l'étape 3 : barre Ambre de citation (§2.3) */
.steps__statement {
  margin: 0;
  padding-left: var(--space-5);
  max-width: 32em;
  box-shadow: inset var(--underline-accent) 0 0 var(--color-ambre); /* taste-skill-ignore : barre Ambre de citation, design.md §2.3 */
}

/* Avec le script : une seule étape visible, les trois dans la même cellule */
.js .steps__panels { display: grid; }
.js .steps__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
}
.js .steps__panel + .steps__panel { border-top: 0; }
.js .steps__panel.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out);
}

@media (min-width: 640px) {
  .steps__track { gap: var(--grid-gutter); }
  .steps__label-long { display: inline; }
  .steps__label-short { display: none; }
  .steps__panel { padding: var(--space-7); }
}

@media (min-width: 1024px) {
  .practice__head { grid-column: 1 / span 8; }
  .practice__intro { grid-column: 1 / span 6; }
  .steps__panel {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: start;
    padding: var(--space-8);
  }
  .steps__intro { grid-column: 1 / span 5; }
  .steps__points { grid-column: 7 / span 6; grid-row: 1 / span 2; }
  /* Étape 3 : la phrase passe sous l'introduction, les trois étapes gardent une hauteur proche */
  .steps__statement { grid-column: 1 / span 5; align-self: end; }
}

/* ============ Notre façon de travailler (section 06 : trois temps, un cadrage) ============ */
/* Trois colonnes éditoriales visibles d'un coup, séparées par deux filets verticaux.
   La grille partagée (subgrid) aligne numéros, titres, textes et résultats d'une
   colonne à l'autre. Puis un bandeau Ivoire : le cadrage fixé avant de commencer.
   Ni carte, ni picto, ni animation, ni appel à l'action. */

.method__head,
.method__intro,
.method__steps,
.method__frame { grid-column: 1 / -1; }

.method__intro { margin-top: var(--gap-title-lead); }

.method__steps {
  margin-top: var(--gap-head-content);
  border-top: var(--stroke-hairline) solid var(--color-line);
}

.method__step {
  display: grid;
  align-content: start;
  padding-block: var(--space-6);
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}

/* Grand numéro : palier H1, graisse modérée, en texte secondaire pour ne pas
   concurrencer le titre (repère numéroté, design.md §6) */
/* Palier H3 en mobile, H1 dès 1024 px : en mobile, trois grands numéros empilés
   allongeaient la section sans rien dire de plus (v1.7) */
.method__num {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-kpi);
  letter-spacing: var(--ls-h1);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* Palier Lead (22 px) : en H3 (28 px), le titre de l'étape 02 passerait sur trois lignes */
.method__title {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}
.method__text {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}
.method__label {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--stroke-hairline) solid var(--color-line);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-muted);
}
.method__result {
  margin-top: var(--space-2);
  font-weight: 600;
}

/* Bandeau de cadrage */
.method__frame {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
}
.method__frame-text h3 { margin: 0; }
.method__frame-text p {
  margin-top: var(--space-3);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.method__frame-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--grid-gutter);
}
.method__frame-list li {
  padding-left: var(--space-4);
  border-left: var(--stroke-hairline) solid var(--color-line-strong);
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: var(--lh-small);
}

@media (min-width: 640px) {
  .method__frame { padding: var(--space-7); }
}

@media (min-width: 1024px) {
  .method__head { grid-column: 1 / span 6; }
  .method__num { font-size: var(--fs-h1); }
  .method__title { margin-top: var(--space-5); }
  .method__frame { margin-top: var(--space-9); }
  .method__intro {
    grid-column: 8 / span 5;
    align-self: end;
    margin-top: 0;
  }

  /* Trois colonnes égales ; chaque étape reprend les cinq rangées de la grille parente */
  .method__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    border-top: 0;
  }
  .method__step {
    grid-row: span 5;
    grid-template-rows: subgrid;
    padding: 0 var(--space-6);
    border-bottom: 0;
    border-left: var(--stroke-hairline) solid var(--color-line);
  }
  .method__step:first-child { padding-left: 0; border-left: 0; }
  .method__step:last-child { padding-right: 0; }
  .method__text { align-self: start; }

  .method__frame {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: center;
  }
  .method__frame-text { grid-column: 1 / span 5; }
  .method__frame-list {
    grid-column: 7 / span 6;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 0;
  }
  .method__frame-list li { padding-inline: var(--space-4); }
  .method__frame-list li:first-child { padding-left: 0; border-left: 0; }
}

/* ============ Les associés (section 07 : deux portraits, un engagement) ============ */
/* Deux profils de même structure : portrait 3:4 à gauche (40 %), texte à droite.
   Côte à côte quand la place le permet (70rem, soit 1280 px et plus), l'un sous
   l'autre en dessous. Ni carte, ni fond, ni animation. */

.partners__head,
.partners-wrap,
.partners__commit { grid-column: 1 / -1; }

/* Conteneur de requête : la liste ne peut pas se mesurer elle-même */
.partners-wrap { container: partners / inline-size; }

.partners__intro { margin-top: var(--gap-title-lead); }

.partners {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--gap-head-content);
}

.partner {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.partner__photo {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-photo);
  background: var(--color-surface);
}

.partner__name { margin: 0; }
.partner__role {
  margin-top: var(--space-1);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.partner__exp {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--stroke-hairline) solid var(--color-line);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
}
.partner__domains {
  margin-top: var(--space-2);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
}
.partner__bio {
  margin-top: var(--space-4);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.partner__bio p + p { margin-top: var(--space-2); }

/* LinkedIn : icône seule, cible de 44 px, nom complet annoncé (aria-label) */
.partner__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  margin: var(--space-3) 0 0 calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}
.partner__linkedin:hover { color: var(--color-ocre); }
.partner__linkedin:active { transform: translateY(1px); }

/* Engagement commun : bande éditoriale sous un filet */
.partners__commit {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--stroke-hairline) solid var(--color-line);
}
.partners__statement { margin: 0; max-width: 20em; }
.partners__note { color: var(--color-text-muted); }

@media (min-width: 640px) {
  .partner {
    grid-template-columns: 2fr 3fr;
    gap: var(--grid-gutter);
  }
  .partner__photo { max-width: none; }
}

@container partners (min-width: 70rem) {
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
}

@media (min-width: 1024px) {
  .partners__head { grid-column: 1 / span 7; }
  .partners__commit {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: start;
  }
  .partners__statement { grid-column: 1 / span 6; }
  .partners__note { grid-column: 8 / span 5; }
}

/* ============ Contact (section 08 : invitation et formulaire) ============ */
/* Aplat Ambre (v1.7) : la conclusion de la page. À gauche l'invitation et l'adresse
   directe, en Encre. À droite le formulaire, sur un bloc Blanc : ses couleurs
   (bouton Ambre, erreurs, focus) restent celles d'un fond clair. Champs à filet
   inférieur seul (§7.7). Sur mobile : invitation, formulaire, puis adresse directe. */

.contact__head,
.contact-form,
.contact__direct { grid-column: 1 / -1; }

.contact__intro { margin-top: var(--gap-title-lead); color: var(--color-text); }
.contact__text { margin-top: var(--space-3); color: var(--color-encre); }

/* 16 px de marge sur mobile : le widget Turnstile ne descend pas sous 300 px de large */
.contact-form {
  margin-top: var(--gap-head-content);
  padding: var(--space-4);
  background: var(--color-surface);
}

.contact__direct {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--color-encre);
}
.contact__direct-label {
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-encre);
}
.contact__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  margin-top: var(--space-1);
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-h4);
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: var(--underline-offset);
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.contact__mail:hover { text-decoration-thickness: var(--stroke-accent); }
.contact__mail .icon { color: var(--color-encre); flex: none; }

/* Champs */
.contact-form__fields { display: grid; gap: var(--gap-field); }
.contact-form__row { display: grid; gap: var(--gap-field); }

.field { display: grid; align-content: start; gap: var(--space-2); }
.field__label {
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-small);
  color: var(--color-text);
}
.field__optional { color: var(--color-text-muted); font-weight: 400; }

/* 18 px dans le champ : pas de zoom automatique sur iOS (minimum 16 px) */
.field__input {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  /* Filet en texte secondaire (4,9:1) : le Filet appuyé (1,3:1) ne laisserait pas
     voir les champs, le minimum est de 3:1 pour un élément d'interface (§13). */
  border-bottom: var(--stroke-hairline) solid var(--color-text-muted);
  border-radius: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-small);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field__input--area {
  min-height: calc(var(--fs-body) * var(--lh-small) * 6 + var(--space-4));
  resize: vertical;
}
.field__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.field__input:hover { border-bottom-color: var(--color-encre); }

/* Focus : filet inférieur de 2 px. En Encre plutôt qu'en Ambre : l'Ambre ne fait
   que 2,4:1 sur l'Ivoire foncé, sous le seuil de 3:1 d'un indicateur de focus (§13). */
.field__input:focus-visible,
.field__input:focus {
  outline: none;
  border-bottom-color: var(--color-encre);
  box-shadow: inset 0 calc(var(--stroke-hairline) * -1) 0 var(--color-encre); /* taste-skill-ignore : filet de focus, design.md §7.7 */
}

/* Erreurs : sous le champ concerné, texte explicite, couleur Négatif + filet */
.field__error {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-negative);
}
.field__input[aria-invalid="true"] {
  border-bottom-color: var(--color-negative);
  box-shadow: inset 0 calc(var(--stroke-hairline) * -1) 0 var(--color-negative); /* taste-skill-ignore : filet d'erreur */
}

/* Antispam : hors écran, jamais visible ni atteignable au clavier */
.contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Widget Cloudflare Turnstile (iframe) : on ne règle que sa place */
.contact-form__captcha { min-height: var(--captcha-height); } /* évite un saut au chargement du widget */

.contact-form__actions {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}
.contact-form__submit { width: 100%; }
.contact-form__submit[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.contact-form__legal {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.contact-form__legal a { color: var(--color-text); }

.contact-form__alert {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  box-shadow: inset var(--underline-accent) 0 0 var(--color-negative); /* taste-skill-ignore : barre d'alerte */
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
}

.contact-form__success {
  padding: var(--space-6);
  background: var(--color-bg);
  box-shadow: inset var(--underline-accent) 0 0 var(--color-ambre); /* taste-skill-ignore : barre Ambre, design.md §2.3 */
}
.contact-form__success p + p { margin-top: var(--space-2); color: var(--color-text-muted); }
.contact-form__success:focus { outline: none; }

@media (min-width: 640px) {
  .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
  .contact-form__submit { width: auto; }
  .contact-form { padding: var(--space-6); }
}

@media (min-width: 1024px) {
  .contact > .container { grid-template-rows: auto 1fr; }
  /* 6 colonnes pour le titre sous 1440 px : en 5, il passerait sur trois lignes */
  .contact__head { grid-column: 1 / span 6; grid-row: 1; }
  .contact__direct { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  .contact-form { grid-column: 8 / span 5; grid-row: 1 / span 2; margin-top: 0; }
}
@media (min-width: 1440px) {
  .contact__head,
  .contact__direct { grid-column: 1 / span 5; }
  .contact-form { grid-column: 7 / span 6; }
}

/* ============ Questions fréquentes (section 09 : accordéon natif) ============ */
/* Éléments <details> / <summary> : clavier (Entrée, Espace), état ouvert annoncé
   et réponses présentes dans le HTML même fermées. Plusieurs réponses peuvent
   rester ouvertes. Chaque question est un bloc Blanc posé sur l'Ivoire, avec un
   bouton Ambre : la section se repère au premier coup d'œil (v1.7). Deux colonnes
   dès 1024 px, sous le titre. */

.faq__head,
.faq__list { grid-column: 1 / -1; }

.faq__intro {
  margin-top: var(--gap-title-lead);
  color: var(--color-text-muted);
}
.faq__intro a { color: var(--color-text); }

.faq__list {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--gap-head-content);
}

.faq__item { background: var(--color-surface); }

.faq__question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-5);
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-5);
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-text);
  list-style: none;
  cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }

/* Chevron qui pivote vers le bas à l'ouverture, sur un petit carré Ambre
   (Encre sur Ambre : 6,8:1). Toute la ligne reste cliquable : cible ≥ 44 px. */
.faq__icon {
  box-sizing: content-box;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-ambre);
  fill: none;
  stroke: var(--color-encre);
  stroke-width: var(--stroke-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] .faq__icon { transform: rotate(90deg); }
.faq__question:hover .faq__icon { background: var(--color-ocre); }
.faq__question:hover .faq__question-text {
  text-decoration: underline;
  text-decoration-color: var(--color-line-strong);
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: var(--underline-offset);
}

.faq__answer {
  max-width: var(--measure);
  padding: 0 var(--space-5) var(--space-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.faq__answer strong { color: var(--color-text); }

/* Ouverture en douceur, là où le navigateur sait animer une hauteur automatique.
   Ailleurs, la réponse s'affiche d'un coup, sans gêne pour la lecture. */
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0;
    overflow: clip;
    transition:
      height var(--dur-fast) var(--ease-out),
      content-visibility var(--dur-fast) allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; }
}

@media (min-width: 1024px) {
  /* 6 colonnes pour le titre sous 1440 px : en 5, il passerait sur trois lignes */
  .faq__head { grid-column: 1 / span 8; }
  .faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .faq__question { padding: var(--space-5) var(--space-6); }
  .faq__answer { padding: 0 var(--space-6) var(--space-6); }
}

/* ============ Page de texte légal (mentions légales) ============ */
/* Texte sur toute la largeur du conteneur, sans mise en page : exception voulue par le
   propriétaire à la longueur de ligne de design.md §3.2, pour cette page seulement (20/10/2026).
   Sections en H3 visuel : six H2 pleine taille écraseraient un texte qui se lit. */

.legal__column { font-size: var(--fs-body); }
.legal__column p { max-width: none; }

.legal__date {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}

.legal__intro {
  margin-top: var(--space-6);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.legal__body { margin-top: var(--space-8); }

.legal__section {
  padding-block: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--color-line);
}

.legal__section p {
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.legal__title + p,
.legal__section p + p { margin-top: var(--space-4); }

/* Fiche d'identité : libellé au-dessus sur mobile, en colonne à partir de 640 px */
.legal__facts { margin-top: var(--space-5); }
.legal__fact {
  padding-block: var(--space-3);
  border-top: var(--stroke-hairline) solid var(--color-line);
}
.legal__fact dt {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.legal__fact dd {
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text);
}

/* Liens dans le texte : soulignés en permanence, pour ne pas dépendre de la couleur */
.legal a {
  text-decoration: underline;
  text-decoration-color: var(--color-ambre);
  text-decoration-thickness: var(--stroke-accent);
  text-underline-offset: var(--underline-offset);
  color: var(--color-text);
  white-space: nowrap; /* une adresse ne se coupe pas sur son trait d'union */
  transition: color var(--dur-fast) var(--ease-out);
}
.legal a:hover { color: var(--color-ocre); }

@media (min-width: 640px) {
  .legal__fact {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

/* ============ Interventions (section 03 : liste sélectionnable + visuel) ============ */
/* À gauche, trois métiers sélectionnables (un seul ouvert). À droite, un grand visuel
   qui change avec le métier actif et se rejoue à chaque sélection. Sur mobile, main.js
   place le visuel dans le panneau ouvert. */

.services__head,
.services__intro,
.explorer { grid-column: 1 / -1; }

.services__intro {
  margin-top: var(--gap-title-lead);
  color: var(--color-text-muted);
}

.explorer {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  margin-top: var(--gap-head-content);
}
.explorer__list { grid-column: 1 / -1; }
.explorer__stage-home { display: none; }

.explorer__item {
  position: relative;
  border-top: var(--stroke-hairline) solid var(--color-line);
}
.explorer__item:last-child { border-bottom: var(--stroke-hairline) solid var(--color-line); }
/* Métier actif : barre Ambre de 3 px à gauche (§2.3) */
.explorer__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--stroke-hairline) * -1);
  bottom: 0;
  width: var(--underline-accent);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.explorer__item.is-active::before { background: var(--color-ambre); }

.explorer__heading { margin: 0; }

.explorer__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-5) 0 var(--space-5) var(--space-5);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.explorer__num {
  grid-column: 1;
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.explorer__title {
  grid-column: 1;
  margin-top: var(--space-1);
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}
.explorer__hook {
  grid-column: 1;
  margin-top: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-h4);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.explorer__item.is-active .explorer__hook,
.explorer__toggle:hover .explorer__hook { color: var(--color-text); }
.explorer__chevron {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.explorer__toggle[aria-expanded="true"] .explorer__chevron { transform: rotate(180deg); }

/* margin-top: 0 annule la règle « h3 + * » des tokens : l'écart accroche → texte vient du padding du bouton */
.explorer__panel { margin-top: 0; padding: 0 0 var(--space-6) var(--space-5); }
.explorer__panel[hidden] { display: none; }
.explorer__text { font-size: var(--fs-body); }
/* Le panneau est décalé de 24 px à gauche : en mobile, le visuel annule ce
   décalage pour occuper toute la largeur du contenu, centré sur la page */
.explorer__slot:not(:empty) {
  margin-top: var(--space-5);
  margin-left: calc(var(--space-5) * -1);
}
.explorer__panel .link-arrow { margin-top: var(--space-3); }

/* Scène : le visuel posé directement sur le fond Ivoire de la page, sans
   aplat, bordure ni ombre (v1.7). Les couleurs internes du SVG restent. */
.explorer__stage { padding: 0; }
.explorer__figure { margin: 0; }
.explorer__figure[hidden] { display: none; }
.explorer__figure .viz { width: 100%; height: auto; }
.explorer__caption {
  margin-top: var(--space-4);
  max-width: var(--measure);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .services__head { grid-column: 1 / span 6; }
  .services__intro {
    grid-column: 8 / span 5;
    align-self: end;
    margin-top: 0;
  }
  .explorer__list { grid-column: 1 / span 5; }
  .explorer__stage-home {
    display: block;
    grid-column: 7 / span 6;
  }
  /* Pas de marge latérale : le dessin prend toute la largeur des colonnes 7 à 12 */
  .explorer__stage { padding: var(--space-6) 0 0; }
}

/* ---------- Illustrations animées des trois métiers (teo-illustrations, v1.7) ---------- */
/* Couleurs par classes reliées aux tokens. État final par défaut : sans JS, en
   mouvement réduit, ou pour un visuel caché. main.js pose .is-playing à l'entrée
   dans l'écran puis à chaque changement de métier, ce qui rejoue la séquence.
   Chaque élément animé porte data-a (type), data-d (délai) et data-t (durée). */

.js .explorer__stage:not(.is-seen) .viz { opacity: 0; }

.viz .f-ambre { fill: var(--color-ambre); }
.viz .f-blanc { fill: var(--color-surface); }
.viz .f-encre { fill: var(--color-encre); }
.viz .f-filet { fill: var(--color-line); }
.viz .f-filet-appuye { fill: var(--color-line-strong); }
.viz .f-ivoire { fill: var(--color-ivoire); }
.viz .f-ivoire-fonce { fill: var(--color-bg-alt); }
.viz .f-miel { fill: var(--color-miel); }
.viz .f-ocre { fill: var(--color-ocre); }
.viz .f-secondaire { fill: var(--color-text-muted); }
.viz .f-tertiaire { fill: var(--color-text-subtle); }
.viz .s-ambre { stroke: var(--color-ambre); }
.viz .s-blanc { stroke: var(--color-surface); }
.viz .s-encre { stroke: var(--color-encre); }
.viz .s-filet { stroke: var(--color-line); }
.viz .s-filet-appuye { stroke: var(--color-line-strong); }
.viz .s-ivoire { stroke: var(--color-ivoire); }
.viz .s-ivoire-fonce { stroke: var(--color-bg-alt); }
.viz .s-miel { stroke: var(--color-miel); }
.viz .s-ocre { stroke: var(--color-ocre); }
.viz .s-tertiaire { stroke: var(--color-text-subtle); }

.teo-illu { display: block; width: 100%; height: auto; }
.teo-illu [data-a] { transform-box: fill-box; }
.teo-illu [data-a="travel"] { --x: 0px; --y: 0px; --r: 0deg; --s: 1; }

.teo-illu.is-playing [data-a] {
  animation-duration: var(--t, var(--dur-base));
  animation-delay: var(--d, 0ms);
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
}

.teo-illu.is-playing [data-a="fade"]   { animation-name: teo-fade; }
.teo-illu.is-playing [data-a="rise"]   { animation-name: teo-rise; }
.teo-illu.is-playing [data-a="pop"]    { animation-name: teo-pop; transform-origin: center; }
.teo-illu.is-playing [data-a="grow"]   { animation-name: teo-grow; transform-origin: left center; }
.teo-illu.is-playing [data-a="travel"] { animation-name: teo-travel; transform-origin: center; }
.teo-illu.is-playing [data-a="draw"] {
  animation-name: teo-draw;
  animation-timing-function: var(--ease-draw);
  stroke-dasharray: 1 2;
}

/* Trajets : d'où part chaque élément qui rejoint sa place */
.teo-illu .travel-org-1 { --x: -238px; --y: 43px; --r: -8deg; --s: 0.67; }
.teo-illu .travel-org-2 { --x: -175px; --y: -5px; --r: 7deg; --s: 0.75; }
.teo-illu .travel-org-3 { --x: -223px; --y: -15px; --r: -9deg; --s: 0.75; }
.teo-illu .travel-org-4 { --x: -337px; --y: 23px; --r: 4deg; --s: 0.75; }
.teo-illu .travel-aud-1 { --x: -26px; --y: -20px; --r: -10deg; --s: 1; }
.teo-illu .travel-aud-2 { --x: -32px; --y: 4px; --r: 9deg; --s: 1; }
.teo-illu .travel-aud-3 { --x: -22px; --y: 22px; --r: -9deg; --s: 1; }

.teo-illu [data-d="0"] { --d: 0ms; }
.teo-illu [data-d="80"] { --d: 80ms; }
.teo-illu [data-d="160"] { --d: 160ms; }
.teo-illu [data-d="300"] { --d: 300ms; }
.teo-illu [data-d="360"] { --d: 360ms; }
.teo-illu [data-d="550"] { --d: 550ms; }
.teo-illu [data-d="560"] { --d: 560ms; }
.teo-illu [data-d="700"] { --d: 700ms; }
.teo-illu [data-d="770"] { --d: 770ms; }
.teo-illu [data-d="840"] { --d: 840ms; }
.teo-illu [data-d="900"] { --d: 900ms; }
.teo-illu [data-d="970"] { --d: 970ms; }
.teo-illu [data-d="1040"] { --d: 1040ms; }
.teo-illu [data-d="1161"] { --d: 1161ms; }
.teo-illu [data-d="1180"] { --d: 1180ms; }
.teo-illu [data-d="1201"] { --d: 1201ms; }
.teo-illu [data-d="1300"] { --d: 1300ms; }
.teo-illu [data-d="1321"] { --d: 1321ms; }
.teo-illu [data-d="1420"] { --d: 1420ms; }
.teo-illu [data-d="1450"] { --d: 1450ms; }
.teo-illu [data-d="1550"] { --d: 1550ms; }
.teo-illu [data-d="1600"] { --d: 1600ms; }
.teo-illu [data-d="1651"] { --d: 1651ms; }
.teo-illu [data-d="1710"] { --d: 1710ms; }
.teo-illu [data-d="1731"] { --d: 1731ms; }
.teo-illu [data-d="1750"] { --d: 1750ms; }
.teo-illu [data-d="1811"] { --d: 1811ms; }
.teo-illu [data-d="1850"] { --d: 1850ms; }
.teo-illu [data-d="1870"] { --d: 1870ms; }
.teo-illu [data-d="1880"] { --d: 1880ms; }
.teo-illu [data-d="1910"] { --d: 1910ms; }
.teo-illu [data-d="1920"] { --d: 1920ms; }
.teo-illu [data-d="2050"] { --d: 2050ms; }
.teo-illu [data-d="2120"] { --d: 2120ms; }
.teo-illu [data-d="2270"] { --d: 2270ms; }
.teo-illu [data-d="2300"] { --d: 2300ms; }
.teo-illu [data-d="2350"] { --d: 2350ms; }
.teo-illu [data-d="2400"] { --d: 2400ms; }
.teo-illu [data-d="2420"] { --d: 2420ms; }
.teo-illu [data-d="2560"] { --d: 2560ms; }
.teo-illu [data-d="2750"] { --d: 2750ms; }
.teo-illu [data-d="2800"] { --d: 2800ms; }
.teo-illu [data-d="3020"] { --d: 3020ms; }

.teo-illu [data-t="160"] { --t: 160ms; }
.teo-illu [data-t="180"] { --t: 180ms; }
.teo-illu [data-t="200"] { --t: 200ms; }
.teo-illu [data-t="220"] { --t: 220ms; }
.teo-illu [data-t="240"] { --t: 240ms; }
.teo-illu [data-t="300"] { --t: 300ms; }
.teo-illu [data-t="320"] { --t: 320ms; }
.teo-illu [data-t="380"] { --t: 380ms; }
.teo-illu [data-t="400"] { --t: 400ms; }
.teo-illu [data-t="420"] { --t: 420ms; }
.teo-illu [data-t="450"] { --t: 450ms; }
.teo-illu [data-t="480"] { --t: 480ms; }
.teo-illu [data-t="500"] { --t: 500ms; }
.teo-illu [data-t="600"] { --t: 600ms; }
.teo-illu [data-t="700"] { --t: 700ms; }
.teo-illu [data-t="900"] { --t: 900ms; }
.teo-illu [data-t="1200"] { --t: 1200ms; }

@keyframes teo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes teo-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes teo-pop  { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes teo-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes teo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes teo-travel {
  from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); }
  25%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .teo-illu [data-a] { animation: none !important; }
}

/* ================================================================== */
/* ============ Page Nos offres (/nos-offres/) ====================== */
/* ================================================================== */
/* Même identité que l'accueil, compositions différentes (brief du 20/10/2026) :
   hero texte + sommaire, CAP 90 jours sur Encre, parcours en trois temps,
   résultats en lignes, trois bandes métier, engagements en 2 × 2, contact. */

/* ---------- 01 Hero : texte à gauche, sommaire éditorial à droite ---------- */

.offers-hero { padding-top: var(--hero-top); }
.offers-hero__grid { row-gap: var(--gap-head-content); }
.offers-hero__head,
.offers-hero__intro,
.offers-index { grid-column: 1 / -1; }

/* Une phrase par ligne dès que la largeur le permet */
.offers-hero__line { display: block; }

.offers-hero__text { margin-top: var(--space-4); }

.offers-index__label {
  padding-bottom: var(--space-3);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.offers-index__list { border-top: var(--stroke-hairline) solid var(--color-encre); }
.offers-index__list li { border-bottom: var(--stroke-hairline) solid var(--color-line); }

.offers-index__link {
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr);
  align-items: baseline;
  min-height: var(--target-min);
  padding-block: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}
.offers-index__num {
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.offers-index__title {
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  text-decoration: underline transparent;
  text-decoration-thickness: var(--stroke-accent);
  text-underline-offset: var(--underline-offset);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.offers-index__hook {
  grid-column: 2;
  margin-top: var(--space-1);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.offers-index__link:hover .offers-index__title { text-decoration-color: var(--color-ambre); }
.offers-index__link:active { transform: translateY(1px); }

@media (min-width: 1024px) {
  .offers-hero__intro { grid-column: 1 / span 6; }
  .offers-index { grid-column: 8 / span 5; }
}

/* ---------- 02 CAP 90 jours : offre phare sur Encre, forme officielle de teo ---------- */
/* Le symbole complet en version claire, recadré hors champ à droite, centre visible.
   Exception validée par le propriétaire le 20/10/2026 (design.md §6). Rien ne passe sous le texte. */

.cap {
  --mark-size: 17rem;
  position: relative;
  overflow: clip; /* clip et non hidden : la section ne peut pas défiler de côté */
  padding-bottom: calc(var(--mark-size) + var(--space-7));
}
.cap > .container { position: relative; z-index: 1; }

.cap__head,
.cap__body,
.cap__statement { grid-column: 1 / -1; }
.cap__body .cap__more { margin-top: var(--space-5); }

.cap__body { margin-top: var(--gap-title-lead); }
.cap__body p + p { margin-top: 1em; }
.cap__accent { white-space: nowrap; }

.cap__statement {
  margin-top: var(--gap-head-content);
  padding-top: var(--space-5);
  max-width: none;
  border-top: var(--stroke-hairline) solid var(--color-line);
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.cap__accent { color: var(--color-miel); }

.cap__mark {
  position: absolute;
  z-index: 0;
  width: var(--mark-size);
  height: var(--mark-size);
  right: calc(var(--mark-size) * -0.32);
  bottom: var(--space-6);
}
/* Forme officielle, version claire (ELEMENTS GRAPHIQUES/FORMES) : anneau Ambre,
   « o » Ivoire, point Ocre. Même géométrie et même tracé que la cible de l'accueil. */
.cap__mark-ring { fill: none; stroke: var(--color-ambre); stroke-width: 39.21; }
.cap__mark-o { fill: var(--color-ivoire); }
/* Masque en alpha : sur Encre, --color-surface est sombre et rendrait le « o » à moitié transparent */
.cap__mark-mask { mask-type: alpha; }
.cap__mark-reveal { fill: none; stroke: var(--color-ivoire); stroke-width: 84; }
.cap__mark-point {
  fill: var(--color-ocre);
  transform-box: fill-box;
  transform-origin: center;
}

/* Se forme une fois à l'entrée dans l'écran : l'anneau, puis le « o », puis le point.
   Caché avant : sinon le début du pointillé laisse de fines coutures visibles. */
.js .cap__mark:not(.is-drawn) { visibility: hidden; }
.js .cap__mark-ring,
.js .cap__mark-reveal { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .cap__mark-point { opacity: 0; }
.js .cap__mark.is-drawn .cap__mark-ring,
.js .cap__mark.is-drawn .cap__mark-reveal { animation: hero-draw var(--dur-draw) var(--ease-draw) both; }
.js .cap__mark.is-drawn .cap__mark-reveal { animation-delay: calc(var(--dur-draw) * 0.8); }
.js .cap__mark.is-drawn .cap__mark-point {
  animation: hero-point var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--dur-draw) * 1.7);
}

@media (prefers-reduced-motion: reduce) {
  .js .cap__mark-ring,
  .js .cap__mark-reveal { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
  .js .cap__mark-point { opacity: 1; animation: none !important; }
  .js .cap__mark:not(.is-drawn) { visibility: visible; }
}

@media (min-width: 640px) {
  .cap { --mark-size: 24rem; }
}

@media (min-width: 1024px) {
  .cap {
    --mark-size: 38rem;
    padding-bottom: var(--section-gap);
  }
  .cap__mark {
    bottom: auto;
    top: 50%;
    right: calc(var(--mark-size) * -0.38);
    transform: translateY(-50%);
  }
  .cap__head { grid-column: 1 / span 7; }
  .cap__body { grid-column: 1 / span 6; }
  .cap__statement { grid-column: 1 / span 7; }
}
@media (min-width: 1440px) {
  .cap { --mark-size: 44rem; }
}

/* ---------- 03 Parcours en trois temps ---------- */
/* Un point par temps, relié au suivant par un rail. Au défilement, la trajectoire
   Ambre se trace d'un point à l'autre ; le temps atteint passe « en cours » (Ocre),
   le précédent « fait » (Encre). Vertical en mobile, horizontal dès 1024 px.
   Les points sont décoratifs (aria-hidden) : l'ordre est porté par la liste. */

.route__head,
.route,
.route__note { grid-column: 1 / -1; }

.route__intro { margin-top: var(--gap-title-lead); }

.route {
  --route-dot: 12px;
  --route-gap: var(--space-7);
  display: grid;
  gap: var(--route-gap);
  margin-top: var(--gap-head-content);
}

.route__step {
  position: relative;
  padding-left: var(--space-7);
}

.route__dot {
  position: absolute;
  z-index: 1;
  left: 0;
  top: calc((var(--fs-small) * var(--lh-small) - var(--route-dot)) / 2);
  width: var(--route-dot);
  height: var(--route-dot);
  border-radius: 50%;
  background: var(--status-done);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

/* Rail (à venir) puis trajectoire Ambre (parcourue), du point au suivant */
.route__step:not(:last-child)::before,
.route__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc((var(--route-dot) - var(--stroke-accent)) / 2);
  top: calc((var(--fs-small) * var(--lh-small) + var(--route-dot)) / 2 + var(--space-2));
  bottom: calc(var(--route-gap) * -1 + var(--space-2));
  width: var(--stroke-accent);
}
.route__step:not(:last-child)::before { background: var(--color-line-strong); }
.route__step:not(:last-child)::after {
  background: var(--color-ambre);
  transform-origin: top;
}

/* Avec le script : tout part de l'état « à venir » */
.js .route__dot {
  background: var(--color-bg);
  box-shadow: inset 0 0 0 var(--stroke) var(--status-upcoming); /* taste-skill-ignore : cercle vide « à venir », design.md §2.5 */
}
.js .route__step.is-reached .route__dot { background: var(--status-current); box-shadow: none; } /* taste-skill-ignore */
.js .route__step.is-passed .route__dot { background: var(--status-done); }
.js .route__step::after {
  transform: scaleY(0);
  transition: transform var(--dur-draw) var(--ease-draw);
}
.js .route__step.is-passed::after { transform: none; }

.route__num {
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.route__title {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}
.route__title + .route__aim { margin-top: var(--space-2); }
.route__aim { font-weight: 600; }
.route__text { margin-top: var(--space-3); }
.route__text p + p { margin-top: var(--space-3); }
.route__label {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--stroke-hairline) solid var(--color-line);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.route__result { margin-top: var(--space-2); }

.route__note {
  margin-top: var(--gap-head-content);
  padding-left: var(--space-5);
  max-width: 34em;
  box-shadow: inset var(--underline-accent) 0 0 var(--color-ambre); /* taste-skill-ignore : barre Ambre, design.md §2.3 */
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

@media (prefers-reduced-motion: reduce) {
  .js .route__step::after,
  .js .route__dot { transition: none; }
}

@media (min-width: 1024px) {
  .route__head { grid-column: 1 / span 7; }
  .route {
    --route-gap: var(--grid-gutter);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--route-gap);
    row-gap: 0;
  }
  .route__step {
    padding-left: 0;
    padding-top: var(--space-7);
    padding-right: var(--space-5);
  }
  .route__dot { top: 0; }
  .route__step:not(:last-child)::before,
  .route__step:not(:last-child)::after {
    top: calc((var(--route-dot) - var(--stroke-accent)) / 2);
    bottom: auto;
    left: calc(var(--route-dot) + var(--space-2));
    width: calc(100% + var(--route-gap) - var(--route-dot) - var(--space-4));
    height: var(--stroke-accent);
  }
  .route__step:not(:last-child)::after { transform-origin: left; }
  .js .route__step::after { transform: scaleX(0); }
  .route__note { margin-top: var(--space-9); }
}

/* ---------- 04 Résultats attendus et cadre ---------- */

.results__head,
.results__intro,
.outcomes,
.offer-frame { grid-column: 1 / -1; }

.results__intro { margin-top: var(--gap-title-lead); }
.results__intro .lead { color: var(--color-text); }
.results__intro .lead + p { margin-top: var(--space-3); }

/* Index éditorial (composition D) : numéro, titre, texte, filet entre les lignes */
.outcomes {
  margin-top: var(--gap-head-content);
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}
.outcome {
  row-gap: var(--space-2);
  padding-block: var(--gap-index-row);
  border-top: var(--stroke-hairline) solid var(--color-line);
}
.outcome__num,
.outcome__title,
.outcome__text { grid-column: 1 / -1; }
.outcome__num {
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.outcome__title { margin: 0; }
.outcome__title + * { margin-top: 0; }

/* Encart de cadre : Ivoire sur la section Blanche, plan d'action en regard */
.offer-frame {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  background: var(--color-ivoire);
}
.offer-frame__text h3 { margin: 0; }
.offer-frame__facts {
  display: grid;
  gap: var(--space-4) var(--grid-gutter);
  margin-top: var(--space-5);
}
.offer-frame__fact {
  padding-left: var(--space-4);
  border-left: var(--stroke-hairline) solid var(--color-line-strong);
}
.offer-frame__fact dt {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.offer-frame__fact dd {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: var(--lh-small);
}
.offer-frame__note {
  margin-top: var(--space-5);
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.offer-frame__cta { margin-top: var(--space-6); }

/* Plan d'action : un document de travail rendu en interface (design.md §8) */
.plan {
  align-self: start;
  margin: 0;
  background: var(--color-surface);
  border: var(--stroke-hairline) solid var(--color-line);
}
.plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4);
}
.plan__title {
  font-family: var(--font-title);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: var(--lh-small);
}
.plan__meta,
.plan__caption {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.plan__table thead th,
.plan__table td,
.plan__table tbody th { padding-inline: var(--space-3); }
.plan__table tbody th { font-weight: 400; text-align: left; }
.plan__table tbody tr:hover { background: none; }
.plan__table tbody tr:last-child > * { border-bottom: 0; }
.plan__owner,
.plan__due { display: none; }
.plan__caption {
  padding: var(--space-3) var(--space-4);
  border-top: var(--stroke-hairline) solid var(--color-line);
}

@media (min-width: 640px) {
  .offer-frame { padding: var(--space-7); }
  .offer-frame__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan__owner,
  .plan__due { display: table-cell; }
  .plan__head,
  .plan__caption { padding-inline: var(--space-5); }
}

@media (min-width: 1024px) {
  .results__head { grid-column: 1 / span 6; }
  .results__intro {
    grid-column: 8 / span 5;
    align-self: end;
    margin-top: 0;
  }
  .outcome { align-items: baseline; }
  .outcome__num { grid-column: 1 / span 1; }
  .outcome__title { grid-column: 2 / span 5; }
  .outcome__text { grid-column: 8 / span 5; }

  .offer-frame {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    margin-top: var(--space-9);
    padding: var(--space-8);
  }
  .offer-frame__text { grid-column: 1 / span 5; }
  .plan { grid-column: 7 / span 6; }
}

/* ---------- 05 Les autres interventions : une bande par métier ---------- */
/* Structure identique pour les trois : situation et intervention, illustration,
   exemples de missions, résultat recherché. L'illustration alterne de côté.
   Sur l'Ivoire foncé, le disque Ivoire foncé des dessins passe en Ivoire. */

.bands__head { grid-column: 1 / -1; }
.bands__intro { margin-top: var(--gap-title-lead); }
.bands__text { margin-top: var(--space-3); }

.band {
  row-gap: var(--space-6);
  margin-top: var(--gap-head-content);
  padding-top: var(--space-7);
  border-top: var(--stroke-hairline) solid var(--color-line-strong);
}
.band + .band { margin-top: var(--space-9); }

.band__intro,
.band__visual,
.band__missions,
.band__result { grid-column: 1 / -1; }

.band__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}
.band__title + * { margin-top: var(--space-3); }
.band__num {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.band__hook {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
}
.band__intro .band__hook + p { margin-top: var(--space-5); }
/* Lien vers la page de situation correspondante */
.band__intro .band__more { margin-top: var(--space-5); }

.band__visual { margin: 0; }
.band__visual .viz { width: 100%; height: auto; }
.band__visual .viz .f-ivoire-fonce { fill: var(--color-ivoire); }
.js .band__visual:not(.is-seen) .viz { opacity: 0; }

.band__label {
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.band__list { margin-top: var(--space-3); }
.band__list li {
  padding-block: var(--space-3);
  border-top: var(--stroke-hairline) solid var(--color-line-strong);
}

.band__result {
  padding: var(--space-5);
  background: var(--color-surface);
  box-shadow: inset var(--underline-accent) 0 0 var(--color-ambre); /* taste-skill-ignore : barre Ambre d'un bloc mis en avant, design.md §2.3 */
}
.band__result-text {
  margin-top: var(--space-2);
  font-weight: 600;
}
.band__caveat {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .band__result { padding: var(--space-6); }
}

@media (min-width: 1024px) {
  .bands__head { grid-column: 1 / span 8; }
  .band {
    row-gap: var(--space-7);
    align-items: start;
    padding-top: var(--space-8);
  }
  .band__intro { grid-column: 1 / span 6; grid-row: 1; }
  .band__visual { grid-column: 7 / span 6; grid-row: 1; }
  .band__missions { grid-column: 1 / span 6; grid-row: 2; }
  .band__result { grid-column: 7 / span 6; grid-row: 2; }
  .band--reverse .band__intro,
  .band--reverse .band__missions { grid-column: 7 / span 6; }
  .band--reverse .band__visual,
  .band--reverse .band__result { grid-column: 1 / span 6; }
}
@media (min-width: 1440px) {
  /* Composition B (5/7) : le dessin plus grand que sur l'accueil */
  .band__intro,
  .band__missions { grid-column: 1 / span 5; }
  .band__visual,
  .band__result { grid-column: 6 / span 7; }
  .band--reverse .band__intro,
  .band--reverse .band__missions { grid-column: 8 / span 5; }
  .band--reverse .band__visual,
  .band--reverse .band__result { grid-column: 1 / span 7; }
}

/* ---------- 06 Nos engagements : grille 2 × 2 compacte ---------- */
/* Un pictogramme linéaire Lucide (trait 1,5 px, 20 px) à côté du titre, jamais
   au-dessus : pas de cartes, des filets entre les engagements. */

.pledges__head,
.pledges { grid-column: 1 / -1; }

.pledges {
  display: grid;
  margin-top: var(--gap-head-content);
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}
.pledge {
  display: grid;
  grid-template-columns: var(--target-min) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--color-line);
}
.pledge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  background: var(--color-ivoire);
  color: var(--color-encre);
}
.pledge__title { margin: 0; }
.pledge__text { margin-top: var(--space-2); }

@media (min-width: 1024px) {
  .pledges__head { grid-column: 1 / span 7; }
  .pledges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
    border-bottom: 0;
  }
  .pledge { padding-block: var(--space-6); }
  .pledge:nth-last-child(-n + 2) { border-bottom: var(--stroke-hairline) solid var(--color-line); }
}

/* ================================================================== */
/* ============ Page Faire aboutir un projet ======================== */
/* ================================================================== */
/* Brief du 21/10/2026 : hero texte + trajectoire, quatre signaux en index,
   bénéfices sur Encre, quatre interventions en 2 × 2, méthode en quatre
   séquences alternées, contact. Les schémas animés sont fournis par le
   propriétaire ; leurs couleurs passent par les classes .f-* / .s-* (tokens). */

/* ---------- Schémas animés : socle commun ---------- */
/* main.js pose .is-playing.is-paused au chargement, puis retire .is-paused à
   l'entrée dans l'écran : la séquence se joue une fois. Sans JS ou en mouvement
   réduit, aucune classe n'est posée : l'état final s'affiche directement. */

.project-viz { display: block; width: 100%; height: auto; }
.project-viz [pathLength] { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.project-viz.is-paused * { animation-play-state: paused !important; }

@keyframes pv-draw    { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pv-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-out     { from { opacity: 1; } to { opacity: 0; } }
@keyframes pv-pop     { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes pv-grow    { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pv-rise    { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes pv-right   { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes pv-lift    { 0% { transform: none; } 45% { transform: translateY(-4px); } 100% { transform: none; } }
@keyframes pv-pulse   { 0% { transform: none; } 45% { transform: scale(1.14); } 100% { transform: none; } }
@keyframes pv-dim     { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes pv-light   { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes pv-outline { from { stroke: var(--color-line-strong); } to { stroke: var(--color-ambre); } }

@media (prefers-reduced-motion: reduce) {
  .project-viz * { animation: none !important; }
}

/* Hero : le parcours se trace, le jalon bloqué ressort, la dépendance s'affirme */
.project-viz--hero .th-block { transform-box: fill-box; transform-origin: center; }
.project-viz--hero .th-dep { stroke-opacity: 0.85; }
.project-viz--hero.is-playing .th-trail { animation: pv-draw 800ms var(--ease-draw) both; }
.project-viz--hero.is-playing .th-block { animation: th-pulse 700ms var(--ease-draw) 800ms both; }
.project-viz--hero.is-playing .th-halo  { animation: th-halo 700ms var(--ease-draw) 800ms both; }
.project-viz--hero.is-playing .th-dep   { animation: th-dep 1000ms var(--ease-out) 1500ms both; }
.project-viz--hero.is-playing .th-pend  { animation: th-pend 1000ms var(--ease-out) 1500ms both; }
@keyframes th-pulse { 0% { transform: none; } 45% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes th-halo  { 0% { stroke-opacity: 0.45; } 45% { stroke-opacity: 0.9; } 100% { stroke-opacity: 0.45; } }
@keyframes th-dep   { from { stroke-opacity: 0.4; } to { stroke-opacity: 0.85; } }
@keyframes th-pend  { from { opacity: 0.55; } to { opacity: 1; } }

/* Bénéfices : le dessin complet (desktop) et ses trois recadrages (mobile, tablette).
   --shift avance la séquence d'un recadrage pour qu'il démarre sans attendre. */
.project-viz--benefits .tb-pop,
.project-viz--benefits .tb-doc-move { transform-box: fill-box; transform-origin: center; }
.project-viz--benefits .tb-s3-neutral { opacity: 0; }
.project-viz--decision { --shift: 1900ms; }
.project-viz--priorities { --shift: 3300ms; }
.project-viz--benefits.is-playing .tb-s1-line    { animation: pv-draw 800ms var(--ease-draw) calc(200ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s1-m1      { animation: pv-pop 260ms var(--ease-out) calc(150ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s1-m2      { animation: pv-pop 260ms var(--ease-out) calc(560ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s1-gold    { animation: pv-pop 380ms var(--ease-out) calc(1000ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s1-day     { animation: pv-fade 400ms var(--ease-out) calc(1050ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s1-rest    { animation: pv-fade 400ms var(--ease-out) calc(1150ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-c1         { animation: pv-draw 650ms var(--ease-draw) 1500ms both; }
.project-viz--benefits.is-playing .tb-d1         { animation: pv-pop 240ms var(--ease-out) 1640ms both; }
.project-viz--benefits.is-playing .tb-d2         { animation: pv-pop 240ms var(--ease-out) 1820ms both; }
.project-viz--benefits.is-playing .tb-d3         { animation: pv-pop 240ms var(--ease-out) 1990ms both; }
.project-viz--benefits.is-playing .tb-s2-disc    { animation: pv-pop 320ms var(--ease-out) calc(2120ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s2-check   { animation: pv-draw 420ms var(--ease-out) calc(2300ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-doc-move   { animation: pv-lift 650ms var(--ease-draw) calc(2350ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-c2         { animation: pv-draw 650ms var(--ease-draw) 3000ms both; }
.project-viz--benefits.is-playing .tb-d4         { animation: pv-pop 240ms var(--ease-out) 3130ms both; }
.project-viz--benefits.is-playing .tb-d5         { animation: pv-pop 240ms var(--ease-out) 3300ms both; }
.project-viz--benefits.is-playing .tb-d6         { animation: pv-pop 240ms var(--ease-out) 3480ms both; }
.project-viz--benefits.is-playing .tb-s3-card    { animation: tb-card 500ms var(--ease-out) calc(3550ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s3-text    { animation: tb-text 500ms var(--ease-out) calc(3550ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s3-neutral { animation: pv-out 300ms var(--ease-out) calc(3550ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s3-status  { animation: pv-pop 320ms var(--ease-out) calc(3700ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s3-link    { animation: pv-draw 450ms var(--ease-draw) calc(3900ms - var(--shift, 0ms)) both; }
.project-viz--benefits.is-playing .tb-s3-next    { animation: pv-pop 320ms var(--ease-out) calc(4250ms - var(--shift, 0ms)) both; }
@keyframes tb-card { from { fill: var(--color-bg-alt); } to { fill: var(--color-miel); } }
@keyframes tb-text { from { fill: var(--color-text-subtle); } to { fill: var(--color-encre); } }

/* Méthode 01 (Cartographier) : les dépendances critiques */
.project-viz--a2 [class^="a2-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--a2.is-playing .a2-task1   { animation: pv-fade 500ms var(--ease-out) both; }
.project-viz--a2.is-playing .a2-task2   { animation: pv-fade 500ms var(--ease-out) 160ms both; }
.project-viz--a2.is-playing .a2-link1   { animation: pv-draw 700ms var(--ease-draw) 650ms both; }
.project-viz--a2.is-playing .a2-link2   { animation: pv-draw 700ms var(--ease-draw) 800ms both; }
.project-viz--a2.is-playing .a2-dot1    { animation: pv-pop 220ms var(--ease-out) 960ms both; }
.project-viz--a2.is-playing .a2-dot2    { animation: pv-pop 220ms var(--ease-out) 1110ms both; }
.project-viz--a2.is-playing .a2-warning { animation: pv-pulse 700ms var(--ease-draw) 1650ms both; }
.project-viz--a2.is-playing .a2-out1    { animation: pv-dim 700ms var(--ease-out) 2450ms both; }
.project-viz--a2.is-playing .a2-out2    { animation: pv-dim 700ms var(--ease-out) 2600ms both; }

/* Méthode 02 (Activer) : le plan de reprise */
.project-viz--a3 [class^="a3-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--a3 .a3-capacity { transform-origin: left center; }
.project-viz--a3.is-playing .a3-card1    { animation: pv-rise 500ms var(--ease-out) both; }
.project-viz--a3.is-playing .a3-card2    { animation: pv-rise 500ms var(--ease-out) 200ms both; }
.project-viz--a3.is-playing .a3-card3    { animation: pv-rise 500ms var(--ease-out) 400ms both; }
.project-viz--a3.is-playing .a3-link1    { animation: pv-draw 600ms var(--ease-draw) 900ms both; }
.project-viz--a3.is-playing .a3-dot1     { animation: pv-pop 220ms var(--ease-out) 1160ms both; }
.project-viz--a3.is-playing .a3-link2    { animation: pv-draw 600ms var(--ease-draw) 1050ms both; }
.project-viz--a3.is-playing .a3-dot2     { animation: pv-pop 220ms var(--ease-out) 1310ms both; }
.project-viz--a3.is-playing .a3-link3    { animation: pv-draw 600ms var(--ease-draw) 1200ms both; }
.project-viz--a3.is-playing .a3-dot3     { animation: pv-pop 220ms var(--ease-out) 1460ms both; }
.project-viz--a3.is-playing .a3-capacity { animation: pv-grow 700ms var(--ease-out) 1900ms both; }
.project-viz--a3.is-playing .a3-seal     { animation: pv-pop 320ms var(--ease-out) 2600ms both; }
.project-viz--a3.is-playing .a3-check    { animation: pv-draw 420ms var(--ease-out) 2800ms both; }
.project-viz--a3.is-playing .a3-row1     { animation: pv-light 380ms var(--ease-out) 3300ms both; }
.project-viz--a3.is-playing .a3-row2     { animation: pv-light 380ms var(--ease-out) 3520ms both; }
.project-viz--a3.is-playing .a3-row3     { animation: pv-light 380ms var(--ease-out) 3740ms both; }

/* Méthode 03 (Piloter) : le suivi d'exécution */
.project-viz--a4 [class^="a4-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--a4 .a4-bar { transform-origin: left center; }
.project-viz--a4.is-playing .a4-path    { animation: pv-draw 1300ms var(--ease-draw) both; }
.project-viz--a4.is-playing .a4-m1      { animation: pv-pop 260ms var(--ease-out) both; }
.project-viz--a4.is-playing .a4-m2      { animation: pv-pop 260ms var(--ease-out) 330ms both; }
.project-viz--a4.is-playing .a4-bar     { animation: pv-grow 800ms var(--ease-out) 1300ms both; }
.project-viz--a4.is-playing .a4-current { animation: pv-out 300ms var(--ease-out) 2150ms both; }
.project-viz--a4.is-playing .a4-done    { animation: pv-pop 320ms var(--ease-out) 2250ms both; }
.project-viz--a4.is-playing .a4-tick    { animation: pv-draw 360ms var(--ease-out) 2450ms both; }
.project-viz--a4.is-playing .a4-next    { animation: pv-outline 500ms var(--ease-out) 2800ms both; }
.project-viz--a4.is-playing .a4-note    { animation: pv-lift 650ms var(--ease-draw) 3150ms both; }

/* ---------- 01 Hero : texte 7 colonnes, trajectoire 5 colonnes ---------- */

.project-hero { padding-top: var(--hero-top); }
.project-hero__grid { row-gap: var(--gap-head-content); align-items: center; }
.project-hero__text,
.project-hero__visual { grid-column: 1 / -1; }
.project-hero__cta { margin-top: var(--gap-lead-action); }
.project-hero__visual { margin: 0; max-width: 35rem; }

/* 8 colonnes de texte sous 1440 px : en 7, le titre passait sur trois lignes à 1024 px */
@media (min-width: 1024px) {
  .project-hero__text { grid-column: 1 / span 8; }
  .project-hero__visual { grid-column: 9 / span 4; max-width: none; }
}
@media (min-width: 1440px) {
  .project-hero__text { grid-column: 1 / span 7; }
  .project-hero__visual { grid-column: 8 / span 5; }
}

/* ---------- 02 Quatre signaux : index éditorial sans numéro ---------- */

.signals__head,
.signals { grid-column: 1 / -1; }

.signals {
  margin-top: var(--gap-head-content);
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}
.signal {
  row-gap: var(--space-3);
  padding-block: var(--gap-index-row);
  border-top: var(--stroke-hairline) solid var(--color-line);
}
.signal__title,
.signal__text { grid-column: 1 / -1; }
.signal__title { margin: 0; }
.signal__title + * { margin-top: 0; }
.signal__text p + p { margin-top: var(--space-3); }

@media (min-width: 1024px) {
  .signals__head { grid-column: 1 / span 8; }
  .signal { align-items: baseline; }
  .signal__title { grid-column: 1 / span 5; }
  .signal__text { grid-column: 7 / span 6; }
}

/* ---------- 03 Bénéfices sur Encre : un dessin, trois blocs ---------- */
/* Desktop : le dessin complet au-dessus des trois colonnes, chaque bénéfice sous
   sa partie du dessin. En dessous de 1024 px : un recadrage par bénéfice. */

.gains__head,
.gains__visual,
.gains { grid-column: 1 / -1; }

.gains__visual { display: none; margin: 0; }

/* Mobile : petits schémas, ils accompagnent la lecture sans la retarder */
.gains {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--gap-head-content);
}
.gain { display: grid; gap: var(--space-4); }
.gain__visual { max-width: 13rem; }

/* Accent Ambre au-dessus du titre (§7.4 : trait 24 × 3 px) */
.gain__title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.gain__title::before {
  content: "";
  display: block;
  width: var(--accent-rule);
  height: var(--underline-accent);
  margin-bottom: var(--space-4);
  background: var(--color-ambre);
}
.gain__title + p { margin-top: var(--space-4); }

/* Tablette et petit desktop : recadrage à gauche, texte à droite */
@media (min-width: 640px) and (max-width: 1279px) {
  .gain {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: center;
  }
  .gain__visual { grid-column: 1 / span 3; }
  .gain__content { grid-column: 4 / span 5; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .gain__visual { grid-column: 1 / span 4; }
  .gain__content { grid-column: 6 / span 7; }
}

@media (min-width: 1024px) {
  .gains__head { grid-column: 1 / span 9; }
}

/* Dès 1280 px : le dessin complet, trois colonnes dessous. Titres au palier H4
   (titre de carte) : en H3, ils passaient sur trois lignes dans une colonne. */
@media (min-width: 1280px) {
  /* Dessin recadré sur sa hauteur utile et réduit : il accompagne les trois blocs
     sans prendre le pas sur eux (retour du propriétaire, 22/10/2026) */
  .gains__visual {
    display: block;
    justify-self: center;
    width: min(100%, 52rem);
    margin-top: var(--gap-head-content);
  }
  .gains {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    margin-top: var(--space-7);
  }
  .gain__visual { display: none; }
  .gain__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
  }
}

/* ---------- 04 Projets types : quatre bandeaux Blancs empilés ---------- */
/* Empilés plutôt que trois cartes côte à côte (réflexe exclu, CLAUDE.md §2).
   Titre à gauche, texte à droite dès 1024 px. Grille interne calée sur
   celle de la page, padding horizontal compris. */

.topics__head,
.topics,
.topics__more { grid-column: 1 / -1; }

.topics__intro { margin-top: var(--gap-title-lead); }

.topics {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--gap-head-content);
}
.topic {
  row-gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--stroke-hairline) solid var(--color-line);
}
.topic__title,
.topic__text,
.topic__quote { grid-column: 1 / -1; }
.topic__title { margin: 0; }
/* La parole du dirigeant en Source Serif 4, comme les situations de l'accueil */
.topic__quote {
  margin: 0;
  font-family: var(--font-quote);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  font-optical-sizing: auto;
}
.topic__phrase { display: inline-block; }
.topic__title + * { margin-top: 0; }
.topics__more { margin-top: var(--space-6); }

@media (min-width: 640px) {
  .topic { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .topics__head { grid-column: 1 / span 8; }
  .topics { gap: var(--space-4); }
  .topic { align-items: baseline; }
  .topic__title { grid-column: 1 / span 5; }
  .topic__text,
  .topic__quote { grid-column: 7 / span 6; }
}

/* ---------- 05 Méthode : quatre séquences, texte et schéma alternés ---------- */

.sequences__head,
.sequences { grid-column: 1 / -1; }
.sequences__intro { margin-top: var(--gap-title-lead); }

.sequences {
  margin-top: var(--gap-head-content);
  border-bottom: var(--stroke-hairline) solid var(--color-line);
}
.sequence {
  row-gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--color-line);
}
.sequence__text,
.sequence__visual { grid-column: 1 / -1; }
/* Schémas recadrés sur leur dessin ; plafonnés sur mobile pour raccourcir la page */
.sequence__visual { margin: 0; max-width: 18rem; }

@media (min-width: 640px) {
  .sequence { padding-block: var(--space-7); }
  .sequence__visual { max-width: 30rem; }
}

.sequence__num {
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sequence__title { margin: var(--space-3) 0 0; }
.sequence__title + p { margin-top: var(--space-4); }
.sequence__text p + p { margin-top: var(--space-3); }
.sequence__text .sequence__label {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--stroke-hairline) solid var(--color-line);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}
.sequence__text .sequence__result { margin-top: var(--space-2); font-weight: 600; }

/* Moitié-moitié sous 1440 px (en 5 colonnes, les titres passaient sur trois lignes),
   puis texte 5 colonnes et schéma 6 colonnes */
@media (min-width: 1024px) {
  .sequences__head { grid-column: 1 / span 7; }
  .sequence { padding-block: var(--space-8); }
  .sequence__text { grid-column: 1 / span 6; grid-row: 1; }
  .sequence__visual { grid-column: 7 / span 6; grid-row: 1; max-width: none; }
  .sequence--reverse .sequence__text { grid-column: 7 / span 6; }
  .sequence--reverse .sequence__visual { grid-column: 1 / span 6; }
}
@media (min-width: 1440px) {
  .sequence__text { grid-column: 1 / span 5; }
  .sequence--reverse .sequence__text { grid-column: 8 / span 5; }
}

/* ---------- 06 Contact : lien sur l'aplat Ambre ---------- */
/* Le survol Ambre d'un lien (§2.3) disparaîtrait sur l'Ambre : il reste en Encre. */
.section--amber :is(p, li) a:not([class]):hover { text-decoration-color: var(--color-encre); }

/* ================================================================== */
/* ============ Page Améliorer votre organisation =================== */
/* ================================================================== */
/* Même structure que Faire aboutir un projet : la page reprend ses classes de
   mise en page (.project-hero, .signals, .gains, .topics, .sequences) et le
   socle .project-viz, joué par main.js. Seules les séquences des schémas,
   fournis par le propriétaire le 22/10/2026, lui sont propres. */

/* Hero : les liens se tracent, une équipe arrive, le point de passation ressort */
.project-viz--org-hero :is(.oh-new, .oh-point, .oh-halo) { transform-box: fill-box; transform-origin: center; }
.project-viz--org-hero.is-playing .oh-l1    { animation: pv-draw 700ms var(--ease-draw) both; }
.project-viz--org-hero.is-playing .oh-l2    { animation: pv-draw 650ms var(--ease-draw) 250ms both; }
.project-viz--org-hero.is-playing .oh-l3    { animation: pv-draw 800ms var(--ease-draw) 500ms both; }
.project-viz--org-hero.is-playing .oh-new   { animation: pv-rise 500ms var(--ease-out) 1350ms both; }
.project-viz--org-hero.is-playing .oh-l4    { animation: pv-draw 700ms var(--ease-draw) 1850ms both; }
.project-viz--org-hero.is-playing .oh-l5    { animation: pv-draw 800ms var(--ease-draw) 2050ms both; }
.project-viz--org-hero.is-playing .oh-point { animation: pv-pop 320ms var(--ease-out) 2850ms both; }
.project-viz--org-hero.is-playing .oh-halo  { animation: oh-halo 650ms var(--ease-draw) 3200ms both; }
@keyframes oh-halo { 0% { transform: none; stroke-opacity: 0.45; } 45% { transform: scale(1.25); stroke-opacity: 0.9; } 100% { transform: none; stroke-opacity: 0.45; } }

/* Bénéfices : même principe de dessin complet et de recadrages que la page projet */
.project-viz--org-gains :is(.ob-seal, .ob-doc, .ob-procedure) { transform-box: fill-box; transform-origin: center; }
.project-viz--org-handover { --shift: 1300ms; }
.project-viz--org-continuity { --shift: 3050ms; }
.project-viz--org-gains.is-playing .ob-seal       { animation: pv-pop 320ms var(--ease-out) both; }
.project-viz--org-gains.is-playing .ob-seal-check { animation: pv-draw 600ms var(--ease-out) 300ms both; }
.project-viz--org-gains.is-playing .ob-transfer   { animation: pv-draw 800ms var(--ease-draw) calc(1300ms - var(--shift, 0ms)) both; }
.project-viz--org-gains.is-playing .ob-arrow      { animation: pv-draw 220ms var(--ease-out) calc(2080ms - var(--shift, 0ms)) both; }
.project-viz--org-gains.is-playing .ob-doc        { animation: ob-glide 750ms var(--ease-draw) calc(2150ms - var(--shift, 0ms)) both; }
.project-viz--org-gains.is-playing .ob-procedure  { animation: pv-rise 550ms var(--ease-out) calc(3050ms - var(--shift, 0ms)) both; }
.project-viz--org-gains.is-playing .ob-link1      { animation: pv-draw 550ms var(--ease-draw) calc(3500ms - var(--shift, 0ms)) both; }
.project-viz--org-gains.is-playing .ob-link2      { animation: pv-draw 550ms var(--ease-draw) calc(3620ms - var(--shift, 0ms)) both; }
.project-viz--org-gains.is-playing .ob-tick1      { animation: pv-draw 300ms var(--ease-out) calc(4200ms - var(--shift, 0ms)) both; }
.project-viz--org-gains.is-playing .ob-tick2      { animation: pv-draw 300ms var(--ease-out) calc(4380ms - var(--shift, 0ms)) both; }
@keyframes ob-glide { 0% { transform: none; } 55% { transform: translate(6px, 1px); } 100% { transform: none; } }

/* Méthode 01 : les circulations, puis le retour inutile passe en Ambre */
.project-viz--o1 [class^="o1-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--o1.is-playing .o1-flow1       { animation: pv-draw 600ms var(--ease-draw) both; }
.project-viz--o1.is-playing .o1-dot1        { animation: pv-pop 220ms var(--ease-out) 330ms both; }
.project-viz--o1.is-playing .o1-flow2       { animation: pv-draw 600ms var(--ease-draw) 200ms both; }
.project-viz--o1.is-playing .o1-dot2        { animation: pv-pop 220ms var(--ease-out) 530ms both; }
.project-viz--o1.is-playing .o1-flow3       { animation: pv-draw 600ms var(--ease-draw) 400ms both; }
.project-viz--o1.is-playing .o1-dot3        { animation: pv-pop 220ms var(--ease-out) 730ms both; }
.project-viz--o1.is-playing .o1-flow4       { animation: pv-draw 600ms var(--ease-draw) 600ms both; }
.project-viz--o1.is-playing .o1-dot4        { animation: pv-pop 220ms var(--ease-out) 930ms both; }
.project-viz--o1.is-playing .o1-return      { animation: pv-draw 700ms var(--ease-draw) 1300ms both, o1-tint 450ms var(--ease-out) 2100ms both; }
.project-viz--o1.is-playing .o1-return-head { animation: pv-draw 200ms var(--ease-out) 1980ms both, o1-tint 450ms var(--ease-out) 2100ms both; }
.project-viz--o1.is-playing .o1-issue       { animation: pv-pop 320ms var(--ease-out) 2650ms both; }
@keyframes o1-tint { from { stroke: var(--color-encre); } to { stroke: var(--color-ambre); } }

/* Méthode 02 : la matrice se remplit, chaque activité reçoit son responsable */
.project-viz--o2 [class^="o2-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--o2.is-playing .o2-part1         { animation: pv-pop 260ms var(--ease-out) both; }
.project-viz--o2.is-playing .o2-part2         { animation: pv-pop 260ms var(--ease-out) 120ms both; }
.project-viz--o2.is-playing .o2-part3         { animation: pv-pop 260ms var(--ease-out) 240ms both; }
.project-viz--o2.is-playing .o2-part4         { animation: pv-pop 260ms var(--ease-out) 360ms both; }
.project-viz--o2.is-playing .o2-part5         { animation: pv-pop 260ms var(--ease-out) 480ms both; }
.project-viz--o2.is-playing .o2-lead1         { animation: pv-pop 320ms var(--ease-out) 1100ms both; }
.project-viz--o2.is-playing .o2-lead2         { animation: pv-pop 320ms var(--ease-out) 1420ms both; }
.project-viz--o2.is-playing .o2-lead3         { animation: pv-pop 320ms var(--ease-out) 1740ms both; }
.project-viz--o2.is-playing .o2-connector     { animation: pv-draw 700ms var(--ease-draw) 2150ms both; }
.project-viz--o2.is-playing .o2-connector-dot { animation: pv-pop 220ms var(--ease-out) 2450ms both; }
.project-viz--o2.is-playing .o2-check         { animation: pv-draw 380ms var(--ease-out) 3050ms both; }

/* Méthode 03 : le dossier fait le détour, puis le chemin direct s'ouvre.
   Sans animation, le dossier est posé à l'arrivée. */
.project-viz--o3 [class^="o3-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--o3 .o3-loop { opacity: 0.2; }
.project-viz--o3 .o3-doc { transform: translate(91px, 251px); }
.project-viz--o3.is-playing .o3-ab          { animation: pv-draw 700ms var(--ease-draw) both; }
.project-viz--o3.is-playing .o3-loop        { animation: o3-loop 1500ms var(--ease-out) 1550ms both; }
.project-viz--o3.is-playing .o3-direct      { animation: pv-draw 800ms var(--ease-draw) 2950ms both; }
.project-viz--o3.is-playing .o3-direct-head { animation: pv-draw 220ms var(--ease-out) 3700ms both; }
.project-viz--o3.is-playing .o3-doc         { animation: o3-route 3900ms var(--ease-draw) both; }
@keyframes o3-loop { 0% { opacity: 0; } 30% { opacity: 1; } 62% { opacity: 1; } 100% { opacity: 0.2; } }
@keyframes o3-route {
  0%, 18%  { transform: translate(-90px, 50px); }
  38%, 76% { transform: translate(88px, 34px); }
  84%      { transform: translate(169px, 123px); }
  92%      { transform: translate(146px, 202px); }
  100%     { transform: translate(91px, 251px); }
}

/* Méthode 04 : la procédure se valide, les deux équipes s'y rattachent */
.project-viz--o4 [class^="o4-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--o4.is-playing .o4-procedure  { animation: pv-rise 600ms var(--ease-out) both; }
.project-viz--o4.is-playing .o4-step1,
.project-viz--o4.is-playing .o4-mark1      { animation: pv-light 380ms var(--ease-out) 650ms both; }
.project-viz--o4.is-playing .o4-step2,
.project-viz--o4.is-playing .o4-mark2      { animation: pv-light 380ms var(--ease-out) 900ms both; }
.project-viz--o4.is-playing .o4-step3,
.project-viz--o4.is-playing .o4-mark3      { animation: pv-light 380ms var(--ease-out) 1150ms both; }
.project-viz--o4.is-playing .o4-seal       { animation: pv-pop 320ms var(--ease-out) 1600ms both; }
.project-viz--o4.is-playing .o4-seal-check { animation: pv-draw 420ms var(--ease-out) 1800ms both; }
.project-viz--o4.is-playing .o4-link1      { animation: pv-draw 650ms var(--ease-draw) 2250ms both; }
.project-viz--o4.is-playing .o4-link2      { animation: pv-draw 650ms var(--ease-draw) 2380ms both; }
.project-viz--o4.is-playing .o4-dot1       { animation: pv-pop 220ms var(--ease-out) 2550ms both; }
.project-viz--o4.is-playing .o4-dot2       { animation: pv-pop 220ms var(--ease-out) 2680ms both; }
.project-viz--o4.is-playing .o4-accent1    { animation: o4-accent 450ms var(--ease-out) 2950ms both; }
.project-viz--o4.is-playing .o4-accent2    { animation: o4-accent 450ms var(--ease-out) 3100ms both; }
@keyframes o4-accent { from { fill: var(--color-bg-alt); } to { fill: var(--color-ambre); } }

/* ================================================================== */
/* ============ Page Mener à bien votre transformation ============== */
/* ================================================================== */
/* Même structure et mêmes classes de mise en page que les deux pages précédentes.
   Schémas fournis par le propriétaire le 22/10/2026 ; seules leurs séquences sont ici. */

/* Hero : la nouvelle fiche arrive, la transition se trace, les actions s'activent
   une à une, la dernière se coche et l'ancienne fiche s'efface en partie */
.project-viz--tr-hero :is(.xh-new, .xh-status) { transform-box: fill-box; transform-origin: center; }
.project-viz--tr-hero .xh-old { opacity: 0.6; }
.project-viz--tr-hero.is-playing .xh-new     { animation: pv-rise 600ms var(--ease-out) 200ms both; }
.project-viz--tr-hero.is-playing .xh-line    { animation: pv-draw 700ms var(--ease-draw) 800ms both; }
.project-viz--tr-hero.is-playing .xh-head    { animation: pv-draw 200ms var(--ease-out) 1450ms both; }
.project-viz--tr-hero.is-playing .xh-row1    { animation: pv-dim 420ms var(--ease-out) 1650ms both; }
.project-viz--tr-hero.is-playing .xh-status1 { animation: pv-pop 320ms var(--ease-out) 1700ms both; }
.project-viz--tr-hero.is-playing .xh-row2    { animation: pv-dim 420ms var(--ease-out) 1980ms both; }
.project-viz--tr-hero.is-playing .xh-status2 { animation: pv-pop 320ms var(--ease-out) 2030ms both; }
.project-viz--tr-hero.is-playing .xh-row3    { animation: pv-dim 420ms var(--ease-out) 2310ms both; }
.project-viz--tr-hero.is-playing .xh-status3 { animation: pv-pop 320ms var(--ease-out) 2360ms both; }
.project-viz--tr-hero.is-playing .xh-ring3   { animation: pv-outline 380ms var(--ease-out) 2750ms both; }
.project-viz--tr-hero.is-playing .xh-check3  { animation: pv-draw 360ms var(--ease-out) 2850ms both; }
.project-viz--tr-hero.is-playing .xh-old     { animation: xh-recede 600ms var(--ease-out) 2800ms both; }
@keyframes xh-recede { from { opacity: 1; } to { opacity: 0.6; } }

/* Bénéfices : besoins cochés, étapes du déploiement, usage du quotidien.
   --shift avance la séquence d'un recadrage pour qu'il démarre sans attendre. */
.project-viz--tr-gains [class^="xb-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--tr-rollout { --shift: 1600ms; }
.project-viz--tr-adoption { --shift: 3100ms; }
.project-viz--tr-gains.is-playing .xb-req1      { animation: pv-pop 300ms var(--ease-out) 100ms both; }
.project-viz--tr-gains.is-playing .xb-req1-tick { animation: pv-draw 260ms var(--ease-out) 300ms both; }
.project-viz--tr-gains.is-playing .xb-req2      { animation: pv-pop 300ms var(--ease-out) 450ms both; }
.project-viz--tr-gains.is-playing .xb-req2-tick { animation: pv-draw 260ms var(--ease-out) 650ms both; }
.project-viz--tr-gains.is-playing .xb-fit       { animation: pv-draw 600ms var(--ease-draw) 950ms both; }
.project-viz--tr-gains.is-playing .xb-stage1    { animation: pv-dim 380ms var(--ease-out) calc(1700ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-cp1       { animation: pv-pop 320ms var(--ease-out) calc(1850ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-stage2    { animation: pv-dim 380ms var(--ease-out) calc(2150ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-cp2       { animation: pv-pop 320ms var(--ease-out) calc(2300ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-stage3    { animation: pv-dim 380ms var(--ease-out) calc(2600ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-cp3       { animation: pv-pop 320ms var(--ease-out) calc(2750ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-incoming  { animation: xb-arrive 700ms var(--ease-draw) calc(3200ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-in-line   { animation: pv-draw 420ms var(--ease-draw) calc(3700ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-in-head   { animation: pv-draw 160ms var(--ease-out) calc(4080ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-activity  { animation: pv-dim 400ms var(--ease-out) calc(3950ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-act-done  { animation: pv-pop 320ms var(--ease-out) calc(4300ms - var(--shift, 0ms)) both; }
.project-viz--tr-gains.is-playing .xb-act-tick  { animation: pv-draw 260ms var(--ease-out) calc(4480ms - var(--shift, 0ms)) both; }
@keyframes xb-arrive { from { opacity: 0.55; transform: translate(-16px, 10px); } to { opacity: 1; transform: none; } }

/* Méthode 01 : les sources alimentent la fiche, la loupe trouve la difficulté */
.project-viz--x1 [class^="x1-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--x1.is-playing .x1-link       { animation: pv-draw 750ms var(--ease-draw) 250ms both; }
.project-viz--x1.is-playing .x1-link-dot   { animation: pv-pop 240ms var(--ease-out) 600ms both; }
.project-viz--x1.is-playing .x1-lens       { animation: x1-approach 800ms var(--ease-draw) 1000ms both; }
.project-viz--x1.is-playing .x1-row        { animation: x1-row 450ms var(--ease-out) 1750ms both; }
.project-viz--x1.is-playing .x1-row-ring   { animation: pv-outline 450ms var(--ease-out) 1750ms both; }
.project-viz--x1.is-playing .x1-zoom-band  { animation: x1-band 450ms var(--ease-out) 1750ms both; }
.project-viz--x1.is-playing .x1-zoom-lines { animation: x1-lines 450ms var(--ease-out) 1750ms both; }
.project-viz--x1.is-playing .x1-zoom-alert { animation: pv-pop 320ms var(--ease-out) 1950ms both; }
.project-viz--x1.is-playing .x1-req1       { animation: pv-pop 300ms var(--ease-out) 2550ms both; }
.project-viz--x1.is-playing .x1-req2       { animation: pv-pop 300ms var(--ease-out) 2900ms both; }
@keyframes x1-approach { from { transform: translate(9px, 8px); } to { transform: none; } }
@keyframes x1-row   { from { fill: var(--color-ivoire); stroke: var(--color-ivoire); } to { fill: var(--color-bg-alt); stroke: var(--color-ambre); } }
@keyframes x1-band  { from { fill: var(--color-ivoire); } to { fill: var(--color-bg-alt); } }
@keyframes x1-lines { from { stroke: var(--color-ivoire); } to { stroke: var(--color-ambre); } }

/* Méthode 02 : les besoins validés dessinent le futur fonctionnement, une solution est retenue */
.project-viz--x2 [class^="x2-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--x2.is-playing .x2-req1       { animation: pv-pop 300ms var(--ease-out) 150ms both; }
.project-viz--x2.is-playing .x2-req2       { animation: pv-pop 300ms var(--ease-out) 500ms both; }
.project-viz--x2.is-playing .x2-line-dot   { animation: pv-pop 220ms var(--ease-out) 950ms both; }
.project-viz--x2.is-playing .x2-line       { animation: pv-draw 700ms var(--ease-draw) 1000ms both; }
.project-viz--x2.is-playing .x2-step1      { animation: pv-light 420ms var(--ease-out) 1750ms both; }
.project-viz--x2.is-playing .x2-link1      { animation: pv-draw 320ms var(--ease-out) 1950ms both; }
.project-viz--x2.is-playing .x2-step2      { animation: pv-light 420ms var(--ease-out) 2100ms both; }
.project-viz--x2.is-playing .x2-link2      { animation: pv-draw 320ms var(--ease-out) 2300ms both; }
.project-viz--x2.is-playing .x2-step3      { animation: pv-light 420ms var(--ease-out) 2450ms both; }
.project-viz--x2.is-playing .x2-card       { animation: pv-fade 550ms var(--ease-out) 2850ms both; }
.project-viz--x2.is-playing .x2-pick-frame { animation: pv-fade 400ms var(--ease-out) 3350ms both; }
.project-viz--x2.is-playing .x2-pick       { animation: pv-pop 300ms var(--ease-out) 3600ms both; }

/* Méthode 03 : le cas réel traverse les étapes, la deuxième s'ajuste, le test se valide */
.project-viz--x3 [class^="x3-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--x3.is-playing .x3-case        { animation: x3-case 750ms var(--ease-draw) both; }
.project-viz--x3.is-playing .x3-trace1      { animation: pv-draw 300ms var(--ease-out) 750ms both; }
.project-viz--x3.is-playing .x3-trace2      { animation: pv-draw 320ms var(--ease-out) 1050ms both; }
.project-viz--x3.is-playing .x3-stage2      { animation: x3-from-ink 350ms var(--ease-out) 1350ms both; }
.project-viz--x3.is-playing .x3-stage2-ring { animation: pv-outline 350ms var(--ease-out) 1350ms both; }
.project-viz--x3.is-playing .x3-warning     { animation: pv-pop 340ms var(--ease-out) 1500ms both; }
.project-viz--x3.is-playing .x3-adjust      { animation: pv-draw 450ms var(--ease-draw) 2150ms both; }
.project-viz--x3.is-playing .x3-adjust-head { animation: pv-draw 160ms var(--ease-out) 2560ms both; }
.project-viz--x3.is-playing .x3-trace3      { animation: pv-draw 320ms var(--ease-out) 2900ms both; }
.project-viz--x3.is-playing .x3-trace4      { animation: pv-draw 300ms var(--ease-out) 3250ms both; }
.project-viz--x3.is-playing .x3-box-tick    { animation: pv-draw 300ms var(--ease-out) 3600ms both; }
.project-viz--x3.is-playing .x3-status,
.project-viz--x3.is-playing .x3-status-ring { animation: pv-outline 350ms var(--ease-out) 3850ms both; }
.project-viz--x3.is-playing .x3-valid       { animation: pv-pop 340ms var(--ease-out) 4100ms both; }
.project-viz--x3.is-playing .x3-valid-tick  { animation: pv-draw 380ms var(--ease-out) 4350ms both; }
@keyframes x3-case     { from { transform: translateX(-8px); } to { transform: none; } }
@keyframes x3-from-ink { from { stroke: var(--color-encre); } to { stroke: var(--color-ambre); } }

/* Méthode 04 : les activités se cochent, la note de retour est traitée.
   Sans animation, la difficulté est résolue : seule la coche reste. */
.project-viz--x4 [class^="x4-"] { transform-box: fill-box; transform-origin: center; }
.project-viz--x4 :is(.x4-issue-bar, .x4-issue-dot) { opacity: 0; }
.project-viz--x4.is-playing .x4-done1       { animation: pv-pop 300ms var(--ease-out) 150ms both; }
.project-viz--x4.is-playing .x4-tick1       { animation: pv-draw 280ms var(--ease-out) 350ms both; }
.project-viz--x4.is-playing .x4-done2       { animation: pv-pop 300ms var(--ease-out) 550ms both; }
.project-viz--x4.is-playing .x4-tick2       { animation: pv-draw 280ms var(--ease-out) 750ms both; }
.project-viz--x4.is-playing .x4-active      { animation: pv-light 450ms var(--ease-out) 1000ms both; }
.project-viz--x4.is-playing .x4-active-mark { animation: pv-pop 320ms var(--ease-out) 1150ms both; }
.project-viz--x4.is-playing .x4-note        { animation: pv-rise 550ms var(--ease-out) 1650ms both; }
.project-viz--x4.is-playing .x4-link-start  { animation: pv-pop 220ms var(--ease-out) 2100ms both; }
.project-viz--x4.is-playing .x4-link        { animation: pv-draw 650ms var(--ease-draw) 2150ms both; }
.project-viz--x4.is-playing .x4-link-end    { animation: pv-pop 240ms var(--ease-out) 2750ms both; }
.project-viz--x4.is-playing .x4-issue-bar,
.project-viz--x4.is-playing .x4-issue-dot   { animation: pv-out 260ms var(--ease-out) 3100ms both; }
.project-viz--x4.is-playing .x4-resolved    { animation: pv-draw 380ms var(--ease-out) 3400ms both; }