/* HUB IA, page Plateforme (14 octobre 2026).
   Modèle : la page « capabilities » de CTA. Parties numérotées, numéro épinglé à gauche, rangées de pièces avec leur fiche
   à droite, trame de 1 px, données en chasse fixe, un seul signal de couleur. Alternance sombre et claire de l'accueil.
   Aucune couleur ni police en dur : tout passe par styles/jetons.css. */

/* Deux valeurs animables : --t avance le point le long du chemin d'une action, --v l'allume puis l'éteint.
   Valeur de départ : l'état final (tout est allumé), pour le contenu sans script et avec « réduire les animations ». */
@property --t { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --v { syntax: "<number>"; inherits: true; initial-value: 1; }

main { counter-reset: partie; }

/* ---------- En-tête ---------- */
.tete-plateforme .contenu--large { display: grid; gap: var(--e-8); }
.tete-plateforme__haut { display: grid; gap: var(--e-6); align-items: end; }
@media (min-width: 1100px) {
  .tete-plateforme__haut { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-12); }
}
.tete-plateforme__intro { max-width: 34ch; color: var(--texte-doux); }
.tete-plateforme__intro a { color: var(--texte); text-decoration-color: color-mix(in srgb, var(--texte) 45%, transparent); }
.tete-plateforme__intro a:hover { text-decoration-color: var(--accent); }
/* L'écho « pièces » se range à droite, sous le texte d'introduction : la moitié droite de l'en-tête porte quelque chose. */
.tete-plateforme .tete-page__echo { left: auto; right: -1.5vw; bottom: -0.34em; }
.tete-plateforme .tete-page__meta { margin-top: 0; gap: var(--e-2) var(--e-8); }
.tete-plateforme .tete-page__meta span { display: inline-flex; align-items: center; gap: var(--e-3); }
.tete-plateforme .tete-page__meta span::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); }

/* ---------- Une partie numérotée ---------- */
.partie { --rail: clamp(150px, 17vw, 260px); --ecart: var(--e-12); counter-increment: partie; }
.partie__grille { position: relative; display: grid; gap: var(--e-8); }
.partie__fil { display: none; }
.partie__rail { display: flex; align-items: baseline; gap: var(--e-4); padding-bottom: var(--e-4); border-bottom: var(--trame) solid var(--bordure); }
.partie__numero { display: block; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(3.5rem, 2.4rem + 4.4vw, 5.25rem); line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.partie__etiquette { font-family: var(--police-interface); font-size: var(--t-donnees); color: var(--texte-doux); }
.partie__corps { min-width: 0; }
.partie__tete { display: grid; gap: var(--e-6); margin-bottom: clamp(40px, 5vw, 72px); }
.partie__titre { font-size: clamp(2rem, 0.9rem + 3vw, 3.75rem); letter-spacing: -0.04em; line-height: 1; text-wrap: balance; }
.partie__chapeau { font-size: var(--t-l); line-height: 1.35; letter-spacing: -0.01em; color: var(--texte-doux); text-wrap: pretty; }
.partie__chapeau--long { font-size: var(--t-m); line-height: 1.5; letter-spacing: 0; }
/* Le suivi de ce qui a été lu : une trace de 1 px entre le numéro et le contenu, qui se remplit au signal. */
@media (min-width: 760px) {
  .partie__tete { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--e-8) var(--e-12); }
}
@media (min-width: 1100px) {
  .partie__grille { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--ecart); row-gap: 0; }
  .partie__rail { position: sticky; top: calc(var(--barre) + 50px + var(--e-8)); align-self: start; display: block; padding-bottom: 0; border-bottom: 0; }
  .partie__numero { font-size: clamp(5rem, 2.2rem + 6.2vw, 9rem); }
  .partie__etiquette { display: block; margin-top: var(--e-4); }
  .partie__fil { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--rail) + var(--ecart) / 2); width: var(--trame); background: var(--bordure); }
  .partie__fil::before { content: ""; position: absolute; left: -0.5px; top: 0; width: 2px; height: 100%; background: var(--accent); transform: scaleY(var(--p, 1)); transform-origin: top; }
  .partie__fil::after { content: ""; position: absolute; left: -6px; top: -6px; width: 13px; height: 13px; color: color-mix(in srgb, var(--texte) 55%, transparent); background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
}
.partie__suite { position: relative; padding-top: clamp(40px, 5vw, 80px); }
/* Le numéro monte dans son cadre, l'étiquette apparaît après lui. */
.js-mouvement .partie__rail[data-entree] { opacity: 1; transform: none; transition: none; }
.js-mouvement .partie__numero { overflow: clip; padding-block: 0.06em; margin-block: -0.06em; }
.js-mouvement .partie__numero > span { display: block; transform: translateY(110%); transition: transform 1100ms var(--courbe-sortie); }
.js-mouvement .partie__rail.est-visible .partie__numero > span { transform: none; }
.js-mouvement .partie__etiquette { opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--courbe-sortie) 350ms, transform 700ms var(--courbe-sortie) 350ms; }
.js-mouvement .partie__rail.est-visible .partie__etiquette { opacity: 1; transform: none; }

