/*
 * Peau Atlas pour le moteur de formulaire de `grist_forms`.
 *
 * Le moteur n'embarque aucun style : il émet 33 classes `fr-*` et compte sur
 * l'hôte. `grist_forms/shared/dsfr-like.css` les fournit — mais il pose aussi
 * `:root`, `*` et `body`, et surtout il apporte l'identité de l'État (bleu
 * France, ses rayons, sa typographie) dans un widget ivoire et serif.
 *
 * Cette feuille le remplace. Deux règles, et elles suppriment la collision au
 * lieu de la contourner :
 *
 *   1. TOUT est confiné sous `#insp-body` — aucun sélecteur global, ni `:root`,
 *      ni `body`, ni `*`. La peau ne peut pas déborder sur l'interface d'Atlas.
 *   2. AUCUNE couleur en dur : tout passe par les jetons d'Atlas, donc la fiche
 *      suit la palette si elle change.
 *
 * Les composants imités sont ceux d'Atlas — `.input`, `.btn-dark`, `.btn-soft`,
 * `.input-label`, `.hint`, `.section-title` — pour qu'un formulaire monté dans
 * le panneau ne se distingue pas d'un panneau de symbologie.
 */

/* ---------- structure ---------- */

#insp-body .fr-form { display: flex; flex-direction: column; gap: 0; }

#insp-body .fr-form__header { margin-bottom: 14px; }

#insp-body .fr-h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.25;
}

/* Le pas de l'espacement est celui des `.section` d'Atlas. */
#insp-body .fr-input-group,
#insp-body .fr-select-group,
#insp-body .fr-checkbox-group,
#insp-body .fr-radio-group,
#insp-body .fr-fieldset { margin-bottom: 14px; }

/* ---------- libellés et aides ---------- */

#insp-body .fr-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Ce qu'Atlas a prérempli dans un relevé : dit avant les champs. */
#insp-body .releve-prerempli {
  font-size: 11px; color: var(--ink); background: var(--bg); border-radius: 8px;
  padding: 6px 10px; margin-bottom: 12px;
}

#insp-body .fr-hint-text {
  display: block;
  font-size: 11px;
  color: var(--muted-light);
  margin-top: 4px;
}

#insp-body .fr-error-text {
  display: block;
  font-size: 11px;
  color: var(--accent);
  margin-top: 4px;
}

/* ---------- champs ---------- */

#insp-body .fr-input,
#insp-body .fr-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--sans);
  transition: var(--t-fast);
}

#insp-body .fr-select { cursor: pointer; }

#insp-body .fr-input:focus,
#insp-body .fr-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#insp-body textarea.fr-input { min-height: 76px; resize: vertical; }

/* ---------- cases et boutons radio ---------- */

/*
 * Cible tactile : le moteur rend `<input type="checkbox">` + `<label>`. Une
 * case de 13 px est inatteignable au doigt, et pénible à la souris — on
 * l'agrandit et on rend le libellé cliquable en lui donnant de la place.
 */
#insp-body .fr-checkbox-group,
#insp-body .fr-radio-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

#insp-body .fr-checkbox-group input[type="checkbox"],
#insp-body .fr-radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}

#insp-body .fr-checkbox-group .fr-label,
#insp-body .fr-radio-group .fr-label {
  margin-bottom: 0;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

/* ---------- groupes ---------- */

#insp-body .fr-fieldset {
  border: none;
  padding: 0;
  margin-inline: 0;
}

#insp-body .fr-fieldset__legend {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: 8px;
}

#insp-body .fr-fieldset__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Likert : une rangée qui doit pouvoir défiler dans 360 px. */
#insp-body .fr-likert__scale {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
}

/* ---------- messages ---------- */

/* Reprend la forme de `.hint` : filet à gauche, fond très léger. */
#insp-body .fr-alert {
  font-size: 12px;
  border-radius: 4px;
  padding: 8px 10px;
  margin: 10px 0;
  border-left: 2px solid var(--accent2);
  background: rgba(46, 78, 84, 0.08);
  color: var(--accent2);
}

#insp-body .fr-alert--success,
#insp-body .fr-form__success {
  border-left-color: var(--green);
  background: rgba(91, 122, 79, 0.10);
  color: var(--green);
}

#insp-body .fr-alert--error {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- actions ---------- */

#insp-body .fr-btns-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

#insp-body .fr-btns-group--inline { flex-direction: row; }

#insp-body .fr-btn {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  background: var(--ink);
  color: var(--bg);
  transition: var(--t-fast);
}

#insp-body .fr-btn:hover:not(:disabled) { background: #34302A; }

#insp-body .fr-btn:disabled { opacity: 0.55; cursor: default; }

