/* ============================================================
   Majors Brain — site « L'adoption progressive » (en ligne depuis le 21/09/2026)
   Additions au design system « Le grand livre » (css/brain.css).
   Rien n'est redéfini ici qui existe déjà : on n'ajoute que les
   pièces propres à cette version — la barre de travail, le fil
   du héro, les trois portes, le curseur de trajectoire, le
   bordereau de mise en service et le préparateur de diagnostic.
   Mêmes encres, même laiton, même violet rationné.
   ============================================================ */

:root {
  --bar-h: 0px;
}

/* Le header et le héro descendent de la hauteur de la barre. */
.site-header {
  top: var(--bar-h);
}

.hero {
  padding-top: calc(132px + var(--bar-h));
}

/* Accueil : la colonne de texte part du haut, au niveau du panneau du fil,
   au lieu de flotter au milieu de sa hauteur. */
@media (min-width:1021px) {
  .hero-grid {
    align-items: start;
    /* « Votre cabinet est dispersé ? » doit tenir sur une seule ligne :
       la colonne de texte prend la place nécessaire, le panneau du fil
       s'accommode d'une largeur plus étroite (il tient déjà à 1021 px). */
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  }

  .hero-grid > .hero-inner {
    max-width: 680px;
  }

  .hero-grid > .hero-inner {
    padding-top: 36px;
  }
}

@media (max-width:1020px) {
  .main-nav {
    top: calc(74px + var(--bar-h));
  }
}

@media (max-width:760px) {
  .hero {
    padding-top: calc(112px + var(--bar-h));
  }
}

/* Sur téléphone aussi, « Votre cabinet est dispersé ? » tient sur une ligne. */
@media (max-width:560px) {
  .hero-inner h1 {
    font-size: min(8vw, 2.3rem);
  }
}

/* Les ancres ne doivent pas passer sous l'en-tête fixe. */
section[id],
div[id] {
  scroll-margin-top: calc(90px + var(--bar-h));
}

/* ---------- Le fil (signature du héro) ----------
   Le registre de la page d'accueil montrait la mémoire qui s'écrit.
   Ici la thèse est autre : rien ne bouge de place, une seule chose
   est neuve — le fil qui relie. Les sources gardent leur nom et leur
   position ; seul le trait de laiton est nouveau. */
.fil {
  background: var(--card);
  border: 1px solid rgba(233, 238, 244, .16);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.fil-head,
.fil-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  background: var(--card-hi);
  border-bottom: 1px solid var(--line);
}

.fil-foot {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  background: var(--card-soft);
  display: block;
  padding: 14px 20px 16px;
}

.fil-head .t {
  font-family: var(--font-util);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-soft);
}

.fil-head .st {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}

.fil-head .st::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
}

.fil-foot .lbl {
  display: block;
  font-size: .86rem;
  color: var(--txt-soft);
}

.fil-foot .mention {
  display: block;
  margin-top: 7px;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.fil-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 56px;
  padding: 26px 20px 28px;
}

.fil-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.fil-src {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  z-index: 1;
}

.fil-src .src {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 8px 12px;
  font-size: .8rem;
  color: var(--txt-muted);
  transition: color .35s, border-color .35s, background .35s;
}

.fil-src .src.lit {
  color: var(--txt);
  border-left-color: var(--brass);
  background: var(--brass-wash);
}

.fil-core {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.fil-core img {
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
}

.fc-name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--txt);
}

.fc-state {
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin: 4px 0 14px;
  transition: color .4s;
}

.fil.done .fc-state {
  color: var(--brass);
}

.fc-out {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.fc-out li {
  position: relative;
  padding-left: 17px;
  font-size: .84rem;
  color: var(--txt-soft);
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .5s, transform .5s;
}

.fc-out li.in {
  opacity: 1;
  transform: none;
}

.fc-out li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 16px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--brass);
  border-bottom: 1.6px solid var(--brass);
  transform: rotate(-45deg);
}

@media (max-width:560px) {
  .fil-body {
    grid-template-columns: 1fr;
  }

  .fil-svg {
    display: none;
  }
}

/* ---------- Les trois portes ----------
   Pas trois cartes en grille : trois entrées de registre, numérotées,
   qu'on lit ligne à ligne comme un sommaire. */
.doors {
  border-top: 1px solid var(--line);
}

.door {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s;
}

.door:hover {
  background: var(--card-soft);
}

.door-mark {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.door-n {
  font-family: var(--font-util);
  font-size: 1.5rem;
  color: var(--brass);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.door-k {
  font-family: var(--font-util);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.door h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.32rem;
  font-variation-settings: "opsz" 30;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.door-side p {
  font-size: .94rem;
}

.door-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-util);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--brass-soft);
  padding-bottom: 3px;
  transition: border-color .2s;
}

.door-link:hover {
  border-color: var(--brass);
}

/* La flèche en police de texte : la mono chargée ne la dessine pas. */
.door-link .arr {
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1;
  transition: transform .2s;
}

.door-link:hover .arr {
  transform: translateX(3px);
}

@media (max-width:900px) {
  .door {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .door-mark {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }
}

/* ---------- Le curseur de trajectoire ----------
   La promesse « à votre rythme » ne se démontre pas par une phrase :
   elle se démontre en donnant la main. Six étapes, un curseur, et à
   chaque position ce que le cabinet gagne — et ce qui ne change pas. */
.traj {
  margin-top: 8px;
}

.traj-hint {
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.traj-hint::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.traj-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card-soft);
}

.traj-step {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line-soft);
  padding: 18px 14px 20px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--txt-muted);
  transition: background .2s, color .2s;
  position: relative;
}

.traj-step:first-child {
  border-left: 0;
}

.traj-step .tn {
  display: block;
  font-family: var(--font-util);
  font-size: .64rem;
  letter-spacing: .14em;
  color: var(--txt-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 26px;
}

.traj-step .tl {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  color: inherit;
  letter-spacing: -.005em;
}

/* La ligne de conduite : le rail passe derrière les pastilles. */
.traj-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 1px;
  background: var(--line);
}

.traj-step::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 39px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink);
  transition: background .25s, border-color .25s, box-shadow .25s;
}

.traj-step.reached {
  color: var(--txt-soft);
}

.traj-step.reached::before {
  background: rgba(201, 162, 39, .55);
}

