/* La carte de la méthode (tools/methode_ui.py), sur toute la largeur du bento. Reprise le 7 oct. (session des illustrations) :
   trois panneaux côte à côte, sans chevauchement (Tanguy, 7 oct. : « éviter la superposition, de l'espace libre, géométrique ») :
   trois colonnes égales, un même écart, la même hauteur ; le pied de chaque panneau calé en bas. */
.cos.d1 { margin-bottom: 1rem; }
/* Le texte sous l'illustration, sur une colonne assez large pour deux lignes (Tanguy, 7 oct.). */
.cos.d1 .co { grid-column: 1 / -1; min-height: 0; }
.cos.d1 .co-t p { max-width: 40rem; text-wrap: balance; }   /* deux lignes égales */
.cos.d1 .co-ui { padding: 0.5rem 0 2.25rem; }
.v3.methode { max-width: 64rem; padding-bottom: 0; }   /* l'illustration remplit la carte */
.mt-flux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.mt-flux .ui.v3.mt-col { display: flex; flex-direction: column; width: auto; height: 100%; }
.mt-flux .mt-col > .ui-pied { margin-top: auto; }
/* La hauteur commune vient des contenus utiles ; les zones d'image (vignettes, scan ou photo, rendu) remplissent ensuite
   l'espace de leur panneau, sans vide entre le visuel et le pied. */
