/* =====================================================================================================================
   Illustrations v3 de sandflow.ai (7 oct. 2026, tools/illus_ui.py ; verdict de Tanguy : « horriblement basiques »).
   Modèles : useorigin.com, glaze.app. Des vues d'application en Inter : fenêtre 3D, éditeur, dialogue, palette, calendrier ;
   des rangées à icône (titre, sous-titre, valeur) ; des graphiques qui se lisent seuls. Une couleur au plus par carte.
   Feuille à part (chargée après /lab.css) : les autres chantiers écrivent dans lab.css en même temps. Toutes les règles sont
   rangées sous .v3 et l'emportent sur le kit v2 de lab.css, qui ne sert plus qu'aux cartes encore en v1.
   ===================================================================================================================== */
.ui-scene.v3 { --pv-fond: rgba(36, 35, 43, .66); --pv-fond2: rgba(24, 23, 29, .74); --pv-bord: rgba(255, 255, 255, .085); --pv-tuile: rgba(255, 255, 255, .065);
  --pv-actif: rgba(255, 255, 255, .055); --pv-trait: rgba(255, 255, 255, .065); --pv-ombre: 0 1.75rem 3.5rem -1.25rem rgba(0, 0, 0, .9);
  position: relative; width: 100%; max-width: 25.5rem; margin: 0 auto; padding: 0 0 1.75rem; font-size: 0.75rem; line-height: 1.35; }
.clair .ui-scene.v3 { --pv-fond: rgba(255, 255, 255, .74); --pv-fond2: rgba(255, 255, 255, .86); --pv-bord: rgba(18, 17, 23, .09); --pv-tuile: rgba(18, 17, 23, .055);
  --pv-actif: rgba(18, 17, 23, .045); --pv-trait: rgba(18, 17, 23, .07); --pv-ombre: 0 1.5rem 3rem -1.25rem rgba(18, 17, 23, .28); }
.ui-scene.v3.large, .d5 .co:nth-child(1) .ui-scene.v3 { max-width: 40rem; }

/* Le panneau de verre. */
.v3 .ui.v3 { position: relative; max-width: none; border: 1px solid var(--pv-bord); border-radius: 1rem; overflow: hidden;
  background: linear-gradient(180deg, var(--pv-fond), var(--pv-fond2)); -webkit-backdrop-filter: blur(1.25rem) saturate(1.5); backdrop-filter: blur(1.25rem) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--pv-ombre); font-size: 0.75rem; line-height: 1.35; color: var(--texte); }
.clair .v3 .ui.v3 { box-shadow: inset 0 1px 0 #fff, var(--pv-ombre); }
.v3 .ui.v3.principal { width: 86%; }
.v3 .ui.v3.seul { width: 100%; }
.v3 .ui.v3.flottant { position: absolute; z-index: 3; width: 56%; right: -5%; bottom: 0; }
.v3 .ui.v3.flottant.etroit { width: 50%; }
.v3 .ui.v3.flottant.droite:not(.bas) { top: 2.75rem; bottom: auto; }
.v3.large .ui.v3.principal { width: 72%; }
.v3.large .ui.v3.flottant { width: 39%; right: -1%; }

/* En-tête : un libellé en Inter (jamais de capitales espacées), une pastille ou une bascule à droite. */
.v3 .ui-h { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.5rem; padding: 0 0.625rem 0 0.875rem;
  border-bottom: 1px solid var(--pv-trait); }
.v3 .ui-l { margin: 0; font: 500 0.75rem/1 "Inter", system-ui, sans-serif; letter-spacing: -.005em; text-transform: none; color: var(--craie); white-space: nowrap; }
.v3 .ui-l-n { margin-left: 0.375rem; font-weight: 400; color: var(--gris); font-size: 0.6875rem; }
.v3 .ui-act { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pv-tuile);
  color: var(--craie); box-shadow: inset 0 0 0 1px var(--pv-bord); }
.v3 .ui-act.discret { background: transparent; box-shadow: none; color: var(--gris); }
.v3 .ui-act .ic { width: 0.8125rem; height: 0.8125rem; }
.v3 .ic { display: block; width: 0.875rem; height: 0.875rem; flex: none; }
.v3 .ui-bascule { display: inline-flex; padding: 0.1875rem; gap: 0.125rem; border-radius: 0.5rem; background: var(--pv-tuile); font-size: 0.6875rem; }
.v3 .ui-bascule span { padding: 0.1875rem 0.5rem; border-radius: 0.3125rem; color: var(--gris); line-height: 1.2; }
.v3 .ui-bascule span.on { background: rgba(255, 255, 255, .13); color: var(--craie); box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08); }
.clair .v3 .ui-bascule span.on { background: #fff; box-shadow: 0 1px 2px rgba(18, 17, 23, .12); }
.v3 .ui-fleches { display: inline-flex; gap: 0.125rem; }

/* Les rangées d'application : icône dans une tuile, titre et sous-titre, valeur à droite. */
.v3 .ui-rangs { padding: 0.3125rem; }
.v3 .ui-rangs > div { position: relative; border-radius: 0.625rem; transition: background-color 450ms ease; }
.v3 [data-cycle] > *::before { content: none; }
.v3 [data-cycle] > .actif { background: var(--pv-actif); }
.v3 .r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.5625rem; }
.v3 .r-ic { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: var(--pv-tuile); color: var(--gris);
  box-shadow: inset 0 0 0 1px var(--pv-trait); transition: color 450ms ease, background-color 450ms ease; font-style: normal; }
