/* ============================================================================
   app.css : mise en page de l'outil, par-dessus la charte « Le relevé ».
   Rien ici ne réinvente un composant de releve.css : on assemble, on positionne.
   ========================================================================== */

body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

main { flex: 1 1 auto; display: flex; min-height: 0; }

/* --- Bandeau -------------------------------------------------------------- */

.appartenance {
  align-self: center; margin-left: -14px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut);
}
.etapes { align-self: stretch; }

/* --- Panneau de réglages -------------------------------------------------- */

.reglages {
  flex: 0 0 300px; width: 300px; padding: 18px 18px 40px;
  background: var(--paper); border-right: 1px solid var(--ink);
}
.reglages section { animation: pose .5s ease-out backwards; }
.hint-haut { margin-top: 0; margin-bottom: 14px; }
input.plein { width: 100%; }

.cases { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 4px; }
.cases label {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--ink); cursor: pointer;
}
.cases input { flex: 0 0 auto; }

/* La valeur juste la plus proche, tant qu'on n'est pas calé dessus : soulignée
   à l'accent des cotes, sans prendre l'aplat réservé à l'option retenue. */
.seg span.propose { color: var(--ink); box-shadow: inset 0 -2px 0 var(--acc-hi); }

/* La marque du bandeau est un lien de retour, sans en prendre l'allure. */
a.marque { color: inherit; text-decoration: none; }

.ligne-libre { display: flex; align-items: center; gap: 8px; }
.ligne-libre input { flex: 1 1 auto; min-width: 0; }

.btns-export { margin-top: 16px; }

/* --- Recherche ------------------------------------------------------------ */

.champ-recherche { position: relative; }
.champ-recherche input { width: 100%; }

/* --- Presets -------------------------------------------------------------- */

.grille-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grille-presets .carte { gap: 6px; padding: 8px; }
.grille-presets .carte .tete { min-height: 34px; }
.grille-presets .carte .nom { font-size: 12.5px; }
.grille-presets .carte .plage {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mut); font-variant-numeric: tabular-nums;
}

/* --- Encart kit ----------------------------------------------------------- */

.encart {
  margin-top: 18px; padding: 12px;
  background: var(--paper); border: 1px solid var(--acc-hi);
  box-shadow: inset 0 0 0 1px var(--acc-soft);
}
.encart .et {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acc-hi);
}
.encart .nom { font-size: 13.5px; font-weight: 700; margin: 5px 0 6px; }
.encart p { font-size: 11.5px; color: var(--mut); margin: 0 0 10px; line-height: 1.45; }
.encart.bientot { border-color: var(--mid); box-shadow: none; }
.encart.bientot .et { color: var(--mut); }

/* --- Palette de dessin ---------------------------------------------------- */