/* Les liens du texte courant : soulignés, au signal quand on les survole. */
.partie a:not(.lien-suite) { text-decoration-color: color-mix(in srgb, var(--texte) 40%, transparent); }
.partie a:not(.lien-suite):hover { text-decoration-color: var(--texte); }
.partie [id] { scroll-margin-top: 64px; }
.partie[id] { scroll-margin-top: 0; }

/* Les noms des connecteurs, dans le chapeau : des repères en chasse fixe, encadrés d'un trait de 1 px. */
.noms { display: inline-block; margin-block: 0.12em; padding: 0.08em 0.42em; border: var(--trame) solid color-mix(in srgb, var(--texte) 38%, transparent); font-family: var(--police-donnees); font-size: 0.78em; line-height: 1.3; letter-spacing: 0; white-space: nowrap; color: var(--texte); }

/* ---------- Les pièces : nom, rôle en chasse fixe, texte, une puce par ligne ---------- */
.pieces { margin: 0; padding: 0; list-style: none; counter-reset: piece; border-top: var(--trame) solid var(--bordure); }
.piece { position: relative; display: grid; gap: var(--e-4) var(--e-8); padding-block: clamp(28px, 3.4vw, 48px); border-bottom: var(--trame) solid var(--bordure); counter-increment: piece; --survol: var(--accent); }
.jour .piece { --survol: var(--texte); }
.piece::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--survol); clip-path: inset(0 100% 0 0); transition: clip-path 640ms var(--courbe-sortie); }
.piece:hover::after, .piece:focus-within::after { clip-path: inset(0 0 0 0); }
.piece__tete::before { content: counter(partie, decimal-leading-zero) "." counter(piece); content: counter(partie, decimal-leading-zero) "." counter(piece) / ""; display: block; margin-bottom: var(--e-3); font-family: var(--police-donnees); font-size: var(--t-donnees); color: var(--texte-doux); }
.piece__nom { font-size: clamp(1.5rem, 1rem + 1.15vw, 2.125rem); letter-spacing: -0.03em; line-height: 1.05; }
.piece__role { margin-top: var(--e-2); font-family: var(--police-interface); font-size: var(--t-donnees); line-height: 1.45; color: var(--texte-doux); }
.piece__texte { display: grid; align-content: start; gap: var(--e-4); max-width: var(--largeur-texte); }
.piece__faits { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; }
.piece__faits li { position: relative; padding: var(--e-3) 0 var(--e-3) var(--e-6); border-top: var(--trame) solid var(--bordure); font-size: var(--t-s); line-height: 1.4; color: var(--texte-doux); }
.piece__faits li::before { content: ""; position: absolute; left: 0; top: calc(var(--e-3) + 0.42em); width: 6px; height: 6px; background: color-mix(in srgb, var(--texte) 45%, transparent); }
.piece__faits li:first-child { border-top: 0; padding-top: 0; }
.piece__faits li:first-child::before { top: 0.42em; }
@media (min-width: 760px) {
  .piece { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .piece__faits { grid-column: 2; }
}
@media (min-width: 1360px) {
  .piece { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); }
  .piece__faits { grid-column: auto; }
}