.v3 .r-ic.img { width: 2.25rem; overflow: hidden; padding: 0; background: #0e0d12; }
.v3 .r-ic.img img { width: 100%; height: 100%; object-fit: cover; }
.v3 .actif .r-ic { color: var(--craie); background: rgba(255, 255, 255, .1); }
.clair .v3 .actif .r-ic { background: #fff; }
.v3 .r-t { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.v3 .r-t b { font-weight: 500; font-size: 0.75rem; color: var(--craie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3 .r-t small { font-size: 0.6875rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3 .r-v { font-size: 0.75rem; color: var(--craie); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3 .r-v .ic { width: 0.875rem; height: 0.875rem; color: var(--gris); }
.v3 .actif .r-v .ic, .v3 .coches .r-v .ic { color: var(--craie); }
.v3 .ui-pied { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-top: 1px solid var(--pv-trait);
  font: 400 0.6875rem/1.2 "Inter", system-ui, sans-serif; letter-spacing: 0; color: var(--gris); }
.v3 .ui-pied span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.v3 .ui-pied span:last-child { margin-left: auto; }
.v3 .ui-pied span + span::before { content: none; }
.v3 .ui-pied b { font-weight: 500; color: var(--craie); font-variant-numeric: tabular-nums; }
.v3 .ui-pied .ic { width: 0.75rem; height: 0.75rem; }
.v3 .ui-muet { display: none; }

/* La fenêtre 3D : toujours sombre, comme une vue de Blender, même sur la bande claire. */
.v3 .vue { --craie: #F7F6F3; --gris: #8E8B96; --texte: rgba(247, 246, 243, .8); position: relative; overflow: hidden; color: #F7F6F3; background-color: #0d0c11;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), radial-gradient(120% 90% at 50% 40%, #1b1a21 0%, #0d0c11 75%);
  background-size: 0.875rem 0.875rem, 100% 100%; }
.v3 .vue.grille { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
  radial-gradient(120% 90% at 50% 40%, #1b1a21 0%, #0d0c11 75%); background-size: 1.25rem 1.25rem, 1.25rem 1.25rem, 100% 100%; }
.v3 .vue > svg:not(.vue-gizmo), .v3 .vue-img { display: block; width: 100%; height: auto; }
.v3 .vue-img { aspect-ratio: 4 / 3; object-fit: cover; }
.v3 .vue-outils { position: absolute; left: 0.5rem; top: 0.5rem; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.1875rem; border-radius: 0.5rem;
  background: rgba(24, 23, 29, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.v3 .vue-outils span { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 0.3125rem; color: #8E8B96; }
.v3 .vue-outils span.on { background: rgba(255, 255, 255, .12); color: #F7F6F3; }
.v3 .vue-outils .ic { width: 0.75rem; height: 0.75rem; }
.v3 .vue-coin { position: absolute; right: 0.625rem; top: 0.5rem; font-size: 0.625rem; color: #8E8B96; }
.v3 .vue .vue-gizmo { display: block; position: absolute; left: 0.5rem; bottom: 0.375rem; width: 1.875rem; height: 1.875rem; }
.v3 .vue-gizmo line { stroke: #8E8B96; stroke-width: 1.4; stroke-linecap: round; }
.v3 .vue-gizmo line.z { stroke: #F7F6F3; }
.v3 .vue-gizmo text { fill: #8E8B96; font: 500 6px "Inter", system-ui, sans-serif; }
.v3 .vue.vide { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.v3 .vue-vide { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 80%; padding: 0.875rem 1rem; text-align: center;
  border: 1px dashed rgba(247, 246, 243, .22); border-radius: 0.75rem; font-size: 0.6875rem; line-height: 1.4; color: #8E8B96; }
.v3 .vue-vide .ic { width: 1.25rem; height: 1.25rem; color: #F7F6F3; opacity: .7; }

/* Les nuages de points : trois plans de profondeur, la pièce active en Craie, les autres en gris. */
.v3 .pts { display: block; width: 100%; height: auto; }
.v3 .pts .nu { fill: #8E8B96; transition: fill 450ms ease; }
.v3 .pts .pr0 { opacity: .9; } .v3 .pts .pr1 { opacity: .6; } .v3 .pts .pr2 { opacity: .34; }
.v3 .pts .nu.actif { fill: #F7F6F3; }
.v3 .pts .etq-p { opacity: 0; transition: opacity 450ms ease; }
.v3 .pts .etq-p.actif { opacity: 1; }
.v3 .pts .etq-p line { stroke: rgba(247, 246, 243, .6); stroke-width: 1; }
.v3 .pts .etq-p rect { fill: rgba(24, 23, 29, .9); stroke: rgba(247, 246, 243, .3); stroke-width: 1; }
.v3 .pts .etq-p text { fill: #F7F6F3; font: 500 10px "Inter", system-ui, sans-serif; }
.v3 .pts .sol { stroke: rgba(247, 246, 243, .3); stroke-width: 1; stroke-dasharray: 3 3; }
.v3 .pts .cot line { stroke: #8E8B96; stroke-width: 1; transition: stroke 450ms ease; }
.v3 .pts .cot .fond { fill: #121117; opacity: .85; }
.v3 .pts .cot text { fill: #8E8B96; font: 500 9.5px "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; transition: fill 450ms ease; }
.v3 .pts .cot.actif line { stroke: #F7F6F3; }
.v3 .pts .cot.actif text { fill: #F7F6F3; }

/* L'anneau de jauge (Origin), la barre de répartition. */
.v3 .ui-jauge { display: grid; place-items: center; padding: 1rem 0.875rem 0.5rem; }
.v3 .anneau { position: relative; width: 8.25rem; aspect-ratio: 1; }
.v3 .anneau.petit { width: 3.25rem; }
.v3 .anneau svg { display: block; width: 100%; height: 100%; }
.v3 .anneau circle { fill: none; stroke-width: 6; }
.v3 .anneau.petit circle { stroke-width: 9; }
.v3 .anneau .piste { stroke: var(--pv-tuile); }
.v3 .anneau .arc { stroke: var(--craie); stroke-linecap: round; transition: stroke-dashoffset 1400ms cubic-bezier(.2, .7, .2, 1); }
.v3 .anneau p { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.v3 .anneau b { font-size: 1.5rem; font-weight: 300; letter-spacing: -.03em; color: var(--craie); font-variant-numeric: tabular-nums; line-height: 1.05; }
.v3 .anneau small { max-width: 5.5rem; margin-top: 0.1875rem; font-size: 0.625rem; line-height: 1.25; color: var(--gris); }
.v3 .anneau.petit b { font-size: 0.875rem; font-weight: 500; letter-spacing: 0; }
.v3 .anneau.petit small { display: none; }
.v3 .ui-jauge.ligne { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem; border-bottom: 1px solid var(--pv-trait); }
.v3 .ui-jauge.ligne > p { margin: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.v3 .ui-jauge.ligne > p b { font-weight: 500; color: var(--craie); font-size: 0.8125rem; }
.v3 .ui-jauge.ligne > p small { color: var(--gris); font-size: 0.6875rem; }
.v3 .ui-barre { padding: 0.25rem 0.875rem 0.5rem; }
.v3 .repartition { display: block; width: 100%; height: 0.5rem; }
.v3 .repartition .seg { transition: fill 450ms ease; }
.v3 .repartition .seg:nth-child(1) { fill: rgba(247, 246, 243, .42); } .v3 .repartition .seg:nth-child(2) { fill: rgba(247, 246, 243, .3); }
.v3 .repartition .seg:nth-child(3) { fill: rgba(247, 246, 243, .2); } .v3 .repartition .seg:nth-child(n+4) { fill: rgba(247, 246, 243, .13); }
.clair .v3 .repartition .seg { fill: rgba(18, 17, 23, .15); }
.v3 .repartition .seg.actif { fill: var(--craie); }

/* L'éditeur (la seule chasse fixe) et sa fenêtre à trois feux. */
.v3 .fen-barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 2.375rem; padding: 0 0.5rem 0 0.75rem; border-bottom: 1px solid var(--pv-trait); }
.v3 .fen-titre { font-size: 0.6875rem; color: var(--gris); }
.v3 .fen-droite { justify-self: end; }
.v3 .ui-feux { display: inline-flex; gap: 0.3125rem; margin: 0; }
.v3 .ui-feux i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.v3 .ui-feux i:nth-child(1) { background: #ff5f57; } .v3 .ui-feux i:nth-child(2) { background: #febc2e; } .v3 .ui-feux i:nth-child(3) { background: #28c840; }
.v3 .ed-onglets { display: flex; gap: 0.25rem; padding: 0.375rem 0.5rem 0; border-bottom: 1px solid var(--pv-trait); }
.v3 .ed-onglets span { padding: 0.3125rem 0.625rem 0.4375rem; border-radius: 0.375rem 0.375rem 0 0; font: 400 0.6875rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--gris); }
.v3 .ed-onglets span.on { color: var(--craie); background: var(--pv-tuile); }
.v3 .ui-editeur { padding: 0.5rem 0; font: 400 0.65rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--texte); }
.v3 .ui-editeur p { display: flex; gap: 0.875rem; margin: 0; padding: 0 0.875rem; white-space: pre; overflow: hidden; transition: background-color 450ms ease, box-shadow 450ms ease; }
.v3 .ui-editeur p.actif { background: rgba(255, 255, 255, .07); box-shadow: inset 2px 0 0 var(--craie); }
.clair .v3 .ui-editeur p.actif { background: rgba(18, 17, 23, .05); }
.v3 .ui-editeur .no { flex: none; width: 1.375rem; text-align: right; color: var(--gris); opacity: .55; }
.v3 .ui-editeur.mini { font-size: 0.6rem; padding: 0.75rem 0; }
.v3.code .ui.v3.apercu { width: 46%; right: -6%; bottom: 0; }
.v3.code .ui.v3.apercu .vue-img { aspect-ratio: 1; }

/* Les étapes : chiffres en tête, courbe d'aire en dégradé, pellicule, pas-à-pas. */
.v3 .chiffres { display: flex; align-items: flex-end; gap: 1.25rem; padding: 0.875rem 0.875rem 0.25rem; }
.v3 .chiffres > div { display: flex; flex-direction: column; gap: 0.125rem; }
.v3 .chiffres small { font-size: 0.6875rem; color: var(--gris); }
.v3 .chiffres .chiffre { margin-right: auto; }
.v3 .chiffres .chiffre b { font-size: 1.75rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--craie); font-variant-numeric: tabular-nums; }
.v3 .chiffres .stat b { font-size: 0.875rem; font-weight: 500; color: var(--craie); font-variant-numeric: tabular-nums; }
.v3 .ui-courbe { padding: 0.5rem 0.625rem 0; }
.v3 .courbes, .v3 .chamfer, .v3 .plan-pos, .v3 .barre, .v3 .comparateur, .v3 .champ { display: block; width: 100%; height: auto; }
.v3 .courbes .tic { stroke: var(--pv-trait); stroke-width: 1; }
.v3 .courbes .g0 { stop-color: #F7F6F3; stop-opacity: .24; } .v3 .courbes .g1 { stop-color: #F7F6F3; stop-opacity: 0; }
.clair .v3 .courbes .g0 { stop-color: #121117; stop-opacity: .14; } .clair .v3 .courbes .g1 { stop-color: #121117; stop-opacity: 0; }
.v3 .courbes .courbe { fill: none; stroke: var(--craie); stroke-width: 1.75; stroke-linecap: round; transition: stroke-dashoffset 1600ms cubic-bezier(.3, .6, .2, 1); }
.v3 .courbes .ref { fill: none; stroke: var(--gris); stroke-width: 1.25; stroke-dasharray: 3 4; }
.v3 .pt-etape line { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity 400ms ease; }
.v3 .pt-etape circle { fill: var(--gris); transition: fill 400ms ease, opacity 400ms ease; }
.v3 .pt-etape .halo { fill: var(--craie); opacity: 0; }
.v3 .pt-etape.actif line { opacity: .6; }
.v3 .pt-etape.actif circle { fill: var(--craie); }
.v3 .pt-etape.actif .halo { opacity: .16; }
.v3 .legende { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0; padding: 0.375rem 0.875rem 0.625rem; font-size: 0.6875rem; color: var(--gris); }
.v3 .legende span { display: inline-flex; align-items: center; gap: 0.375rem; }
.v3 .legende span::before { content: ""; width: 0.875rem; height: 0; border-top: 1.75px solid var(--craie); }
.v3 .legende .l-tirets::before { border-top: 1.25px dashed var(--gris); }
.v3 .legende .l-ref::before { width: 0.5rem; height: 0.5rem; border: 0; border-radius: 50%; background: var(--craie); }
.v3 .legende .l-gen::before { width: 0.4375rem; height: 0.4375rem; border: 1.25px solid var(--craie); border-radius: 50%; }
.v3 .ui-film { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.375rem; padding: 0 0.875rem 0.75rem; }
.v3 .ui-film span { position: relative; border-radius: 0.5rem; overflow: hidden; background: #F7F6F3; opacity: .4; box-shadow: 0 0 0 1px var(--pv-bord);
  transition: opacity 450ms ease, box-shadow 450ms ease; }
.v3 .ui-film span.actif { opacity: 1; box-shadow: 0 0 0 1.5px var(--craie); }
.v3 .ui-film img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transform: scale(1.3); }
.v3 .ui-film small { position: absolute; left: 0.25rem; bottom: 0.1875rem; font-size: 0.5625rem; font-weight: 600; color: #121117; }
.v3 .ui-pas { position: relative; height: 2.625rem; border-top: 1px solid var(--pv-trait); }
.v3 .ui-pas > p { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0 0.875rem;
  opacity: 0; transition: opacity 350ms ease; color: var(--craie); }
.v3 .ui-pas > p.actif { opacity: 1; background: none; }
.v3 .ecart { font-size: 0.6875rem; font-variant-numeric: tabular-nums; padding: 0.125rem 0.375rem; border-radius: 0.3125rem; }
.v3 .ecart.plus { color: #4ade80; background: rgba(74, 222, 128, .1); }
.v3 .ecart.moins { color: #f87171; background: rgba(248, 113, 113, .1); }
.clair .v3 .ecart.plus { color: #15803d; background: rgba(21, 128, 61, .08); }

/* Le dialogue d'export. */
.v3 .ui-fichier { border-bottom: 1px solid var(--pv-trait); padding: 0.3125rem; }
.v3 .ui-reglage { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.875rem; }
.v3 .ui-reglage + .ui-reglage { border-top: 1px solid var(--pv-trait); }
.v3 .ui-reglage > span:first-child { color: var(--gris); }
.v3 .ui-reglage b { font-weight: 500; color: var(--craie); font-variant-numeric: tabular-nums; }
.v3 .ui-action { display: flex; justify-content: flex-end; gap: 0.375rem; padding: 0.625rem 0.75rem 0.75rem; border-top: 1px solid var(--pv-trait); }
.v3 .ui-bouton { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.75rem; border-radius: 999px; background: var(--craie);
  color: #121117; font-weight: 500; font-size: 0.6875rem; }
.clair .v3 .ui-bouton { color: #F7F6F3; }
.v3 .ui-bouton.sec { background: var(--pv-tuile); color: var(--craie); }
.v3 .ui-bouton .ic { width: 0.75rem; height: 0.75rem; }
.v3.export .ui.v3.principal .vue-img { aspect-ratio: 16 / 9; }

/* La carte de positionnement. */
.v3 .ui-filtres { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.875rem 0; }
.v3 .ui-carte { padding: 0.25rem 0.375rem 0.5rem; }
.v3 .plan-pos .tic { stroke: var(--pv-trait); stroke-width: 1; }
.v3 .plan-pos .mi { stroke: var(--pv-bord); stroke-width: 1; stroke-dasharray: 3 4; }
.v3 .plan-pos .quadrant { fill: rgba(247, 246, 243, .035); }
.clair .v3 .plan-pos .quadrant { fill: rgba(18, 17, 23, .035); }
.v3 .plan-pos .axe { stroke: var(--gris); stroke-width: 1.2; }
.v3 .plan-pos .fl { fill: none; stroke: var(--gris); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v3 .plan-pos text { fill: var(--gris); font: 400 10px "Inter", system-ui, sans-serif; }
.v3 .plan-pos text.petit { font-size: 9px; font-style: italic; }
.v3 .plan-pos text.fort { fill: #121117; font-weight: 600; font-size: 10px; }
.clair .v3 .plan-pos text.fort { fill: #F7F6F3; }
.v3 .plan-pos .etq { fill: var(--craie); }
.v3 .plan-pos .vers { fill: none; stroke: var(--gris); stroke-width: 1.2; stroke-linecap: round; transition: stroke-dashoffset 1500ms cubic-bezier(.3, .6, .2, 1); }
.v3 .plan-pos .creux { fill: #18171d; stroke: var(--gris); stroke-width: 1.5; }
.clair .v3 .plan-pos .creux { fill: #fff; }
.v3 .plan-pos .nous { fill: var(--craie); }

/* Le coût par modèle, et la barre de saisie de Glaze. */
.v3 .couts > div { padding-bottom: 0.4375rem; }
.v3 .couts .barre { width: calc(100% - 1.125rem); height: 0.5rem; margin: 0 0.5625rem; }
.v3 .barre .piste { fill: var(--pv-tuile); }
.v3 .barre .val { fill: rgba(247, 246, 243, .34); transform-box: fill-box; transform-origin: left center; transition: transform 1200ms cubic-bezier(.2, .7, .2, 1); }
.clair .v3 .barre .val { fill: rgba(18, 17, 23, .25); }
.v3 .ui-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.v3.cout { padding-bottom: 4.5rem; }
.v3 .ui.v3.saisie { width: 88%; right: -4%; bottom: 0; border-radius: 1.125rem; }
.v3 .ui-prompt { margin: 0; padding: 0.75rem 0.875rem 0.375rem; font-size: 0.8125rem; color: var(--craie); }
.v3 .curseur { display: inline-block; width: 1px; height: 0.95em; margin-left: 1px; vertical-align: -0.12em; background: var(--craie); }
@media (prefers-reduced-motion: no-preference) { .v3 .curseur { animation: v3-curseur 1.1s steps(2, start) infinite; } }
@keyframes v3-curseur { to { visibility: hidden; } }
.v3 .ui-saisie-pied { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem 0.5rem 0.625rem; }
.v3 .ui-chip { display: inline-flex; align-items: center; gap: 0.3125rem; height: 1.5rem; padding: 0 0.5rem; border-radius: 0.5rem; background: var(--pv-tuile);
  color: var(--craie); font-size: 0.6875rem; }
.v3 .ui-chip .ic { width: 0.75rem; height: 0.75rem; }
.v3 .ui-envoi { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--craie); color: #121117; }
.clair .v3 .ui-envoi { color: #F7F6F3; }
.v3 .ui-envoi .ic { width: 0.875rem; height: 0.875rem; }

/* Le comparateur avant / après. */
.v3 .ui-av-tete, .v3 .ui-av-pied { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; padding: 0.5rem 0.875rem; font-size: 0.6875rem; color: var(--gris); }
.v3 .ui-av-tete span:last-child, .v3 .ui-av-pied span:last-child { text-align: right; color: var(--craie); }
.v3 .ui-av-pied { border-top: 1px solid var(--pv-trait); }
.v3 .ui-av-pied b { margin-right: 0.3125rem; font-size: 1rem; font-weight: 400; color: var(--craie); }
.v3 .ui-av { position: relative; }
.v3 .comparateur .coque { fill: rgba(247, 246, 243, .1); }
.v3 .comparateur .fil { fill: none; stroke: rgba(247, 246, 243, .34); stroke-width: 1.4; }
.v3 .comparateur .bord * { fill: none; stroke: rgba(247, 246, 243, .45); stroke-width: 2.5; }
.v3 .comparateur .piece * { fill: rgba(247, 246, 243, .05); stroke: #F7F6F3; stroke-width: 3; transition: fill 450ms ease; }
.v3 .comparateur .piece.actif * { fill: rgba(247, 246, 243, .28); }
.v3 .comparateur .etiq path { fill: none; stroke: rgba(247, 246, 243, .3); stroke-width: 1.5; transition: stroke 450ms ease; }
.v3 .comparateur .etiq circle { fill: rgba(247, 246, 243, .45); }
.v3 .comparateur .etiq text { fill: #8E8B96; font: 500 21px "Inter", system-ui, sans-serif; transition: fill 450ms ease; }
.v3 .comparateur .etiq.actif path { stroke: #F7F6F3; }
.v3 .comparateur .etiq.actif text { fill: #F7F6F3; }
.v3 .comparateur .coupe { stroke: #F7F6F3; stroke-width: 2.5; }
.v3 .ui-poignee { position: absolute; left: calc(46.15% - 0.875rem); top: 50%; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: -0.875rem;
  border-radius: 50%; background: #F7F6F3; color: #121117; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .5); }
.v3 .ui-poignee .ic { width: 0.875rem; height: 0.875rem; }

/* La grille à coches (une grille de tarifs). */
.v3 .ui-tableau { padding: 0.3125rem 0.3125rem 0.375rem; }
.v3 .ui-grille { gap: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); align-items: stretch; border-radius: 0.625rem; transition: background-color 450ms ease; }
.v3 .ui-grille > span { display: flex; align-items: center; justify-content: center; min-height: 2.375rem; color: var(--gris); }
.v3 .ui-grille > span:first-child { justify-content: flex-start; gap: 0.5rem; padding-left: 0.5rem; color: var(--craie); }
.v3 .ui-grille .r-ic { width: 1.5rem; height: 1.5rem; border-radius: 0.4375rem; }
.v3 .ui-grille .r-ic .ic { width: 0.75rem; height: 0.75rem; }
.v3 .ui-grille.entete > span { min-height: 2.75rem; font-size: 0.6875rem; line-height: 1.2; text-align: center; color: var(--gris); }
.v3 .ui-grille.entete > span.nous { color: var(--craie); font-weight: 500; }
.v3 .ui-grille .nous { background: rgba(255, 255, 255, .05); }
.clair .v3 .ui-grille .nous { background: rgba(18, 17, 23, .04); }
.v3 .ui-grille.entete .nous { border-radius: 0.625rem 0.625rem 0 0; }
.v3 .ui-grille.total .nous { border-radius: 0 0 0.625rem 0.625rem; }
.v3 .ui-grille .oui.nous { color: var(--craie); }
.v3 .ui-grille .non { opacity: .45; }
.v3 .ui-grille .ic { width: 0.9375rem; height: 0.9375rem; }
.v3 .ui-grille.total { border-top: 1px solid var(--pv-trait); border-radius: 0; }
.v3 .ui-grille.total > span { font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.v3 .ui-grille.total > span:first-child { color: var(--gris); }
.v3 .ui-grille.total > span.nous { color: var(--craie); font-weight: 500; }

/* Research et About : la pile de vues des représentations, l'Outliner, la palette, les mesures, le calendrier. */
.v3.representations .ui.v3.vue-pile { width: 52%; right: -4%; bottom: 0; }
.v3 .pile { display: grid; }
.v3 .pile-el { grid-area: 1 / 1; opacity: 0; transition: opacity 450ms ease; display: grid; align-content: center; background: #0d0c11; }
.v3 .pile-el.actif { opacity: 1; }
.v3 .pile-el .vue.vide { aspect-ratio: auto; height: 100%; min-height: 11rem; }
.v3 .pile-el .ui-editeur { --craie: #F7F6F3; --gris: #8E8B96; color: rgba(247, 246, 243, .8); }
.v3 .champ .iso { fill: none; stroke: rgba(247, 246, 243, .22); stroke-width: 1; }
.v3 .champ .zero { fill: rgba(247, 246, 243, .08); stroke: #F7F6F3; stroke-width: 1.6; }
.v3 .champ text { fill: #F7F6F3; font: italic 500 10px "Inter", system-ui, sans-serif; }
.v3 .arbre .n0 { margin-bottom: 0.125rem; }
.v3 .arbre .n1 .r { padding-left: 1.75rem; }
.v3 .arbre .n1::before { content: ""; position: absolute; left: 1.4375rem; top: -0.25rem; height: 1.625rem; width: 0.5rem; border-left: 1px solid var(--pv-bord);
  border-bottom: 1px solid var(--pv-bord); border-bottom-left-radius: 0.25rem; opacity: 1; background: none; }
.v3.arbre .ui.v3.principal .vue-img { aspect-ratio: 4 / 3.4; }
.v3 .ui-recherche { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem; border-bottom: 1px solid var(--pv-trait); font-size: 0.875rem; color: var(--craie); }
.v3 .ui-recherche > .ic { width: 1rem; height: 1rem; color: var(--gris); }
.v3 .ui-recherche .ui-l-n { margin-left: auto; }
.v3 .ui-formule { margin: 0; padding: 0.625rem 0.875rem 0.75rem; border-top: 1px solid var(--pv-trait); font: italic 400 0.75rem/1.4 "Inter", system-ui, sans-serif; color: var(--craie); text-align: center; }
.v3 .chamfer .surface { fill: none; stroke: var(--pv-tuile); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.v3 .chamfer .lien { stroke: var(--gris); stroke-width: 1; opacity: .6; }
.v3 .chamfer .lien.b { stroke-dasharray: 2 3; }
.v3 .chamfer .ref { fill: var(--craie); }
.v3 .chamfer .gen { fill: #18171d; stroke: var(--craie); stroke-width: 1.4; }
.clair .v3 .chamfer .gen { fill: #fff; }
.v3 .sens { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; color: var(--gris); }
.v3 .sens .ic { width: 0.75rem; height: 0.75rem; }
.v3 .sens.desc .ic { transform: rotate(180deg); }
/* Deux panneaux empilés : le second glisse sous le premier, décalé à droite, en léger chevauchement. */
.v3 .ui.v3.flottant.empile { position: relative; inset: auto; width: 82%; margin: -0.875rem -5% 0 auto; }
.v3 .ui-cal-tete { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.5rem 0.25rem 0.875rem; }
.v3 .ui-cal-tete b { font-weight: 500; color: var(--craie); }
.v3 .ui-cal { padding: 0 0.625rem 0.75rem; }
.v3 .ui-cal .jours, .v3 .ui-cal .cases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.1875rem; }
.v3 .ui-cal .jours span { padding: 0.25rem 0; text-align: center; font-size: 0.625rem; color: var(--gris); }
.v3 .ui-cal .cases span { display: flex; flex-direction: column; justify-content: space-between; min-height: 2.125rem; padding: 0.25rem 0.3125rem; border-radius: 0.375rem;
  background: var(--pv-tuile); font-variant-numeric: tabular-nums; }
.v3 .ui-cal .cases span.vide { background: none; }
.v3 .ui-cal .cases b { font-size: 0.625rem; font-weight: 400; color: var(--gris); }
.v3 .ui-cal .cases span.jm { background: var(--craie); }
.v3 .ui-cal .cases span.jm b { color: #121117; font-weight: 600; }
.v3 .ui-cal .cases small { font-size: 0.5625rem; font-weight: 500; color: #121117; }
.clair .v3 .ui-cal .cases span.jm b, .clair .v3 .ui-cal .cases span.jm small { color: #F7F6F3; }

/* Téléphone et tablette : les panneaux flottants se posent sous le principal, en léger chevauchement. */
@media (max-width: 900px) {
  .v3 .ui.v3.principal, .v3.large .ui.v3.principal { width: 100%; }
  .v3 .ui.v3.flottant, .v3.large .ui.v3.flottant, .v3.code .ui.v3.apercu, .v3.representations .ui.v3.vue-pile, .v3 .ui.v3.saisie {
    position: relative; inset: auto; width: 86%; margin: -1.5rem 0 0 auto; }
  }
.v3 .ui-sous { display: flex; justify-content: space-between; margin: 0; padding: 0.625rem 0.875rem 0; border-top: 1px solid var(--pv-trait); font-size: 0.6875rem; color: var(--gris); }
.v3 .ui-indice { color: var(--gris); }
.v3 .ui-indice .curseur { margin: 0 0.125rem 0 0; }

/* Retouches après les captures du 7 oct. */
.v3 svg text { text-transform: none; letter-spacing: 0; }
.v3.cout { padding-bottom: 6.5rem; }
.v3.large .ui-pied span:last-child { margin-left: 0; }
.v3.large .ui-pied { gap: 1rem; }
.v3 .plan-pos .halo { opacity: .85; }
.v3 .vue-pile .ui-h { min-height: 2.25rem; }

/* ---------- Les emplacements (gabarits.emplacement) : l'allure de ce qu'ils attendent ---------- */
.emplacement.v3e { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; color: #8E8B96; background-color: #0d0c11;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), radial-gradient(110% 90% at 50% 45%, #1d1c23 0%, #0d0c11 72%);
  background-size: 0.875rem 0.875rem, 100% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.clair .emplacement.v3e { border-color: rgba(18, 17, 23, .1); box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(18, 17, 23, .35); }
.emplacement.v3e .e-chrome { position: absolute; inset: 0; z-index: 0; max-width: none; }
.emplacement.v3e .e-chrome > * { max-width: none; }
.emplacement.v3e .ic { display: block; width: 0.875rem; height: 0.875rem; }
.emplacement.v3e .e-texte { position: relative; z-index: 2; max-width: min(26rem, 82%); margin-top: 4.25rem; font-size: 0.75rem; line-height: 1.45; text-align: center; color: #8E8B96; }
.emplacement.v3e .e-ic { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -85%);
  border-radius: 0.875rem; background: rgba(36, 35, 43, .8); color: #F7F6F3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 1rem 2rem -0.5rem rgba(0, 0, 0, .8); }
.emplacement.v3e .e-ic .ic { width: 1.25rem; height: 1.25rem; }
/* Un rendu 3D : la vue de Blender, son plateau, sa barre d'outils, son repère. */
.emplacement.e-3d .e-plateau { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 4 / 1; transform: translate(-50%, 10%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 246, 243, .09), rgba(247, 246, 243, 0)); box-shadow: inset 0 0 0 1px rgba(247, 246, 243, .06); }
.emplacement.v3e .e-outils { position: absolute; left: 0.625rem; top: 0.625rem; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.25rem; border-radius: 0.5rem;
  background: rgba(24, 23, 29, .75); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: #8E8B96; }
.emplacement.v3e .e-outils .ic { width: 0.75rem; height: 0.75rem; margin: 0.25rem; }
.emplacement.v3e .e-coin { position: absolute; right: 0.75rem; top: 0.625rem; font-size: 0.625rem; color: #8E8B96; }
.emplacement.v3e .e-gizmo { position: absolute; left: 0.625rem; bottom: 0.5rem; width: 1.875rem; height: 1.875rem; }
.emplacement.v3e .e-gizmo line { stroke: #8E8B96; stroke-width: 1.4; stroke-linecap: round; }
.emplacement.v3e .e-gizmo line.z { stroke: #F7F6F3; }
/* Une vidéo : un lecteur. */
.emplacement.e-video { background-image: radial-gradient(110% 90% at 50% 40%, #1d1c23 0%, #0d0c11 72%); background-size: 100% 100%; }
.emplacement.e-video .e-lire { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 3rem; height: 3rem; transform: translate(-50%, -75%);
  border-radius: 50%; background: #F7F6F3; color: #121117; box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .6); }
.emplacement.e-video .e-lire .ic { width: 1.125rem; height: 1.125rem; margin-left: 0.125rem; }
.emplacement.e-video .e-barre { position: absolute; left: 1rem; right: 4.75rem; bottom: 1.125rem; height: 0.1875rem; border-radius: 2px; background: rgba(247, 246, 243, .16); }
.emplacement.e-video .e-barre i { display: block; width: 32%; height: 100%; border-radius: 2px; background: #F7F6F3; }
.emplacement.e-video .e-outils { left: auto; top: auto; right: 0.75rem; bottom: 0.625rem; flex-direction: row; background: none; box-shadow: none; padding: 0; }
.emplacement.e-video .e-texte { margin-top: 5rem; }
/* Un portrait ou une figure : un cadre calme. */
.emplacement.e-portrait, .emplacement.e-figure { background-image: radial-gradient(90% 80% at 50% 30%, #1d1c23 0%, #121117 75%); background-size: 100% 100%; }
.clair .emplacement.e-portrait, .clair .emplacement.e-figure { background: #EFEDE9; border-color: rgba(18, 17, 23, .08); box-shadow: none; }
.clair .emplacement.e-portrait .e-texte, .clair .emplacement.e-figure .e-texte { color: #6B6874; }
.clair .emplacement.e-portrait .e-ic, .clair .emplacement.e-figure .e-ic { background: #fff; color: #121117; box-shadow: 0 1px 2px rgba(18, 17, 23, .08); }

/* Les représentations dessinées (variante publiable) : maillage en fil de fer, Gaussian splats. */
.v3 .maillage, .v3 .splats { display: block; width: 100%; height: auto; background: #0d0c11; }
.v3 .maillage .fil { fill: none; stroke: rgba(247, 246, 243, .42); stroke-width: .7; stroke-linejoin: round; }
.v3 .maillage .sommets { fill: #F7F6F3; }
.v3 .splats ellipse { fill: #F7F6F3; }
.v3 .maillage text, .v3 .splats text { fill: #8E8B96; font: 500 8px "Inter", system-ui, sans-serif; }

/* ---------- Retouches du 7 oct. après les retours de Tanguy : nuages vivants, vrais modèles 3D, cartes plus basses ---------- */
/* Les rangées que le composant « nuage » allume (survol du nuage ou de la rangée). */
.v3 .choix { position: relative; border-radius: 0.625rem; cursor: default; transition: background-color 350ms ease; }
.v3 .choix.actif { background: var(--pv-actif); }
.v3 .choix.actif .r-ic { color: var(--craie); background: rgba(255, 255, 255, .1); }
.clair .v3 .choix.actif .r-ic { background: #fff; }
/* La fenêtre d'un nuage : le canvas du composant, l'étiquette de la pièce active, un pointeur de visée. */
.v3 .vue.nuage-fen .nuage-vue { position: relative; width: 100%; aspect-ratio: 4 / 3; cursor: crosshair; }
.v3.cotes .vue.nuage-fen .nuage-vue { aspect-ratio: 16 / 10; }
.v3 .vue.nuage-fen .nuage-vue canvas { position: absolute; inset: 0; display: block; }
.v3 .nuage-nom { position: absolute; left: 50%; bottom: 0.625rem; transform: translateX(-50%); padding: 0.25rem 0.625rem; border-radius: 999px;
  background: rgba(24, 23, 29, .88); box-shadow: inset 0 0 0 1px rgba(247, 246, 243, .22); font-size: 0.6875rem; font-weight: 500; color: #F7F6F3;
  white-space: nowrap; pointer-events: none; }
.v3 .ui-entree { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--pv-trait); }
/* Les cotes hors tout en tête du panneau. */
.v3 .chiffres.petits { gap: 1.25rem; padding: 0.75rem 0.875rem 0.625rem; }
.v3 .chiffres.petits .stat b { font-size: 1rem; font-weight: 400; }
.v3 .chiffres.petits .unite { margin-left: auto; }
.v3 .chiffres.petits .unite b { font-size: 0.75rem; color: var(--gris); }
.v3.cotes .ui.v3.cotes-liste { width: 52%; right: -5%; bottom: -0.25rem; }
.v3.cotes { padding-bottom: 3.5rem; }
/* Un vrai modèle 3D dans une fenêtre (model-viewer) : sans cadre ni fond propres, la fenêtre les donne. */
.v3 .vue .mv { position: relative; z-index: 0; }
.v3 .vue .rb-model-viewer { border: 0; border-radius: 0; background: transparent; }
.v3.export .vue .mv { --rb-mv-ratio: 16 / 10; }
.v3.sortie .vue .mv { --rb-mv-ratio: 4 / 3; }
.v3.sortie .ui-av-tete { border-bottom: 1px solid var(--pv-trait); }
/* Les cartes plus basses : la rangée des trois cartes « In practice ». */
.d3 .co { min-height: 0; }
.d3 .co-ui { padding-bottom: 1.5rem; }
.v3.etapes .ui-film { padding-bottom: 0.625rem; }
.v3.etapes .legende { padding-top: 0.25rem; padding-bottom: 0.5rem; }

/* La lueur reste hors du flux, même quand un composant pose position: relative sur les enfants de la scène. */
.ui-scene.v3 > .co-lueur { position: absolute; }
.v3.large .ui.v3.principal { width: 64%; }
.v3.large .ui.v3.flottant { width: 42%; right: 0; }
/* Les cotes en pastilles sous la vue : deux par deux, sélectionnables. */
.v3 .ui-pastilles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.375rem; }
.v3 .choix.pastille { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.4375rem 0.625rem; border-radius: 0.5rem; background: var(--pv-tuile); }
.v3 .choix.pastille small { font-size: 0.6875rem; color: var(--gris); }
.v3 .choix.pastille b { font-size: 0.9375rem; font-weight: 400; color: var(--craie); font-variant-numeric: tabular-nums; }
.v3 .choix.pastille.actif { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(247, 246, 243, .22); }
.clair .v3 .choix.pastille.actif { background: #fff; }
.v3.cotes { padding-bottom: 1.75rem; }
.v3.cotes .vue.nuage-fen .nuage-vue { aspect-ratio: 4 / 3; }
.v3 .anneau.petit b { font-size: 0.5625rem; font-weight: 600; letter-spacing: -.02em; }

/* ---------- Sur la bande claire (« In practice », Tanguy, 7 oct.) : des vues 3D claires, comme un viewport en thème clair ---------- */
.clair .v3 .vue { --craie: #121117; --gris: #6B6874; --texte: rgba(18, 17, 23, .8); color: #121117; background-color: #F2F1EE;
  background-image: radial-gradient(rgba(18, 17, 23, .07) 1px, transparent 1px), radial-gradient(120% 90% at 50% 40%, #FBFAF8 0%, #ECEAE6 80%); }
.clair .v3 .vue.grille { background-image: linear-gradient(rgba(18, 17, 23, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 17, 23, .055) 1px, transparent 1px),
  radial-gradient(120% 90% at 50% 40%, #FBFAF8 0%, #ECEAE6 80%); }
.clair .v3 .vue-outils { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .08), 0 1px 2px rgba(18, 17, 23, .06); }
.clair .v3 .vue-outils span { color: #6B6874; }
.clair .v3 .vue-outils span.on { background: rgba(18, 17, 23, .08); color: #121117; }
.clair .v3 .vue-coin { color: #6B6874; }
.clair .v3 .vue-gizmo line { stroke: #8E8B96; } .clair .v3 .vue-gizmo line.z { stroke: #121117; } .clair .v3 .vue-gizmo text { fill: #6B6874; }
.clair .v3 .nuage-nom { background: rgba(255, 255, 255, .92); color: #121117; box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .12), 0 2px 6px rgba(18, 17, 23, .08); }
.clair .v3.etapes .ui-film span { box-shadow: 0 0 0 1px rgba(18, 17, 23, .1); }
.clair .v3.etapes .ui-film span.actif { box-shadow: 0 0 0 1.5px #121117; }

/* ---------- Bande claire : tout en clair, rien de sombre (Tanguy, 7 oct. : « ça doit être harmonieux ») ---------- */
.v3 .vue-img.pour-clair { display: none; }
.clair .v3 .vue-img.pour-clair { display: block; }
.clair .v3 .vue-img.pour-sombre { display: none; }
/* La pile des représentations : code, dessins et nuage sur fond clair. */
.clair .v3 .pile-el { background: #F2F1EE; }
.clair .v3 .pile-el .ui-editeur { --craie: #121117; --gris: #6B6874; color: rgba(18, 17, 23, .8); }
.clair .v3 .maillage, .clair .v3 .splats { background: #F2F1EE; }
.clair .v3 .maillage .fil { stroke: rgba(18, 17, 23, .45); }
.clair .v3 .maillage .sommets, .clair .v3 .splats ellipse { fill: #121117; }
.clair .v3 .champ .iso { stroke: rgba(18, 17, 23, .22); }
.clair .v3 .champ .zero { fill: rgba(18, 17, 23, .06); stroke: #121117; }
.clair .v3 .champ text { fill: #121117; }
.clair .v3 .maillage text, .clair .v3 .splats text { fill: #6B6874; }
/* Les nuages en SVG : points à l'Encre. */
.clair .v3 .pts .nu { fill: #8E8B96; }
.clair .v3 .pts .nu.actif { fill: #121117; }
.clair .v3 .pts .etq-p rect { fill: rgba(255, 255, 255, .94); stroke: rgba(18, 17, 23, .14); }
.clair .v3 .pts .etq-p text { fill: #121117; }
.clair .v3 .pts .etq-p line { stroke: rgba(18, 17, 23, .4); }
.clair .mt-nuage .nu { fill: #121117; }
/* Les emplacements : une vue 3D ou un lecteur en thème clair. */
.clair .emplacement.v3e.e-3d, .clair .emplacement.v3e.e-video { color: #6B6874; background-color: #F2F1EE; border-color: rgba(18, 17, 23, .08);
  background-image: radial-gradient(rgba(18, 17, 23, .07) 1px, transparent 1px), radial-gradient(110% 90% at 50% 45%, #FBFAF8 0%, #ECEAE6 75%);
  background-size: 0.875rem 0.875rem, 100% 100%; box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(18, 17, 23, .25); }
.clair .emplacement.v3e.e-video { background-image: radial-gradient(110% 90% at 50% 40%, #FBFAF8 0%, #ECEAE6 75%); background-size: 100% 100%; }
.clair .emplacement.v3e .e-texte { color: #6B6874; }
.clair .emplacement.v3e .e-ic { background: #fff; color: #121117; box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .08), 0 0.75rem 1.5rem -0.5rem rgba(18, 17, 23, .25); }
.clair .emplacement.v3e .e-outils { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .08); color: #6B6874; }
.clair .emplacement.e-video .e-outils { background: none; box-shadow: none; }
.clair .emplacement.v3e .e-coin { color: #6B6874; }
.clair .emplacement.v3e .e-gizmo line { stroke: #8E8B96; } .clair .emplacement.v3e .e-gizmo line.z { stroke: #121117; }
.clair .emplacement.e-3d .e-plateau { background: radial-gradient(closest-side, rgba(18, 17, 23, .07), rgba(18, 17, 23, 0)); box-shadow: inset 0 0 0 1px rgba(18, 17, 23, .06); }
.clair .emplacement.e-video .e-lire { background: #121117; color: #F7F6F3; box-shadow: 0 0.75rem 2rem rgba(18, 17, 23, .25); }
.clair .emplacement.e-video .e-barre { background: rgba(18, 17, 23, .12); }
.clair .emplacement.e-video .e-barre i { background: #121117; }
/* Téléphone et tablette : la carte large du scan empile ses deux panneaux (règles reprises après les retouches ci-dessus). */
@media (max-width: 900px) {
  .v3.large .ui.v3.principal { width: 100%; }
  .v3.large .ui.v3.flottant { position: relative; inset: auto; width: 88%; margin: -1.5rem 0 0 auto; }
}

/* ---------- La thèse de l'accueil (pages.these_html) : lecture et mise au point (Tanguy, 7 oct.) ---------- */
@media (min-width: 601px) { .these .these-l { display: block; } }
.these .these-focus { font-weight: 500; transition: font-weight 700ms cubic-bezier(.2, .7, .2, 1); }
.rb-scroll-reveal .these-focus:not(.net) { font-weight: 300; }

/* ---------- Une rangée de cartes : les panneaux à la même hauteur (Tanguy, 7 oct.) ----------
   La scène s'étire sur toute la zone d'illustration, le panneau sur toute la scène ; l'espace libre passe avant le pied. */
:is(.d3, .d4) .co-ui { align-items: stretch; }
:is(.d3, .d4) .ui-scene.v3 { display: flex; flex-direction: column; }
:is(.d3, .d4) .ui-scene.v3 > .ui.v3.seul { flex: 1; display: flex; flex-direction: column; }
:is(.d3, .d4) .ui-scene.v3 > .ui.v3.seul > :last-child { margin-top: auto; }
/* Le coût (un panneau et la barre de saisie) : le panneau prend la hauteur, la saisie reste posée sur son bas. */
.d4 .ui-scene.v3.cout > .ui.v3.principal { flex: 1; display: flex; flex-direction: column; }
.d4 .ui-scene.v3.cout > .ui.v3.principal > :last-child { margin-top: auto; }
@media (max-width: 900px) { :is(.d3, .d4) .ui-scene.v3 > .ui.v3.seul > :last-child { margin-top: 0; } }
/* Le fichier de l'étape active (Build history) : un seul visible, celui de l'étape. */
.v3 .ui-pile-fichier { display: grid; padding: 0.3125rem; border-top: 1px solid var(--pv-trait); }
.v3 .ui-pile-fichier > div { grid-area: 1 / 1; opacity: 0; transition: opacity 350ms ease; }
.v3 .ui-pile-fichier > div.actif { opacity: 1; }
.v3 .ui-pile-fichier .r-t b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 400; font-size: 0.6875rem; }
/* La grille à coches étirée : la hauteur se répartit entre ses rangées, sans vide au-dessus du tableau. */
.d4 .grille-coches > .ui.v3.seul > .ui-tableau { margin-top: 0; flex: 1; display: flex; flex-direction: column; }
.d4 .grille-coches .ui-tableau > [data-cycle] { flex: 1; display: flex; flex-direction: column; }
.d4 .grille-coches .ui-tableau > [data-cycle] > .ui-grille { flex: 1; }
/* Le coût : son panneau finit à la même ligne que ses voisins, la barre de saisie déborde en bas. */
.d4 .ui-scene.v3.cout { padding-bottom: 1.75rem; }
.d4 .v3.cout .ui.v3.saisie { bottom: -1.25rem; }
.d4 .v3.cout .ui.v3.principal > .ui-pied { margin-bottom: 4.25rem; }
@media (max-width: 900px) { .d4 .v3.cout .ui.v3.principal > .ui-pied { margin-bottom: 0; } }
/* La thèse sur quatre lignes : une mesure plus large, un corps un peu plus petit (Tanguy, 7 oct. : « trop de lignes »). */
@media (min-width: 601px) { .sec .these { max-width: 76rem; font-size: clamp(1.5rem, 2.55vw, 2.375rem); line-height: 1.22; } }
/* La graisse change sans déplacer le texte : chaque mot réserve la largeur de sa version grasse (copie invisible, hauteur nulle). */
.these-focus .rb-scroll-reveal__word { display: inline-flex; flex-direction: column; align-items: center; }
.these-focus .rb-scroll-reveal__word::after { content: attr(data-texte); height: 0; overflow: hidden; visibility: hidden; font-weight: 500;
  user-select: none; pointer-events: none; }
.v3 .references .nouveau .r-v .ic { color: #4ade80; }
.clair .v3 .references .nouveau .r-v .ic { color: #15803d; }
/* Le repère redessiné (gizmo()) : traits, points d'extrémité, lettres. */
.v3 .vue .vue-gizmo { width: 2.25rem; height: 2.25rem; left: 0.375rem; bottom: 0.25rem; overflow: visible; }
.v3 .vue-gizmo circle { fill: #8E8B96; } .v3 .vue-gizmo circle.z, .v3 .vue-gizmo circle.o { fill: #F7F6F3; }
.v3 .vue-gizmo text { font: 600 5.5px "Inter", system-ui, sans-serif; }
.clair .v3 .vue-gizmo circle { fill: #8E8B96; } .clair .v3 .vue-gizmo circle.z, .clair .v3 .vue-gizmo circle.o { fill: #121117; }

/* ---------- « Where we sit » enrichi (Tanguy, 7 oct. : le logo sur la carte de positionnement, des animations plus riches,
   une autre mise en page pour les deux cartes du bas) ---------- */
/* Le logo Sandflow dans sa tuile d'app (la V01 sous un verre), une onde qui s'élargit, des flèches en pointillés qui avancent. */
.v3 .plan-pos .logo-sf .verre { fill: rgba(18, 17, 23, .18); }
.v3 .plan-pos .logo-sf .bord { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.v3 .plan-pos .logo-sf .sym { fill: #fff; }
.v3 .plan-pos .logo-sf .onde { fill: none; stroke: #F7F6F3; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.v3 .plan-pos .vers { stroke-dasharray: 3 4; }
@media (prefers-reduced-motion: no-preference) {
  .v3 .plan-pos .vers { animation: v3-marche 1.1s linear infinite; }
  .v3 .plan-pos .logo-sf .onde { animation: v3-onde 2.6s ease-out infinite; }
}
@keyframes v3-marche { to { stroke-dashoffset: -14; } }
@keyframes v3-onde { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.1); opacity: 0; } }
/* Le prompt qui se tape avant que les barres poussent. */
.v3 .tape { display: inline; transition: clip-path 1.5s steps(32, end); }
/* La comparaison : la lampe en 3D, puis deux Outliners côte à côte. */
.v3.sortie .vue .mv { --rb-mv-ratio: 16 / 9; }
.v3 .ol-duo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); border-top: 1px solid var(--pv-trait); }
.v3 .ol-col { padding: 0.5rem 0.4375rem 0.5rem; }
.v3 .ol-col + .ol-col { border-left: 1px solid var(--pv-trait); }
.v3 .ol-t { margin: 0 0 0.375rem; padding: 0 0.375rem; font-size: 0.6875rem; color: var(--gris); }
.v3 .ol-col:not(.fade) .ol-t { color: var(--craie); font-weight: 500; }
.v3 .ol-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4375rem; padding: 0.25rem 0.375rem;
  border-radius: 0.4375rem; font-size: 0.6875rem; transition: background-color 400ms ease; }
.v3 .ol-r.n1 { padding-left: 1.125rem; }
.v3 .ol-r b { font-weight: 500; color: var(--craie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3 .ol-r small { font-size: 0.625rem; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3 .ol-ic { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 0.3125rem; background: var(--pv-tuile); color: var(--gris); }
.v3 .ol-ic .ic { width: 0.625rem; height: 0.625rem; }
.v3 .ol-r.actif { background: var(--pv-actif); }
.v3 .ol-r.actif .ol-ic { color: var(--craie); }
.v3 .ol-col.fade .ol-r b { color: var(--gris); }
.v3 .ol-col.fade .ol-r.on { background: var(--pv-tuile); }
.v3 .ol-vide { display: grid; place-items: center; gap: 0.125rem; margin: 0.5rem 0.375rem 0; padding: 1.5rem 0.5rem; border: 1px dashed var(--pv-bord);
  border-radius: 0.5rem; font-size: 0.625rem; color: var(--gris); text-align: center; }
/* La grille à coches : un anneau par approche en tête de colonne. */
.v3 .ui-grille.anneaux > span.col { flex-direction: column; gap: 0.375rem; min-height: 5.25rem; padding: 0.625rem 0 0.5rem; }
.v3 .ui-grille.anneaux .anneau.petit { width: 2.625rem; }
.v3 .ui-grille.anneaux .anneau.petit b { font-size: 0.625rem; }
.v3 .ui-grille.anneaux em { font-style: normal; font-size: 0.625rem; line-height: 1.2; color: var(--gris); text-align: center; }
.v3 .ui-grille.anneaux .col.nous em { color: var(--craie); font-weight: 500; }
.v3 .ui-grille.anneaux .col.nous { border-radius: 0.625rem 0.625rem 0 0; }

/* Les mini-interfaces se cliquent (flèches, bascules, rangées, vignettes) : un double clic ne sélectionne plus le texte voisin
   (Tanguy, 7 oct. au soir : « quand on clique sur le bouton des flèches, ça sélectionne le texte du dessous »). */
.ui-scene.v3, .ui-scene.v3 * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ui-fleches > *, .ui-act, .ui-bascule > span, .ui-scene.v3 [data-lie], .ui-scene.v3 [data-lie-cible], .ui-scene.v3 [data-piece] { cursor: pointer; }