/* Boutons, onglets (segments), sélecteurs, champs, cases, quotas, notes, offres (valeurs de brand/ui.css).
   Boutons : primaire blanc (une action par vue), secondaire en voile, accent bleu profond pour lancer un
   relevé ou analyser une marque, fantôme pour annuler. Hauteur 40, compacte 32, rayon 8, graisse 500. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--bouton-hauteur); padding: 0 16px;
  border: 0; border-radius: var(--rayon-2); font-size: 14px; font-weight: var(--graisse-moyenne); letter-spacing: -0.005em; line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe), transform var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe);
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn .ic { width: 16px; height: 16px; }
.btn-primaire { background: var(--bouton-primaire-fond); color: var(--bouton-primaire-encre); }
.btn-primaire:hover:not(:disabled) { background: var(--bouton-primaire-survol); }
.btn-secondaire { background: var(--bouton-secondaire-fond); color: var(--encre); box-shadow: var(--trait-lumiere); }
.btn-secondaire:hover:not(:disabled) { background: var(--voile-4); }
.btn-accent { background: var(--bouton-accent-fond); color: var(--bouton-accent-encre); }
.btn-accent:hover:not(:disabled) { background: var(--bouton-accent-survol); box-shadow: var(--lueur); }
.btn-fantome { background: transparent; color: var(--encre-2); }
.btn-fantome:hover:not(:disabled) { background: var(--voile-2); color: var(--encre); }
.btn-compact { height: var(--bouton-hauteur-compacte); padding: 0 12px; font-size: var(--taille-petit); }
.btn:focus-visible, .btn:focus-visible:hover:not(:disabled) { box-shadow: var(--anneau-focus); }

/* ---------- Onglets (filtres exclusifs) : valeurs de .onglets ---------- */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.segments { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--rayon-2); background: var(--voile-2); border: 1px solid var(--trait); }
.segments button {
  height: 30px; padding: 0 12px; border: 0; border-radius: var(--rayon-1); background: transparent; color: var(--encre-2);
  font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); cursor: pointer;
  transition: background var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}
.segments button:hover { color: var(--encre); }
.segments button[aria-pressed="true"] { background: var(--panneau-3); color: var(--encre); box-shadow: var(--trait-lumiere); }

/* ---------- Sélecteurs ---------- */
.sel { position: relative; display: inline-flex; align-items: center; }
.sel select {
  height: var(--bouton-hauteur); padding: 0 34px 0 12px; border: 1px solid var(--trait); border-radius: var(--rayon-2); background: var(--voile-2);
  font-family: var(--police); font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 34ch;
  transition: border-color var(--duree-rapide) var(--courbe), background var(--duree-rapide) var(--courbe);
}
.sel select:hover { border-color: var(--trait-fort); }
.sel select:focus-visible { border-color: var(--bleu-texte); box-shadow: var(--anneau-focus); }
.sel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--encre-2); border-bottom: 1.5px solid var(--encre-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select option { background: var(--panneau); color: var(--encre); }

/* ---------- Champs ---------- */
.form { display: grid; gap: 20px; }
.champ { display: grid; align-content: start; gap: 6px; }
.champ .sel { display: flex; }
.champ .sel select { width: 100%; max-width: none; }
.champ > label, .champ > .lab { font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.champ .aide { font-size: var(--taille-etiquette); line-height: 1.5; color: var(--encre-2); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="url"], .champ input[type="search"], .champ input[type="password"], .champ textarea, .ligne-ajout input {
  width: 100%; height: var(--bouton-hauteur); padding: 0 12px; border: 1px solid var(--trait); border-radius: var(--rayon-2);
  background: var(--voile-2); color: var(--encre); font-size: 14px;
  transition: border-color var(--duree-rapide) var(--courbe), background var(--duree-rapide) var(--courbe);
}
::placeholder { color: var(--encre-indice); opacity: 1; }
.champ input:hover, .champ textarea:hover, .ligne-ajout input:hover { border-color: var(--trait-fort); }
.champ input:focus, .champ textarea:focus, .champ select:focus, .ligne-ajout input:focus { outline: none; border-color: var(--bleu-texte); box-shadow: var(--anneau-focus); }
.champ input:disabled, .ligne-ajout input:disabled { opacity: 0.5; cursor: not-allowed; }
.champ input[aria-invalid="true"] { border-color: var(--moins); }
.champ textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.champ-erreur { font-size: var(--taille-etiquette); color: var(--moins); }
.champ-erreur[hidden] { display: none; }
.facultatif { font-weight: var(--graisse-corps); color: var(--encre-2); }
.ligne-ajout { display: flex; gap: 8px; }
.ligne-ajout input { flex: 1; min-width: 0; }
.ligne-ajout .sel select { height: var(--bouton-hauteur); }

/* ---------- Cases à cocher ---------- */
.cases { display: grid; gap: 8px; }
.case {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px; border-radius: var(--rayon-2);
  border: 1px solid var(--trait); background: var(--voile-1); cursor: pointer;
  transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}
.case:hover { background: var(--voile-2); }
.case:has(input:checked) { border-color: var(--bleu-trait); }
.case:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.case input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin: 0; border-radius: var(--rayon-1); border: 1px solid var(--trait-fort); background: var(--voile-2); cursor: pointer; transition: background var(--duree-rapide) var(--courbe); }
.case input:checked { background: var(--bleu); border-color: var(--bleu); }
.case input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: translateY(-1px) rotate(-45deg); }
.case input:focus-visible { box-shadow: var(--anneau-focus); }
.case .surf, .case > span { flex: 1; font-size: 14px; }
.case .prix { flex: none; font-size: var(--taille-etiquette); color: var(--encre-2); }

/* ---------- Quotas ---------- */
.quota { display: grid; gap: 12px; }
.quota li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: var(--taille-petit); color: var(--encre-2); }
.quota .num { font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre); }
.quota .bar { grid-column: 1 / -1; height: 4px; border-radius: var(--rayon-pilule); background: var(--voile-3); overflow: hidden; }
.quota .bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--bleu); }
.quota .bar i.plein { background: var(--attention); }

/* ---------- Actions, notes ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.note { padding: 12px 14px; border-radius: var(--rayon-2); background: var(--voile-1); border: 1px solid var(--trait); font-size: var(--taille-petit); line-height: 1.55; color: var(--encre-2); }
.note[hidden] { display: none; }
.note.ambre { background: var(--attention-fond); border-color: var(--attention-fond); color: var(--attention); }
.note.verte { background: var(--mieux-fond); border-color: var(--mieux-fond); color: var(--mieux); }
.note .btn { margin-left: 8px; vertical-align: middle; }
.note .losange { vertical-align: 1px; }
.suggestions { display: grid; gap: 8px; margin-top: 12px; }

/* ---------- Offres (Réglages) ---------- */
.offres-autres { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--trait); }
.offres-liste { display: grid; gap: 10px; }
.offre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offre-texte { display: grid; gap: 2px; min-width: 0; font-size: var(--taille-etiquette); line-height: 1.4; color: var(--encre-2); }
.offre-texte b { font-size: 14px; color: var(--encre); }
#offre .note { margin-top: 12px; }

@media (max-width: 600px) { .ligne-ajout { flex-wrap: wrap; } .ligne-ajout .btn { width: 100%; } }