/* AEROCAP — feuille sélecteur, reprise telle quelle de L’Abritant V2 le 04/11/2026 (noms de jetons L’Abritant
   traduits par pont.css) : formulaire à trois menus (accueil, sous le héros) et page de résultats /trouver-ma-machine,
   tous deux rendus par le module lamselecteur (1.1.0, réglages AEROCAP dans bin/reglages/contenus/selecteur.json).
   Chargée sur toutes les pages : chaque règle est limitée aux classes lsel-*. Uniquement des jetons var(--…), aucun
   !important. Un écart de rendu AEROCAP se corrige dans aerocap.css.

   Sommaire : §1 formulaire · §2 page de résultats (repères, messages, sections, cartes) · §3 paliers
   (1 200 / 992 / 768 / 480 px). */


/* §1 Formulaire : carte blanche à filet jaune ; titre sur sa ligne, puis les trois menus et le bouton. */
.lsel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--espace-4); align-items: end; padding: var(--espace-6) var(--espace-8); background: var(--blanc); border-top: calc(2 * var(--trait-moyen)) solid var(--jaune-hauban); border-radius: 0 0 var(--rayon-m) var(--rayon-m); box-shadow: var(--ombre-flottante); }
.lsel :where(h2, p) { margin: 0; }
.lsel__tete { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espace-2) var(--espace-6); }
.lsel__titre { font-family: var(--font-titre); font-size: 24px; line-height: 28px; font-weight: 700; }
/* Consigne : les menus s’affichent vides, on les déroule pour choisir (demande de Quentin du 29/10/2026). */
.lsel__consigne { display: inline-flex; align-items: center; gap: var(--espace-2); font-size: 15px; line-height: 22px; color: var(--texte-doux); }
.lsel__consigne svg { flex: none; width: 16px; height: 16px; color: var(--texte); }
.lsel__champ { min-width: 0; }
.lsel label { display: block; margin-bottom: var(--espace-2); font-size: 14px; line-height: 20px; font-weight: 600; }
.lsel__select { position: relative; display: block; }
.lsel__select .pg-select { display: block; width: 100%; min-width: 0; height: var(--controle); padding-right: calc(var(--espace-4) * 2 + 16px); color: var(--texte); font-family: var(--font-texte); font-size: 16px; line-height: 20px; text-overflow: ellipsis; appearance: none; cursor: pointer; }
.lsel__select .pg-select:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
/* Menu encore vide (« Choisir dans la liste ») : texte atténué ; menu désactivé tant que le projet n’est pas choisi. */
.lsel__select .pg-select:has(option[value=""]:checked) { color: var(--texte-doux); }
.lsel__select .pg-select:disabled { background: var(--fond-section); cursor: not-allowed; }
.lsel__select .pg-select option { color: var(--texte); }
.lsel__select svg { position: absolute; top: 50%; right: var(--espace-4); width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
.lsel .lsel__bouton { white-space: normal; text-align: center; }
.lsel__autres { grid-column: 1 / -1; font-size: 14px; line-height: 20px; color: var(--texte-doux); }
.lsel__autres a { color: var(--texte); }
/* Lien dans une phrase : souligné, la couleur seule ne suffit pas (RGAA 10.6, audit du 03/11/2026 : 2,45:1 avec le texte autour). Sélecteur plus fort que la remise à zéro des liens du kit (.pg a:not(…), 0,5,1). */
.lsel .lsel__autres a:not(.ab-bouton):not(.ab-lien):not(.pg-renoncer):not(.pg-criteres) { text-decoration: underline; text-underline-offset: 3px; }
/* Page de résultats : la recherche rappelée en tête, bordée, sans ombre ni titre. */
.lsel--compact { padding: var(--espace-4) var(--espace-6); border: var(--trait-moyen) solid var(--trait); border-top: calc(2 * var(--trait-moyen)) solid var(--jaune-hauban); box-shadow: none; }


/* §2 Page de résultats. */
.lsel-page { display: grid; gap: var(--espace-6); padding-bottom: var(--espace-12); }
.lsel-page :where(h2, p) { margin: 0; }

/* Repères : assis / debout, curseur de prix, hauteur de passage, côte à côte puis empilés. */
.lsel-reperes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4) var(--espace-8); }
.lsel-repere { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-3); }
.lsel-repere__libelle { font-size: 14px; line-height: 20px; font-weight: 600; }
.lsel-segment a { display: block; padding: 10px 18px; min-height: var(--cible-min); box-sizing: border-box; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--texte); text-decoration: none; }
.lsel-segment a.on { background: var(--graphite); color: var(--toile); }
.lsel-segment a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -4px; }
.lsel-prix__curseur { width: min(240px, 100%); accent-color: var(--graphite); }
.lsel-prix__valeur { min-width: 8ch; font-size: 15px; }
.lsel-hauteur__champ { display: inline-flex; align-items: center; gap: var(--espace-2); font-size: 14px; }
.lsel-hauteur__champ .ab-champ__saisie { width: 88px; min-height: var(--controle); padding: 0 var(--espace-2); font-size: 16px; }

.lsel-message a { color: inherit; font-weight: 600; }
.lsel-total { font-family: var(--font-technique); font-size: 15px; }

/* Sections : titre et phrase de la section, puis la grille du kit (4, 3, 2 puis 1 colonne). */
.lsel-section { display: grid; gap: var(--espace-4); padding-top: var(--espace-6); border-top: var(--trait-fin) solid var(--trait); }
.lsel-section__tete { display: grid; gap: var(--espace-2); }
.lsel-section__tete .titre-2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.lsel-grille { align-items: stretch; }
.lsel-carte { display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; }
.lsel-carte > .a3-mini { flex: 1; }
/* La carte du conseil : filet sapin (confirmation), jamais jaune (le jaune est réservé au bouton principal). */
.lsel-carte--conseil > .a3-mini { outline: var(--trait-moyen) solid var(--sapin); outline-offset: 2px; }
.lsel-tailles { display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-2); font-family: var(--font-technique); font-size: 13px; line-height: 18px; }
.lsel-tailles__libelle { font-weight: 600; }
.lsel-tailles__taille { padding: 2px 6px; background: var(--toile-fonce); border-radius: var(--rayon-s); }

.lsel-vide .pg-row, .lsel-devis .pg-row { flex-wrap: wrap; justify-content: center; }
.lsel-devis { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.lsel-devis .pg-row { justify-content: flex-start; }
.lsel-conseiller { border-radius: var(--rayon-m); }
.lsel-conseiller .titre-2 { color: var(--toile); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; }
.lsel-conseiller .pg-row { flex-wrap: wrap; background: none; }


/* §3 Paliers du design system. */
@media (max-width: 991.98px) {
  .lsel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lsel .lsel__bouton { align-self: end; }
  .lsel-devis { grid-template-columns: minmax(0, 1fr); }
  .lsel-conseiller { grid-template-columns: minmax(0, 1fr); padding: var(--espace-8) var(--espace-6); }
}

@media (max-width: 767.98px) {
  .lsel { grid-template-columns: minmax(0, 1fr); padding: var(--espace-6) var(--espace-4); }
  .lsel .lsel__bouton { justify-self: stretch; width: 100%; }
  .lsel--compact { padding: var(--espace-4); }
  .lsel-reperes { flex-direction: column; align-items: stretch; }
  .lsel-prix__curseur { flex: 1 1 160px; }
}

@media (max-width: 479.98px) {
  .lsel-hauteur__champ { flex: 1 1 100%; }
  .lsel-conseiller .pg-row .ab-bouton { flex: 1 1 100%; }
}