/* ============================================
   HELPOFFICE : vérificateur SIRET
   ============================================
   L'outil tient en deux éléments : un verdict, puis une fiche. Le verdict doit
   se lire d'un coup d'oeil, avant même la fiche, parce que c'est la réponse à
   la question posée. La fiche est une liste de définitions, donc un dl.
   ============================================ */

.vs-intro { color: var(--brand-ink-soft, #6a6967); margin-bottom: 1.25rem; }

.vs-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.vs-row .form-control { flex: 1 1 16rem; font-size: 1.15rem; letter-spacing: .04em; }
.vs-row .btn-search { flex: 0 0 auto; }

.vs-aide { margin: .5rem 0 0; font-size: .85rem; color: #949089; }

/* Classe utilitaire : elle doit l'emporter sur le display d'un composant, sans
   quoi un bloc masqué comme .vs-verdict (display: flex) reste affiché. Vide, il
   ne montrait que son filet gauche arrondi, lu comme une parenthèse égarée. */
.vs-cache { display: none !important; }

/* ---- Verdict ---- */
.vs-verdict {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  border-left: 5px solid;
  margin-bottom: 1.25rem;
}
.vs-verdict strong { display: block; font-size: 1.35rem; letter-spacing: .03em; }
.vs-verdict-txt { display: block; font-size: .95rem; opacity: .85; margin-top: .15rem; }
.vs-pastille { font-size: 1.8rem; line-height: 1; }

.vs-ok { background: #dcfce7; border-left-color: #16a34a; color: #14532d; }
.vs-ko { background: #fee2e2; border-left-color: #dc2626; color: #7f1d1d; }

/* ---- Fiche ---- */
.vs-fiche { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
@media (min-width: 40rem) {
  .vs-fiche { grid-template-columns: 13rem 1fr; }
}
.vs-fiche dt {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #949089;
  padding: .7rem 0 0;
  overflow-wrap: anywhere;   /* « TVA intracommunautaire » ne tient pas d'un bloc */
}
.vs-fiche dd {
  margin: 0;
  padding: .7rem 0;
  border-bottom: 1px solid #eee9e2;
  overflow-wrap: anywhere;
}
@media (min-width: 40rem) {
  .vs-fiche dt { padding: .7rem 1rem .7rem 0; border-bottom: 1px solid #eee9e2; }
}
.vs-fiche dd:last-of-type { border-bottom: 0; }

.vs-note { font-size: .8rem; color: #949089; }

.vs-etat { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.vs-etat-actif { background: #dcfce7; color: #15803d; }
.vs-etat-cesse { background: #e5e7eb; color: #4b5563; }

.vs-source { margin: 1.25rem 0 0; font-size: .85rem; color: #949089; }
.vs-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Repères ---- */
.vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.25rem; }
.vs-bloc h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.vs-bloc p { margin: 0; font-size: .95rem; color: var(--brand-ink-soft, #6a6967); }
.vs-bloc code { font-size: .9em; background: #f3ede5; padding: .05em .3em; border-radius: 3px; }

/* ============================================
   Recherche avancée
   ============================================
   Un panneau dépliant, jamais une fenêtre modale : les filtres doivent rester
   lisibles en même temps que les résultats qu'ils produisent.
   ============================================ */

.vs-barre { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.vs-lien-btn {
  display: inline-flex; align-items: center;
  background: #f6f2ec; border: 1px solid #e4dcd0; color: var(--brand-ink, #2f2e2c);
  border-radius: 999px; padding: .5rem 1.1rem;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.vs-lien-btn:hover { background: #efe8de; border-color: #d6cabb; }
.vs-lien-btn--sobre { font-weight: 500; color: #7a756d; }
.vs-lien-btn .vs-fleche { transition: transform .25s; font-size: .8em; }
.vs-lien-btn[aria-expanded="true"] .vs-fleche { transform: rotate(180deg); }

.vs-compteur {
  margin-left: .5rem; min-width: 1.4rem; padding: 0 .35rem;
  background: var(--brand-green, #78b82b); color: #fff;
  border-radius: 999px; font-size: .78rem; line-height: 1.4rem; text-align: center;
}

/* Le panneau est replié par défaut. On anime la hauteur maximale plutôt que la
   hauteur : le contenu varie selon la largeur d'écran et n'est pas mesurable
   à l'avance. */
.vs-avance {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, margin .35s ease;
  margin-top: 0;
}
.vs-avance.vs-ouvert { max-height: 180rem; margin-top: 1.25rem; }

.vs-avance-intro { font-size: .95rem; color: #7a756d; margin: 0 0 1.25rem; }

.vs-filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
              gap: 1.25rem; align-items: start; }

.vs-filtre {
  border: 1px solid #eee9e2; border-radius: 14px; padding: 1.1rem 1.25rem 1.25rem;
  background: #fdfcfa; min-width: 0;
}
.vs-filtre--large { grid-column: 1 / -1; }
.vs-filtre legend {
  float: none; width: auto; padding: 0 .4rem; margin: 0 0 .6rem -.4rem;
  font-size: .95rem; font-weight: 600; color: var(--brand-ink, #2f2e2c);
}
.vs-filtre .form-label { font-size: .88rem; margin-bottom: .35rem; }
/* Un libellé long comme « Services administratifs et de soutien » chassait le
   chevron du select hors de la boîte : la liste ne se voyait plus déroulante. */
.vs-filtre .form-select { width: 100%; padding-right: 2.2rem; text-overflow: ellipsis; }
.vs-filtre .form-control { width: 100%; }
.vs-champ-aide { margin: .45rem 0 0; font-size: .82rem; color: #949089; }

.vs-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .9rem; }

.vs-avance-pied { display: flex; justify-content: flex-end; margin-top: 1.25rem; }

/* ---- Pastilles à bascule ---- */
.vs-bascules { display: flex; flex-wrap: wrap; gap: .4rem; }
.vs-bascule {
  background: #fff; border: 1px solid #ded6c9; color: #5c574f;
  border-radius: 999px; padding: .35rem .85rem; font-size: .86rem; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.vs-bascule:hover { border-color: var(--brand-green, #78b82b); }
.vs-bascule[aria-pressed="true"] {
  background: var(--brand-green, #78b82b); border-color: var(--brand-green, #78b82b);
  color: #fff; font-weight: 600;
}

/* ---- Autocomplétion de lieu ---- */
.vs-auto { position: relative; }
.vs-suggestions {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid #e4dcd0; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  max-height: 17rem; overflow-y: auto;
}
.vs-sug {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: .55rem .8rem; font-size: .92rem; cursor: pointer;
}
.vs-sug:hover, .vs-sug:focus { background: #f4f7ee; }

/* ============================================
   Résultats
   ============================================ */

.vs-total { font-size: 1.05rem; font-weight: 600; margin: 0 0 .75rem; }

.vs-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.vs-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #f0f5e6; border: 1px solid #d3e3b6; color: #46600f;
  border-radius: 999px; padding: .25rem .75rem; font-size: .84rem; cursor: pointer;
}
.vs-chip:hover { background: #e4eed3; }
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vs-vide { color: #7a756d; margin: 0; }

.vs-liste { display: flex; flex-direction: column; gap: .75rem; }

.vs-carte { border: 1px solid #eee9e2; border-radius: 14px; overflow: hidden; background: #fff; }
.vs-carte-tete {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  background: none; border: 0; text-align: left; padding: .95rem 1.1rem; cursor: pointer;
}
.vs-carte-tete:hover { background: #fbf9f6; }
.vs-carte-corps { flex: 1 1 auto; min-width: 0; }
/* Les dénominations sociales sont des chaînes arbitraires : sans coupure
   autorisée, un nom d'un seul tenant déborde de la carte sur un téléphone. */
.vs-carte-nom { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.5;
                overflow-wrap: anywhere; }
.vs-carte-meta { display: block; font-size: .86rem; color: #7a756d; margin-top: .2rem;
                 overflow-wrap: anywhere; }
.vs-chevron { flex: 0 0 auto; color: #a8a29a; transition: transform .25s; }
.vs-carte-tete[aria-expanded="true"] .vs-chevron { transform: rotate(180deg); }
.vs-carte-tete[aria-expanded="true"] { background: #fbf9f6; }

.vs-labels { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 1.1rem .85rem; }
.vs-label {
  background: #f3ede5; color: #6a6259; border-radius: 999px;
  padding: .12rem .6rem; font-size: .76rem; font-weight: 500;
}

.vs-detail { padding: .25rem 1.1rem 1.1rem; border-top: 1px solid #f2ede6; }
.vs-lien { margin: 1rem 0 0; font-size: .85rem; }
.vs-lien a { color: #7a756d; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Pagination ---- */
.vs-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
             gap: .6rem 1rem; margin-top: 1.5rem; }
.vs-pages:empty { margin-top: 0; }
.vs-page {
  background: #f6f2ec; border: 1px solid #e4dcd0; border-radius: 999px;
  padding: .45rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
  color: var(--brand-ink, #2f2e2c);
}
.vs-page:hover:not(:disabled) { background: #efe8de; }
.vs-page:disabled { opacity: .4; cursor: default; }
.vs-page-etat { font-size: .88rem; color: #7a756d; }

@media (max-width: 34rem) {
  .vs-pages { gap: .5rem; }
  .vs-page { padding: .45rem .8rem; }
  .vs-carte-tete { padding: .8rem .9rem; }
  .vs-labels, .vs-detail { padding-left: .9rem; padding-right: .9rem; }
}