/* Scène « La loupe » — Audit & conseil. À plat : traits francs, aplats, aucun reflet. Classes préfixées lp-. */
.lp-propre, .lp-liste, .lp-verre, .lp-reel, .lp-loupe, .lp-marque, .lp-plan { position: absolute; left: 0; top: 0; }
.lp-plan, .lp-loupe svg { display: block; max-width: none; overflow: visible; }

/* Le processus : six étapes identiques, reliées. Même dessin dans les deux calques. Il porte le sens : trait d’encre. */
.lp-boite { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.lp-etape { font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.lp-lien, .lp-pointe { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Calque propre : il se trace à l’arrivée (stroke-dashoffset, longueur ramenée à 1). */
.lp-propre { will-change: opacity; }
.lp-propre .lp-boite, .lp-propre .lp-lien { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: butt; opacity: 0; }
.lp-propre .lp-etape, .lp-propre .lp-pointe { opacity: 0; }

/* Le verre : un disque opaque, légèrement teinté, qui ne montre que le calque réel. */
.lp-verre { background: var(--bg-doux); opacity: 0; will-change: transform, opacity; }
/* La loupe est l’objet tenu en main : seule ombre de la scène, neutre, sous le disque. */
.lp-loupe { border-radius: 50%; box-shadow: var(--flottant); opacity: 0; will-change: transform, opacity; }
.lp-loupe circle { fill: none; stroke: var(--ink); stroke-width: 4; }
.lp-loupe line { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }

/* Calque réel : le lien officiel n’est pas celui qu’on emprunte ; les frictions sont en ambre (elles ne se voient qu’à l’examen). */
.lp-officiel { stroke: var(--line-fort); stroke-dasharray: 3 5; }
.lp-friction path, .lp-friction circle, .lp-friction rect { fill: none; stroke: var(--ambre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-friction .lp-fond { fill: var(--surface); }
.lp-friction .lp-aplat { fill: var(--ambre); stroke: none; }
.lp-friction .lp-fin { stroke-width: 1.25; }
.lp-friction .lp-tirets { stroke-dasharray: 3.5 3.5; }
.lp-ref { font-size: 10.5px; font-weight: 700; fill: var(--ambre-texte); text-anchor: middle; font-variant-numeric: tabular-nums; }
.lp-doute { font-size: 21px; font-weight: 700; fill: var(--ambre-texte); text-anchor: middle; }

/* Les marques : carré = logiciel, losange = données, rond = organisation. Accent une fois posées ; l’ambre les recouvre pendant l’examen. */
.lp-marque { width: 22px; height: 22px; margin: -11px; opacity: 0; will-change: transform, opacity; }
.lp-marque i { position: absolute; inset: 0; margin: auto; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.lp-marque i + i { background: var(--ambre); }
.lp-marque.carre i { width: 16px; height: 16px; border-radius: 3px; }
.lp-marque.losange i { width: 14px; height: 14px; border-radius: 2px; transform: rotate(45deg); }
.lp-marque.rond i { width: 17px; height: 17px; border-radius: 50%; }

/* La feuille de route : des lignes numérotées, en pointillé tant qu’elles sont vides. Le rang est le chiffre clé. */
.lp-liste { opacity: 0; }
.lp-ligne { position: absolute; border-radius: 10px; }
.lp-vide { position: absolute; inset: 0; border: 1px dashed var(--line-fort); border-radius: inherit; }
.lp-plein { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 0 76px; border: 1px solid var(--line-fort); border-radius: inherit; background: var(--surface); opacity: 0; white-space: nowrap; line-height: 1; }
.lp-rang { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; display: grid; place-items: center; font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.lp-quoi { font-size: 14px; font-weight: 700; color: var(--ink); }
.lp-nature { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Le titre de la feuille de route est le témoin d’état : une pastille au trait, puis en aplat quand tout est rangé (temps fort). */
.lp-titre { position: absolute; margin: 0; padding: 6px 12px; border: 1px solid var(--line-fort); border-radius: var(--r-pilule); background: var(--surface); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; white-space: nowrap; transform-origin: 0 50%; }
.lp-titre.pret { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }

/* Relief : le processus est dessiné sur le support ; la feuille de route est posée dessus ; les marques sont des pions
   (à plat tant que la loupe est dessus, posés ensuite, plus hauts quand ils volent vers leur ligne).
   La loupe reste dans le plan du processus : le verre est une fenêtre calée au pixel sur le dessin ; soulevé, il le dédouble. */
.lp-liste { translate: 0 0 calc(12px * var(--relief)); }
.lp-marque { translate: 0 0 calc(12px * var(--relief)); transition: translate var(--d-2) var(--c-trajet); }
.lp-marque.lp-sous { translate: 0 0 0px; }
.lp-marque.lp-vol { translate: 0 0 calc(34px * var(--relief)); }

/* Petit écran : processus vertical, loupe plus petite, deux lignes. */
.lp-compact .lp-boite, .lp-compact .lp-lien, .lp-compact .lp-pointe { stroke-width: 1.75; }
.lp-compact .lp-etape { font-size: 11.5px; }
.lp-compact .lp-loupe circle { stroke-width: 3.5; }
.lp-compact .lp-loupe line { stroke-width: 6.5; }
.lp-compact .lp-doute { font-size: 16px; }
.lp-compact .lp-marque.carre i { width: 12px; height: 12px; border-radius: 2.5px; }
.lp-compact .lp-marque.rond i { width: 13px; height: 13px; }
.lp-compact .lp-marque.losange i { width: 11px; height: 11px; }
.lp-compact .lp-titre { padding: 4px 9px; font-size: 10.5px; }
.lp-compact .lp-ligne { border-radius: 8px; }
.lp-compact .lp-plein { padding: 0 12px 0 58px; }
.lp-compact .lp-rang { width: 30px; font-size: 14px; }
.lp-compact .lp-quoi { font-size: 11.5px; }
.lp-compact .lp-nature { font-size: 10.5px; letter-spacing: .06em; }
.lp-compact .lp-liste { translate: 0 0 calc(8px * var(--relief)); }
.lp-compact .lp-marque { translate: 0 0 calc(8px * var(--relief)); }
.lp-compact .lp-marque.lp-sous { translate: 0 0 0px; }
.lp-compact .lp-marque.lp-vol { translate: 0 0 calc(26px * var(--relief)); }