.traj-step.reached::after {
  border-color: var(--brass);
  background: var(--brass-dim);
}

.traj-step[aria-checked="true"] {
  background: var(--brass-wash);
  color: var(--txt);
}

.traj-step[aria-checked="true"]::after {
  background: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .16);
}

.traj-step[aria-checked="true"] .tn {
  color: var(--brass);
}

.traj-step:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

.traj-panel {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--card);
  padding: 30px 30px 28px;
}

.traj-card {
  display: none;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 34px;
}

.traj-card.on {
  display: grid;
}

.traj-card h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.28rem;
  font-variation-settings: "opsz" 30;
  margin-bottom: 10px;
}

.traj-card p {
  font-size: .95rem;
}

.traj-meta {
  border-left: 1px solid var(--line);
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.traj-meta dt {
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 6px;
}

.traj-meta dd {
  font-size: .88rem;
  color: var(--txt-soft);
}

.traj-meta dd.brass {
  color: var(--brass);
}

.traj-note {
  margin-top: 22px;
  font-size: .89rem;
  color: var(--txt-muted);
  max-width: 62em;
}

@media (max-width:900px) {
  .traj-rail {
    grid-template-columns: repeat(3, 1fr);
  }

  .traj-step:nth-child(4) {
    border-left: 0;
  }

  .traj-step:nth-child(n+4) {
    border-top: 1px solid var(--line-soft);
  }

  .traj-card {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .traj-meta {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 20px;
  }
}

@media (max-width:560px) {
  .traj-rail {
    grid-template-columns: repeat(2, 1fr);
  }

  .traj-step:nth-child(odd) {
    border-left: 0;
  }

  .traj-step:nth-child(n+3) {
    border-top: 1px solid var(--line-soft);
  }

  .traj-panel {
    padding: 24px 20px;
  }
}

/* ---------- Tableau des profondeurs ---------- */
.compare td.amount {
  font-family: var(--font-util);
  font-size: 1rem;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.compare td.amount small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--txt-muted);
  letter-spacing: 0;
}

.compare td.span-cell {
  color: var(--txt-soft);
}

.compare thead th .th-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt-muted);
}

.compare td.cta-cell {
  padding-top: 22px;
  padding-bottom: 24px;
}

.compare td.cta-cell .btn {
  width: 100%;
  justify-content: center;
}

.compare tbody th {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--txt-muted);
  font-size: .86rem;
  width: 22%;
}

/* Le tableau ne se lit pas sur un téléphone : sous 760px il cède la
   place à trois blocs empilés, même contenu, lecture verticale. */
.offer-stack {
  display: none;
}

.offer-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-soft);
  padding: 24px 22px 22px;
  margin-bottom: 14px;
}

.offer-card h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.24rem;
  font-variation-settings: "opsz" 28;
}

.offer-card .oc-for {
  display: block;
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin: 6px 0 16px;
}

.offer-card .oc-price {
  font-family: var(--font-util);
  font-size: 1.1rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}

.offer-card .oc-price small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--txt-muted);
}

.offer-card dl {
  margin-bottom: 20px;
}

.offer-card dt {
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 5px;
}

.offer-card dd {
  font-size: .88rem;
  color: var(--txt-soft);
  margin-bottom: 14px;
}

.offer-card .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width:760px) {
  .compare-wrap {
    display: none;
  }

  .offer-stack {
    display: block;
  }
}

/* ---------- Bordereau de mise en service ----------
   Trois lignes chiffrées, alignées comme un devis — pas trois
   cartes qui se disputent le regard. */
.bord {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-soft);
  overflow: hidden;
}

.bord-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 210px;
  gap: 28px;
  align-items: center;
  padding: 26px 28px;
  border-bottom: 1px solid var(--line-soft);
}

.bord-row:last-child {
  border-bottom: 0;
}

.bord-row h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.18rem;
  font-variation-settings: "opsz" 28;
}

.bord-row p {
  font-size: .92rem;
}

.bord-amount {
  text-align: right;
  font-family: var(--font-util);
  font-size: 1.22rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Le montant n'est pas publié : le report au chiffrage prend sa place,
   dans le même alignement, sans chercher à ressembler à un prix. */
.bord-amount.soon {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .005em;
  color: var(--brass);
}

.bord-amount small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt-muted);
  white-space: normal;
  line-height: 1.5;
}

@media (max-width:760px) {
  .bord-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px;
  }

  .bord-amount {
    text-align: left;
  }
}

/* ---------- Diagnostic ---------- */
.diag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.diag-q {
  list-style: none;
  counter-reset: dq;
  border-top: 1px solid var(--line);
  margin-top: 28px;
}

.diag-q li {
  counter-increment: dq;
  position: relative;
  padding: 14px 0 14px 46px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .95rem;
  color: var(--txt);
}

.diag-q li::before {
  content: counter(dq, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  font-family: var(--font-util);
  font-size: .68rem;
  color: var(--brass);
  letter-spacing: .1em;
}

.prep {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-soft);
  padding: 28px 28px 26px;
}

.prep h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.prep>p {
  font-size: .88rem;
  margin-bottom: 20px;
}

.prep fieldset {
  border: 0;
  margin-bottom: 20px;
}

.prep legend {
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 12px;
  padding: 0;
}

.chips-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips-pick label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 13px;
  font-size: .84rem;
  color: var(--txt-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}

.chips-pick label:hover {
  border-color: var(--brass-soft);
}

.chips-pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chips-pick .mark {
  width: 11px;
  height: 11px;
  border: 1px solid var(--line);
  border-radius: 1px;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}

.chips-pick input[type="radio"]+.mark {
  border-radius: 50%;
}

.chips-pick label:has(input:checked) {
  border-color: var(--brass-soft);
  background: var(--brass-wash);
  color: var(--txt);
}

.chips-pick label:has(input:checked) .mark {
  background: var(--brass);
  border-color: var(--brass);
}

.chips-pick label:has(input:focus-visible) {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.prep textarea {
  width: 100%;
  min-height: 132px;
  background: var(--ink-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--txt);
  font-family: var(--font-util);
  font-size: .8rem;
  line-height: 1.7;
  padding: 14px 15px;
  resize: vertical;
}

.prep textarea:focus {
  outline: none;
  border-color: var(--brass-soft);
}

.prep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.prep-actions .copied {
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0;
  transition: opacity .25s;
}

.prep-actions .copied.on {
  opacity: 1;
}

.prep-note {
  margin-top: 16px;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-muted);
  line-height: 1.7;
}

