/* HUB IA, nouveau site : page « Solution » (14 octobre 2026).
   Aucune couleur ni police en dur : tout passe par styles/jetons.css.
   Le mouvement vient des crochets de scripts/site.js (data-mots, data-entree, data-compte, data-pixels, data-epingle)
   et de scripts/page-solution.js (frise du jour, gains au centre, pause).
   Sans script ou avec « réduire les animations », tout est visible dans son état final : chaque effet est écrit sous .js-mouvement. */

:root { --sommaire: 50px; }

/* ---------- Bouton de pause (ruban et états hors connexion) ---------- */
.sol-pause { display: none; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-4); background: transparent; color: var(--texte-doux); border: var(--trame) solid var(--bordure); border-radius: var(--rayon-action); font-family: var(--police-donnees); font-size: 0.75rem; cursor: pointer; transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe); }
.sol-pause:hover { color: var(--texte); border-color: var(--texte); }
.sol-pause svg { width: 11px; height: 11px; flex: none; }
.sol-pause__lire { display: none; }
.sol-pause.est-en-pause .sol-pause__pause { display: none; }
.sol-pause.est-en-pause .sol-pause__lire { display: block; }
.js-mouvement .sol-pause { display: inline-flex; }

/* ---------- 1. En-tête ---------- */
.sol-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-8) var(--e-6); }
.sol-tete__chapeau { color: var(--texte); font-size: clamp(1.5rem, calc(1rem + 1.5vw), 2.5rem); letter-spacing: -0.025em; line-height: 1.1; }
@media (min-width: 1100px) {
  /* Grand écran : l'en-tête occupe le premier écran, le sommaire se pose au bas du pli, le constat en haut, le texte en bas à droite. */
  .sol-tete { display: flex; flex-direction: column; min-height: max(560px, calc(100svh - var(--sommaire))); }
  .sol-tete__grille { flex: 1; align-content: space-between; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(32px, 4.5vw, 64px); }
  .sol-tete__grille h1 { grid-column: 1 / -1; }
  .sol-tete__texte { grid-column: 7 / -1; }
}

/* ---------- 3. Un dossier, une journée ---------- */
.sol-journee { position: relative; background: var(--fond); color: var(--texte); padding-block: clamp(80px, 11vw, 168px); border-top: var(--trame) solid var(--bordure); --sol-mom: clamp(300px, 34vw, 620px); }
/* La largeur utile de la scène (sans la barre de défilement) sert à caler la frise : 100cqw, ou 100vw si le navigateur ne connaît pas les unités de conteneur. */
.sol-journee__scene { container-type: inline-size; --sol-pleine: 100vw; }
@supports (width: 1cqw) { .sol-journee__scene { --sol-pleine: 100cqw; } }
.sol-journee__scene { --sol-marge: max(var(--gouttiere), calc((var(--sol-pleine) - 1520px) / 2)); --sol-rail: min(calc(var(--sol-pleine) - 2 * var(--gouttiere)), 1520px); }

