/* Produit v2 : menu en 4 colonnes, sections Modules, pastilles de statut, schéma « ensemble » */
.menu-produit { width: min(1180px, calc(100vw - 32px)); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); max-height: calc(100vh - 120px); overflow-y: auto; }
.menu-produit__entete { display: flex; align-items: stretch; gap: 4px; }
.menu-produit__entete .menu-produit__titre { flex: 1; min-width: 0; }
.menu-produit__plier { display: none; flex: none; width: 48px; border-radius: 12px; border: var(--trame) solid var(--bordure); background: transparent; color: var(--texte); cursor: pointer; place-items: center; }
.menu-produit__plier svg { width: 14px; height: 14px; transition: transform .2s; }
.menu-produit__plier[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-produit__plier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-produit ul a { padding: 5px 12px; }
@media (min-width: 1024px) and (max-width: 1240px) { .menu-produit .menu-produit__titre span { font-size: .75rem; } }
@media (max-width: 1023px) {
  .barre.menu-ouvert .menu-produit { grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .barre.menu-ouvert .menu-produit__plier { display: grid; }
  .barre.menu-ouvert .menu-produit__col.ouvert ul { display: grid; margin: 6px 0 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .menu-produit__plier svg { transition: none; } }

/* Modules */
.modules__liste .piece__nom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.piece__detail { margin: var(--e-3) 0 0; }
.piece__detail a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.modules__note { margin-top: var(--e-6); padding: var(--e-4) var(--e-5, 20px); border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--texte) 5%, transparent); border-radius: 0 12px 12px 0; }
.modules__note p { margin: 0; }
.modules__note a, .partie__chapeau a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.module { scroll-margin-top: 110px; }
.creuset__num { font-family: var(--police-titres); font-size: var(--t-m, 1.2rem); color: var(--texte-doux); }
.tete-produit--simple .tete-plateforme__haut { max-width: 62rem; }
/* Pastilles de statut (affichées seulement si statuts-modules.json le précise) */
.statut { display: inline-flex; align-items: center; font-family: var(--police-interface); font-size: .75rem; font-weight: 600; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.statut--disponible { background: var(--accent); color: #101211; border-color: var(--accent); }
.statut--en-integration { color: var(--texte-doux); }

/* Comment tout fonctionne ensemble */
.ensemble { position: relative; }
.ensemble__colle { padding-block: clamp(56px, 7vw, 120px); }
.ensemble h2 { margin: var(--e-3) 0 var(--e-8, 40px); max-width: 22ch; }
.ensemble__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); position: relative; counter-reset: e; }
.ensemble__etape { position: relative; padding: 18px 18px 20px; border-radius: 16px; border: var(--trame) solid var(--bordure); background: color-mix(in srgb, var(--texte) 4%, transparent); transition: border-color .4s, background-color .4s, opacity .4s, transform .4s; }
.ensemble__etape b { display: block; font-family: var(--police-interface); font-size: var(--t-m, 1.1rem); margin: 6px 0 6px; }
.ensemble__etape p { margin: 0; color: var(--texte-doux); font-size: var(--t-s); line-height: 1.45; }
.ensemble__num { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--texte-doux); }
.ensemble__etape[data-i="4"] b::after { content: " · décision humaine"; font-weight: 400; color: var(--texte-doux); font-size: .85em; }
.ensemble__creuset { margin: var(--e-6) 0 0; padding: 16px 18px; border: 1px dashed var(--bordure); border-radius: 16px; max-width: 60rem; }
.ensemble__creuset a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .ensemble__etapes { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--e-3); }
  .ensemble__etapes::before { content: ""; position: absolute; left: 4%; right: 4%; top: -18px; height: 2px; background: var(--bordure); }
  .ensemble__etapes::after { content: ""; position: absolute; left: 4%; top: -18px; height: 2px; width: calc(92% * var(--p, 1)); background: var(--accent); }
  .ensemble__etape::before { content: ""; position: absolute; left: 50%; top: -23px; width: 12px; height: 12px; margin-left: -6px; border-radius: 999px; background: var(--fond, #101211); border: 2px solid var(--bordure); }
  .ensemble__etape.fait::before, .ensemble__etape.actif::before { background: var(--accent); border-color: var(--accent); }
}
@media (max-width: 899px) {
  .ensemble__etapes { padding-left: 22px; }
  .ensemble__etapes::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--bordure); }
  .ensemble__etapes::after { content: ""; position: absolute; left: 6px; top: 8px; width: 2px; height: calc((100% - 16px) * var(--p, 1)); background: var(--accent); }
}
/* rythme au défilement : seulement si le mouvement est permis (classe posée par le script) */
.ensemble.est-rythme { height: 260vh; }
.ensemble.est-rythme .ensemble__colle { position: sticky; top: 0; min-height: 100vh; display: grid; align-content: center; }
.ensemble.est-rythme .ensemble__etape { opacity: .35; transform: translateY(8px); }
.ensemble.est-rythme .ensemble__etape.fait { opacity: .8; transform: none; }
.ensemble.est-rythme .ensemble__etape.actif { opacity: 1; transform: none; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .ensemble__etape { transition: none; } }