/* ---- feuille de la page /accompagnement ---- */
/* Composants propres a la page accompagnement. Les tokens, la base, la nav,
     le pied et les boutons viennent de assets/systeme.css. */

  /* ---------- L'escalier de maturite ----------
     Il vit dans le hero, qui est une bande CLAIRE : ecrit en blanc comme les
     schemas des bandes sombres, il etait invisible. Tout est en encre, et
     l'ambre ne sert qu'a la derniere marche, jamais a porter du texte (il
     tombe a 1,6:1 sur la creme). */
  .escalier { margin: var(--pas-3) 0 0; }
  .escalier svg { width: 100%; height: auto; display: block; overflow: visible; }
  .escalier .marche rect {
    fill: rgba(20, 24, 26, 0.035);
    stroke: var(--bord); stroke-width: 1;
    transition: fill 0.25s ease, stroke 0.25s ease;
  }
  .escalier .marche.derniere rect { fill: var(--accent-voile); stroke: var(--accent); }
  .escalier .marche:hover rect { fill: rgba(20, 24, 26, 0.08); stroke: var(--encre); }
  .escalier .m-num {
    fill: var(--texte-3); text-anchor: middle;
    font-family: var(--font-mono); font-size: 13px;
  }
  .escalier .m-nom {
    fill: var(--encre-titre); text-anchor: middle;
    font-family: var(--font-mono); font-size: 13px;
  }
  .escalier .arete {
    fill: none; stroke: rgba(20, 24, 26, 0.22); stroke-width: 1.4;
    stroke-dasharray: 4 6;
  }
  .escalier .pion { fill: var(--fond-bouton); }
  .escalier .sol { stroke: var(--bord); stroke-width: 1; }
  .escalier .esc-note {
    fill: var(--texte-3);
    font-family: var(--font-mono); font-size: 12px;
  }
  @media (prefers-reduced-motion: reduce) { .escalier .pion { display: none; } }

  /* ---------- Anatomie d'une etape ---------- */
  .entete-section.deux-col .tagline {
    margin: 0.35rem 0 0;
    font-family: var(--font-mono); font-size: 0.85rem;
    color: var(--accent);
  }
  .declencheur {
    margin: 0 0 1rem; padding: 0 0 0 1rem;
    border-left: 2px solid var(--accent);
    font-size: 1.05rem; line-height: 1.5;
    color: var(--encre-titre);
  }
  .declencheur::before { content: "\00ab\00a0"; }
  .declencheur::after { content: "\00a0\00bb"; }
  .bande-sombre .declencheur { color: #FFFFFF; }

  .etape-corps {
    margin-top: var(--pas-3);
    display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.25rem;
    align-items: start;
  }
  .cadre, .emport {
    background: var(--fond-carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-bloc);
    padding: clamp(1.5rem, 3vw, 2.25rem);
  }
  .bande-sombre .cadre, .bande-sombre .emport {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--bord-sombre);
  }
  .cadre-tete { padding-bottom: 1.25rem; border-bottom: 1px solid var(--bord); }
  .bande-sombre .cadre-tete { border-bottom-color: var(--bord-sombre); }
  .cadre-etiq {
    display: block; margin-bottom: 0.4rem;
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--texte-3);
  }
  .cadre-tete h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 400; }
  .cadre-tete p { margin: 0.4rem 0 0; color: var(--texte-2); font-size: 0.95rem; }
  .bande-sombre .cadre-tete p { color: rgba(255, 255, 255, 0.6); }

  .temps { list-style: none; margin: 1.5rem 0 0; padding: 0; }
  .temps li { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--bord); }
  .temps li:first-child { border-top: 0; padding-top: 0; }
  .bande-sombre .temps li { border-top-color: var(--bord-sombre); }
  .t-num {
    flex: 0 0 auto; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bord); border-radius: var(--r-petit);
    font-family: var(--font-mono); font-size: 0.75rem;
    color: var(--texte-2);
  }
  .bande-sombre .t-num { border-color: var(--bord-sombre); color: rgba(255, 255, 255, 0.7); }
  .temps h4 { margin: 0 0 0.25rem; font-size: 1.02rem; font-weight: 500; }
  .temps p { margin: 0; color: var(--texte-2); font-size: 0.95rem; line-height: 1.55; }
  .bande-sombre .temps p { color: rgba(255, 255, 255, 0.62); }

  .emport h3 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 500; }
  .livrables { list-style: none; margin: 0; padding: 0; }
  .livrables li {
    position: relative; padding: 0 0 0 1.5rem; margin-bottom: 0.7rem;
    color: var(--texte-2); font-size: 0.95rem; line-height: 1.5;
  }
  .bande-sombre .livrables li { color: rgba(255, 255, 255, 0.68); }
  .livrables li::before {
    content: ""; position: absolute; left: 0; top: 0.42em;
    width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
  }
  .pour {
    margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid var(--bord);
    font-size: 0.9rem; color: var(--texte-2);
  }
  .bande-sombre .pour { border-top-color: var(--bord-sombre); color: rgba(255, 255, 255, 0.6); }
  .pour span {
    display: block; margin-bottom: 0.3rem;
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-3);
  }

  /* ---------- Ce qui ne change pas d'une etape a l'autre ---------- */
  .grille-regles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .regle { padding: 1.5rem; border: 1px solid var(--bord-sombre); border-radius: var(--r-carte-l); }
  .regle h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 500; }
  .regle p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.62); }

  @media (max-width: 900px) {
    .etape-corps { grid-template-columns: 1fr; }
    .grille-regles { grid-template-columns: 1fr; }
    .escalier .m-nom { font-size: 17px; }
    .escalier .m-num { font-size: 17px; }
  }

/* ---- feuille de la page /accompagnement ---- */
.ariane-nav{margin:0 0 1.1rem;font-size:.9rem;opacity:.78}.ariane-nav a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.ariane-nav span[aria-current]{font-weight:600}