.sol-journee__tete { display: grid; gap: var(--e-6) var(--e-12); margin-bottom: clamp(32px, 5vw, 72px); }
@media (min-width: 1100px) { .sol-journee__tete { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.sol-journee__tete p { max-width: 46ch; }

/* Repli (sans script, animations réduites, petit écran) : la journée en grille de cases, puis en liste verticale. */
.sol-journee__piste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--bordure); border: var(--trame) solid var(--bordure); }
@media (min-width: 700px) { .sol-journee__piste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sol-journee__piste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sol-moment { position: relative; display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; padding: clamp(20px, 2.4vw, 36px); background: var(--fond); }
.sol-moment__quand { display: grid; gap: var(--e-1); }
.sol-moment__quand time { display: block; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(3rem, calc(2rem + 3.2vw), 5.25rem); letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sol-moment__quand span { font-family: var(--police-interface); font-size: var(--t-donnees); color: var(--texte-doux); }
.sol-moment__fait { color: var(--texte-doux); }
.sol-moment__fait strong { display: block; margin-bottom: var(--e-1); color: var(--texte); font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.25rem, calc(1rem + 0.5vw), 1.5rem); letter-spacing: -0.02em; line-height: 1.2; }
.sol-moment__piece { margin-top: auto; padding-top: var(--e-2); font-family: var(--police-interface); font-size: var(--t-donnees); }
.sol-moment__piece a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); text-decoration: none; color: var(--texte); }
.sol-moment__piece a::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); }
.sol-moment__piece a:hover { text-decoration: underline; }
.sol-journee__rail { display: none; }
.sol-journee__chute { display: grid; gap: var(--e-4) var(--e-12); margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 1100px) { .sol-journee__chute { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.sol-journee__chute p:first-child { font-size: var(--t-intro); line-height: 1.25; letter-spacing: -0.012em; max-width: 40ch; }

/* Téléphone : liste verticale, avec le trait de progression du jour qui descend le long des heures. */
@media (max-width: 699px) {
  .sol-journee__piste { position: relative; gap: 0; padding-left: 36px; background: none; border: 0; }
  .sol-journee__piste::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: var(--trame); background: var(--bordure); }
  .sol-journee__piste::after { content: ""; position: absolute; left: 6px; top: 12px; width: 3px; height: calc((100% - 24px) * var(--p, 0)); background: var(--accent); }
  .sol-moment { padding: 0 0 var(--e-12); background: none; }
  .sol-moment:last-child { padding-bottom: 0; }
  .sol-moment::before { content: ""; position: absolute; left: -36px; top: 0.5rem; width: 15px; height: 15px; background: var(--fond); border: 2px solid var(--texte); }
  .sol-moment__quand time { font-size: clamp(3rem, 15vw, 4.25rem); }
}

/* Scène épinglée (grand écran, script actif, animations permises) : la frise défile à l'horizontale avec --p. */
@media (min-width: 900px) and (min-height: 560px) {
  .js-mouvement .sol-journee { height: 300svh; padding-block: 0; border-top: 0; scroll-margin-top: calc(-1 * (var(--barre) + var(--e-4))); }
  .js-mouvement .sol-journee__scene { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; padding-top: calc(var(--barre) + var(--sommaire) + clamp(12px, 3svh, 32px)); padding-bottom: clamp(12px, 3svh, 28px); row-gap: clamp(10px, 2.2svh, 28px); overflow: clip; }
  .js-mouvement .sol-journee__tete, .js-mouvement .sol-journee__chute { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; margin-block: 0; }
  .js-mouvement .sol-journee__tete h2 { font-size: clamp(1.625rem, calc(0.6rem + 2.6svh + 1.2vw), 3rem); letter-spacing: -0.035em; }
  .js-mouvement .sol-journee__tete p { font-size: clamp(1rem, calc(0.8rem + 0.45vw), 1.25rem); }
  .js-mouvement .sol-journee__fenetre { width: 100%; margin-inline: 0; align-self: center; overflow: clip; }
  .js-mouvement .sol-journee__piste { display: flex; width: max-content; gap: 0; padding-inline: var(--sol-marge); background: none; border: 0; transform: translateX(calc(var(--p, 0) * (var(--sol-pleine) - 100%))); will-change: transform; }
  .js-mouvement .sol-moment { flex: none; width: var(--sol-mom); gap: clamp(8px, 1.8svh, 20px); padding: clamp(14px, 3.6svh, 44px) clamp(18px, 2vw, 32px); background: none; border-top: var(--trame) solid var(--bordure); border-bottom: var(--trame) solid var(--bordure); border-left: var(--trame) solid var(--bordure); }
  .js-mouvement .sol-moment:first-child { padding-left: 0; border-left: 0; }
  .js-mouvement .sol-moment:last-child { border-right: var(--trame) solid var(--bordure); }
  .js-mouvement .sol-moment::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--courbe-sortie); }
  .js-mouvement .sol-moment.est-actif::before { transform: none; }
  .js-mouvement .sol-moment__quand time { font-size: clamp(2.75rem, min(13svh, calc(var(--sol-mom) / 4)), 8.5rem); opacity: 0.38; transition: opacity 500ms var(--courbe); }
  .js-mouvement .sol-moment__quand span, .js-mouvement .sol-moment__fait, .js-mouvement .sol-moment__piece { opacity: 0.72; transition: opacity 500ms var(--courbe); }
  .js-mouvement .sol-moment.est-actif .sol-moment__quand time, .js-mouvement .sol-moment.est-actif .sol-moment__quand span, .js-mouvement .sol-moment.est-actif .sol-moment__fait, .js-mouvement .sol-moment.est-actif .sol-moment__piece { opacity: 1; }
  .js-mouvement .sol-moment__fait { font-size: clamp(1rem, 1.9svh, 1.375rem); }
  .js-mouvement .sol-moment__fait strong { font-size: clamp(1.125rem, 2.7svh, 1.875rem); }
  .js-mouvement .sol-moment__piece a { min-height: 32px; }

  /* Le trait de progression : une règle, six repères, un repère mobile au signal. */
  .js-mouvement .sol-journee__rail { display: block; position: relative; height: 24px; --cote: 11px; }
  .js-mouvement .sol-journee__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--trame); background: var(--bordure); }
  .js-mouvement .sol-journee__trait { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
  .js-mouvement .sol-journee__rail i { position: absolute; top: 50%; left: calc(var(--k) * (100% - var(--cote)) / 5); width: var(--cote); height: var(--cote); margin-top: calc(var(--cote) / -2); background: var(--fond); border: var(--trame) solid var(--bordure); transition: background-color var(--duree-lente) var(--courbe), border-color var(--duree-lente) var(--courbe); }
  .js-mouvement .sol-journee__rail i.est-atteint { background: var(--accent); border-color: var(--accent); }
  .js-mouvement .sol-journee__rail b { position: absolute; left: 0; top: 50%; width: var(--cote); height: var(--cote); margin-top: calc(var(--cote) / -2); background: var(--texte); transform: translateX(calc(var(--p, 0) * (var(--sol-rail) - 100%))); }

  /* La chute n'apparaît qu'à la fin de la scène (elle reste dans le texte pour les lecteurs d'écran ; le clavier y amène la page). */
  .js-mouvement .sol-journee__chute { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--courbe-sortie), transform 700ms var(--courbe-sortie); }
  .js-mouvement .sol-journee__chute.est-montre { opacity: 1; transform: none; }
  .js-mouvement .sol-journee__chute p:first-child { font-size: clamp(1.125rem, calc(0.8rem + 0.8vw), 1.625rem); }
}