.prep-legal {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem;
  color: var(--txt-muted);
  line-height: 1.6;
}

@media (max-width:1020px) {
  .diag-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------- La méthode de déploiement ----------
   Neuf étapes dans l'ordre, chacune avec sa contrepartie : ce qu'on
   fait, et ce que ça demande au cabinet. La colonne de droite est là
   pour désamorcer la peur du chantier — c'est elle qui rassure. */
.method {
  list-style: none;
  counter-reset: meth;
  border-top: 1px solid var(--line);
}

.method li {
  counter-increment: meth;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(0, 270px);
  gap: 30px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}

.method li::before {
  content: counter(meth, decimal-leading-zero);
  font-family: var(--font-util);
  font-size: .82rem;
  color: var(--brass);
  letter-spacing: .1em;
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

.method h3 {
  font-size: 1.06rem;
  margin-bottom: 7px;
}

.method p {
  font-size: .93rem;
}

.m-you {
  border-left: 1px solid var(--line);
  padding-left: 22px;
}

.m-you dt {
  font-family: var(--font-util);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 6px;
}

.m-you dd {
  font-size: .86rem;
  color: var(--txt-soft);
}

.method-lead {
  border-left: 1px solid var(--brass-soft);
  padding-left: 18px;
  margin-bottom: 40px;
  max-width: 62em;
}

.method-lead p {
  font-size: .95rem;
}

.bord-intro {
  margin: 64px 0 20px;
}

.bord-intro h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.3rem;
  font-variation-settings: "opsz" 30;
  margin-bottom: 8px;
}

.bord-intro p {
  font-size: .94rem;
  max-width: 62em;
}

@media (max-width:900px) {
  .method li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px 18px;
  }

  .m-you {
    grid-column: 2;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 14px;
  }
}

/* ---------- Exemple concret sous une étape de trajectoire ---------- */
.traj-ex {
  margin-top: 14px;
  padding-left: 15px;
  border-left: 1px solid var(--brass-soft);
  font-size: .88rem;
  color: var(--txt-muted);
}

.traj-ex b {
  font-family: var(--font-util);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 4px;
}

/* ---------- Résultat visible d'une phase de la feuille de route ---------- */
.tl-out {
  display: block;
  margin-top: 7px;
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- Ce que vous repartez avec ---------- */
.deliver {
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 22px 24px 20px;
  margin-top: 30px;
}

.deliver h3 {
  font-size: 1rem;
  margin-bottom: 14px;
}

.deliver .checks li {
  font-size: .9rem;
}

.deliver .checks li b {
  color: var(--txt);
  font-weight: 600;
}

/* ---------- Micro-rassurances sous un bouton ---------- */
.cta-micro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.cta-micro span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cta-micro span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brass);
}

.cta-final .cta-micro {
  justify-content: center;
}

/* ---------- Mentions de bas de section ---------- */
.mention-block {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 1px solid var(--brass-soft);
  font-size: .85rem;
  color: var(--txt-muted);
  max-width: 68em;
}

/* ---------- Parc d'outils existants (feuille de route) ---------- */
.stack-now {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.stack-now span {
  font-family: var(--font-util);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--txt-muted);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 8px 13px;
}

/* ---------- Respect du mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce) {

  .fc-out li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .fil-src .src,
  .traj-step,
  .door {
    transition: none;
  }
}

/* ============================================================
   Page « La méthode » — dix étapes, rien de caché.
   Chaque étape = un texte court + une pièce à l'appui (« extrait
   type ») + une légende en capitales qui dit la règle. La pièce
   montre ce qu'on produit réellement, au lieu de le décrire.
   ============================================================ */

/* ---------- Rail A → Z du héro ---------- */
.az {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
}

.az-end {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: .84rem;
  color: var(--txt-soft);
}

.az-end b {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brass-soft);
  border-radius: var(--r);
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .72rem;
  color: var(--brass);
}

.az-track {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-width: 0;
}

.az-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--brass-soft);
}

.az-track a {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.az-track a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--brass);
  transition: background .2s, transform .2s;
}

.az-track a:hover::after,
.az-track a:focus-visible::after {
  background: var(--brass);
  transform: scale(1.3);
}

.az-track a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 50%;
}

@media (max-width:560px) {
  .az {
    flex-wrap: wrap;
  }

  .az-track {
    order: 3;
    flex-basis: 100%;
  }
}

/* ---------- Une étape ---------- */
section.step {
  padding: 104px 0;
}

.step-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start;
}

.step-n {
  display: block;
  font-family: var(--font-util);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}

.step-text h2 {
  margin-bottom: 18px;
}

.step-text p {
  font-size: 1rem;
}

.step-text p+p {
  margin-top: 12px;
}

.commit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 9px 14px;
  border: 1px solid var(--brass-soft);
  border-radius: var(--r);
  background: var(--brass-wash);
  font-size: .84rem;
  color: var(--txt);
}

.commit::before {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--brass);
  border-bottom: 1.6px solid var(--brass);
  transform: rotate(-45deg) translateY(-2px);
  flex-shrink: 0;
}

.step-text .door-link {
  display: flex;
  width: fit-content;
  margin-top: 22px;
}

@media (max-width:1020px) {
  .step-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width:760px) {
  section.step {
    padding: 72px 0;
  }
}

/* ---------- La pièce à l'appui ---------- */
.exhibit {
  margin: 0;
  background: var(--card);
  border: 1px solid rgba(233, 238, 244, .16);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.ex-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  background: var(--card-hi);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-soft);
}

.ex-tag {
  margin-left: auto;
  color: var(--txt-muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-size: .56rem;
}

.ex-body {
  padding: 22px 20px;
}

.ex-cap {
  display: block;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line);
  background: var(--card-soft);
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.7;
}

/* Liste numérotée sobre, réutilisée dans plusieurs pièces */
.ex-list {
  list-style: none;
  counter-reset: exl;
}

.ex-list li {
  counter-increment: exl;
  display: grid;
  grid-template-columns: 34px 1fr;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .9rem;
  color: var(--txt);
}

.ex-list li:last-child {
  border-bottom: 0;
}