.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 16px; }
.outil {
  display: flex; align-items: center; gap: 7px; padding: 6px 7px;
  font: inherit; font-size: 11px; text-align: left; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--mid); border-radius: 0;
  transition: border-color .12s, box-shadow .12s, color .12s;
}
.outil:hover { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.outil.on { border-color: var(--acc-hi); box-shadow: inset 0 0 0 1px var(--acc-hi); color: var(--acc-hi); }
.outil:focus-visible { outline: 1px solid var(--acc-hi); outline-offset: 2px; }
/* l'échantillon du figuré, dessiné en SVG : on choisit un rendu, pas un réglage */
.outil .ech { flex: 0 0 auto; width: 20px; height: 16px; border: 1px solid var(--mid); }
/* pastille d'un ponctuel : le symbole est de l'encre sombre, il lui faut le
   papier de la planche derrière, y compris en thème sombre */
.outil img.ech { background: #fcfbf7; object-fit: contain; padding: 1px; }

/* --- Scène ---------------------------------------------------------------- */

.scene { flex: 1 1 auto; position: relative; min-width: 0; overflow: hidden; }
.scene::before, .scene::after { z-index: 6; }
#carte { position: absolute; inset: 0; }
#carte .maplibregl-ctrl-bottom-right,
#carte .maplibregl-ctrl-bottom-left { display: none; }

.outils-carte {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
}
.btn.ic {
  width: 30px; height: 30px; padding: 0; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.attributions {
  position: absolute; left: 12px; bottom: 10px; z-index: 5;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mut);
  background: var(--paper); border: 1px solid var(--mid); padding: 3px 7px;
}

/* --- La planche en aperçu -------------------------------------------------
   Ce bloc n'est pas un cadre décoratif : c'est le document tel qu'il sortira.
   Marges, fenêtre de carte et cartouche sont aux proportions réelles, et le
   papier reste clair même en thème sombre : c'est de l'imprimé posé sur la
   table (charte § 2, « le cas de la feuille imprimée »).
   -------------------------------------------------------------------------- */

.feuille-plan {
  --mx: 0px; --my: 0px; --cart: 0px;
  --pap: #ffffff; --enc: #1c1c1c; --min: #e8500a;
  position: absolute; z-index: 3; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--backdrop), 0 26px 50px -28px rgba(0,0,0,.5);
}
.feuille-plan .bande { position: absolute; background: var(--pap); }
.bande.haut   { top: 0; left: 0; right: 0; height: var(--my); }
.bande.bas    { bottom: 0; left: 0; right: 0; height: calc(var(--my) + var(--cart)); }
.bande.gauche { left: 0;  width: var(--mx); top: var(--my); bottom: calc(var(--my) + var(--cart)); }
.bande.droite { right: 0; width: var(--mx); top: var(--my); bottom: calc(var(--my) + var(--cart)); }

.fenetre {
  position: absolute; top: var(--my); left: var(--mx); right: var(--mx);
  bottom: calc(var(--my) + var(--cart));
  outline: 1px solid rgba(28,28,28,.55); outline-offset: 0;
}
.grille-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Le cartouche, à l'échelle de l'aperçu : il montre ce qui sera imprimé. */
.cartouche {
  position: absolute; left: var(--mx); right: var(--mx);
  top: 0; height: var(--cart);
  color: var(--enc);
  border-top: 1px solid rgba(28,28,28,.4);
}
/* Les blocs sont posés, pas distribués : leurs abscisses viennent de la même
   disposition que celle de la planche (cf. habillage.js, dispositionCartouche).
   En flexbox, l'aperçu composait autrement que le PDF, et c'est le PDF qui
   partait à l'impression. */
.cart-titre, .cart-echelle, .cart-nord, .cart-marque {
  position: absolute; top: 0; bottom: var(--pied, 22%);
  display: flex; flex-direction: column; justify-content: center;
}
.cart-nord { transform: translateX(-50%); align-items: center; }
.cart-marque { right: 0; align-items: flex-end; }
.cart-pied {
  position: absolute; left: 0; right: 0; bottom: 2%;
  color: #6e6e6e; overflow: hidden;
}
/* Grécage : sous 5,5 px de corps, un texte devient la barre grise qu'il
   occupe, à sa largeur exacte. C'est ce que fait un logiciel de mise en page
   quand on dézoome : l'aperçu garde sa masse et son rythme, et cesse de
   prétendre qu'on peut lire ce qui fait deux pixels de haut. Le texte reste
   dans le DOM, en transparent, pour qui lit la page autrement qu'à l'œil. */
.grec {
  color: transparent; background: rgba(28,28,28,.42);
  border-radius: .5px; overflow: hidden;
}
.cart-titre { min-width: 0; }
/* Corps, graisses et interlettrage sont posés par apercu.js, d'après les styles
   de la planche. Le CSS ne garde que ce qui ne s'en déduit pas : les couleurs
   et les alignements. Le texte arrive déjà en capitales, et déjà coupé si la
   planche le coupe. */
.ct-nom, .ct-sous, .ct-num, .cm-ligne, .cart-pied > div {
  white-space: nowrap; line-height: 1.15;
}
.ct-sous { color: #6e6e6e; }
/* Le bloc s'aligne à gauche, comme sur la planche : le rapport, la barre et le
   « 0 » partent tous du même bord. Centré, le rapport flottait au-dessus d'une
   barre qui, elle, restait calée à gauche. */
.cart-echelle { text-align: left; align-items: flex-start; }
/* Le SVG réserve 1 px à gauche pour ne pas rogner le trait du premier pavé
   (cf. apercu.js, #barre). On le rattrape ici, faute de quoi la barre partirait
   d'un pixel plus à droite que le rapport. */
.ct-barre { display: block; margin-left: -1px; }
/* Le rapport au-dessus, la barre dessous : l'ordre du cartouche imprimé. */
.ct-num { font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.cart-nord { color: var(--enc); }
/* Le SVG est aux dimensions de la planche : 12 × 14 mm, l'encombrement de la
   rose et de son N. */
.ct-nord-svg { display: block; }
.ct-n { font-family: var(--mono); font-size: 2.2px; letter-spacing: .04px;
        fill: currentColor; }
/* La marque n'est plus au minium : l'accent de la charte souligne, il ne
   signe pas. Seule l'adresse reste en gris. */
.cart-marque { text-align: right; }
.cm-ligne { display: block; }
.cm-gris { color: #6e6e6e; }

/* --- Barre de cotes ------------------------------------------------------- */

.barre-cotes .verrou {
  font: inherit; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc-hi); background: transparent;
  border: 1px solid var(--acc-hi); border-radius: 0;
  padding: 1px 6px; margin-left: 8px; cursor: pointer;
}
.barre-cotes .verrou:hover { box-shadow: inset 0 0 0 1px var(--acc-hi); }
.barre-cotes .verrou:focus-visible { outline: 1px solid var(--acc-hi); outline-offset: 2px; }
.barre-cotes .etat { margin-left: auto; color: var(--acc-hi); }
.barre-cotes span { white-space: nowrap; }

/* --- Curseur de la carte selon l'outil ------------------------------------ */

.scene[data-outil] #carte .maplibregl-canvas-container { cursor: crosshair; }

/* L'aide du dessin : une ligne sous la carte, au-dessus de tout, qui ne
   capte jamais un clic destiné au tracé. */
/* Le texte qu'on pose, saisi à l'endroit même où il ira (dessin.js). */
.saisie-texte {
  position: absolute; z-index: 8; transform: translate(-50%, -50%);
  min-width: 160px; padding: 5px 8px;
  font-family: var(--sans, inherit); font-size: 13px; font-weight: 700;
  background: #fff; color: #1c1c1c; border: 1px solid #e8500a;
  box-shadow: 3px 3px 0 var(--shadow-soft);
}

/* Le panneau de la sélection : des actions courtes, sur deux rangs. */
.sel-panneau .h-sec .cote { margin-left: 8px; text-transform: none; letter-spacing: .04em; }
.sel-actions { flex-wrap: wrap; }
.sel-actions .btn { padding: 6px 9px; }

.aide-carte {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 7; pointer-events: none; max-width: calc(100% - 48px);
  background: var(--paper); border: 1px solid var(--ink); padding: 7px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--ink); text-align: center; line-height: 1.5;
  box-shadow: 4px 4px 0 var(--shadow-soft);
}
.scene[data-mode="gomme"] #carte .maplibregl-canvas-container { cursor: not-allowed; }

/* --- Petits écrans -------------------------------------------------------- */

@media (max-width: 860px) {
  main { flex-direction: column; }
  .reglages { flex: 0 0 auto; width: 100%; max-height: 46vh; border-right: 0;
              border-bottom: 1px solid var(--ink); }
  .etapes .etape { padding: 4px 9px 2px; }
}