/* ---------- 4. Votre lundi matin ---------- */
.sol-matin { border-top: var(--trame) solid var(--bordure); }
.sol-matin__grille { display: grid; gap: var(--e-12) clamp(40px, 5vw, 88px); }
@media (min-width: 1100px) {
  .sol-matin__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .sol-matin__titre { grid-column: 1 / -1; }
}
.sol-matin__titre { max-width: 22ch; }
.sol-verbes { margin: 0; padding: 0; list-style: none; border-top: var(--trame) solid var(--bordure); }
.sol-verbes li { display: grid; gap: var(--e-2); padding-block: var(--e-6); border-bottom: var(--trame) solid var(--bordure); }
.sol-verbes strong { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(2rem, calc(1rem + 2.6vw), 3.5rem); letter-spacing: -0.04em; line-height: 1; }
.sol-verbes strong::after { content: ""; display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.16em; background: var(--accent); vertical-align: 0.1em; }
.sol-verbes span { max-width: 38ch; color: var(--texte-doux); }
.sol-console { min-height: 0; }

/* ---------- 5. Dispersé, relié, et les huit gains ---------- */
.sol-tableau { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sol-tableau th, .sol-tableau td { text-align: left; vertical-align: top; }
.sol-tableau thead th { padding: var(--e-3) var(--e-4) var(--e-3) 0; font-family: var(--police-interface); font-weight: 400; font-size: var(--t-donnees); color: var(--texte-doux); border-bottom: var(--trame) solid var(--texte); }
.sol-tableau tbody > tr > * { padding: var(--e-6) var(--e-4) var(--e-6) 0; border-bottom: var(--trame) solid var(--bordure); }
.sol-tableau tbody th { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.125rem, calc(0.8rem + 1vw), 1.875rem); letter-spacing: -0.025em; line-height: 1.1; }
.sol-tableau td { color: var(--texte-doux); }
.sol-tableau .nous { position: relative; isolation: isolate; padding-left: var(--e-4); color: var(--texte); }
.sol-tableau thead .nous { box-shadow: inset 0 4px 0 var(--accent); padding-top: var(--e-4); font-weight: 500; }
.sol-tableau td.nous::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--accent) 15%, transparent); transform-origin: 0 50%; }