.ex-list li::before {
  content: counter(exl, decimal-leading-zero);
  font-family: var(--font-util);
  font-size: .66rem;
  color: var(--brass);
  padding-top: 3px;
}

/* Carte du cabinet : trois colonnes de flux */
.carte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.carte-col h4 {
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.flux {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 9px 10px;
  margin-bottom: 8px;
}

.flux b {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--txt);
}

.flux span {
  display: block;
  font-size: .74rem;
  color: var(--txt-muted);
  margin-top: 2px;
}

.flux.fr {
  border-left: 2px solid var(--brass);
}

.flux.ok {
  border-left: 2px solid var(--ok);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  font-size: .74rem;
  color: var(--txt-muted);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend i {
  width: 12px;
  height: 2px;
  display: inline-block;
}

.legend .l-fr {
  background: var(--brass);
}

.legend .l-ok {
  background: var(--ok);
}

.legend .l-wait {
  height: 8px !important;
  width: 8px !important;
  border: 1px solid var(--brass);
  border-radius: 50%;
}

@media (max-width:640px) {
  .carte {
    grid-template-columns: 1fr;
  }
}

/* Table des sources */
.srcs {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}

.srcs th {
  text-align: left;
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  padding: 0 10px 10px 0;
  border-bottom: 1px solid var(--line);
}

.srcs td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--txt-soft);
  vertical-align: top;
}

.srcs td:first-child {
  color: var(--txt);
  font-weight: 500;
}

.srcs tr:last-child td {
  border-bottom: 0;
}

.st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: .8rem;
}

.st::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.st.go {
  color: var(--txt);
}

.st.go::before {
  background: var(--brass);
}

.st.wait::before {
  border: 1px solid var(--brass);
}

.st.no {
  color: var(--txt-muted);
}

.st.no::before {
  border: 1px dashed var(--txt-muted);
}

/* Devis type */
.devis {
  display: grid;
  grid-template-columns: 150px 1fr;
}

.devis dt,
.devis dd {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.devis dt {
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  padding-top: 14px;
}

.devis dd {
  font-size: .88rem;
  color: var(--txt);
}

.devis dd.excl {
  color: var(--txt-muted);
  text-decoration: line-through;
  text-decoration-color: var(--line);
}

.devis dd.excl small {
  display: block;
  text-decoration: none;
  font-size: .78rem;
  margin-top: 2px;
}

.devis dd.firm {
  color: var(--brass);
  font-weight: 600;
}

.devis dt:last-of-type,
.devis dd:last-of-type {
  border-bottom: 0;
}

@media (max-width:560px) {
  .devis {
    grid-template-columns: 1fr;
  }

  .devis dt {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* Maintenant / plus tard / pas relié */
.tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tri-col {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 12px;
  background: var(--card-soft);
}

.tri-col.now {
  border-color: var(--brass-soft);
  background: var(--brass-wash);
}

.tri-col h4 {
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 12px;
}

.tri-col.now h4 {
  color: var(--brass);
}

.tri-col span {
  display: block;
  font-size: .82rem;
  color: var(--txt-soft);
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}

.tri-col.now span {
  color: var(--txt);
}

.tri-col.never span {
  color: var(--txt-muted);
}

@media (max-width:560px) {
  .tri {
    grid-template-columns: 1fr;
  }
}

/* Dédoublonnage : trois fiches, une personne */
.merge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.merge-in {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.merge-in div {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 9px 11px;
  font-size: .82rem;
  color: var(--txt-soft);
}

.merge-in small,
.merge-out small {
  display: block;
  font-family: var(--font-util);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-top: 3px;
}

.merge-arrow {
  text-align: center;
  color: var(--brass);
  font-family: var(--font-util);
}

.merge-out {
  border: 1px solid var(--brass-soft);
  border-left: 2px solid var(--brass);
  border-radius: var(--r);
  background: var(--brass-wash);
  padding: 14px 14px;
}

.merge-out b {
  display: block;
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--txt);
}

.merge-out ul {
  list-style: none;
  margin-top: 10px;
}

.merge-out li {
  font-size: .8rem;
  color: var(--txt-soft);
  padding: 4px 0;
  border-top: 1px solid var(--line-soft);
}

@media (max-width:560px) {
  .merge {
    grid-template-columns: 1fr;
  }

  .merge-arrow {
    transform: rotate(90deg);
  }
}

/* Fiche de test : question, réponse, source, verdict */
.tests {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.test {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
}

.test q {
  font-family: var(--font-title);
  font-style: italic;
  font-size: .95rem;
  color: var(--txt);
  quotes: "« " " »";
}

.test .src {
  grid-column: 1;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.test .verdict {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--brass-soft);
  color: var(--brass);
  white-space: nowrap;
}

.test .verdict.redo {
  border-style: dashed;
  border-color: var(--line);
  color: var(--txt-muted);
}

/* Suivi d'adoption */
.adopt li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  list-style: none;
}

.adopt li:last-child {
  border-bottom: 0;
}

.adopt b {
  font-size: .9rem;
  font-weight: 600;
  color: var(--txt);
}

.adopt span {
  grid-column: 1;
  font-size: .8rem;
  color: var(--txt-muted);
}

.adopt em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-style: normal;
  font-family: var(--font-util);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 8px;
}

.adopt em.on {
  color: var(--brass);
  border-color: var(--brass-soft);
}

/* Trajectoire statique avec « vous êtes ici » */
.path {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  padding-top: 26px;
}

.path::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 32px;
  height: 1px;
  background: var(--line);
}

.path div {
  position: relative;
  font-size: .78rem;
  color: var(--txt-muted);
  padding-top: 22px;
}

.path div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink);
}

.path div.done {
  color: var(--txt-soft);
}

.path div.done::before {
  background: var(--brass-dim);
  border-color: var(--brass);
}

.path div.here {
  color: var(--txt);
  font-weight: 600;
}

.path div.here::before {
  background: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .16);
}

