/* EX’SIE — pages d’offre (modules Sage 100, métiers, expertises) : blocs calmes communs. */

/* Ce qui change, pour qui : un rôle, un geste */
.gestes { display: grid; gap: 0; width: 100%; max-width: 34rem; border-top: 1px solid var(--line); }
.geste { display: grid; grid-template-columns: 11.5rem 1fr; gap: 6px 20px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.geste strong { color: var(--ink); font-weight: 700; }
@media (max-width: 520px) { .geste { grid-template-columns: 1fr; } }

/* Les signes d’une situation (pages métiers) */
.signes { display: grid; width: 100%; max-width: 34rem; border-top: 1px solid var(--line); }
.signes li { position: relative; padding: 15px 0 15px 26px; border-bottom: 1px solid var(--line); font-size: var(--t-chapo); color: var(--ink); font-weight: 600; line-height: 1.5; }
.signes li::before { content: ""; position: absolute; left: 2px; top: 1.55em; width: 10px; height: 2px; background: var(--ambre); }
.exemple { padding-left: 20px; border-left: 3px solid var(--accent); }

/* Parcours en quatre étapes, avec ses passages de relais : le trait se tire d’une étape à la suivante */
.relais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.relais li { position: relative; padding: 34px 24px 0 0; }
.relais li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-doux); box-shadow: inset 0 0 0 2.5px var(--accent); }
.relais li::after { content: ""; position: absolute; left: 20px; right: 6px; top: 6px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-4) var(--c-trajet); transition-delay: calc(var(--i) * 320ms); }
.relais li:last-child::after { display: none; }
.est-vu .relais li::after { transform: scaleX(1); }
.relais-n { display: block; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; color: var(--accent-texte); }
.relais h3 { margin-block: 2px 8px; font-size: 1.3rem; }
.relais p { font-size: .97rem; }
@media (max-width: 900px) {
  .relais { grid-template-columns: 1fr; }
  .relais li { padding: 0 0 26px 34px; }
  .relais li::after { left: 6px; right: auto; top: 20px; bottom: 6px; width: 2px; height: auto; transform: scaleY(0); transform-origin: center top; }
  .est-vu .relais li::after { transform: scaleY(1); }
}

/* Progrès à observer */
.progres { display: grid; border-top: 1px solid var(--line); }
.progres li { padding-block: 16px; border-bottom: 1px solid var(--line); }
.progres h3 { font-size: 1.08rem; margin-bottom: 2px; }
.progres p { font-size: .97rem; }

/* Une fonction, et ce qu’elle évite */
.fonction h3 { font-size: 1.2rem; }
.evite { display: block; margin-bottom: 2px; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Questions de cadrage */
.cadrage { display: grid; border-top: 1px solid var(--line); }
.cadrage li { display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--line); }
.cadrage-n { font-size: var(--t-petit); font-weight: 700; color: var(--accent-texte); font-variant-numeric: tabular-nums; }
.cadrage h3 { font-size: 1.12rem; }

/* Périmètre, sous le titre des objections */
.perimetre { display: flex; flex-direction: column; gap: var(--e-3); align-items: flex-start; margin-top: var(--e-4); padding-top: var(--e-5); border-top: 1px solid var(--line-fort); }
.perimetre p { font-size: .97rem; }

/* Pages de service */
.gestes--simple .geste { grid-template-columns: 2.6rem 1fr; }
.gestes--simple .geste strong { color: var(--accent-texte); font-variant-numeric: tabular-nums; }
.avec-exform, .carte-avec { display: flex; align-items: center; gap: 10px; font-size: var(--t-petit); font-weight: 600; color: var(--muted); }
.avec-exform .logo-exform { height: 30px; width: auto; }
.exform-bloc .logo-exform { height: 58px; width: auto; align-self: flex-start; }

/* Formation : la page prend la couleur d’EX’FORM pour ses accents ; les boutons restent ceux d’EX’SIE. */
.page-exform main { --accent: var(--exform); --accent-texte: var(--exform); }