/* Les pages « Le moteur évolue » et « La formation » (22/10) : une visualisation par page, le reste calme.
   Chargée après site.css, sur le-moteur-evolue.html, formation.html et leurs pages anglaises seules.
   - Le point orange est le personnage : votre worker, ou votre équipe (.point-worker, compté par les contrôles comme
     le point final d'un titre). Un seul par écran : les titres de ces pages n'ont pas de point final orange.
   - Chaque visualisation est écrite dans son état final : c'est la version sans animation (sans JavaScript, ou en
     prefers-reduced-motion). La courbe du haut se dessine en CSS seul ; le tri, la constellation et le pont sont mis
     en mouvement par evolution.js, une fois, quand ils entrent à l'écran. Plus lents depuis le 23/10 (Yann) ; le tri,
   plus long que cinq secondes, a sa commande Pause, Reprendre, Rejouer (.tri__commande). */

/* ------------------------------------------------------------------ commun */
.evo-titre { max-width: 22ch; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.evo-texte { max-width: 58ch; margin-top: 22px; font-size: var(--taille-chapeau); line-height: 1.55; }
.registre-nuit .evo-texte { color: var(--blanc-doux); }
.evo-phrase { max-width: 26ch; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.evo-phrase + .evo-texte { margin-top: 26px; }

/* ------------------------------------------------------------------ 1. la courbe du haut (et sa miniature) */
.evo-hero { padding-block: 56px 72px; }
@media (min-width: 900px) { .evo-hero { padding-block: 88px 104px; } }
.evo-hero__grille { display: grid; gap: 40px; }
@media (min-width: 1000px) { .evo-hero__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; } }
.evo-hero .title-page { max-width: 18ch; }

.courbe { margin: 0; }
.courbe__svg { display: block; width: 100%; height: auto; overflow: visible; }
.courbe__axe { fill: none; stroke: var(--gris-1); stroke-width: 2; }
.courbe__trace { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.courbe__trace--logiciel { stroke: var(--gris-2); stroke-dasharray: none; }
.courbe__trace--worker { stroke: var(--nuit); stroke-width: 5; }
.courbe__point { fill: var(--orange); }
.courbe__legende { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 15px; color: var(--gris-3); }
.courbe__cle { display: inline-flex; align-items: center; gap: 10px; }
.courbe__cle::before { content: ""; width: 26px; height: 0; border-top: 4px solid var(--gris-2); border-radius: 2px; }
.courbe__cle--worker::before { border-top-color: var(--nuit); border-top-width: 5px; }

@media (prefers-reduced-motion: no-preference) {
  .courbe--anime .courbe__trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: evo-trace 2.4s var(--ease) .4s forwards; }
  .courbe--anime .courbe__trace--worker { animation-duration: 3.2s; animation-delay: .6s; }
  .courbe--anime .courbe__point { opacity: 0; transform-box: fill-box; transform-origin: center; animation: evo-apparait .6s var(--ease) 3.8s forwards; }
}
@keyframes evo-trace { to { stroke-dashoffset: 0; } }
@keyframes evo-apparait { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ 2. et 4. les phrases (le pourquoi, le comment) */
.evo-calme { padding-block: 72px; }
@media (min-width: 900px) { .evo-calme { padding-block: 120px; } }

/* ------------------------------------------------------------------ 3. le tri, sur nuit
   Sans animation : trois colonnes (les nouveautés, le filtre, votre worker), empilées sous 900 px.
   Animé (.tri--anime, posé par evolution.js) : une scène verticale ; les étiquettes tombent à leur place, posées sur
   le filtre, et la plupart s'y estompent ; une seule passe, devient le point orange et rejoint la carte, dont la
   version gagne un cran. */
.tri { display: grid; gap: 36px; margin-top: 48px; }
@media (min-width: 900px) { .tri { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 40px; align-items: center; margin-top: 64px; } }
.tri__col { min-width: 0; }
.tri__titre { margin: 0 0 14px; font-size: 14px; color: var(--gris-2); }
.tri__etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tri__etiquette { padding: 5px 12px; border: 1px solid var(--filet-nuit); border-radius: 999px; background: #1A1A20; font-size: 14px; line-height: 1.4; color: var(--gris-2); }
.tri__etiquette--gardee { border-color: var(--gris-2); color: var(--blanc); }
.tri__filtre { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 15px; font-weight: 500; color: var(--blanc); }
.tri__ligne { flex: 1 1 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--blanc) 0 10px, transparent 10px 16px); }
.tri__note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--gris-2); }
.tri__carte { padding: 22px 24px; border-radius: 12px; background: var(--papier); color: var(--nuit); }
.tri__carte-titre { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.tri__point { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
.tri__version { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 14px; color: var(--gris-3); }
.tri__crans { display: flex; gap: 4px; }
.tri__cran { width: 18px; height: 6px; border-radius: 3px; background: var(--gris-1); transition: background-color .4s ease; }
.tri__cran--plein { background: var(--nuit); }
.tri__ajout { margin: 12px 0 0; font-size: 15px; line-height: 1.5; transition: opacity .5s ease; }
.tri__voyageur { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); pointer-events: none; }

.tri--anime { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; margin-inline: auto; }
.tri--anime .tri__etiquettes { margin-top: 96px; }
.tri--anime .tri__col--filtre { padding-block: 16px 48px; }
.tri--anime .tri__note { display: none; }
.tri--anime .tri__col--worker { width: 100%; max-width: 380px; margin-inline: auto; }
.tri--anime:not(.tri--fini) .tri__etiquette { opacity: 0; }
.tri--anime:not(.tri--fini) .tri__point { opacity: 0; }
.tri--anime:not(.tri--fini) .tri__cran--nouveau { background: var(--gris-1); }
.tri--anime:not(.tri--fini) .tri__ajout { opacity: 0; }
.tri__point { transition: opacity .3s ease; }
.tri__pied { display: flex; justify-content: center; margin: 24px 0 0; }
.tri__commande { min-height: 40px; padding: 6px 16px; border: 1px solid var(--blanc); border-radius: 999px; background: transparent; color: var(--blanc); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.tri__commande:hover { background: var(--blanc); color: var(--nuit); }

/* ------------------------------------------------------------------ 5. ce que l'abonnement vous apporte */
.apports { display: grid; gap: 0; margin: 48px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gris-1); }
@media (min-width: 760px) { .apports { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; } }
.apport { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 18px; align-content: start; padding: 32px 0; border-bottom: 1px solid var(--gris-1); }
.apport .picto { width: 24px; height: 24px; margin-top: 2px; color: var(--nuit); }
.apport__titre { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.apport__texte { grid-column: 2; margin: 6px 0 0; max-width: 46ch; }
.apport__texte a { color: var(--iris); }

/* 6. l'effet réseau : une constellation sous le dernier bloc, déclenchée une fois */
.constellation { grid-column: 2; margin: 22px 0 0; max-width: 300px; }
.constellation svg { display: block; width: 100%; height: auto; }
.constel__lien { fill: none; stroke: var(--gris-2); stroke-width: 1.5; }
.constel__point { fill: var(--nuit); }
.constel__point--origine { fill: var(--orange); }
/* les transitions ne valent qu'à l'arrivée (.est-visible) : poser l'état de départ ne doit rien animer */
.constellation--anime .constel__lien { stroke-dasharray: 1; stroke-dashoffset: 1; stroke: var(--gris-1); }
.constellation--anime .constel__point { fill: var(--gris-1); }
.constellation--anime.est-visible .constel__lien { stroke-dashoffset: 0; stroke: var(--gris-2); transition: stroke-dashoffset 1s var(--ease), stroke 1s ease; }
.constellation--anime.est-visible .constel__point { fill: var(--nuit); transition: fill .7s ease; }
.constellation--anime.est-visible .constel__point--origine { fill: var(--orange); transition-delay: 0s; }
.constellation--anime.est-visible .constel__lien--1 { transition-delay: .7s; }
.constellation--anime.est-visible .constel__point--1 { transition-delay: 1.4s; }
.constellation--anime.est-visible .constel__lien--2 { transition-delay: 1.5s; }
.constellation--anime.est-visible .constel__point--2 { transition-delay: 2.2s; }
.constellation--anime.est-visible .constel__lien--3 { transition-delay: 2.3s; }
.constellation--anime.est-visible .constel__point--3 { transition-delay: 3s; }

/* ------------------------------------------------------------------ 7. le contraste */
.contraste { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.contraste li { max-width: 30ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); color: var(--gris-2); }
.contraste li:last-child { margin-top: 10px; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); color: var(--nuit); }

/* ------------------------------------------------------------------ 8. la fin */
.evo-fin .title-section { max-width: 26ch; }

/* ------------------------------------------------------------------ formation, 2. le pont, sur papier
   Deux barres côte à côte (les chiffres de l'accueil, même source) ; un pont se construit entre les deux, le point
   orange le traverse. Sans animation : les barres, le pont, et le point au milieu du pont. */
.ecart { display: grid; gap: 40px; }
@media (min-width: 1000px) { .ecart { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; } }
.pont { position: relative; margin: 0; }
.pont__scene { position: relative; }
.pont__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pont__sol { fill: none; stroke: var(--gris-1); stroke-width: 2; }
.pont__barre { fill: var(--nuit); }
.pont__tablier { fill: none; stroke: var(--gris-2); stroke-width: 5; stroke-linecap: round; }
.pont__pile { fill: none; stroke: var(--gris-1); stroke-width: 2; }
.pont__point { fill: var(--orange); }
.pont__nom { position: absolute; top: 24%; left: 54%; max-width: 15ch; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--gris-3); }
.pont__valeurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; text-align: center; }
.pont__valeur { display: block; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.pont__ou { display: block; margin-top: 4px; font-size: 15px; color: var(--gris-3); }

/* les transitions ne valent qu'à l'arrivée (.est-visible) : poser l'état de départ ne doit rien animer */
.pont--anime .pont__barre { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.pont--anime .pont__tablier, .pont--anime .pont__pile { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pont--anime .pont__nom { opacity: 0; }
.pont--anime.est-visible .pont__barre { transition: transform 1.3s var(--ease); }
.pont--anime.est-visible .pont__barre--entreprise { transition-delay: .3s; }
.pont--anime.est-visible .pont__tablier { transition: stroke-dashoffset 1.4s var(--ease) 1.3s; }
.pont--anime.est-visible .pont__pile { transition: stroke-dashoffset .7s var(--ease) 2.2s; }
.pont--anime.est-visible .pont__nom { transition: opacity .8s ease 2.2s; }
.pont--anime .pont__point { opacity: 0; }
.pont--anime.est-visible .pont__barre { transform: none; }
.pont--anime.est-visible .pont__tablier, .pont--anime.est-visible .pont__pile { stroke-dashoffset: 0; }
.pont--anime.est-visible .pont__nom { opacity: 1; }

/* formation, 4. les quatre parcours : des onglets (le motif de site.js, [data-onglets]) ; sous 760 px, ou sans
   JavaScript, des cartes empilées, chacune avec son titre */
.parcours { margin-top: 44px; }
.parcours__liste { display: none; }
.parcours__panneau { padding: 28px; border: 1px solid var(--gris-1); border-radius: 12px; background: var(--papier); }
.parcours__panneau + .parcours__panneau { margin-top: 16px; }
.parcours__titre { margin-bottom: 18px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.parcours__faits { display: grid; gap: 18px; margin: 0; }
.parcours__faits dt { font-size: 14px; font-weight: 500; color: var(--gris-3); }
.parcours__faits dd { margin: 4px 0 0; max-width: 60ch; }
.parcours__faits a { color: var(--iris); }
@media (min-width: 760px) {
  .parcours__panneau { padding: 36px 40px; }
  .parcours__faits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .js .parcours__liste { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
  .js .parcours__panneau + .parcours__panneau { margin-top: 0; }
  .js .parcours__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 759.98px) {
  /* les cartes empilées : site.js cache les panneaux non choisis, on les montre tous */
  .parcours__panneau[hidden] { display: block; }
}
.parcours__onglet { min-height: 44px; padding: 10px 18px; border: 1px solid var(--gris-1); border-radius: 999px; background: var(--papier); font: inherit; font-size: 16px; font-weight: 500; color: var(--gris-3); cursor: pointer; }
.parcours__onglet:hover { border-color: var(--nuit); color: var(--nuit); }
.parcours__onglet[aria-selected="true"] { border-color: var(--nuit); background: var(--nuit); color: var(--papier); }

/* formation, 5. ce que vos équipes y gagnent : trois lignes, grande typographie */
.gains { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gris-1); }
.gains li { padding: 26px 0; border-bottom: 1px solid var(--gris-1); max-width: 34ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
@media (min-width: 900px) { .gains li { max-width: none; padding: 34px 0; } }