.path div.here::after {
  content: "Vous êtes ici";
  position: absolute;
  top: -24px;
  left: 0;
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

.path-note {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .84rem;
  color: var(--txt-soft);
}

@media (max-width:560px) {
  .path {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 34px;
  }

  .path::before {
    display: none;
  }
}

/* Deux copies de la mémoire */
.copies {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.copy {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 16px 14px;
}

.copy.home {
  border-color: var(--brass-soft);
  border-left: 2px solid var(--brass);
}

.copy h4 {
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 8px;
}

.copy.home h4 {
  color: var(--brass);
}

.copy b {
  display: block;
  font-size: .92rem;
  color: var(--txt);
  margin-bottom: 4px;
}

.copy span {
  font-size: .8rem;
  color: var(--txt-muted);
}

.engine {
  margin-top: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: .82rem;
  color: var(--txt-soft);
}

.engine b {
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

@media (max-width:560px) {
  .copies {
    grid-template-columns: 1fr;
  }
}

/* ---------- Une limite, écrite ---------- */
.limite {
  border: 1px solid var(--line);
  border-left: 2px solid var(--txt-muted);
  border-radius: var(--r-lg);
  background: var(--card-soft);
  padding: 34px 36px;
  max-width: 860px;
}

.limite .sec-eyebrow {
  margin-bottom: 14px;
}

.limite h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.35rem;
  font-variation-settings: "opsz" 30;
  margin-bottom: 12px;
}

.limite p {
  font-size: .96rem;
}

.limite p+p {
  margin-top: 10px;
}

/* ---------- Trois profondeurs (rappel) ---------- */
.depths {
  border-top: 1px solid var(--line);
}

.depth {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.depth h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.24rem;
  font-variation-settings: "opsz" 28;
}

.depth .for {
  display: block;
  margin-top: 6px;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.depth p {
  font-size: .94rem;
}

.depth .who {
  color: var(--txt-muted);
  font-size: .88rem;
}

@media (max-width:860px) {
  .depth {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Table des sources sur téléphone : la colonne descriptive s'efface,
   les statuts peuvent passer à la ligne. */
@media (max-width:560px) {
  .srcs th:nth-child(2),
  .srcs td:nth-child(2) {
    display: none;
  }

  .st {
    white-space: normal;
  }
}


/* ============================================================
   Les trois portes au premier plan
   ============================================================ */

/* ---------- Sélecteur de porte dans le héro ---------- */
.gate {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gate-lbl {
  grid-column: 1 / -1;
  padding: 13px 0 4px;
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.gate a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px 16px 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--txt);
  border-right: 1px solid var(--line-soft);
  transition: color .2s;
}

.gate a+a {
  padding-left: 16px;
}

.gate a:last-child {
  border-right: 0;
}

.gate a b {
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .72rem;
  color: var(--brass);
}

.gate a:hover {
  color: var(--brass);
}

.gate a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

@media (max-width:560px) {
  .gate {
    grid-template-columns: 1fr;
  }

  .gate a,
  .gate a+a {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-right: 0;
    border-top: 1px solid var(--line-soft);
  }
}

/* ---------- Portes : compléments ---------- */
.door-note {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--brass-soft);
  font-size: .88rem !important;
  color: var(--txt-muted);
}

.door {
  scroll-margin-top: calc(90px + var(--bar-h));
}

/* « Ce qu'on vous propose souvent » face à « Ce que nous proposons » */
.versus {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.versus>div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}

.versus span {
  display: block;
  font-family: var(--font-util);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 6px;
}

.versus q {
  display: block;
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  quotes: "« " " »";
}

.vs-them q {
  color: var(--txt-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(233, 238, 244, .3);
}

.vs-us {
  border-color: var(--brass-soft) !important;
  border-left: 2px solid var(--brass) !important;
  background: var(--brass-wash);
}

.vs-us span {
  color: var(--brass);
}

.vs-us q {
  color: var(--txt);
}

/* Briques ajoutées une à une */
.chain {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin-top: 16px;
}

.chain li {
  font-family: var(--font-util);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--txt-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 10px;
}

.chain li:first-child {
  color: var(--brass);
  border-color: var(--brass-soft);
}

.chain li:last-child {
  color: var(--txt);
}

.chain li {
  position: relative;
}

.chain li:not(:last-child) {
  margin-right: 22px;
}

.chain li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--brass-dim);
}

/* ---------- Trajectoire : la phrase du rendez-vous ---------- */
.traj-kicker {
  display: block;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 10px;
}

.traj-card h3.traj-say {
  font-style: italic;
  font-size: 1.36rem;
  line-height: 1.3;
  margin-bottom: 14px;
}

/* ---------- Feuille de route : l'existant ---------- */
.today {
  margin-top: 26px;
}

.today-lbl {
  display: block;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 2px;
}

.today .stack-now {
  margin-top: 10px;
}

.timeline.phases li::before {
  content: "P" counter(step);
}

/* ---------- Le mot de la fin ---------- */
.cta-punch {
  font-family: var(--font-title) !important;
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem) !important;
  line-height: 1.4;
  color: var(--txt) !important;
  max-width: 30em;
  margin: 22px auto 34px !important;
}

/* ---------- Feuille de route en pièce à l'appui (page méthode) ---------- */
.rm {
  list-style: none;
}

.rm li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .88rem;
  color: var(--txt);
}

.rm li:last-child {
  border-bottom: 0;
}

.rm li b {
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 3px;
}

.rm li.now {
  color: var(--txt-muted);
}

.rm li.now b {
  color: var(--txt-muted);
}


/* Le menu tient sur une ligne. */
.main-nav a {
  white-space: nowrap;
}

/* Resserrement du menu entre 1021 et 1240 px : voir brain.css. */

/* ---------- Deux façons de commencer (section audit de l'accueil) ---------- */
.start2 {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-soft);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.start2 h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.start-opt {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 18px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--txt);
  transition: border-color .2s, background .2s;
}

.start-opt:hover {
  border-color: var(--brass-soft);
  background: var(--brass-wash);
}

.start-opt:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.start-opt.primary {
  border-color: var(--brass-soft);
}

.start-opt .so-k {
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}

.start-opt b {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.2rem;
}

.start-opt .so-d {
  font-size: .88rem;
  color: var(--txt-soft);
  line-height: 1.55;
}

.start-opt .so-go {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .88rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 14px;
}

.start-opt.primary .so-go {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}

/* ============================================================
   Héro en deux temps : 1 — on connecte, 2 — vous demandez.
   Le carrousel reprend les usages du registre du site principal,
   en version courte : une question, trois lignes, la source.
   ============================================================ */
