/* Mix : navigation Produit, bascule des trois pages, héros dessinés, vues, approbation, socle en couches.
   Uniquement ses jetons (jetons.css). */

/* ---------- Menu Produit (bureau) : trois colonnes, une par page ---------- */
.menu-produit { width: min(960px, calc(100vw - 32px)); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.menu-produit__col { display: grid; align-content: start; gap: 2px; }
.menu-produit .menu-produit__titre { border: var(--trame) solid transparent; }
.menu-produit .menu-produit__titre b { font-size: var(--t-m); }
.menu-produit .menu-produit__titre[aria-current="page"] { border-color: var(--bordure); background: var(--fond); }
.menu-produit .menu-produit__titre[aria-current="page"] b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: middle; background: var(--accent); border-radius: 999px; }
.menu-produit ul { margin: 0; padding: 0 0 0 12px; list-style: none; display: grid; gap: 0; border-left: var(--trame) solid var(--bordure); margin-left: 12px; }
.menu-produit ul a { display: block; padding: 6px 12px; font-size: var(--t-s); color: var(--texte-doux); }
.menu-produit ul a:hover { color: var(--texte); }
.barre__deroulant > button.est-courant { background: color-mix(in srgb, var(--texte) 10%, transparent); }
.barre__liens a:focus-visible, .barre__deroulant > button:focus-visible, .menu-produit a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Menu mobile : plein écran, sous-menu Produit ---------- */
@media (max-width: 1023px) {
  .barre.menu-ouvert .barre__nav { inset: 0; max-height: none; height: 100dvh; padding-top: calc(var(--barre) + var(--e-6)) !important; border-radius: 0; border: 0; padding: var(--e-6) var(--gouttiere) calc(var(--e-8) + env(safe-area-inset-bottom)); overscroll-behavior: contain; box-shadow: none; }
  .barre.menu-ouvert .barre__liens > li { border-bottom: var(--trame) solid var(--bordure); }
  .barre.menu-ouvert .barre__liens > li > a, .barre.menu-ouvert .barre__deroulant > button { font-size: 1.5rem; min-height: 60px; padding-inline: 4px; border-radius: 0; background: transparent; }
  .barre.menu-ouvert .barre__liens > li > a[aria-current="page"] { color: var(--accent-texte, var(--texte)); box-shadow: inset 4px 0 0 var(--accent); padding-left: 14px; }
  .barre.menu-ouvert .menu-produit { padding: 0 0 var(--e-4); background: transparent; gap: var(--e-2); }
  .barre.menu-ouvert .menu-produit ul { display: none; }
  .barre.menu-ouvert .menu-produit .menu-produit__titre { background: var(--fond); border-color: var(--bordure); padding: 14px 16px; }
  html.menu-verrou, html.menu-verrou body { overflow: hidden; }
  .barre.menu-ouvert .marque, .barre.menu-ouvert .barre__droite { position: relative; z-index: 2; }
}

/* ---------- Bascule des trois pages Produit (dans chaque héros) ---------- */
.produits ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.produits a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--rayon-action); border: var(--trame) solid var(--bordure); color: var(--texte); text-decoration: none; font-family: var(--police-interface); font-size: var(--t-s); transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe); }
.produits a:hover { border-color: var(--texte-doux); }
.produits a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--fond); }
.produits a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Héros Produit : titre à gauche, dessin au trait à droite ---------- */
.tete-produit .contenu--large { gap: var(--e-6); }
.tete-produit__grille { display: grid; gap: var(--e-6); align-items: center; }
.tete-produit .tete-plateforme__haut { grid-template-columns: 1fr; gap: var(--e-6); }
.tete-produit h1 { font-size: clamp(2.5rem, calc(1rem + 4.4vw), 5.25rem); }
.tete-produit__dessin { margin: 0; min-width: 0; }
.tete-produit__dessin svg { display: block; width: 100%; height: auto; max-height: 460px; }
.tete-produit__signe { position: relative; aspect-ratio: 5 / 4; max-height: 440px; }
.tete-produit__toile { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 1024px) { .tete-produit__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-12); } }
@media (max-width: 759px) { .tete-produit__signe { aspect-ratio: 4 / 3; } }