#insp-body .fr-btn--secondary {
  background: var(--surface-muted);
  color: var(--text);
  border: 1px solid var(--hairline);
}

#insp-body .fr-btn--secondary:hover:not(:disabled) { background: #F1EADB; }

/* ---------- pièces jointes ---------- */

#insp-body input[type="file"].fr-input {
  padding: 8px;
  font-size: 12px;
  background: var(--surface-muted);
}

/* ---------- fil des étapes ---------- */

/*
 * `fr-stepper__state` est un `<span>` DANS le `<p>` du titre : sans `display:
 * block`, on lit « RelevéÉtape 1 sur 1 » d'un seul tenant. Vu à l'écran.
 */
#insp-body .fr-stepper {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

#insp-body .fr-stepper__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

#insp-body .fr-stepper__state {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* ---------- reste du vocabulaire du moteur ---------- */

#insp-body .fr-text--sm { font-size: 11px; color: var(--muted); }

#insp-body .fr-alert--info {
  border-left-color: var(--accent2);
  background: rgba(46, 78, 84, 0.08);
  color: var(--accent2);
}

/* Choix « riche » : la carte cliquable d'un radio, pas une simple ligne. */
#insp-body .fr-radio-rich {
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

#insp-body .fr-radio-rich:hover { background: var(--surface-muted); }

#insp-body .fr-upload-group { margin-bottom: 14px; }

#insp-body .fr-upload {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--text);
  background: var(--surface-muted);
  border: 1px dashed var(--hairline-strong);
  border-radius: 8px;
}

/* La prise de vue : le champ reste dans la page (le libelle l'ouvre, et il se
   lit avec l'autre), mais on ne montre que le bouton. `display: none` le
   retirerait de certains navigateurs mobiles, qui refusent alors d'ouvrir
   l'appareil photo depuis le libelle. */
#insp-body .fr-upload--camera {
  position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
#insp-body .fr-upload-camera {
  display: flex; align-items: center; justify-content: center;
  margin-top: 8px; width: 100%; min-height: 44px;
}

/* ---------- ce que la fiche n'a pas besoin de redire ---------- */

/*
 * Le titre du formulaire repete l'onglet actif.
 *
 * Mesure faite dans le widget, panneau a sa largeur reelle de 360 px, sur le
 * formulaire deduit de `Batiments_locaux` : 117 px separaient le haut du
 * formulaire de son premier champ, soit 23 % de sa hauteur. « Attributs » y
 * etait ecrit TROIS fois — l'onglet, ce titre, et le nom d'etape — en quatre
 * lignes.
 *
 * On ne masque que le titre : une `description` ecrite par l'auteur du
 * formulaire est du contenu, pas du chrome. L'en-tete disparait donc seulement
 * quand il n'en reste rien.
 */
#insp-body .fr-form__header .fr-h4 { display: none; }
#insp-body .fr-form__header:not(:has(p)):not(:has(img)) { display: none; }

/*
 * Le fil d'etapes, muet quand il n'y en a qu'une.
 *
 * `forme-mono-etape` est posee par `monterFormulaireEntite` : le moteur rend son
 * fil sans condition — il ne sait pas ou il est monte — et c'est Atlas qui
 * connait le nombre de sections. Sur deux etapes ou plus, le fil reste : il dit
 * alors quelque chose de vrai.
 */
#insp-body.forme-mono-etape .fr-stepper { display: none; }

/*
 * Sans l'en-tete au-dessus, la mention d'edition collait au premier libelle :
 * on lisait « Modification de la ligne #3 » et « Hauteur » d'un seul tenant.
 */
#insp-body .fr-form > p.fr-text--sm { margin-bottom: 12px; }

/* ------------------------------------------------------------------------
   Module Formulaires (panneau de gauche) — une carte par couche.
   Tout est borné à #module-body : rien ne déborde sur la fiche de droite.
   ------------------------------------------------------------------------ */
#module-body .fm-intro { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 2px 0 14px; }
#module-body .fm-carte {
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface); padding: 10px 12px 10px; margin-bottom: 12px;
}
/* Nom au-dessus de la table : côte à côte, le nom de table (long, sans
   espace) prenait la ligne et le nom de la couche se réduisait à « Ar… ». */
