/* La Configuration de la solution : les règles et les repères (proprio, 2026-10-15 : « comme dans Figma »). Deux règles
   sur les bords du centre (en haut, à gauche), graduées en px de la page dessinée ; des repères tirés depuis elles, qui suivent le curseur
   jusqu'au relâché. Une couche posée sur le rendu seul (la fenêtre du site dessiné), hors de son contenu (que chaque rendu
   réécrit) ; un repère déposé dans un groupe se borne à lui (2026-10-15) ; jetons seulement. */
@layer modules{
  .cms{ position:relative; }
  .cms-regles{ position:absolute; z-index:var(--cms-z-sous-menu); pointer-events:none; overflow:hidden; }
  .cms-regles[hidden]{ display:none; }
  .cms-regle{ position:absolute; z-index:1; pointer-events:auto; box-sizing:border-box;   /* devant les repères : un trait ne traverse jamais la graduation (proprio, 2026-10-15) */ background:color-mix(in srgb, var(--card) 72%, transparent);   /* « transparente un peu » (proprio, 2026-10-15) */ color:var(--mut); font-family:var(--font-mono); }
  /* En haut et à gauche seulement, 10 px (proprio, 2026-10-15 : « on garde uniquement à gauche et en haut », « plus petite »). */
  .cms-regle.haut{ top:0; left:0; width:100%; height:10px; border-bottom:1px solid var(--line); cursor:row-resize; }
  .cms-regle.gauche{ top:10px; left:0; width:10px; height:calc(100% - 10px); border-right:1px solid var(--line); cursor:col-resize; }
  /* Un repère : un trait d'accent d'un pixel, saisi sur neuf ; pâli quand on le relâcherait hors du centre (il disparaît). */
  .cms-repere{ position:absolute; pointer-events:auto; }
  .cms-repere.v{ top:0; bottom:0; width:9px; margin-left:calc(var(--sp-4) * -1); cursor:col-resize; background:linear-gradient(var(--cms-accent), var(--cms-accent)) center / 1px 100% no-repeat; }
  .cms-repere.h{ left:0; right:0; height:9px; margin-top:calc(var(--sp-4) * -1); cursor:row-resize; background:linear-gradient(var(--cms-accent), var(--cms-accent)) center / 100% 1px no-repeat; }
  .cms-repere.dehors{ opacity:.35; }
  /* Le temps d'un glisser, la couche se laisse traverser : le groupe sous le pointeur se lit (un repère déposé dedans s'y borne). */
  .cms-regles.glisse .cms-repere, .cms-regles.glisse .cms-regle{ pointer-events:none; }
  .cms-repere > span{ position:absolute; padding:1px var(--sp-4); border-radius:var(--radius-xs); background:var(--cms-accent); color:var(--on-solid); font-size:var(--fs-xs); white-space:nowrap; pointer-events:none; }
  .cms-repere.v > span{ top:18px; left:8px; } .cms-repere.h > span{ left:18px; top:8px; }
  body.cms-glisse-repere-v, body.cms-glisse-repere-v *{ cursor:col-resize; } body.cms-glisse-repere-h, body.cms-glisse-repere-h *{ cursor:row-resize; }   /* sans !important (cliquet da) : (0,1,2) l'emporte sur les curseurs à une classe */
}