.fil-head .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 1px solid var(--brass);
  border-radius: var(--r-sm);
  font-weight: 500;
  color: var(--brass);
  letter-spacing: 0;
  vertical-align: 1px;
}

.fil-head .t {
  line-height: 1.5;
}

.qa {
  border-top: 1px solid var(--line);
}

.qa .fil-head {
  border-top: 0;
}

.qa-body {
  padding: 18px 20px 16px;
  background: var(--card-soft);
}

.qa-q {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.qa-time {
  flex-shrink: 0;
  font-family: var(--font-util);
  font-size: .66rem;
  color: var(--txt-muted);
  font-variant-numeric: tabular-nums;
}

.qa-text {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--txt);
}

.qa-text.typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--brass);
  animation: qaCaret 1s steps(1) infinite;
}

@keyframes qaCaret {
  50% {
    opacity: 0;
  }
}

.qa-a {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.qa-a li {
  position: relative;
  padding-left: 18px;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--txt-soft);
  transition: opacity .35s, transform .35s;
}

.qa-a li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--brass);
  border-bottom: 1.6px solid var(--brass);
  transform: rotate(-45deg);
}

.qa-a li.wait,
.qa-src.wait {
  opacity: 0;
  transform: translateY(4px);
}

.qa-src {
  margin-top: 12px;
  font-family: var(--font-util);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-muted);
  transition: opacity .35s, transform .35s;
}

.qa-dots {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.qa-dots button {
  appearance: none;
  width: 22px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--line);
  cursor: pointer;
  transition: background .25s;
}

.qa-dots button[aria-pressed="true"] {
  background: var(--brass);
}

.qa-dots button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion:reduce) {

  .qa-a li,
  .qa-src {
    transition: none;
  }

  .qa-text.typing::after {
    animation: none;
  }
}

/* Sur téléphone, l'étiquette d'état cède la place au titre de l'étape. */
@media (max-width:560px) {
  .fil-head .st {
    display: none;
  }
}

/* Section déploiement simplifiée : un appel à l'audit, un lien vers la méthode. */
.dep-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}

.dep-actions .door-link {
  margin-top: 0;
}

/* ============================================================
   Les trois portes, en panneaux : étiquette « Option 0X »,
   schéma en traits de laiton, ligne « Idéal si ».
   ============================================================ */
.opts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.opt {
  scroll-margin-top: calc(90px + var(--bar-h));
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr);
  gap: 44px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass-soft);
  border-radius: var(--r-lg);
  padding: 38px 40px;
  transition: border-color .25s;
}

.opt:hover {
  border-left-color: var(--brass);
}

.opt.rev .opt-art {
  order: -1;
}

.opt-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 18px;
}

.opt-n {
  font-family: var(--font-util);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-soft);
  background: var(--brass-wash);
  border-radius: var(--r);
  padding: 5px 10px;
}

.opt-k {
  font-family: var(--font-util);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.opt h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.1vw, 1.65rem);
  font-variation-settings: "opsz" 32;
  line-height: 1.2;
  letter-spacing: -.012em;
  margin-bottom: 14px;
}

.opt-main>p {
  font-size: .96rem;
}

.opt .versus {
  margin-top: 18px;
}

.opt-fit {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem !important;
  color: var(--txt);
}

.opt-fit b {
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-right: 10px;
}

.opt .door-link {
  margin-top: 16px;
}

/* Le schéma */
.opt-art {
  margin: 0;
  background: var(--card-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 22px 20px;
}

.opt-svg {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.opt-svg .art-line {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
  stroke-opacity: .55;
}

.opt-svg .art-line.dash {
  stroke-dasharray: 3 4;
  stroke-opacity: .45;
}

.opt-svg .art-chip {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 1;
}

.opt-svg .art-chip.lit {
  stroke: var(--brass-soft);
}

.opt-svg .art-chip.goal {
  fill: var(--brass-wash);
  stroke: var(--brass);
}

.opt-svg .art-core {
  fill: var(--card);
  stroke: var(--brass-soft);
  stroke-width: 1;
}

/* Le bloc « Avec Brain » du schéma de l'option 02 : contour laiton plein et lueur contenue */
.opt-svg .art-core.glow {
  stroke: var(--brass);
  stroke-width: 1.5;
}

.opt-svg .art-core.dim {
  stroke: var(--line);
  stroke-dasharray: 4 4;
}

.opt-svg .art-dot {
  fill: var(--brass);
}

.opt-svg .art-dot.off {
  fill: none;
  stroke: var(--brass-soft);
}

.opt-svg .art-txt {
  font-family: var(--font-body);
  font-size: 11.5px;
  fill: var(--txt);
}

.opt-svg .art-txt.dim {
  fill: var(--txt-muted);
}

.opt-svg .art-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  fill: var(--txt);
}

.opt-svg .art-title.dim {
  fill: var(--txt-muted);
}

.opt-svg .art-k {
  font-family: var(--font-util);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--brass);
}

.opt-svg .art-k.dim {
  fill: var(--txt-muted);
}

@media (max-width:900px) {
  .opt {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 28px 24px;
  }

  .opt.rev .opt-art {
    order: 0;
  }

  .opt-art {
    max-width: 460px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .opt {
    transition: none;
  }
}


/* Boutons de prise de rendez-vous (« Choisir un créneau ») : laiton, texte encre. */
.start-opt:not(.primary) .so-go {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

.start-opt:not(.primary):hover .so-go {
  background: #D6B23C;
  border-color: #D6B23C;
}

/* ---------- Mémoire du cabinet & moteur IA (accueil, #memoire) ----------
   Deuxième partie du schéma du héro : la mémoire, à gauche, reste fixe
   et s'enrichit ; une frontière de pseudonymisation ; à droite, les
   modèles d'IA, interchangeables. Le laiton marque le moteur actif et
   l'écriture qui entre en mémoire — ce qui vit. */
.mt {
  background: var(--card);
  border: 1px solid rgba(233, 238, 244, .16);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.mt-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 34px 28px;
}

.mt-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.mt-mem,
.mt-gate,
.mt-models {
  position: relative;
  z-index: 1;
}

.mt-mem {
  border: 1px solid var(--brass-soft);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 22px 22px 18px;
}

.mt-mem img {
  width: 34px;
  height: 34px;
  display: block;
  margin-bottom: 12px;
}

.mt-mem .fc-name {
  display: block;
}

.mt-own {
  display: block;
  margin: 5px 0 16px;
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}

.mt-layers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mt-layers li {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 9px;
  font-size: .78rem;
  color: var(--txt-soft);
  background: var(--card);
}

.mt-feed {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--txt-soft);
  min-height: 2.6em;
}

.mt-plus {
  font-family: var(--font-util);
  color: var(--brass);
}

.mt-feed-t {
  transition: opacity .4s, transform .4s;
}

.mt-feed-t.out {
  opacity: 0;
  transform: translateY(4px);
}

.mt-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 14px;
  border: 1px dashed var(--brass-soft);
  border-radius: var(--r);
  background: var(--ink);
}