#module-body .fm-entete {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
#module-body .fm-entete-titre { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 130px; }
#module-body .fm-entete-actions { display: flex; gap: 6px; flex: none; margin-left: auto; }
#module-body .fm-mini {
  font: 600 11px/1 var(--sans); padding: 6px 9px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--hairline-strong); background: var(--surface-muted); color: var(--text);
}
#module-body .fm-mini:hover { border-color: var(--accent); color: var(--accent); }
#module-body .fm-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#module-body .fm-couche {
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#module-body .fm-table {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#module-body .fm-groupe { margin-top: 10px; }
#module-body .fm-groupe-titre {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
#module-body .fm-vide { font-size: 11.5px; color: var(--muted); margin: 4px 0 0; }
#module-body .fm-ligne { padding: 8px 0; }
#module-body .fm-ligne + .fm-ligne { border-top: 1px dashed var(--hairline); }
#module-body .fm-ligne-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
#module-body .fm-nom { font-weight: 600; font-size: 13px; color: var(--ink); min-width: 0; }
#module-body .fm-commande { padding: 5px 10px; font-size: 11.5px; flex-shrink: 0; }
/* « Retirer » : un lien discret, le geste est rare et réversible. */
#module-body .fm-lien {
  font: inherit; font-size: inherit; color: var(--muted); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
#module-body .fm-lien:hover { color: var(--ink); }
#module-body .fm-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
#module-body .fm-ligne-retiree .fm-nom { color: var(--muted); }
#module-body .fm-detail { font-size: 10.5px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
#module-body .fm-champs { margin-top: 8px; }
#module-body .fm-champs > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text); padding: 2px 0;
}
#module-body .fm-champs > summary::-webkit-details-marker { display: none; }
#module-body .fm-champs > summary::before {
  content: ''; border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}
#module-body .fm-champs[open] > summary::before { transform: rotate(90deg); }
#module-body .fm-champs > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#module-body .fm-champs-liste { margin-top: 6px; background: var(--bg); border-radius: 8px; padding: 2px 10px; }
#module-body .fm-champ { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 11.5px; color: var(--text); }
#module-body .fm-champ + .fm-champ { border-top: 1px solid var(--hairline); }
#module-body .fm-champ.masque .fm-champ-nom { opacity: .5; }
#module-body .fm-champ-nom { flex: 1; min-width: 0; }
/* La valeur de départ d'un champ d'ajout : discrète tant qu'elle est vide. */
/* Sur sa propre ligne, sous le nom : à côté de l'interrupteur, il était tronqué
   (« Aujourd'hu… ») dans un panneau de 320 px. */
#module-body .fm-champ:has(.fm-depart) { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; align-items: center; }
#module-body .fm-champ:has(.fm-depart) .fm-champ-nom { grid-column: 1; grid-row: 1; }
#module-body .fm-champ:has(.fm-depart) .toggle { grid-column: 2; grid-row: 1; }
#module-body .fm-depart {
  grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0;
  font: inherit; font-size: 11px; color: var(--muted);
  background: transparent; border: 1px solid var(--hairline); border-radius: 6px; padding: 3px 6px; cursor: pointer;
}
#module-body .fm-depart.on { color: var(--ink); border-color: var(--accent); }
#module-body .fm-depart:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#module-body .fm-badges { color: var(--muted); font-size: 10px; }
#module-body .fm-requis { color: var(--accent); }
#module-body .fm-pied { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); font-size: 11px; color: var(--muted); }
#module-body .fm-pied.on { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  #module-body .fm-champs > summary::before { transition: none; }
}

/* Créer un champ, un relevé lié : les boutons sous un formulaire et en pied de carte, et leurs vues. */
#module-body .fm-ajout { margin-top: 8px; }
#module-body .fm-ajout-releve { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
#module-body .fm-saisie-liste { margin: 6px 0 0; padding: 0; list-style: none; }
#module-body .fm-saisie-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; margin-top: 4px; background: var(--bg); border-radius: 8px; font-size: 12px; color: var(--text);
}
#module-body .fm-saisie-liste .fm-saisie-type { color: var(--muted); font-size: 10.5px; }
#module-body .fm-erreur { color: var(--danger, #b3261e); font-size: 11.5px; margin-top: 8px; }
#module-body .fm-case { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text); cursor: pointer; }
#module-body .fm-apercu { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; text-overflow: clip; }

/* Ce que fait un formulaire, lu sur son étiquette ; et l'interrupteur qui dit ce qu'il allume. */
#module-body .fm-nom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 130px; min-width: 0; }
#module-body .fm-etiq { font: 600 10px/1 var(--sans); padding: 3px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
#module-body .fm-etiq.modifie { color: var(--accent2); border-color: #BFD1D5; background: #F1F6F7; }
#module-body .fm-etiq.ajoute { color: #4A6A3F; border-color: #CBD9C3; background: #F0F5EC; }
#module-body .fm-terrain { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; font-size: 11.5px; color: var(--text); cursor: pointer; }
#module-body .fm-terrain:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
#module-body .fm-etiq.geo { color: #7A5B1E; border-color: #E3D2A8; background: #FBF4E2; }