/* Outil · Règle (Ruler) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : rg- */
/* La règle prend presque toute la page ; les options tiennent sur une ligne compacte dessous */
.rg.outil-page { gap: 12px; justify-content: flex-start; }
.rg-apercu { width: 100%; height: max(300px, calc(100vh - 250px)); height: max(300px, calc(100dvh - 250px)); border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--filet); }
.rg-apercu canvas { display: block; width: 100%; height: 100%; }
.rg-etat { margin: 0; min-height: 2lh; font: 400 12.5px/1.5 var(--corps); color: var(--texte2); text-align: center; text-wrap: balance; }
.rg-etat.alerte { color: var(--peche); }
.rg-options { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.rg-options .pastille:hover { translate: none; }
.rg-mini { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); }
.rg-mini button { border: 0; background: none; border-radius: 999px; padding: 6px 11px; font: var(--valeur); line-height: 1; letter-spacing: .06em;
  color: var(--texte2); transition: background .4s var(--courbe), color .4s var(--courbe); }
.rg-mini button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.rg-mini button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- Le plein écran : la grille partout ; le toucher ne fait rien, sauf la croix ---------- */
.rg-ecran { position: fixed; inset: 0; z-index: 100; background: #000; opacity: 0; transition: opacity .2s var(--courbe);
  touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.rg-ecran.clair { background: #f4f2ee; }
.rg-ecran.visible { opacity: 1; }
.rg-ecran canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rg-fermer { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 10px); right: calc(env(safe-area-inset-right) + 10px); width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .7); color: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); -webkit-tap-highlight-color: transparent; }
.rg-fermer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rg-legende { position: absolute; left: calc(env(safe-area-inset-left) + 12px); bottom: calc(env(safe-area-inset-bottom) + 10px); padding: 4px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: rgba(255, 255, 255, .8); font: 500 11px/1.2 var(--mono); letter-spacing: .06em; pointer-events: none; }

/* ---------- L'étalonnage : la carte au centre, les réglages en bas ---------- */
.rg-calib { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--noir); opacity: 0; transition: opacity .2s var(--courbe);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.rg-calib.visible { opacity: 1; }
.rg-calib-zone { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.rg-carte { border-radius: 3.2mm; box-shadow: inset 0 0 0 2px var(--orange);
  background: repeating-linear-gradient(135deg, rgba(255, 90, 31, .08) 0 6px, transparent 6px 12px); }
.rg-calib-bas { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 18px; }
.rg-calib-texte { margin: 0; text-align: center; text-wrap: balance; font: 400 14px/1.5 var(--corps); color: var(--texte2); }
.rg-calib-reglage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.rg-calib-reglage input { --rempli: 50%; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rg-calib-reglage input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(var(--papier), var(--papier)) 0 / var(--rempli) 100% no-repeat, var(--filet); }
.rg-calib-reglage input::-moz-range-track { height: 2px; background: var(--filet); }
.rg-calib-reglage input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 0; border-radius: 50%; background: var(--papier); }
.rg-calib-reglage input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--papier); }
.rg-calib-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.rg-calib-actions .pastille:hover { translate: none; }
.rg-revenir { flex-basis: 100%; text-align: center; }