/* Sections ajoutées à HUB IA Intelligence : La différence + Le savoir qui s’accumule (dossier). 12 nov. 2026.
   Les états cachés passent par .js-mouvement : sans mouvement, tout est à l’état final. */

.pastille-tag { margin: 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bordure); font-size: var(--t-s, 0.875rem); }
.pc-titre { max-width: 18ch; text-wrap: balance; hyphens: manual; overflow-wrap: normal; }
.ix-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; background: var(--accent); color: var(--sur-accent); }
@keyframes ix-fil { to { stroke-dashoffset: -40; } }

.ix-diff__grille { display: grid; gap: var(--e-4); margin-top: var(--e-8, 48px); }
@media (min-width: 900px) { .ix-diff__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; } }
.ix-diff__col { display: grid; align-content: start; gap: var(--e-3); padding: clamp(20px, 3vw, 40px); border-radius: var(--rayon-panneau, 28px); border: var(--trame) solid var(--bordure); background: var(--surface); }
.ix-diff__col h3 { margin: 0; font-family: var(--police-titres); font-weight: 500; font-size: clamp(1.5rem, 1rem + 1vw, 2.125rem); line-height: 1.1; letter-spacing: -0.02em; }
.ix-diff__col ul { margin: 0; padding: 0; list-style: none; display: grid; }
.ix-diff__col li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: var(--trame) solid var(--bordure); line-height: 1.4; }
.ix-diff__col--gen { color: var(--texte-doux); background: transparent; border-style: dashed; }
.ix-diff__col--gen h3 { color: var(--texte-doux); }
.ix-diff__col--gen li::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--bordure); }
.ix-diff__col--hub { background: var(--accent-2); color: var(--sur-accent-2); border-color: var(--accent-2); --bordure: color-mix(in srgb, var(--sur-accent-2) 22%, transparent); }
.ix-diff__col--hub li { font-size: 1.0625rem; }
.ix-diff__glyphe { width: 120px; height: 64px; overflow: visible; }
.ix-diff__col--gen .ix-diff__glyphe * { fill: none; stroke: var(--texte-doux); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ix-diff__col--hub .ix-diff__glyphe .ix-g-n { fill: none; stroke: var(--sur-accent-2); stroke-width: 2.5; }
.ix-diff__col--hub .ix-diff__glyphe .ix-g-fil { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.ix-diff__col--hub .ix-diff__glyphe .ix-g-c { fill: var(--accent); }
.ix-diff__col--hub .ix-diff__glyphe .ix-g-r { fill: none; stroke: var(--sur-accent-2); stroke-width: 2.5; }
.ix-diff__col--hub .ix-diff__glyphe .ix-g-ok { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ix-gains { margin: var(--e-8, 48px) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e-4); }
@media (min-width: 800px) { .ix-gains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ix-gains li { display: grid; gap: 6px; padding-top: var(--e-3); border-top: 2px solid var(--texte); }
.ix-gains b { font-family: var(--police-titres); font-weight: 500; font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); line-height: 1.15; }
.ix-gains span { color: var(--texte-doux); max-width: 34ch; }
.ix-diff__infra { margin: var(--e-6) 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .js-mouvement .ix-diff__grille .ix-diff__col--hub li { transition: opacity 500ms ease, transform 500ms ease; transition-delay: calc(300ms + var(--i) * 220ms); }
  .js-mouvement .ix-diff__grille:not(.est-vu) .ix-diff__col--hub li { opacity: 0; transform: translateX(14px); }
  .js-mouvement .ix-diff__grille.est-vu .ix-g-fil { stroke-dasharray: 4 6; animation: ix-fil 1.2s linear infinite; }
}

.s5-pastille { display: inline-flex; margin: 0 0 var(--e-4); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bordure); font-size: var(--t-s); color: var(--texte-doux); }
.s5-c { background: var(--fond); }
.s5-c__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.s5-c__texte { position: sticky; top: calc(var(--barre) + 32px); }
.s5-c__titre { max-width: 13ch; margin: 0; }
.s5-c .t-intro { margin: var(--e-6) 0 0; max-width: 40ch; }
.s5-rejouer { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--e-8); min-height: var(--cible); padding: 0 18px; border-radius: 999px; border: 1px solid var(--texte); background: transparent; color: var(--texte); font: inherit; font-size: var(--t-s); cursor: pointer; }
.s5-rejouer svg { width: 18px; height: 18px; }
.s5-c__app { border-radius: 20px; background: var(--fond); color: var(--texte); padding: 0 0 var(--e-6); box-shadow: 0 40px 80px -40px rgba(16,18,17,.55); overflow: hidden; }
.s5-c__barre { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--bordure); background: var(--surface); }
.s5-c__logo { display: inline-flex; align-items: center; gap: 3px; }
.s5-c__logo i { display: block; width: 7px; height: 20px; border-radius: 4px; background: var(--texte-doux); }
.s5-c__logo i:nth-child(2) { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.s5-c__nom { font-family: var(--police-titres); font-weight: 500; }
.s5-c__etat { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--police-donnees); font-size: var(--t-xs); color: var(--texte-doux); }
.s5-c__etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.js-mouvement .s5-c.est-vu .s5-c__etat i { animation: s5-clignote 1.6s ease-in-out infinite; }
@keyframes s5-clignote { 50% { opacity: .25; } }
.s5-c__entrees { list-style: none; margin: 0; padding: 6px 22px 0; }
.s5-entree { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--bordure); }
.s5-entree__type { font-family: var(--police-donnees); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.s5-entree__corps b { display: block; font-family: var(--police-titres); font-size: var(--t-l); font-weight: 500; letter-spacing: -0.015em; }
.s5-entree__corps p { margin: 4px 0 0; color: var(--texte-doux); font-size: var(--t-s); line-height: 1.4; }
.s5-entree__src { justify-self: end; white-space: nowrap; font-family: var(--police-donnees); font-size: var(--t-xs); color: var(--texte-doux); padding: 4px 10px; border: 1px solid var(--bordure); border-radius: 999px; }
.s5-entree__versions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px !important; font-family: var(--police-donnees); font-size: var(--t-xs) !important; }
.s5-entree__ancienne { color: var(--texte-doux); text-decoration-color: var(--erreur); text-decoration-thickness: 2px; }
.s5-entree__nouvelle { color: var(--texte); background: color-mix(in srgb, var(--accent) 18%, transparent); padding: 0 6px; border-radius: 4px; }
.s5-entree__src-a { display: none; }
.s5-c__note { margin: var(--e-6) 22px 0; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-size: var(--t-m); }
.s5-c [data-ecrit].s5-curseur::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--accent); animation: s5-clignote .8s steps(1) infinite; }
.js-mouvement .s5-c:not(.est-fini) .s5-entree:not(.est-ecrite) { opacity: 0; transform: translateY(8px); }
.js-mouvement .s5-c .s5-entree { transition: opacity 400ms var(--courbe-sortie), transform 400ms var(--courbe-sortie); }
.js-mouvement .s5-c .s5-entree:not(.est-sourcee) .s5-entree__src { opacity: 0; }
.js-mouvement .s5-c .s5-entree__src { transition: opacity 300ms; }
.js-mouvement .s5-c:not(.est-corrige) .s5-entree__versions s { text-decoration: none; }
.js-mouvement .s5-c:not(.est-corrige) .s5-entree__nouvelle { opacity: 0; translate: -6px 0; }
.js-mouvement .s5-c:not(.est-corrige) .s5-entree__src-a { display: inline; }
.js-mouvement .s5-c:not(.est-corrige) .s5-entree__src-b { display: none; }
.js-mouvement .s5-c .s5-entree__nouvelle { transition: opacity 500ms, translate 500ms var(--courbe-sortie); }
.js-mouvement .s5-c .s5-entree--corrigee { transition: background 600ms; }
.js-mouvement .s5-c.est-corrige:not(.est-fini) .s5-entree--corrigee { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.js-mouvement .s5-c:not(.est-corrige) .s5-entree__versions { opacity: 0; }
.js-mouvement .s5-c.est-barre .s5-entree__versions { opacity: 1; }
.js-mouvement .s5-c .s5-entree__ancienne { background: linear-gradient(var(--erreur), var(--erreur)) no-repeat 0 55% / 0 2px; transition: background-size 600ms ease-in-out; }
.js-mouvement .s5-c.est-barre .s5-entree__ancienne { background-size: 100% 2px; }
.js-mouvement .s5-c:not(.est-note) .s5-c__note { opacity: 0; transform: translateY(8px); }
.js-mouvement .s5-c .s5-c__note { transition: opacity 600ms, transform 600ms var(--courbe-sortie); }

@media (max-width: 720px) {
  .s5-c__grille { grid-template-columns: minmax(0, 1fr); }
  .s5-c__texte { position: static; }
  .s5-entree { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .s5-entree__src { justify-self: start; white-space: normal; }
  .s5-c__barre { flex-wrap: wrap; }
}

.pause-mouvement .ix-diff *, .pause-mouvement .s5-c * { animation-play-state: paused !important; }