.sol-change .sol-tableau { margin-top: clamp(40px, 6vw, 88px); }
@media (min-width: 760px) {
  .sol-tableau--change thead th:nth-child(1), .sol-tableau--change tbody th { width: 22%; }
  .sol-tableau--change thead th:nth-child(2), .sol-tableau--change tbody td:nth-child(2) { width: 34%; }
}
.sol-change__chute { max-width: 38ch; margin-top: clamp(56px, 8vw, 128px); font-size: clamp(1.75rem, calc(0.9rem + 2.6vw), 3.5rem); line-height: 1.04; }

.sol-gains { margin-top: clamp(80px, 11vw, 168px); }
.sol-gains__liste { margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: var(--trame) solid var(--texte); }
.sol-gain { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2) var(--e-4); align-items: baseline; padding-block: clamp(20px, 2.6vw, 36px); border-bottom: var(--trame) solid var(--bordure); }
.sol-gain::before { content: ""; width: 14px; height: 14px; align-self: start; margin-top: clamp(0.6rem, 1.4vw, 1.4rem); background: var(--accent); border: 2px solid var(--texte); transition: background-color 400ms var(--courbe), border-color 400ms var(--courbe); }
.sol-gain h4 { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.75rem, calc(0.9rem + 2.9vw), 3.75rem); letter-spacing: -0.035em; line-height: 1.02; transition: color 500ms var(--courbe); }
.sol-gain p { grid-column: 2; color: var(--texte-doux); transition: color 500ms var(--courbe); }
.sol-gain p a { color: var(--texte); }
@media (min-width: 900px) {
  .sol-gain { grid-template-columns: 14px minmax(0, 7fr) minmax(0, 4fr); gap: var(--e-8); }
  .sol-gain p { grid-column: auto; }
}
.js-mouvement .sol-gain:not(.est-centre)::before { background: transparent; border-color: var(--bordure); }
.js-mouvement .sol-gain:not(.est-centre) h4 { color: color-mix(in srgb, var(--texte) 50%, transparent); }
.js-mouvement .sol-gain.est-centre p { color: var(--texte); }
.sol-gains__suite { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- 6. Vos systèmes connectés ---------- */
.sol-connecteurs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sol-connecteurs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sol-connecteurs li { position: relative; display: flex; align-items: flex-end; min-height: clamp(104px, 11vw, 168px); padding: var(--e-6); background: var(--fond); font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.25rem, calc(0.8rem + 1.5vw), 2.5rem); letter-spacing: -0.03em; line-height: 1.05; }
.sol-connecteurs li::before { content: ""; position: absolute; left: var(--e-6); top: var(--e-6); width: 8px; height: 8px; background: var(--accent); }
.sol-connecteurs .sol-connecteurs__autres { grid-column: span 2; background: var(--surface); }
.js-mouvement .sol-connecteurs li::before { background: var(--bordure); transition: background-color var(--duree-lente) var(--courbe); transition-delay: calc(var(--i, 0) * 90ms + 500ms); }
.js-mouvement .sol-connecteurs li.est-visible::before { background: var(--accent); }