/* ---------- La fiche : un tableau en chasse fixe, sans fond, avec ses traits de 1 px ---------- */
.fiche__tableau { width: 100%; border-collapse: collapse; }
.fiche__tableau caption { padding-bottom: var(--e-6); text-align: left; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.375rem, 1rem + 1vw, 2rem); letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; }
.fiche__tableau td { font-family: var(--police-interface) !important; }
.fiche__tableau th, .fiche__tableau td { padding: var(--e-3) var(--e-4) var(--e-3) 0; border-top: var(--trame) solid var(--bordure); text-align: left; vertical-align: top; font-family: var(--police-donnees); font-size: 0.875rem; font-weight: 400; line-height: 1.5; }
.fiche__tableau thead th { font-size: var(--t-donnees); color: var(--texte-doux); }
.fiche__tableau tbody th { width: 34%; color: var(--texte-doux); }
.fiche__tableau td { padding-right: 0; color: var(--texte); }
.fiche__tableau tbody tr:last-child th, .fiche__tableau tbody tr:last-child td { border-bottom: var(--trame) solid var(--bordure); }

/* ---------- 03 : la fiche et les cinq niveaux, côte à côte ---------- */
.duo { display: grid; gap: var(--e-12); }
@media (min-width: 1100px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
  .duo .fiche { position: sticky; top: calc(var(--barre) + 50px + var(--e-8)); }
}
.autonomie { display: grid; gap: var(--e-6); align-content: start; }
.autonomie__titre { font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem); letter-spacing: -0.035em; line-height: 1.02; }
.autonomie__intro { max-width: 46ch; color: var(--texte-doux); }
.autonomie__intro strong { display: block; margin-bottom: var(--e-2); font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.5rem, 1rem + 1.3vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--texte); }
.autonomie__fin { max-width: 46ch; color: var(--texte-doux); }

/* La jauge : cinq segments qui montent, allumés au signal à mesure que le bloc traverse l'écran (--p, par data-progression).
   Chaque segment et chaque niveau lisent la même valeur : --on va de 0 à 1 selon le rang --k. */
.suivi { display: grid; gap: var(--e-6); --p0: 0.1; --pas: 0.07; --raide: 10; }
.jauge { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: end; height: clamp(90px, 9vw, 132px); }
.jauge span { display: block; position: relative; height: calc(36% + var(--k) * 16%); overflow: clip; background: color-mix(in srgb, var(--texte) 8%, transparent); border: var(--trame) solid var(--bordure); }
.jauge span::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleY(var(--on)); transform-origin: bottom; }
.niveaux { margin: 0; padding: 0; list-style: none; counter-reset: niveau; border-top: var(--trame) solid var(--bordure); }
.niveaux li { position: relative; counter-increment: niveau; padding: var(--e-3) 0 var(--e-3) 52px; border-bottom: var(--trame) solid var(--bordure); color: color-mix(in srgb, var(--texte) calc(55% + var(--on) * 45%), transparent); }
.niveaux li::before { content: counter(niveau); content: counter(niveau) / ""; position: absolute; left: 0; top: var(--e-3); display: grid; place-items: center; width: 32px; height: 32px; border: var(--trame) solid color-mix(in srgb, var(--texte) 28%, transparent); background: color-mix(in srgb, var(--accent) calc(var(--on) * 100%), transparent); color: color-mix(in srgb, var(--sur-accent) calc(var(--on) * 100%), var(--texte-doux)); font-family: var(--police-donnees); font-size: var(--t-donnees); }
.niveaux strong { display: block; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: var(--t-l); letter-spacing: -0.02em; line-height: 1.2; }
.jauge span, .niveaux li { --on: clamp(0, calc((var(--p, 1) - var(--p0) - var(--k) * var(--pas)) * var(--raide)), 1); }
.jauge span:nth-child(1), .niveaux li:nth-child(1) { --k: 0; }
.jauge span:nth-child(2), .niveaux li:nth-child(2) { --k: 1; }
.jauge span:nth-child(3), .niveaux li:nth-child(3) { --k: 2; }
.jauge span:nth-child(4), .niveaux li:nth-child(4) { --k: 3; }
.jauge span:nth-child(5), .niveaux li:nth-child(5) { --k: 4; }