.produit__dessin .sphere { fill: var(--accent); }
.produit__dessin .tete { stroke: var(--texte); stroke-width: 1.4; }
.produit__dessin .dossier .dessus { fill: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.produit__dessin .flux--doux { stroke: color-mix(in srgb, var(--texte) 45%, transparent); stroke-width: 1.4; }
.produit__dessin .tampon { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.produit__dessin .pixel .dessus { fill: var(--texte); }
.produit__dessin .voyageur { transform: translate(var(--bx), var(--by)); }
.js-mouvement .produit__dessin .voyageur { animation: voyage 6s var(--courbe) infinite; }
.js-mouvement .produit__dessin--flux .poste .dessus { animation: poste 6s var(--courbe) infinite; }
.js-mouvement .produit__dessin--flux .poste--1 .dessus { animation-delay: 1.5s; }
.js-mouvement .produit__dessin--flux .poste--2 .dessus { animation-delay: 3s; }
.js-mouvement .produit__dessin--flux .poste--3 .dessus { animation-delay: 4.5s; }
@keyframes voyage { 0% { transform: translate(var(--ax), var(--ay)); opacity: 0; } 8% { opacity: 1; } 88% { transform: translate(var(--bx), var(--by)); opacity: 1; } 100% { transform: translate(var(--bx), var(--by)); opacity: 0; } }
@keyframes poste { 0%, 6% { fill: color-mix(in srgb, var(--accent) 40%, var(--surface)); } 22%, 100% { fill: var(--surface); } }
.pause-mouvement .produit__dessin *, .pause-mouvement .departements--statique * { animation-play-state: paused !important; }

/* ---------- Postes de travail, en plan fixe (page Workflow) : même rendu que son mode sans mouvement ---------- */
.section.departements--statique { height: auto; }
.section.departements--statique .departements__scene { position: relative; height: auto; overflow: visible; display: grid; gap: var(--e-6); padding: var(--e-12) var(--gouttiere) var(--e-12); }
.departements--statique .departements__plan { position: relative; height: auto; aspect-ratio: 16 / 9; }
.departements--statique .departements__titre, .departements--statique .departements__fiches { position: relative; inset: auto; width: auto; max-width: none; }
.departements--statique .departements__fiches { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-4); }
.departements--statique .fiche-dep { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; padding-bottom: var(--e-6); }
.departements--statique .departements__plan .agent .px:not(.px-signal) { opacity: 0; animation: none; }
.departements--statique .departements__plan .agent .jambage { opacity: 0.92; transition: none; }
.departements--statique .departements__intro { opacity: 1 !important; }
@media (max-width: 759px) { .section.departements--statique { height: auto; } .departements--statique .departements__plan { aspect-ratio: 4 / 5; } }

/* ---------- Console du lundi, en version plus courte (page Collaboration) ---------- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .lundi--court { height: 200svh; } }

/* ---------- Trois vues (onglets) ---------- */
.vues .contenu--large { display: grid; gap: var(--e-8); }
.vues__boite { display: grid; gap: 0; border: var(--trame) solid var(--bordure); border-radius: var(--rayon-panneau, 20px); overflow: clip; background: var(--surface); }
.vues__onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--trame) solid var(--bordure); }
.vues__onglets button { display: grid; gap: 4px; text-align: left; padding: var(--e-4) var(--e-6); border: 0; border-right: var(--trame) solid var(--bordure); background: transparent; color: var(--texte-doux); font: inherit; cursor: pointer; min-height: 72px; position: relative; }
.vues__onglets button:last-child { border-right: 0; }
.vues__onglets button b { font-family: var(--police-interface); font-weight: 600; font-size: var(--t-m); color: var(--texte); }
.vues__onglets button span { font-size: var(--t-s); }
.vues__onglets button[aria-selected="true"] { background: var(--fond); }
.vues__onglets button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--e-6); right: var(--e-6); bottom: -1px; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; }
.vues__onglets button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.vues__panneau { padding: var(--e-8) var(--e-6); display: grid; gap: var(--e-4); max-width: 72ch; }
.vues__panneau:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.vues__nom { font-size: var(--t-l); letter-spacing: -0.02em; }
html:not(.js) .vues__panneau + .vues__panneau { border-top: var(--trame) solid var(--bordure); }
html:not(.js) .vues__onglets { display: none; }
@media (max-width: 759px) {
  .vues__onglets { grid-template-columns: 1fr; }
  .vues__onglets button { border-right: 0; border-bottom: var(--trame) solid var(--bordure); min-height: 60px; }
  .vues__onglets button:last-child { border-bottom: 0; }
  .vues__onglets button[aria-selected="true"]::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
  .vues__panneau { padding: var(--e-6) var(--e-4); }
}