/* Le ruban : arrêté et rangé sur plusieurs lignes par défaut, il défile lentement quand les animations sont permises. */
.sol-ruban { margin-top: clamp(32px, 4vw, 64px); }
.sol-ruban__fenetre { position: relative; padding-block: var(--e-4); border-block: var(--trame) solid var(--bordure); }
.sol-ruban__piste { display: block; }
.sol-ruban__groupe { display: flex; flex-wrap: wrap; flex: none; gap: var(--e-2) 0; margin: 0; padding: 0; list-style: none; }
.sol-ruban__groupe + .sol-ruban__groupe { display: none; }
.sol-ruban__groupe li { display: inline-flex; align-items: center; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.75rem, calc(0.8rem + 3vw), 3.5rem); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; color: color-mix(in srgb, var(--texte) 62%, transparent); }
.sol-ruban__groupe li::after { content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin-inline: 0.6em; background: var(--accent); }
.sol-ruban__groupe li:last-child::after { display: none; }
.js-mouvement .sol-ruban__groupe li:last-child::after { display: inline-block; }
.sol-ruban__bas { display: flex; justify-content: flex-end; margin-top: var(--e-3); }
.js-mouvement .sol-ruban__fenetre { overflow: clip; padding-block: var(--e-6); }
.js-mouvement .sol-ruban__fenetre::before, .js-mouvement .sol-ruban__fenetre::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(40px, 10vw, 160px); pointer-events: none; }
.js-mouvement .sol-ruban__fenetre::before { left: 0; background: linear-gradient(90deg, var(--fond), transparent); }
.js-mouvement .sol-ruban__fenetre::after { right: 0; background: linear-gradient(270deg, var(--fond), transparent); }
.js-mouvement .sol-ruban__piste { display: flex; width: max-content; animation: sol-ruban 70s linear infinite; }
.js-mouvement .sol-ruban__groupe, .js-mouvement .sol-ruban__groupe + .sol-ruban__groupe { display: flex; flex-wrap: nowrap; }
.js-mouvement .sol-ruban__groupe li { font-size: clamp(2rem, calc(0.8rem + 4vw), 4.5rem); }
@keyframes sol-ruban { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: hover) { .sol-ruban__fenetre:hover .sol-ruban__piste { animation-play-state: paused; } }
.sol-en-pause .sol-ruban__piste { animation-play-state: paused; }