.mt-gate-k {
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}

.mt-gate-ex {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .86rem;
}

.mt-gate-ex s {
  color: var(--txt-muted);
  text-decoration-color: var(--brass);
}

.mt-gate-ex b {
  font-weight: 600;
  color: var(--txt);
}

.mt-gate-n {
  font-size: .74rem;
  line-height: 1.45;
  color: var(--txt-muted);
}

.mt-models {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mt-model {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 10px 14px;
  transition: border-color .4s, background .4s;
}

.mt-model b {
  font-weight: 600;
  font-size: .9rem;
  color: var(--txt-soft);
  transition: color .4s;
}

.mt-model span {
  font-family: var(--font-util);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  white-space: nowrap;
}

.mt-model.on {
  border-left-color: var(--brass);
  background: var(--brass-wash);
}

.mt-model.on b {
  color: var(--txt);
}

.mt-model.on span {
  color: var(--brass);
}

.mt-model.next {
  border-style: dashed;
}

.mt-thesis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  margin-top: 56px;
}

.mt-why h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.25;
  margin-bottom: 16px;
}

.mt-why p {
  color: var(--txt-soft);
  line-height: 1.7;
  margin-bottom: 12px;
}

.mt-why strong {
  color: var(--txt);
  font-weight: 600;
}

.mt-dims {
  border-left: 2px solid var(--brass);
  padding-left: 26px;
}

.mt-dims-k {
  font-family: var(--font-util);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.mt-dims ol {
  list-style: none;
  counter-reset: dim;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mt-dims li {
  counter-increment: dim;
  position: relative;
  padding-left: 40px;
  color: var(--txt-soft);
  line-height: 1.6;
}

.mt-dims li::before {
  content: counter(dim);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brass-soft);
  border-radius: var(--r);
  font-family: var(--font-util);
  font-size: .72rem;
  color: var(--brass);
}

.mt-dims li b {
  color: var(--txt);
  font-weight: 600;
}

.mt-dims a {
  color: var(--brass);
  text-decoration: none;
  white-space: nowrap;
}

.mt-dims a:hover,
.mt-dims a:focus-visible {
  text-decoration: underline;
}

.mt-punch {
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.mt-motto {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  color: var(--txt);
  margin-bottom: 10px;
}

.mt-punch p:not(.mt-motto) {
  color: var(--txt-soft);
  font-size: 1.05rem;
}

@media (max-width:1020px) {
  .mt-body {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mt-svg {
    display: none;
  }

  .mt-gate {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }

  .mt-gate-ex {
    flex-direction: row;
    gap: 8px;
  }

  .mt-thesis {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width:560px) {
  .mt-body {
    padding: 22px 18px;
  }

  .mt-dims {
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-feed-t,
  .mt-model,
  .mt-model b {
    transition: none;
  }
}

/* =====================================================================
   Page « Utiliser Brain » (utiliser-brain.html)
   ===================================================================== */

/* ---------- Ce que Brain récupère : sources → mémoire → restitutions ---------- */
.rc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  background: var(--card);
  border: 1px solid rgba(233, 238, 244, .16);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 32px 28px;
}

.rc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.rc-in,
.rc-core,
.rc-out {
  position: relative;
  z-index: 1;
}

.rc-in {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rc-grp {
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 12px 14px;
}

.rc-grp h3 {
  font-family: var(--font-util);
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 8px;
}

.rc-grp ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rc-grp li {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 3px 8px;
  font-size: .76rem;
  color: var(--txt-soft);
  background: var(--card);
}

.rc-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--brass);
  border-radius: var(--r);
  background: var(--ink);
  padding: 22px 16px;
  box-shadow: 0 0 0 4px var(--brass-wash);
}

.rc-where {
  font-family: var(--font-util);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 14px;
}

.rc-core img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.rc-live {
  margin-top: 6px;
  font-family: var(--font-util);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass);
}

.rc-out {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rc-out li {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 12px 14px 12px 36px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--txt);
}

.rc-out li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 19px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--brass);
  border-bottom: 1.6px solid var(--brass);
  transform: rotate(-45deg);
}

/* ---------- Visite de l'interface ---------- */
.tour {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr);
  gap: 40px;
  align-items: start;
}

.tour-steps {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.tour-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  row-gap: 3px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  padding: 14px 12px 14px 14px;
  color: var(--txt-soft);
  font: inherit;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.tour-step .ts-n {
  grid-row: span 2;
  font-family: var(--font-util);
  font-size: .72rem;
  color: var(--txt-muted);
  padding-top: 3px;
}

.tour-step b {
  font-weight: 600;
  font-size: .96rem;
  color: var(--txt-soft);
}

.tour-step .ts-d {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--txt-muted);
}

.tour-step:hover {
  background: var(--card-soft);
}

.tour-step[aria-selected="true"] {
  background: var(--brass-wash);
  border-left-color: var(--brass);
}

.tour-step[aria-selected="true"] .ts-n {
  color: var(--brass);
}

.tour-step[aria-selected="true"] b {
  color: var(--txt);
}

.tour-step[aria-selected="true"] .ts-d {
  color: var(--txt-soft);
}

.tour-step:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

.app {
  background: var(--card);
  border: 1px solid rgba(233, 238, 244, .16);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  min-height: 460px;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--card-hi);
  border-bottom: 1px solid var(--line);
}

.app-dots {
  display: inline-flex;
  gap: 5px;
}

.app-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(233, 238, 244, .25);
}

.app-title {
  font-family: var(--font-util);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-soft);
}

.app-bar .ex-tag {
  margin-left: auto;
}