.mt-flux .mt-refs .mt-defile { flex: 1 1 0; height: 0; min-height: 15rem; }
.mt-flux .mt-entree .mt-vue { flex: 1; display: flex; flex-direction: column; }
.mt-flux .mt-entree .volets { flex: 1; grid-template-rows: minmax(0, 1fr); }   /* les volets restent superposés (rb/css/onglets.css) */
.mt-flux .mt-entree .volets > [data-volet] { display: flex; flex-direction: column; min-height: 0; }
.mt-flux .mt-entree .volets > [data-volet] > .vue, .mt-flux .mt-entree .volets > [data-volet] > .mt-photo { flex: 1; min-height: 13rem; }
.mt-flux .mt-entree .volets > [data-volet] > .vue { display: grid; place-items: center; }
.mt-flux .mt-entree .mt-nuage { max-height: 100%; width: auto; max-width: 100%; }
.mt-flux .mt-entree .mt-photo { position: relative; }
.mt-flux .mt-entree .mt-photo > img, .mt-flux .mt-entree .mt-photo > .mt-vues { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.mt-flux .mt-entree .mt-vues { grid-template-rows: 1fr 1fr; }
.mt-flux .mt-resultat .mt-rendu { flex: 1; display: flex; min-height: 12rem; }
.mt-flux .mt-resultat .mt-rendu .vue { flex: 1; position: relative; }
.mt-flux .mt-resultat .mt-rendu .vue-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.mt-n { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; margin-right: 0.5rem; border-radius: 50%; background: var(--pv-tuile, rgba(255, 255, 255, .07));
  font-size: 0.625rem; font-weight: 600; color: var(--craie); }
.mt-bascule { padding: 0.625rem 0.75rem 0.25rem; }
.mt-vue { padding: 0.375rem 0.625rem 0.5rem; }
.mt-vue .vue { border-radius: 0.625rem; }
.mt-nuage { display: block; width: 100%; height: auto; }
.mt-nuage .nu { fill: #F7F6F3; }
.mt-nuage .pr0 { opacity: .9; } .mt-nuage .pr1 { opacity: .65; } .mt-nuage .pr2 { opacity: .45; }   /* les roulettes restent lisibles */
.mt-rendu { padding: 0.5rem 0.625rem 0.125rem; }
.mt-rendu .vue { border-radius: 0.625rem; }
.mt-rendu .vue-img { aspect-ratio: 16 / 11; }
@media (max-width: 900px) {
  .mt-flux { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mt-flux .ui.v3.mt-col { height: auto; }
}
/* La lueur, petite sur une carte pleine largeur (le dégradé avec parcimonie). */
.co .v3.methode .co-lueur { width: 26%; left: 37%; top: 22%; opacity: .2; }
.mt-vue .volets .vue { border-radius: 0.625rem; }
.mt-vue .volets .ui-pied { padding-left: 0.25rem; padding-right: 0.25rem; border-top: 0; }
.mt-vues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; aspect-ratio: 4 / 3; align-content: center; padding: 0.25rem; }
.mt-vues img { display: block; width: 100%; height: auto; border-radius: 0.375rem; }
.mt-vue .vue-img { aspect-ratio: 4 / 3; object-fit: cover; }
.mt-entree .mt-bascule .ui-bascule span:hover { color: var(--craie); }
.mt-photo { border-radius: 0.625rem; overflow: hidden; }
.mt-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* =====================================================================================================================
   « By industry » (Tanguy, 7 oct.) : quatre cartes sur la bande claire, juste après « In practice » (tools/industries_ui.py).
   CSS d'abord : sur ordinateur, avec le défilement piloté (animation-timeline) et le mouvement permis, la section reste
   épinglée et le défilement vertical fait glisser les cartes (Origin, ltx.io). Sinon, un carrousel horizontal ordinaire,
   accroché carte par carte (scroll-snap), au doigt sur téléphone ; rb/src/carrousel.js y ajoute précédent · pause · suivant.
   ===================================================================================================================== */
/* Mise en page des études de cas de ltx.io (Tanguy, 7 oct., relevé dans le navigateur) : la section plein écran reste épinglée,
   une seule rangée (la tête de 45vw, puis des cartes de 60vw × 75vh) glisse à l'horizontale, un pixel défilé pour un pixel ;
   le titre sort à gauche, les cartes prennent toute la largeur, aucun fondu sur les côtés (rb/src/carrousel.js).
   Sans script, sur téléphone ou en mouvement réduit : les cartes s'empilent (comme LTX sous 992 px). */
.industries { position: relative; background: #F7F6F3; }
.ind-collant { padding: clamp(4rem, 9vw, 7rem) 0; }
.ind-rangee { display: flex; flex-direction: column; gap: 1.25rem; width: min(var(--w), 100% - 2rem); margin: 0 auto; }
.ind-tete { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1.5rem; }
.ind-tete h2 { margin: 0; font-size: clamp(2.25rem, 4.8vw, 4rem); line-height: 1.04; letter-spacing: -.038em; font-weight: 300; color: #121117; }   /* comme les autres titres de section */
.ind-tete h2.stair span { display: block; }
.ind-ligne { max-width: 27rem; margin: 1.125rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: #6B6874; }   /* comme .sec-ligne */
.ind-tete .btns { margin-top: 2rem; }
.ind-carte { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(18, 17, 23, .14); border-radius: 0.75rem; background: #fff; overflow: hidden; }
/* Le visuel de la carte (Tanguy, 7 oct.) : image ou vidéo, dans un cadre arrondi posé à l'intérieur de la carte (les visuels
   à fond sombre ne touchent pas les bords blancs) ; place réservée, rien ne change de hauteur quand une vidéo se charge. */
.ind-vis { position: relative; aspect-ratio: 16 / 9; padding: 0.625rem 0.625rem 0; }
.ind-cadre { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 0.5rem; background: #1A1920; }
.ind-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Le corps de la carte : l'étiquette, puis deux colonnes (le titre et le texte ; ce que les équipes obtiennent), comme LTX
   (titre et texte à gauche, citation à droite). */
.ind-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 1.25rem 1rem; }
.ind-tag { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.625rem; border: 1px solid rgba(18, 17, 23, .5); border-radius: 999px;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #121117; }
.ind-g h3 { margin: 1rem 0 0.75rem; font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 400; line-height: 1.1; letter-spacing: -.03em; color: #121117; }
.ind-g h3 span { display: block; }
.ind-g p { margin: 0; font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.45; color: #121117; }
.ind-sous-t { margin: 0 0 0.875rem; font-size: 0.8125rem; color: #6B6874; }
.ind-obtenu { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.ind-obtenu li { display: flex; align-items: center; gap: 0.625rem; font-size: clamp(0.9375rem, 1vw, 1.0625rem); color: #121117; }
.ind-obtenu .ic { display: block; flex: none; width: 1.25rem; height: 1.25rem; padding: 0.1875rem; border-radius: 50%; background: rgba(18, 17, 23, .06); }
.ind-pied { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 0.875rem 1.25rem; border-top: 1px solid rgba(18, 17, 23, .1); }
.ind-lien { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: #121117; white-space: nowrap; }
.ind-lien .ic { display: block; width: 0.875rem; height: 0.875rem; }
.ind-lien::after { content: ""; position: absolute; inset: 0; border-radius: 0.75rem; }

/* L'épinglage (ordinateur, script, mouvement permis : rb/src/carrousel.js pose .ind-epingle et la hauteur de la traversée). */
.ind-epingle .ind-collant { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 0; }
.ind-epingle .ind-rangee { flex-direction: row; align-items: center; gap: 0; width: max-content; height: 100vh; margin: 0;
  padding: calc(61px + 5vh) 0 5vh; will-change: transform; }
.ind-epingle .ind-tete { flex: none; justify-content: center; width: 45vw; height: 100%; margin: 0;
  padding: 0 1.5vw 0 3vw; }   /* comme LTX : 45vw, 3vw à gauche, à toutes les largeurs d'écran */
/* Tanguy, 7 oct. (soir) : des cartes moins larges pour une traversée plus courte, un bandeau d'image qui ne prend pas la
   hauteur, et rien de coupé sur un portable (1366 à 1536 px de large, 650 à 760 de haut). La carte prend la hauteur de son
   contenu, plafonnée à l'écran ; le bandeau suit la hauteur de l'écran (34vh, entre 10 et 20rem). */
/* Toutes les cartes à la même hauteur : le bandeau, plus 21rem pour le texte, plafonné à la place laissée par l'en-tête. */
.ind-epingle .ind-carte { flex: none; width: clamp(34rem, 44vw, 52rem);
  height: min(calc(100vh - 61px - 10vh), calc(clamp(10rem, 34vh, 20rem) + 21rem)); margin-right: 2rem; will-change: transform; }
.ind-epingle .ind-carte:last-child { margin-right: 3vw; }
/* Moins d'écart avec « In practice » (Tanguy, 7 oct.) : les cartes, plus basses que l'écran, ne sont plus centrées dans les
   100vh épinglés mais calées en haut, sous l'en-tête ; le bloc titre prend leur hauteur et reste centré sur elles. */
.ind-epingle .ind-rangee { height: auto; align-items: stretch; padding: calc(61px + 3vh) 0 0; }
.ind-epingle .ind-tete { height: auto; }
#pratique { padding-bottom: clamp(4rem, 6vw, 6rem); }
.ind-epingle .ind-vis { flex: none; aspect-ratio: auto; height: clamp(10rem, 34vh, 20rem); padding: 0.75rem 0.75rem 0; }
.ind-epingle .ind-corps { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem 2.5rem; padding: 1.25rem 1.5rem 0.75rem; }
.ind-epingle .ind-pied { padding: 0.75rem 1.5rem; }
.ind-epingle .ind-g h3 { margin: 0.75rem 0 0.5rem; font-size: clamp(1.375rem, 1.75vw, 1.875rem); }
.ind-epingle .ind-g p { font-size: 0.9375rem; }
/* « What teams get » : une liste plus discrète, un peu plus à droite (Tanguy, 7 oct.). */
.ind-epingle .ind-d { padding-left: 1rem; }
.ind-obtenu { gap: 0.5rem; }
.ind-obtenu li { gap: 0.5rem; font-size: 0.875rem; line-height: 1.35; }
.ind-obtenu .ic { width: 1rem; height: 1rem; padding: 0.15625rem; }
.ind-sous-t { margin-bottom: 0.625rem; font-size: 0.75rem; }
/* Les références qui défilent sans fin, fondu en haut et en bas (Tanguy, 7 oct.). */
.mt-defile { height: 17rem; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.mt-defile-piste { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; padding: 0 0.5rem; animation: mt-defile 18s linear infinite; }
.mt-defile figure { margin: 0; border-radius: 0.5rem; overflow: hidden; background: #0e0d12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mt-defile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mt-defile figcaption { padding: 0.3125rem 0.5rem 0.4375rem; font-size: 0.625rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes mt-defile { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .mt-defile-piste { animation: none; } }
.mt-vues { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; aspect-ratio: 4 / 3; padding: 0; }
.mt-vues img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; }
.ind-tete h2.stair span { white-space: nowrap; }
/* Digital twins : la vidéo du scan, puis le nuage qui se construit pièce par pièce (sequence.js, nuage.js), et l'étiquette de phase. */
.ind-seq { position: absolute; inset: 0; }
.ind-seq > .ind-img, .ind-seq-nuage { position: absolute; inset: 0; width: 100%; height: 100%; }
.ind-seq-nuage { --craie: #F7F6F3; --gris: #8E8B96; display: block; background: radial-gradient(110% 90% at 50% 45%, #1d1c23 0%, #0d0c11 72%);
  opacity: 0; transition: opacity 600ms ease; }
.ind-seq-nuage .nuage-vue { position: absolute; inset: 0; aspect-ratio: auto; }
.ind-seq.phase-nuage .ind-seq-nuage { opacity: 1; }
.ind-phase { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 2; margin: 0; padding: 0.3125rem 0.625rem; border-radius: 999px;
  background: rgba(18, 17, 23, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.75rem; font-weight: 500; color: #F7F6F3; }
.ind-phase .p2, .ind-seq.phase-nuage .ind-phase .p1 { display: none; }
.ind-seq.phase-nuage .ind-phase .p2 { display: inline; }
/* Hors épinglage (téléphone, mouvement réduit) : 16:10. En mode épinglé, la hauteur du bandeau est réglée plus haut. */
.ind-vis { aspect-ratio: 16 / 10; }

/* =====================================================================================================================
   « Where we sit » (#approche) : quatre cartes carrées, de la même taille (Tanguy, 7 oct. : « les blocs sont censés être en
   carré et faire la même taille que celui du dessus »). Puis, le même jour : des illustrations plus ramassées, « plus
   carrées », sans être étirées vers le bas. Chaque panneau garde donc sa hauteur naturelle, centré dans la zone
   d'illustration (les règles d'étirement de /illus.css pour .d4 ne s'appliquent plus ici).
   ===================================================================================================================== */
@media (min-width: 901px) {
  #approche .cos.d4 .co { aspect-ratio: 1 / 1; min-height: 0; }
  #approche .cos.d4 .co-ui { flex: 1 1 0; min-height: 0; align-items: center; padding-bottom: 1.5rem; }
}
#approche .cos.d4 .ui-scene.v3 { display: block; padding-bottom: 0; }
#approche .cos.d4 .ui-scene.v3 > .ui.v3 { flex: none; }
#approche .cos.d4 .ui-scene.v3 > .ui.v3 > :last-child { margin-top: 0; margin-bottom: 0; }
/* Le coût : la barre de saisie se pose sous le panneau, décalée à droite, sans le chevaucher. */
#approche .cos.d4 .v3.cout .ui.v3.saisie { position: relative; inset: auto; margin: 0.75rem 0 0 auto; width: 86%; }
/* Un objet qui se décompose (illus_ui.decompose) : la visionneuse en grand à gauche, la liste des pièces à droite
   (Tanguy, 7 oct. : « le viewer est l'élément important ») ; la vue laisse passer la lueur V01 posée derrière le panneau. */
#approche .ui-scene.v3.decompose { max-width: none; width: 100%; }
#approche .v3.decompose .dc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
#approche .v3.decompose .vue { background-color: rgba(13, 12, 17, .25); border-right: 1px solid var(--pv-trait); }
#approche .v3.decompose .co-lueur { top: 10%; left: 6%; width: 52%; opacity: .62; }
#approche .v3.decompose .dc-liste { display: flex; flex-direction: column; padding: 0.625rem 0.5rem 0.5rem; min-width: 0; }
#approche .v3.decompose .ol-t { margin: 0 0 0 0.25rem; white-space: nowrap; }
/* « 7 parts » et l'interrupteur Assembled | Exploded, en tête de la liste (hors de la 3D, Tanguy, 7 oct.). */
#approche .v3.decompose .dc-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.375rem; }
#approche .v3.decompose .dc-tete .ui-bascule > span { cursor: pointer; }
#approche .v3.decompose .ol-r { padding-top: 0.25rem; padding-bottom: 0.25rem; }
#approche .v3.decompose .dc-pied { margin: auto 0 0; padding: 0.5rem 0.25rem 0; border-top: 1px solid var(--pv-trait);
  font-size: 0.6875rem; color: var(--gris); }
/* Sur téléphone : la vue au-dessus, la liste dessous ; le bouton de la visionneuse couvrirait le repère, qui s'efface. */
@media (max-width: 600px) {
  #approche .v3.decompose .dc { grid-template-columns: 1fr; }
  #approche .v3.decompose .vue { border-right: 0; border-bottom: 1px solid var(--pv-trait); }
  #approche .v3.decompose .rb-model-viewer__stage { aspect-ratio: 4 / 3; }
  #approche .v3.decompose .vue .vue-gizmo { display: none; }
}

/* What each keeps : une rangée par propriété, nommée ; une colonne par approche, nommée en tête ; le score en pied.
   La rangée active s'allume ; la colonne Sandflow est éclairée. */
.ke { display: grid; gap: 0.25rem; padding: 0.625rem 0.75rem 0.75rem; }
.ke-rangs { display: grid; gap: 0.5rem; }   /* plus d'air entre les rangées (Tanguy, 7 oct.) */
.ke-ligne { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 4.25rem); align-items: center; gap: 0.375rem;
  padding: 0.4375rem 0.5rem; border-radius: 0.75rem; transition: background-color 400ms ease; }
.ke-rangs > .ke-ligne.actif { background: var(--pv-tuile); }
/* Un filet très discret entre deux rangées (Tanguy, 7 oct.), au milieu de l'écart. */
.ke-rangs > .ke-ligne { position: relative; }
.ke-rangs > .ke-ligne + .ke-ligne::before { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; top: -0.25rem; height: 1px;
  background: rgba(255, 255, 255, .085); pointer-events: none; }
.clair .ke-rangs > .ke-ligne + .ke-ligne::before { background: rgba(18, 17, 23, .07); }
.ke-tete { padding-top: 0; padding-bottom: 0.125rem; }
.ke-col { display: grid; place-items: end center; min-height: 1.75rem; font-size: 0.625rem; line-height: 1.2; font-weight: 500;
  text-align: center; color: var(--gris); }
.ke-col.nous { color: var(--craie); }
.ke-nom { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ke-nom b { font-weight: 500; font-size: 0.75rem; color: var(--craie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ke-nom .r-ic { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 0.4375rem;
  background: var(--pv-tuile); color: var(--gris); transition: color 400ms ease; }
.ke-rangs > .ke-ligne.actif .r-ic { color: var(--craie); }
.ke-nom .ic { width: 0.8125rem; height: 0.8125rem; }
.ke-c { display: grid; place-items: center; height: 1.625rem; border-radius: 0.5rem; }
.ke-c .ic { width: 0.75rem; height: 0.75rem; }
.ke-c.oui { background: rgba(255, 255, 255, .14); color: var(--craie); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ke-c.non { background: transparent; box-shadow: inset 0 0 0 1px var(--pv-bord); }
.ke-c.oui.nous { background: #F7F6F3; color: #121117; }
/* La seule case sur une image V01 de la charte, coche blanche : Sandflow × Token economy (Tanguy, 7 oct.). */
.ke-c.oui.nous.fort { background: #2a2433 url("/rb/assets/v01/sandflow-03-noyau-carre.webp") center / cover no-repeat; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ke-c.oui.nous.fort .ic { stroke-width: 2.5; filter: drop-shadow(0 1px 1px rgba(18, 17, 23, .35)); }
.ke-score { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--pv-bord); border-radius: 0; }
.ke-score .ke-nom b { color: var(--gris); }
.ke .anneau.petit { width: 2.25rem; justify-self: center; }
.ke .anneau.petit p b { font-size: 0.5625rem; }
/* Sur téléphone : des colonnes plus étroites et sans icône, pour que le nom de chaque propriété se lise en entier. */
@media (max-width: 600px) {
  .ke { padding-left: 0.5rem; padding-right: 0.5rem; }
  .ke-ligne { grid-template-columns: minmax(0, 1fr) repeat(3, 3.25rem); gap: 0.25rem; padding-left: 0.375rem; padding-right: 0.375rem; }
  .ke-nom .r-ic { display: none; }
  .ke-nom b { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .ke-ligne, .ke-nom .r-ic { transition: none; } }

/* « In practice » (#pratique), sans la rangée du bas (Tanguy, 7 oct. : réduire la hauteur du bento) : chaque panneau garde sa
   hauteur naturelle, sans vide intérieur ; la carte suit le plus haut des trois. */
#pratique .cos .co { min-height: 0; }
#pratique .ui-scene.v3 > .ui.v3.seul { flex: none; }
#pratique .ui-scene.v3 > .ui.v3.seul > :last-child { margin-top: 0; }

/* Le graphe de positionnement repris (illus_ui.positionnement_v2) : trame de points, quadrant visé éclairé, l'approche active
   s'allume, ses deux repères se tracent jusqu'aux axes, sa bulle apparaît (Tanguy, 7 oct. : « plus joli et dynamique »). */
#approche .ui-scene.v3.pz-scene { max-width: none; width: 100%; }
.v3 .pz-carte { padding: 1.25rem 1.25rem 0.75rem; }
.v3 .pz .pz-dot { fill: rgba(255, 255, 255, .13); }
.v3 .pz .pz-quad { fill: rgba(255, 255, 255, .025); stroke: none; }   /* sans cadre autour du logo (Tanguy, 7 oct.) */
.v3 .pz .mi { stroke: rgba(255, 255, 255, .14); stroke-width: 1; stroke-dasharray: 3 4; }
.v3 .pz text { fill: var(--gris); font: 400 10px "Inter", system-ui, sans-serif; }
/* Les repères en tirets légers, qui apparaissent en fondu (Tanguy, 7 oct. : « plus discrets »). */
.v3 .pz .pz-guide { fill: none; stroke: rgba(247, 246, 243, .26); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0;
  transition: opacity 500ms ease; }
.v3 .pz .pz-pt.actif .pz-guide { opacity: 1; }
/* Le titre du panneau : une ligne assez haute pour ses jambages (« Positioning » était coupé). */
.v3.pz-scene .ui-h .ui-l { line-height: 1.35; overflow: visible; }
.v3 .pz .pz-halo { fill: rgba(247, 246, 243, .07); opacity: 0; transform: scale(.5); transform-box: fill-box; transform-origin: center;
  transition: opacity 400ms ease, transform 500ms cubic-bezier(.2, .7, .2, 1); }
.v3 .pz .pz-pt.actif .pz-halo { opacity: 1; transform: none; }
.v3 .pz .pz-m { fill: #18171d; stroke: var(--gris); stroke-width: 1.5; transition: fill 300ms ease, stroke 300ms ease; }
.v3 .pz .pz-pt.actif .pz-m { fill: #F7F6F3; stroke: #F7F6F3; }
.v3 .pz .pz-lab { transition: fill 300ms ease; }
.v3 .pz .pz-pt.actif .pz-lab { fill: #F7F6F3; font-weight: 500; }
.v3 .pz .pz-bulle { opacity: 0; transform: translateY(4px); transition: opacity 350ms ease, transform 450ms cubic-bezier(.2, .7, .2, 1); }
.v3 .pz .pz-pt.actif .pz-bulle { opacity: 1; transform: none; }
.v3 .pz .pz-bulle rect { fill: rgba(36, 35, 43, .94); stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.v3 .pz .pz-bulle text { fill: #F7F6F3; font-size: 9.5px; font-weight: 500; }
.v3 .pz .pz-pt { cursor: pointer; }
.v3.pz-scene .ui-bascule > span { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .v3 .pz .pz-guide, .v3 .pz .pz-halo, .v3 .pz .pz-m, .v3 .pz .pz-bulle { transition: none; } }

/* « Model focus » (illus_ui.focus_modele) : l'anneau de ce à quoi le modèle est entraîné, la légende, la bascule qui alterne. */
.v3 .mf { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.125rem 1.125rem 1rem; }
/* Sur l'accueil, le panneau prend toute la carte, l'anneau grandit (comme la carte de la lampe). */
#approche .ui-scene.v3.focus-modele { max-width: none; width: 100%; }
@media (min-width: 601px) { #approche .v3 .mf { grid-template-columns: 11.5rem minmax(0, 1fr); gap: 2rem; padding: 1.75rem 2rem 1.5rem; } }
#approche .v3 .mf-l { font-size: 0.8125rem; }
.v3 .mf-anneau { display: block; width: 100%; height: auto; overflow: visible; }
.v3 .mf-piste { fill: none; stroke: rgba(255, 255, 255, .04); stroke-width: 15; }
.v3 .mf-seg { fill: none; stroke-width: 13; }
.v3 .mf-seg.g1 { stroke: rgba(255, 255, 255, .22); }
.v3 .mf-seg.g2 { stroke: rgba(255, 255, 255, .14); }
.v3 .mf-seg.g3 { stroke: rgba(255, 255, 255, .08); }
.v3 .mf-vue { opacity: 0; transform: rotate(-24deg) scale(.96); transform-box: view-box; transform-origin: 50% 50%;
  transition: opacity 500ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.v3 .mf-vue.actif { opacity: 1; transform: none; }
.v3 .mf-c1 { fill: #F7F6F3; font: 600 19px "Inter", system-ui, sans-serif; text-anchor: middle; letter-spacing: -.02em; }
.v3 .mf-c2 { fill: #8E8B96; font: 400 8.5px "Inter", system-ui, sans-serif; text-anchor: middle; }
.v3 .mf-legende { display: grid; }
.v3 .mf-liste { grid-area: 1 / 1; display: grid; gap: 0.4375rem; opacity: 0; transition: opacity 400ms ease; }
.v3 .mf-liste.actif { opacity: 1; background: none; }
.v3 .mf-l { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.75rem; color: var(--gris); }
.v3 .mf-l b { font-weight: 500; color: var(--gris); }
.v3 .mf-l.fort b { color: var(--craie); }
.v3 .mf-l .ic { width: 0.8125rem; height: 0.8125rem; color: var(--gris); }
.v3 .mf-pastille { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; background: rgba(255, 255, 255, .22); }
.v3 .mf-pastille.g2 { background: rgba(255, 255, 255, .14); }
.v3 .mf-pastille.g3 { background: rgba(255, 255, 255, .08); }
.v3 .mf-pastille.v01 { background: url("/rb/assets/v01/sandflow-03-noyau-carre.webp") center / cover; }
.v3.focus-modele .ui-bascule > span { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .v3 .mf-vue, .v3 .mf-liste { transition: none; } }

/* Tokens : l'objet du prompt se choisit (Tanguy, 7 oct.) ; le titre et le prompt montrent l'objet actif, les barres suivent. */
.v3 .pr-pile { display: inline-grid; }
.v3 .pr-pile > .pr-el { grid-area: 1 / 1; opacity: 0; transition: opacity 300ms ease; white-space: nowrap; }
.v3 .pr-pile > .pr-el.actif { opacity: 1; background: none; }
.v3 .pr-choix-liste { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.v3 .pr-choix { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.5rem; border-radius: 999px; font-size: 0.6875rem;
  color: var(--gris); box-shadow: inset 0 0 0 1px var(--pv-bord); cursor: pointer; transition: color 200ms ease, background-color 200ms ease; }
.v3 .pr-choix:hover { color: var(--craie); background: var(--pv-tuile); }
.v3 .pr-choix.actif { color: var(--craie); background: var(--pv-actif); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.v3.cout .barre .val { transition: width 650ms cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .v3 .pr-pile > .pr-el, .v3 .pr-choix, .v3.cout .barre .val { transition: none; } }

/* La thèse de l'accueil, plus aérée (Tanguy, 7 oct. : « de l'espace au-dessus et en dessous du texte, plus épuré »). */
main .these-sec, main .clair + .these-sec { padding-top: clamp(8rem, 15vw, 15rem); padding-bottom: clamp(9rem, 17vw, 17rem); }

/* Les trois panneaux à la même hauteur (Tanguy, 7 oct. au soir : « la première descend légèrement plus bas ») : chaque panneau
   s'étire sur la zone d'illustration de sa carte, le contenu reste en haut. Real dimensions : la visionneuse filaire
   (illus_ui.cotes_filaire), sur le fond à points des vues. */
@media (min-width: 901px) {
  #pratique .co-ui { align-items: stretch; }
  #pratique .ui-scene.v3 { display: flex; flex-direction: column; }
  #pratique .ui-scene.v3 > .ui.v3.seul { flex: 1 1 auto; }
}
#pratique .v3 .fil-fen .rb-model-viewer { border: 0; border-radius: 0; background: transparent; }
/* Le détail de la pièce choisie : son nom et ses éléments (une ligne à la fois), les flèches, puis ses trois cotes. */
.v3 .fil-ligne { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.625rem 0.25rem; }
.v3 .fil-pieces { display: grid; min-width: 0; }
.v3 .fil-piece { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 0.5rem; margin: 0; opacity: 0; transition: opacity 300ms ease; }
.v3 .fil-piece.actif { opacity: 1; background: none; }   /* sans le fond gris de l'élément actif d'un cycle (Tanguy, 7 oct.) */
.v3 .fil-piece b { font-size: 0.8125rem; font-weight: 500; color: var(--craie); white-space: nowrap; }
.clair .v3 .fil-piece b { color: #121117; }
.v3 .fil-piece small { font-size: 0.6875rem; color: var(--gris); white-space: nowrap; }
.v3 .fil-det .ui-fleches { display: inline-flex; gap: 0.125rem; flex: none; }
.v3 .ui-pastilles.trois { grid-template-columns: repeat(3, 1fr); }
@media (prefers-reduced-motion: reduce) { .v3 .fil-piece { transition: none; } }
/* « In practice » se manipule (Tanguy, 7 oct.) : les boutons, bascules, outils, vignettes et cotes réagissent au survol et au
   clic (rb/src/interface.js), sans rien télécharger. */
#pratique :is(.ui-bascule > span, .vue-outils > span, .ui-act, .ui-film > span, .choix.pastille, .ui-pas > p) { cursor: pointer; }
#pratique .ui-bascule > span { transition: background-color 200ms ease, color 200ms ease; }
#pratique .ui-bascule > span:not(.on):hover { background: var(--pv-tuile); color: #121117; }
#pratique :is(.ui-act, .vue-outils > span) { transition: background-color 200ms ease, transform 160ms ease; }
#pratique :is(.ui-act, .vue-outils > span):hover { background: rgba(18, 17, 23, .08); }
#pratique .ui-act.presse { animation: pr-presse 260ms ease; }
@keyframes pr-presse { 40% { transform: scale(.88); } }
#pratique .ui-film > span { transition: box-shadow 200ms ease, transform 200ms ease; }
#pratique .ui-film > span:not(.actif):hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(18, 17, 23, .25); }
#pratique .choix.pastille:not(.actif):hover { background: rgba(18, 17, 23, .09); }
@media (prefers-reduced-motion: reduce) { #pratique .ui-act.presse { animation: none; } #pratique .ui-film > span:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .v3 .fil-calque, .v3 .fil-fen .fil-nom { transition: none; } }