/* Qualité de la barre latérale de la recherche foncière (Henri, 08/11/2026) : « j'ai trop de pastilles avec du texte coupé ».
 * Les segments (.pg-seg, .segment) de la barre de 340 px coupaient leurs libellés par des points de suspension (« 20 m² au… », « Hors abo… »,
 * « Dans les … ») : règles nowrap + ellipsis de sidebar-contextuelle.css et du parcours guidé. Ici : plus aucun texte coupé dans la barre.
 *  · segment court (2 à 4 options brèves) : reste une rangée de pastilles, libellés qui retournent à la ligne si besoin ;
 *  · segment à libellés longs : liste verticale pleine largeur, libellé entier, sélection marquée par un fond et une coche
 *    (la classe de la liste est posée par src/sidebar-qualite.js : data-sq="liste" ou "pastille") ;
 *  · interrupteurs et curseurs : libellé sur deux lignes, valeur alignée à droite ;
 *  · une seule hiérarchie typographique : libellé 13 px, aide 12 px atténuée, marges régulières. */
@media (min-width: 900px) {
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages { --sq-ligne: calc(var(--h-bouton, 30px) + 6px); }

  /* 1. rien n'est coupé : retour à la ligne partout dans la barre */
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(button, label, span, p, small, b, legend, .fpg-resume, .fpg-titre, .fpg-declencheur) {
    text-overflow: clip; white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: manual;   /* mots entiers : ni césure automatique ni coupure lettre à lettre (08/11/2026) */
  }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages .fpg-resume { overflow: visible; margin-bottom: 10px; line-height: 1.4; }

  /* 2. segments en pastilles (libellés courts) : colonnes égales, libellé entier sur une ou deux lignes */
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(.pg-seg, .segment)[data-sq="pastille"] { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(.pg-seg, .segment)[data-sq="pastille"] > button {
    min-width: 0; height: auto; min-height: var(--sq-ligne); padding: 4px 6px; overflow: visible; line-height: 1.2; text-align: center;
  }

  /* 3. segments à libellés longs : liste verticale, ligne pleine largeur, libellé entier, coche sur la ligne choisie */
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(.pg-seg, .segment)[data-sq="liste"] {
    display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: var(--r-moyen);
  }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(.pg-seg, .segment)[data-sq="liste"] > button {
    position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; height: auto; min-height: var(--sq-ligne);
    padding: 6px 34px 6px 12px; overflow: visible; text-align: left; line-height: 1.3; font-weight: 500;
  }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(.pg-seg, .segment)[data-sq="liste"] > button[aria-pressed="true"]::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 5px; margin-top: -4px;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  }

  /* 4. interrupteurs et curseurs : libellé qui retourne à la ligne, valeur à droite sans chevauchement */
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(.pg-champ, .fc-champ, .pm-champ, .d2-ligne-reglage, .pg-ligne) {
    min-width: 0; gap: 8px; align-items: flex-start;
  }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(.pg-champ, .fc-champ) > :is(span, label):first-child { flex: 1 1 0; min-width: 0; }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages :is(.pg-champ, .fc-champ) > :is(b, output, .pg-val, .fc-val) { flex: none; margin-left: auto; text-align: right; white-space: nowrap; }

  /* 5. une hiérarchie : libellés 13 px, aides 12 px atténuées, marges 12/16 px, champs sur toute la largeur */
  html.sc-actif .pg.fe-colonne .fpg-panneau { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; }
  html.sc-actif .pg.fe-colonne .fpg-panneau :is(.fc-aide, .pm-aide, .pg-info, .pg-note, small) { margin: 0; color: var(--attenue); font-size: var(--t-12); line-height: 1.45; }
  html.sc-actif .pg.fe-colonne .fpg-panneau :is(input:not([type="checkbox"]):not([type="range"]), select) { width: 100%; box-sizing: border-box; }
  html.sc-actif .pg.fe-colonne .fpg-etape { margin-bottom: 4px; }
/* 6. listes à cases (propriétaires, communes, bailleurs, sociétés, types) : case à gauche, nom en mots entiers sur 1 ou 2 lignes,
   *    compteurs (« 742 · 190,8 ha ») sur la ligne dessous en 12 px atténué (Henri : le nom était écrasé dans ~60 px et coupé par césures) */
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages .fc-option {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start;
    height: auto; min-height: var(--sq-ligne); padding: 6px 8px; box-sizing: border-box;
  }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages .fc-option > .fc-case-v { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages .fc-option > :is(span:not(.fc-case-v), b, strong) { grid-column: 2; min-width: 0; line-height: 1.3; }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages .fc-option > small {
    grid-column: 2; margin: 0; white-space: nowrap; overflow-wrap: normal; color: var(--attenue); font-size: var(--t-12); line-height: 1.3;
  }
  html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages .pm-liste-soc, html.sc-actif .pg.fe-colonne .pg-appli > .pg-reglages .fc-liste { min-width: 0; }
}