.app-panel {
  padding: 22px 22px 24px;
  animation: ap-in .35s ease both;
}

@keyframes ap-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.ap-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ap-head b {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--txt);
}

.ap-head span {
  font-size: .82rem;
  color: var(--txt-muted);
}

.ap-head .ap-meta {
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}

.ap-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 16px;
}

.ap-kpis div {
  padding: 12px 14px;
  border-left: 1px solid var(--line);
}

.ap-kpis div:first-child {
  border-left: 0;
}

.ap-kpis b {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}

.ap-kpis .warn b {
  color: #E8876F;
}

.ap-kpis .live b {
  color: var(--brass);
}

.ap-kpis span {
  font-size: .76rem;
  color: var(--txt-muted);
}

.ap-doc {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 16px 18px;
}

.ap-doc h4 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.ap-k {
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 12px 0 5px;
}

.ap-k:first-of-type {
  margin-top: 0;
}

.ap-doc p:not(.ap-k),
.ap-doc li,
.ap-note p:not(.ap-k):not(.ap-src) {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--txt-soft);
}

.ap-doc ul {
  padding-left: 18px;
}

.ap-doc u,
.ap-note u {
  text-decoration: none;
  color: var(--brass);
}

.ap-props,
.ap-conn {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-props li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 12px 14px;
}

.ap-props b,
.ap-conn b {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  color: var(--txt);
}

.ap-props div span,
.ap-conn span {
  font-size: .8rem;
  color: var(--txt-muted);
}

.ap-act {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.ap-act i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  font-style: normal;
  font-size: .82rem;
}

.ap-act .no {
  border: 1px solid var(--line);
  color: var(--txt-muted);
}

.ap-act .yes {
  background: var(--brass);
  color: var(--ink);
  font-weight: 600;
}

.ap-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 6px 18px 14px;
}

.ap-card dl div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.ap-card dt {
  font-family: var(--font-util);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--txt-muted);
  padding-top: 3px;
}

.ap-card dd {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--txt-soft);
}

.ap-card dd em {
  font-style: normal;
  color: #E8876F;
}

.ap-src {
  margin-top: 12px;
  font-family: var(--font-util);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.ap-chat {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.ap-q {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--txt);
  margin-bottom: 12px;
}

.ap-a {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ap-a li {
  position: relative;
  padding-left: 18px;
  font-size: .88rem;
  color: var(--txt-soft);
}

.ap-a li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--brass);
  border-bottom: 1.6px solid var(--brass);
  transform: rotate(-45deg);
}

.ap-input {
  border: 1px solid rgba(233, 238, 244, .2);
  border-radius: var(--r);
  padding: 13px 14px 11px;
  background: var(--ink);
}

.ap-ph {
  display: block;
  font-size: .88rem;
  color: var(--txt-muted);
  margin-bottom: 12px;
}

.ap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-chips span {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 3px 9px;
  font-size: .76rem;
  color: var(--txt-soft);
}

.ap-chips .eng {
  border-color: var(--brass-soft);
  color: var(--brass);
}

.ap-sugg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.ap-sugg span {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 12px;
  font-size: .82rem;
  color: var(--txt-soft);
}

.ap-tree {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 16px;
}

.ap-tree > ul {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 0;
}

.ap-tree li {
  padding: 6px 14px;
  font-size: .86rem;
  color: var(--txt-soft);
}

.ap-tree li.open {
  color: var(--txt);
}

.ap-tree li ul {
  list-style: none;
  margin-top: 4px;
  border-left: 1px solid var(--brass-soft);
  margin-left: 4px;
}

.ap-tree li li {
  padding: 4px 12px;
  font-size: .82rem;
  color: var(--txt-muted);
}

.ap-tree li li:first-child {
  color: var(--brass);
}

.ap-note {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 16px 18px;
}

.ap-conn li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-soft);
  padding: 11px 14px;
}

.ap-conn span {
  grid-column: 1;
}

.ap-conn em {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-style: normal;
  font-family: var(--font-util);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 8px;
  white-space: nowrap;
}

.ap-conn em.go {
  color: var(--brass);
  border-color: var(--brass-soft);
}

.ap-conn em.wait {
  color: var(--txt-muted);
  border-style: dashed;
}

/* ---------- Avant / avec Brain : un registre ----------
   (.gestes et non .ledger : la classe existe déjà dans brain.css) */
.gestes {
  border-top: 1px solid var(--line);
}

.lg-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.lg-row b {
  font-weight: 600;
  color: var(--txt);
}

.lg-row span {
  color: var(--txt-muted);
}

.lg-row span:last-child {
  color: var(--txt);
  position: relative;
  padding-left: 22px;
}

.lg-row span:last-child::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--brass);
  border-bottom: 1.6px solid var(--brass);
  transform: rotate(-45deg);
}

.lg-head span {
  font-family: var(--font-util);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-muted) !important;
  padding-left: 0 !important;
}

.lg-head span::before {
  display: none;
}

@media (max-width:1020px) {
  .rc {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .rc-svg {
    display: none;
  }

  .tour {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tour-steps {
    flex-direction: row;
    overflow-x: auto;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }

  .tour-step {
    display: block;
    flex-shrink: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
  }

  .tour-step[aria-selected="true"] {
    border-bottom-color: var(--brass);
  }

  .tour-step .ts-n,
  .tour-step .ts-d {
    display: none;
  }

  .tour-step b {
    font-size: .88rem;
    white-space: nowrap;
  }
}

@media (max-width:640px) {
  .app-panel {
    padding: 18px 16px 20px;
  }

  .app-bar .ex-tag {
    display: none;
  }

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

  .ap-kpis div:nth-child(3) {
    border-left: 0;
  }

  .ap-kpis div:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }

  .ap-card dl div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .ap-sugg,
  .ap-tree {
    grid-template-columns: 1fr;
  }

  .lg-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .lg-head {
    display: none;
  }

  .lg-row span:nth-child(2)::before {
    content: "Aujourd'hui · ";
  }
}

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

/* Page sans héro (utiliser-brain) : la première section descend sous l'en-tête fixe. */
section.block.page-top {
  padding-top: calc(150px + var(--bar-h));
}

@media (max-width:760px) {
  section.block.page-top {
    padding-top: calc(118px + var(--bar-h));
  }
}