/* EX’SIE — page d’ensemble Sage 100 : blocs calmes propres à la page. */

/* L’éditeur et l’intégrateur : deux colonnes qui se répondent ligne à ligne */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }
.role { padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); }
.role-qui { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); max-width: none; color: var(--muted); font-weight: 600; }
.role-qui .logo-sage { height: 28px; color: #16b04a; }
.role-qui .logo-exsie { height: 42px; }
.role-qui b { margin-left: 6px; font-size: 1.5rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.role li { position: relative; min-height: 4.4em; display: flex; align-items: center; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; line-height: 1.45; transition: opacity var(--d-2); }
.role li:last-child { border-bottom: 0; }
.role li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--accent); transform: scale(.7); transition: transform var(--d-3) var(--c-elan); }
/* Survol : la ligne d’une colonne éclaire celle qui lui répond dans l’autre */
.roles.est-survole li { opacity: .38; }
.roles.est-survole li.est-pair { opacity: 1; }
.roles li.est-pair::before { transform: scale(1.5); }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } .role li { min-height: 0; } }

/* Du terme de catalogue à ce qu’il change : le terme se raye, la phrase prend sa place */
.traductions { display: grid; border-top: 1px solid var(--line-fort); }
.traductions li { display: grid; gap: 6px; padding-block: 22px; border-bottom: 1px solid var(--line-fort); }
.catalogue { position: relative; justify-self: start; font-size: var(--t-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.catalogue::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; background: var(--muted); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-3) var(--c-trajet); transition-delay: calc(var(--i) * 280ms + 200ms); }
.traductions strong { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 600; color: var(--ink); line-height: 1.35; }
.js .traductions strong { opacity: 0; transform: translateY(8px); transition: opacity var(--d-3), transform var(--d-3) var(--c-elan); transition-delay: calc(var(--i) * 280ms + 480ms); }
.est-vu .catalogue::after { transform: scaleX(1); }
.js .est-vu .traductions strong { opacity: 1; transform: none; }