/* ---------- Approuver : trois cartes ---------- */
.cartes-approb { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cartes-approb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartes-approb li { display: grid; align-content: start; gap: var(--e-3); padding: var(--e-6); border: var(--trame) solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.cartes-approb li::before { content: ""; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; }
.cartes-approb h3 { font-size: var(--t-l); letter-spacing: -0.02em; }
.cartes-approb p { color: var(--texte-doux); }

/* ---------- Infrastructure : le socle éclaté en couches ---------- */
.couches .contenu--large { display: grid; gap: var(--e-8); }
.couches__grille { display: grid; gap: var(--e-8); }
.couches__figure { margin: 0; }
.couches__dessin { overflow: visible; }
.couches__dessin .couche { transform: translateY(calc(var(--k, 0) * var(--e) * -58px)); transition: transform 500ms var(--courbe-sortie); }
.couches__dessin .plaque .dessus { fill: var(--surface); }
.couches__dessin .enveloppe { fill: color-mix(in srgb, var(--texte) 4%, transparent); stroke: color-mix(in srgb, var(--texte) 45%, transparent); stroke-width: 1.2; stroke-dasharray: 6 6; }
.couches__dessin .flux-externe { fill: none; stroke: var(--texte-doux); stroke-width: 2; stroke-dasharray: 3 7; }
.couches__dessin .prise { fill: none; stroke: var(--texte); stroke-width: 1.2; }
.couches__dessin .fiche-memoire { fill: none; stroke: var(--texte); stroke-width: 1.2; }
.couches__dessin .couche .trait, .couches__dessin text, .couches__dessin .dessus { transition: stroke 300ms var(--courbe), fill 300ms var(--courbe), opacity 300ms var(--courbe); }
.couches__figure .couche { opacity: 0.55; transition: opacity 300ms var(--courbe), transform 500ms var(--courbe-sortie); }
.couches__figure[data-actif="1"] [data-c="e"], .couches__figure[data-actif="1"] [data-c="0"],
.couches__figure[data-actif="2"] [data-c="1"], .couches__figure[data-actif="3"] [data-c="2"],
.couches__figure[data-actif="4"] [data-c="e"], .couches__figure[data-actif="4"] [data-c="x"], .couches__figure[data-actif="4"] [data-c="3"] { opacity: 1; }
.couches__figure[data-actif="1"] [data-c="0"] .trait, .couches__figure[data-actif="2"] [data-c="1"] .trait, .couches__figure[data-actif="3"] [data-c="2"] .trait,
.couches__figure[data-actif="3"] [data-c="2"] .fiche-memoire, .couches__figure[data-actif="4"] [data-c="3"] .prise { stroke: var(--accent); }
.couches__figure[data-actif="2"] [data-c="1"] .dessus, .couches__figure[data-actif="3"] [data-c="2"] .dessus { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.couches__figure[data-actif="1"] .enveloppe, .couches__figure[data-actif="4"] .enveloppe { stroke: var(--accent); }
.couches__figure[data-actif="4"] .flux-externe { stroke: var(--texte); }
.couches__blocs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-4); counter-reset: none; }
.couches__bloc { display: grid; gap: var(--e-3); padding: var(--e-6); border: var(--trame) solid var(--bordure); border-radius: var(--rayon); transition: border-color 300ms var(--courbe), background 300ms var(--courbe); }
.couches__bloc.est-actif { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.couches__num { font-family: var(--police-donnees, monospace); font-size: var(--t-xs); color: var(--texte-doux); }
.couches__bloc h3 { font-size: var(--t-l); letter-spacing: -0.02em; }
.couches__bloc p { color: var(--texte-doux); max-width: 60ch; }
.couches__bloc strong { color: var(--texte); font-weight: 500; }
.couvre { display: grid; gap: var(--e-4); }
@media (min-width: 600px) { .couvre { grid-template-columns: 1fr 1fr; } }
.couvre h4 { font-family: var(--police-interface); font-size: var(--t-s); font-weight: 600; margin-bottom: var(--e-2); }
.couvre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--t-s); color: var(--texte-doux); }
.couvre li { display: flex; gap: 10px; }
.couvre li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.5em; border-radius: 2px; background: var(--accent); }
.couvre div:last-child li::before { background: transparent; border: 1.5px dashed var(--texte-doux); }
@media (min-width: 1024px) {
  .couches__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-12); align-items: start; }
  .couches__figure { position: sticky; top: calc(var(--barre) + 40px); }
  .js-mouvement .couches__blocs { gap: 22vh; padding-bottom: 12vh; }
  .js-mouvement .couches__bloc { min-height: 30vh; align-content: center; }
}
@media (max-width: 1023px) {
  .couches__figure { position: sticky; top: calc(var(--barre) + 8px); z-index: 1; background: var(--fond); padding-block: var(--e-2); }
  .couches__figure svg { max-height: 38svh; }
}
@media (prefers-reduced-motion: reduce) { .couches__figure, .couches__dessin .couche { transition: none; } }

/* ---------- Bandeau de comparaison (temporaire) ---------- */
.iv2-bandeau { margin: calc(var(--barre) + 18px) var(--marge-panneau) 0; padding: 10px 18px; border-radius: var(--rayon-action); background: var(--accent); color: #101211; font-size: var(--t-s); text-align: center; }
.iv2-bandeau a { color: inherit; font-weight: 600; }
.iv2-bandeau + .tete-page { padding-top: clamp(56px, 7vw, 96px); }


/* ---------- Sous-menu Solution : secteurs d’activité ---------- */
.menu-plateforme.menu-solution { width: min(760px, calc(100vw - 32px)); grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }
.menu-plateforme.menu-solution > .menu-produit__col { grid-column: auto; grid-row: auto; }
.menu-solution__titre { margin: 0; padding: 4px 12px; font-family: var(--police-interface); font-size: 0.8125rem; color: var(--texte-doux); }
.menu-plateforme.menu-solution .menu-solution__secteurs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu-plateforme.menu-solution ul a { white-space: normal; overflow-wrap: normal; hyphens: manual; }
@media (max-width: 1023px) {
  .barre.menu-ouvert .menu-plateforme.menu-solution { grid-template-columns: 1fr; width: auto; }
  .barre.menu-ouvert .menu-solution .menu-solution__secteurs ul { display: grid; grid-template-columns: 1fr 1fr; padding-left: 8px; }
  .barre.menu-ouvert .menu-solution ul a { min-height: 44px; display: flex; align-items: center; }
}