/* ---------- 04 : le chemin d'une action, parcouru par un point au signal ---------- */
.chemin { display: grid; gap: var(--e-6); }
.chemin__voie { position: relative; }
.chemin__chaine { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: etape; }
.chemin__chaine li { position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 64px; padding-left: 44px; counter-increment: etape; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: var(--t-l); letter-spacing: -0.02em; line-height: 1.15; --allume: clamp(0, calc((var(--t) * 6 - var(--k)) * 4), 1); color: color-mix(in srgb, var(--texte) calc(74% + var(--allume) * var(--v) * 26%), transparent); }
.chemin__chaine li::before { content: ""; position: absolute; left: 0; top: calc(50% - 7px); width: 14px; height: 14px; border: 2px solid var(--texte); background: color-mix(in srgb, var(--accent) calc(var(--allume) * var(--v) * 100%), var(--fond)); }
.chemin__chaine li::after { content: counter(etape, decimal-leading-zero); content: counter(etape, decimal-leading-zero) / ""; order: -1; min-width: 2ch; font-family: var(--police-donnees); font-size: var(--t-donnees); font-weight: 400; letter-spacing: 0; color: var(--texte-doux); }
.chemin__chaine li:nth-child(1) { --k: 0; }
.chemin__chaine li:nth-child(2) { --k: 1; }
.chemin__chaine li:nth-child(3) { --k: 2; }
.chemin__chaine li:nth-child(4) { --k: 3; }
.chemin__chaine li:nth-child(5) { --k: 4; }
.chemin__chaine li:nth-child(6) { --k: 5; }
.chemin__chaine li:nth-child(7) { --k: 6; }
.chemin__voie::before { content: ""; position: absolute; left: 6px; top: calc(100% / 14); bottom: calc(100% / 14); width: var(--trame); background: var(--bordure); }
.chemin__voie::after { content: ""; position: absolute; left: 5px; top: calc(100% / 14); height: calc(100% * 6 / 7); width: 3px; background: var(--accent); transform: scaleY(var(--t)); transform-origin: top; opacity: var(--v); }
.chemin__point { position: absolute; z-index: 2; left: 0; top: calc(100% / 14 - 7px + var(--t) * 100% * 6 / 7); width: 14px; height: 14px; border: 2px solid var(--texte); background: var(--accent); opacity: var(--v); }
.chemin figcaption { max-width: 62ch; color: var(--texte-doux); }
@media (min-width: 900px) {
  .chemin__chaine { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .chemin__chaine li { display: block; min-height: 0; padding: 56px var(--e-3) 0 0; font-size: clamp(1rem, 0.6rem + 0.9vw, 1.25rem); }
  .chemin__chaine li::before { left: 0; top: 0; }
  .chemin__chaine li::after { position: absolute; left: 0; top: 30px; order: 0; }
  .chemin__voie::before { left: 7px; right: auto; top: 6px; bottom: auto; width: calc(100% * 6 / 7); height: var(--trame); }
  .chemin__voie::after { left: 7px; top: 5px; width: calc(100% * 6 / 7); height: 3px; transform: scaleX(var(--t)); transform-origin: left; }
  .chemin__point { top: 0; left: calc(var(--t) * 100% * 6 / 7); }
}
.js-mouvement .chemin.est-visible .chemin__voie { animation: chemin-marche 11s linear infinite; }
@keyframes chemin-marche {
  0% { --t: 0; --v: 0; }
  3% { --t: 0; --v: 1; }
  66% { --t: 1; --v: 1; }
  90% { --t: 1; --v: 1; }
  100% { --t: 1; --v: 0; }
}

/* L'énoncé : ses mots s'allument au défilement (data-mots="defile") ; les deux mots qui ne sont pas garantis portent le signal. */
.regle { margin-top: clamp(56px, 7vw, 112px); font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(2.1rem, 0.9rem + 3.9vw, 5rem); letter-spacing: -0.045em; line-height: 1.02; }
.regle .phrase { display: block; }
.regle .pastille { line-height: 0.96; }

/* Deux courts paragraphes sous un trait de 1 px */
.paire { display: grid; gap: var(--e-8); margin-top: clamp(48px, 6vw, 96px); }
@media (min-width: 900px) { .paire { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-12); } }
.paire > div { display: grid; gap: var(--e-3); align-content: start; padding-top: var(--e-6); border-top: var(--trame) solid var(--bordure); }
.paire h3 { font-size: clamp(1.5rem, 1rem + 1.3vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.05; }
.paire p { max-width: 56ch; color: var(--texte-doux); }

/* ---------- 05 : le socle, le dessin des deux machines et la fiche technique ---------- */
.socle { display: grid; gap: var(--e-12); align-items: start; }
@media (min-width: 1100px) { .socle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); } }
.socle__dessin { display: grid; gap: var(--e-4); max-width: 680px; }
.socle__dessin .machines__dessin { overflow: visible; }
.socle__dessin figcaption { margin-top: 0; }
/* Le dessin se trace à l'entrée : contours d'abord, puis faces, repères et étiquettes. */
.js-mouvement .socle__dessin[data-entree] { opacity: 1; transform: none; transition: none; }
.js-mouvement .socle__dessin .trace { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1900ms var(--courbe-sortie); }
.js-mouvement .socle__dessin:not(.est-visible) .trace { stroke-dashoffset: 100; }
.js-mouvement .socle__dessin .face, .js-mouvement .socle__dessin .face-ombre, .js-mouvement .socle__dessin ellipse { transition: opacity 900ms var(--courbe-sortie) 900ms; }
.js-mouvement .socle__dessin:not(.est-visible) .face, .js-mouvement .socle__dessin:not(.est-visible) .face-ombre, .js-mouvement .socle__dessin:not(.est-visible) ellipse { opacity: 0; }
.js-mouvement .socle__dessin text, .js-mouvement .socle__dessin .lueur, .js-mouvement .socle__dessin figcaption { transition: opacity 800ms var(--courbe-sortie) 1500ms; }
.js-mouvement .socle__dessin:not(.est-visible) text, .js-mouvement .socle__dessin:not(.est-visible) .lueur, .js-mouvement .socle__dessin:not(.est-visible) figcaption { opacity: 0; }
.js-mouvement .socle__dessin.est-visible .lueur { animation: veille 3.2s ease-in-out 2.4s infinite; }
.js-mouvement .socle__dessin.est-visible rect.lueur:nth-of-type(2) { animation-delay: 3.4s; }
@keyframes veille { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- 06 : les sept maillons, sur le parcours à trait de progression ---------- */
.maillons { margin-top: 0; }
.maillons > li { gap: var(--e-4) var(--e-8); padding-bottom: clamp(36px, 4.5vw, 64px); }
.maillons__tete { display: grid; gap: var(--e-2); align-content: start; }
.maillons__corps { display: grid; gap: var(--e-6); align-content: start; }
.maillons__corps > p, .maillons__bloc > p { max-width: var(--largeur-texte); }
.maillons__bloc { display: grid; gap: var(--e-4); }
.maillons__bloc + .maillons__bloc { padding-top: var(--e-6); border-top: var(--trame) solid var(--bordure); }
@media (min-width: 900px) {
  .maillons > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
@media (min-width: 1100px) {
  .maillons__bloc { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-8); align-items: start; }
}

/* ---------- Appel et pied : repris de l'accueil ---------- */
.appel .t-intro { text-wrap: balance; }

/* Numérotation des pièces : on compte les parties à partir du sommaire (01, 02, 03…), la section d’ouverture « 00 » n’est pas comptée. */
.parties { counter-reset: partie; }