.sol-garanties { margin: clamp(48px, 6vw, 96px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .sol-garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sol-garanties { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sol-garanties li { display: grid; align-content: start; gap: var(--e-4); padding: var(--e-6); background: var(--fond); font-size: var(--t-l); line-height: 1.3; letter-spacing: -0.01em; }
.sol-garanties li::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.sol-droits { display: grid; gap: var(--e-6) var(--e-12); margin-top: clamp(48px, 6vw, 96px); }
@media (min-width: 1100px) { .sol-droits { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.sol-droits .t-sous { max-width: 34ch; }

/* ---------- 7. Pensé pour le terrain ---------- */
.sol-milieux { align-items: start; }
.sol-milieux__liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sol-milieux__liste li { position: relative; display: flex; align-items: flex-end; min-height: clamp(96px, 10vw, 152px); padding: var(--e-6); background: var(--surface); font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.375rem, calc(0.8rem + 1.6vw), 2.5rem); letter-spacing: -0.03em; line-height: 1.05; }
.sol-milieux__premier::before { content: ""; position: absolute; left: var(--e-6); top: var(--e-6); width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--texte); }
@media (max-width: 479px) { .sol-milieux__liste li { padding: var(--e-4); font-size: 1.25rem; } .sol-milieux__premier::before { left: var(--e-4); top: var(--e-4); } }
@media (max-width: 359px) { .sol-milieux__liste li { font-size: 1.125rem; } }
.sol-milieux__texte { font-size: var(--t-intro); line-height: 1.3; letter-spacing: -0.012em; max-width: 36ch; }
.sol-milieux__tete { display: block; margin-bottom: var(--e-3); color: var(--texte); }
.sol-terrain__detail { margin-top: clamp(64px, 8vw, 128px); margin-bottom: clamp(24px, 3vw, 48px); }
.sol-rangees { border-top: var(--trame) solid var(--texte); }
.sol-rangee { display: grid; gap: var(--e-6) var(--e-12); padding-block: clamp(28px, 3.5vw, 56px); border-bottom: var(--trame) solid var(--bordure); }
@media (min-width: 1100px) { .sol-rangee { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.sol-rangee__tete { display: grid; align-content: start; gap: var(--e-2); }
.sol-rangee__corps { min-width: 0; }
.sol-rangee__texte { max-width: var(--largeur-texte); }

.sol-profils { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .sol-profils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sol-profils { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sol-profils li { display: flex; align-items: flex-end; min-height: 76px; padding: var(--e-3) var(--e-4); background: var(--surface); font-size: var(--t-m); line-height: 1.2; }
.js-mouvement .sol-profils [data-entree] { transition-delay: calc(var(--i, 0) * 40ms); }

/* Les six chaînes : chaque étape passe le relais à la suivante. */
.sol-chaines { margin: 0; padding: 0; list-style: none; border-top: var(--trame) solid var(--bordure); }
.sol-chaines li { display: flex; flex-wrap: wrap; align-items: center; padding-block: var(--e-4); border-bottom: var(--trame) solid var(--bordure); }
.sol-chaines li:last-child { border-bottom: 0; }
.sol-noeud { position: relative; display: inline-flex; align-items: center; gap: var(--e-2); font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.125rem, calc(0.8rem + 0.9vw), 1.625rem); letter-spacing: -0.02em; line-height: 1.15; }
.sol-noeud::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); border: 2px solid var(--texte); box-sizing: border-box; }
.sol-noeud + .sol-noeud, .visuellement-cache + .sol-noeud { margin-left: 56px; }
.sol-noeud + .sol-noeud::after, .visuellement-cache + .sol-noeud::after { content: ""; position: absolute; left: -44px; top: 50%; width: 32px; height: var(--trame); background: var(--texte); }
@media (max-width: 759px) {
  .sol-chaines li { flex-direction: column; align-items: flex-start; }
  .sol-noeud + .sol-noeud, .visuellement-cache + .sol-noeud { margin-left: 0; margin-top: 18px; }
  .sol-noeud + .sol-noeud::after, .visuellement-cache + .sol-noeud::after { left: 4px; top: -16px; width: var(--trame); height: 12px; }
}

/* Les quatre états : un repère les parcourt, un à un. Au repos : tout est confirmé. */
@property --sol-allume { syntax: "<number>"; inherits: true; initial-value: 1; }
.sol-etats { position: relative; margin-top: clamp(32px, 4vw, 56px); --nd: 13px; }
.sol-etats__liste { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sol-etats__liste li { position: relative; padding: calc(var(--nd) + var(--e-4)) var(--e-3) 0 0; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.125rem, calc(0.7rem + 1.1vw), 1.75rem); letter-spacing: -0.025em; line-height: 1.1; color: color-mix(in srgb, var(--texte) calc(var(--sol-allume) * 100%), var(--texte-doux)); }
.sol-etats__liste li::before { content: ""; position: absolute; left: 0; top: 0; width: var(--nd); height: var(--nd); box-sizing: border-box; background: var(--fond); border: 2px solid var(--texte); }
.sol-etats__liste li::after { content: ""; position: absolute; left: 0; top: 0; width: var(--nd); height: var(--nd); box-sizing: border-box; background: var(--accent); border: 2px solid var(--texte); opacity: var(--sol-allume); }
.sol-etats::before { content: ""; position: absolute; left: calc(var(--nd) / 2); top: calc(var(--nd) / 2 - 1px); width: 75%; height: 2px; background: var(--texte); transform-origin: 0 50%; }
.sol-etats__repere { position: absolute; left: 0; top: 0; z-index: 1; width: 25%; height: var(--nd); transform: translateX(300%); pointer-events: none; }
.sol-etats__repere::after { content: ""; position: absolute; left: 0; top: -3px; width: calc(var(--nd) + 6px); height: calc(var(--nd) + 6px); box-sizing: border-box; border: 2px solid var(--texte); }
.sol-etats__bas { display: flex; justify-content: flex-end; margin-top: var(--e-6); }
.js-mouvement .sol-etats::before { animation: sol-trait 12s var(--courbe) infinite; }
.js-mouvement .sol-etats__repere { animation: sol-repere 12s var(--courbe) infinite; }
.js-mouvement .sol-etats__liste li:nth-child(1) { animation: sol-noeud-1 12s linear infinite; }
.js-mouvement .sol-etats__liste li:nth-child(2) { animation: sol-noeud-2 12s linear infinite; }
.js-mouvement .sol-etats__liste li:nth-child(3) { animation: sol-noeud-3 12s linear infinite; }
.js-mouvement .sol-etats__liste li:nth-child(4) { animation: sol-noeud-4 12s linear infinite; }
@keyframes sol-repere { 0% { transform: translateX(0); opacity: 0; } 4%, 6% { transform: translateX(0); opacity: 1; } 18%, 30% { transform: translateX(100%); } 42%, 54% { transform: translateX(200%); } 66%, 94% { transform: translateX(300%); opacity: 1; } 97% { transform: translateX(300%); opacity: 0; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes sol-trait { 0%, 6% { transform: scaleX(0); opacity: 1; } 18%, 30% { transform: scaleX(0.3333); } 42%, 54% { transform: scaleX(0.6667); } 66%, 94% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes sol-noeud-1 { 0% { --sol-allume: 0; } 4%, 94% { --sol-allume: 1; } 100% { --sol-allume: 0; } }
@keyframes sol-noeud-2 { 0%, 6% { --sol-allume: 0; } 18%, 94% { --sol-allume: 1; } 100% { --sol-allume: 0; } }
@keyframes sol-noeud-3 { 0%, 30% { --sol-allume: 0; } 42%, 94% { --sol-allume: 1; } 100% { --sol-allume: 0; } }
@keyframes sol-noeud-4 { 0%, 54% { --sol-allume: 0; } 66%, 94% { --sol-allume: 1; } 100% { --sol-allume: 0; } }
.sol-en-pause .sol-etats::before, .sol-en-pause .sol-etats__repere, .sol-en-pause .sol-etats__liste li { animation-play-state: paused; }

/* ---------- 8. Le métier, le logiciel et le calcul ; ChatGPT et Copilot ---------- */
.sol-diff { padding-bottom: clamp(24px, 3vw, 48px); }
.sol-diff__titre { max-width: 18ch; }
.sol-piliers { margin: clamp(40px, 6vw, 88px) 0 0; padding: 0; list-style: none; display: grid; }
@media (min-width: 900px) { .sol-piliers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sol-piliers li { display: grid; align-content: start; gap: var(--e-3); padding: clamp(24px, 3vw, 44px); background: var(--fond); }
.sol-piliers strong { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(2rem, calc(0.9rem + 3vw), 4rem); letter-spacing: -0.045em; line-height: 1; }
.sol-piliers span { max-width: 30ch; color: var(--texte-doux); font-size: clamp(1.0625rem, calc(0.9rem + 0.5vw), 1.375rem); line-height: 1.3; }
.sol-comparaison { margin-top: clamp(80px, 11vw, 168px); scroll-margin-top: calc(var(--sommaire) + var(--e-6)); }
.sol-matin, .sol-change, .sol-logiciels, .sol-terrain { scroll-margin-top: var(--sommaire); }
.sol-comparaison__figure figcaption { max-width: 70ch; margin-top: var(--e-4); color: var(--texte-doux); font-size: var(--t-s); }
.sol-tableau--voies thead th { padding-top: var(--e-4); font-family: var(--police-interface); font-weight: var(--graisse-interface); font-size: var(--t-m); color: var(--texte); line-height: 1.2; }
.sol-tableau--voies thead th small { display: block; margin-top: var(--e-1); font-family: var(--police-interface); font-weight: 400; font-size: 0.75rem; color: var(--texte-doux); }
@media (min-width: 760px) { .sol-tableau--voies thead th:first-child, .sol-tableau--voies tbody th { width: 21%; } }
.sol-tableau--voies tbody th { font-size: clamp(1rem, calc(0.8rem + 0.45vw), 1.25rem); letter-spacing: -0.015em; }
.sol-tableau--voies td { font-size: var(--t-s); line-height: 1.35; }
.sol-tableau--voies td.nous { font-size: var(--t-m); }
.sol-tableau--voies td.nous::before { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sol-suite { display: grid; gap: var(--e-6) var(--e-12); align-items: end; margin-top: clamp(48px, 6vw, 96px); }
@media (min-width: 1100px) { .sol-suite { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.sol-suite .t-sous { max-width: 44ch; }

/* Les grilles de cases : chaque case dessine ses propres filets et chevauche sa voisine d'un pixel.
   Ainsi, aucun fond ni filet n'apparaît avant l'entrée des cases au défilement. */
.sol-connecteurs, .sol-garanties, .sol-profils, .sol-milieux__liste, .sol-piliers { padding: 0 1px 1px 0; }
.sol-connecteurs > li, .sol-garanties > li, .sol-profils > li, .sol-milieux__liste > li, .sol-piliers > li { border: var(--trame) solid var(--bordure); margin: 0 -1px -1px 0; }

/* Les tableaux se défont en petits blocs sur téléphone : une ligne devient un bloc. */
@media (max-width: 759px) {
  .sol-tableau, .sol-tableau tbody, .sol-tableau tr, .sol-tableau tbody th, .sol-tableau td { display: block; width: auto; }
  .sol-tableau thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .sol-tableau thead tr, .sol-tableau thead th { display: block; width: 1px; height: 1px; padding: 0; overflow: hidden; }
  .sol-tableau tbody tr { padding-block: var(--e-6); border-bottom: var(--trame) solid var(--bordure); }
  .sol-tableau tbody > tr > * { padding: 0; border-bottom: 0; }
  .sol-tableau tbody th { margin-bottom: var(--e-3); }
  .sol-tableau td + td { margin-top: var(--e-3); }
  .sol-tableau td::before { content: attr(data-colonne); display: block; margin-bottom: 2px; font-family: var(--police-interface); font-size: var(--t-donnees); color: var(--texte-doux); }
  .sol-tableau .nous { padding: var(--e-3) var(--e-4); }
  .sol-tableau td.nous::before { content: attr(data-colonne); position: static; z-index: auto; inset: auto; background: none; transform: none; }
  .sol-tableau td.nous { background: color-mix(in srgb, var(--accent) 15%, transparent); }
  .sol-tableau--voies td.nous { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .sol-tableau--voies td, .sol-tableau--voies td.nous { font-size: var(--t-m); }
}

/* ---------- Mouvement : états de départ, sous .js-mouvement seulement ---------- */
.js-mouvement .sol-tableau td.nous::before { transform: scaleX(0); transition: transform 1100ms var(--courbe-sortie); transition-delay: calc(var(--i, 0) * 120ms + 350ms); }
.js-mouvement .sol-tableau tr.est-visible td.nous::before { transform: none; }
.js-mouvement .sol-verbes strong::after { transform: scale(0); transition: transform 600ms var(--courbe-sortie); transition-delay: calc(var(--i, 0) * 90ms + 500ms); }
.js-mouvement .sol-verbes li.est-visible strong::after { transform: none; }
@media (max-width: 759px) {
  .js-mouvement .sol-tableau td.nous::before { transform: none; transition: none; }
}

/* ---------- Animations réduites : l'état final, tout de suite ---------- */
@media (prefers-reduced-motion: reduce) {
  .sol-ruban__piste, .sol-etats::before, .sol-etats__repere, .sol-etats__liste li { animation: none; }
  .sol-tableau td.nous::before, .sol-verbes strong::after { transform: none; transition: none; }
}

/* Très petit téléphone (320 px) : le bouton principal tient dans la largeur sans passer sur deux lignes, et les quatre états gardent leurs mots entiers. */
@media (max-width: 359px) {
  .bouton { padding-inline: var(--e-4); gap: var(--e-2); font-size: var(--t-s); }
  .sol-etats__liste li { padding-right: var(--e-1); font-size: 1rem; }
}