/* =============================================================
   home_v2.css — Home V2 « la page est l'outil »
   =============================================================
   Portée : UNIQUEMENT index_v2.html. Ne touche pas landing.css
   (la v1 doit rester servable telle quelle tant que la V2 n'est
   pas validée).

   Réutilise les tokens de style.css. Aucune couleur en dur hors
   des cas où le token n'existe pas (surfaces console).
   Interdits respectés : pas de relief 3D (réservé .dash3d), pas
   d'orange, pas de badge décoratif — un badge n'existe ici que
   s'il porte un état machine (file d'attente, quota, erreur).
   ============================================================= */

/* ---------- Ligne de réassurance sous la barre ---------- */

.hv-run-hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--ink-muted);
}
.hv-run-hint strong { color: var(--ink); font-weight: 600; }

/* ---------- PANNEAU D'EXÉCUTION ----------
   Un seul conteneur qui traverse tous les états : file d'attente,
   lancement, résultats, quota, erreur. Il ne bouge pas de place :
   le visiteur garde son point de repère. */

.hv-run {
    max-width: 1120px;
    margin: 40px auto 0;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.hv-run-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
}
.hv-run-head-title {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.hv-run-head-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Pastille d'état : la couleur EST l'information, pas un ornement. */
.hv-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ink-faint);
    flex: none;
}
.hv-dot.is-running { background: var(--accent); animation: hv-pulse 1.4s ease-in-out infinite; }
.hv-dot.is-queued  { background: var(--warning); }
.hv-dot.is-done    { background: var(--success); }
.hv-dot.is-error   { background: var(--danger); }
@keyframes hv-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.hv-run-body { padding: 20px 18px; }

/* --- État : file d'attente --- */
/* Contrainte produit : jamais deux scrapes Maps en parallèle. La file
   n'est pas une panne, c'est une garantie de qualité — le texte doit
   le dire, sinon le visiteur part. */
.hv-queue {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 2px;
}
.hv-queue-rank {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--warning);
    flex: none;
    min-width: 46px;
    text-align: center;
}
.hv-queue-text { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.hv-queue-text strong { color: var(--ink); font-weight: 600; }

/* --- État : progression --- */
.hv-progress {
    height: 3px;
    background: var(--bg-soft);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin: 0 0 16px;
}
.hv-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: var(--r-pill);
    transition: width 400ms var(--ease-out);
}
.hv-progress-indeterminate {
    width: 32%;
    animation: hv-slide 1.5s ease-in-out infinite;
}
@keyframes hv-slide {
    0%   { margin-left: -32%; }
    100% { margin-left: 100%; }
}

.hv-status-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-muted);
    margin-bottom: 14px;
}
.hv-status-line strong {
    font-size: 15px;
    color: var(--ink);
    font-weight: 700;
}

/* --- Tableau de résultats --- */
/* 100 lignes potentielles : la zone scrolle en interne, la page non. */
.hv-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: auto;
    max-height: 460px;
    background: var(--bg);
}
.hv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.hv-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    padding: 9px 12px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
/* Colonne apportée par un module coché : on la distingue sans crier. */
.hv-table th.is-enriched { color: var(--accent-text); background: var(--accent-soft); }
.hv-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hv-table tr:last-child td { border-bottom: 0; }
.hv-table tbody tr:hover td { background: var(--bg-soft); }
.hv-cell-empty { color: var(--ink-faint); }

/* Cellule en cours de remplissage par un module : un pouls discret,
   pas un spinner par cellule (100 spinners = épilepsie). */
.hv-cell-loading {
    display: inline-block;
    width: 54px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--bg-soft);
    animation: hv-pulse 1.2s ease-in-out infinite;
}

/* --- Barre du bas : total réel + export --- */
.hv-run-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
}
.hv-count {
    font-size: 13px;
    color: var(--ink-muted);
}
.hv-count strong { color: var(--ink); font-weight: 700; }
.hv-run-foot-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* --- Barre d'enrichissement --- */
/* Le moment de bascule : le visiteur découvre que sa liste peut grossir
   en largeur. Les chips réutilisent .hb-chip de landing.css. */
.hv-enrich {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}
.hv-enrich-label {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 0 0 10px;
}
.hv-enrich-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- États bloquants (quota, erreur) --- */
.hv-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--r-lg);
    font-size: 14px;
    line-height: 1.55;
}
.hv-notice strong { font-weight: 600; }
.hv-notice-quota { background: var(--warning-soft); color: var(--ink); }
.hv-notice-error { background: var(--danger-soft); color: var(--ink); }
.hv-notice-info  { background: var(--info-soft);   color: var(--ink); }

/* ---------- SECTION : ANALYSER UN SITE ---------- */

.hv-url-form {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto 8px;
    flex-wrap: wrap;
}
.hv-url-input {
    flex: 1 1 320px;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 15px;   /* >= 16px sur mobile via media query : anti-zoom iOS */
    transition: border-color var(--t-snap), box-shadow var(--t-snap);
}
.hv-url-input::placeholder { color: var(--ink-faint); }
.hv-url-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.hv-url-note {
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-muted);
    margin: 0 0 4px;
}

/* Grille des 7 détections */
.hv-detect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: 28px;
    /* Sans ça, une carte haute (identité de marque) étire ses voisines
       et laisse de grandes zones vides. Chaque carte garde sa hauteur. */
    align-items: start;
}
.hv-card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hv-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
}
.hv-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.hv-card-module {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-faint);
}

/* Carte qui occupe deux colonnes (identité de marque : visuellement riche) */
.hv-card-wide { grid-column: span 2; }
@media (max-width: 720px) { .hv-card-wide { grid-column: span 1; } }

/* Score 0-100 : une barre, pas une jauge circulaire décorative. */
.hv-score {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.hv-score-value {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.03em;
}
.hv-score-max { font-size: 13px; color: var(--ink-faint); }
.hv-score-track {
    height: 4px;
    background: var(--bg-soft);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.hv-score-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--r-pill);
    transition: width 600ms var(--ease-out);
}

/* Listes de valeurs détectées (réseaux pub, technos, SaaS) */
.hv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hv-tag {
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 4px 9px;
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    color: var(--ink-muted);
}
.hv-tag-on { background: var(--accent-soft); color: var(--accent-text); }

/* Paires clé/valeur */
.hv-kv { display: grid; gap: 7px; }
.hv-kv-row {
    display: flex;
    gap: 12px;
    font-size: 13px;
    align-items: baseline;
}
.hv-kv-k {
    color: var(--ink-muted);
    flex: none;
    min-width: 118px;
    font-size: 12.5px;
}
.hv-kv-v { color: var(--ink); font-weight: 500; word-break: break-word; }
/* Rouge = un vrai défaut (SPF/DMARC absent). « Non détecté » n'est pas un
   défaut : un site qui n'est pas sur Shopify n'a rien d'anormal. */
.hv-kv-v.is-missing { color: var(--danger); font-weight: 600; }
.hv-kv-v.is-neutral { color: var(--ink-muted); font-weight: 400; }
.hv-kv-v.is-ok { color: var(--success); font-weight: 600; }

/* Identité de marque : palette + logo + capture */
.hv-brand {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.hv-brand-logo {
    width: 84px; height: 84px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
    flex: none;
}
.hv-brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* La capture ne réserve sa place que si elle existe : un module qui
   n'a pas rendu de screenshot ne doit pas laisser un rectangle vide. */
.hv-brand-shot {
    flex: 1 1 240px;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--bg-soft);
}
.hv-brand-shot:empty,
.hv-brand-shot.is-empty { display: none; }
.hv-brand-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hv-swatches { display: flex; gap: 6px; }
.hv-swatch {
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

/* Note interne à une carte : sert à dire « rien trouvé » sans laisser
   la carte vide, ce qui se lirait comme un bug. */
.hv-card-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* ---------- Divers ---------- */

.hv-section-note {
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
    max-width: 620px;
    margin: 14px auto 0;
    line-height: 1.6;
}

.hv-anchor-nav {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
}
.hv-anchor {
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    transition: color var(--t-snap), border-color var(--t-snap);
}
.hv-anchor:hover { color: var(--accent-text); border-color: var(--border-strong); }

/* ---------- Responsive ---------- */

@media (max-width: 700px) {
    .hv-run { margin-top: 28px; border-radius: var(--r-lg); }
    .hv-run-body { padding: 16px 14px; }
    .hv-run-head, .hv-run-foot { padding: 12px 14px; }
    .hv-run-foot-right { margin-left: 0; width: 100%; }
    .hv-run-foot-right .btn { flex: 1; }
    .hv-table-wrap { max-height: 380px; }
    .hv-url-input { font-size: 16px; }  /* coupe le zoom auto iOS */
    .hv-url-form .btn { width: 100%; }
    .hv-detect-grid { grid-template-columns: 1fr; }
    .hv-queue-rank { font-size: 24px; min-width: 36px; }
    .hv-kv-k { min-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .hv-dot.is-running,
    .hv-cell-loading,
    .hv-progress-indeterminate { animation: none; }
    .hv-progress-bar, .hv-score-fill { transition: none; }
}

/* =============================================================
   BARRE DE RECHERCHE DU HERO
   =============================================================
   La version précédente composait la requête à l'intérieur du <h1>.
   C'était élégant et illisible comme affordance : personne ne
   comprenait qu'on pouvait taper dedans. Ici, un formulaire qui
   ressemble à un formulaire — intitulés, champs encadrés, bouton.
   ============================================================= */

.hv-eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.hv-title {
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 0 0 16px;
}

.hv-lead {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: 640px;
    margin: 0 auto 30px;
}
.hv-lead strong { color: var(--ink); font-weight: 600; }

/* --- Le formulaire --- */

.hv-search {
    /* Grille 2×2 : métier + ville en haut, e-mail + bouton en bas. En
       ligne unique, trois champs écrasaient les intitulés sur deux lignes
       et le formulaire devenait illisible. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 14px 10px;
    max-width: 860px;
    margin: 0 auto;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.hv-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
.hv-field-label {
    display: block;
    margin: 0 0 5px 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
}
.hv-field-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--bg);
    transition: border-color var(--t-snap, .15s) ease, box-shadow var(--t-snap, .15s) ease;
}
.hv-field-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.hv-field-icon { width: 18px; height: 18px; flex: none; color: var(--ink-faint); }
.hv-field-box:focus-within .hv-field-icon { color: var(--accent); }

.hv-field-input {
    flex: 1;
    min-width: 0;
    height: 50px;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--font-body);
    font-size: 16px;      /* >= 16px : coupe le zoom auto iOS */
    color: var(--ink);
}
.hv-field-input::placeholder { color: var(--ink-faint); }

.hv-search-go {
    flex: none;
    height: 52px;
    padding: 0 26px !important;
    font-size: 15px !important;
    font-weight: 600;
    border-radius: var(--r-md);
}

/* --- Départs en un clic --- */

.hv-tries {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--ink-muted);
}
.hv-try {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--ink-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--t-snap, .15s) ease, color var(--t-snap, .15s) ease;
}
.hv-try:hover { border-color: var(--accent); color: var(--accent-text); }

/* --- Menu de suggestions --- */
.hv-combo-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 340px;
    padding: 6px;
    background: var(--glass-bg-strong, #fff);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    text-align: left;
    font-size: 14px;
    line-height: 1.3;
    animation: hv-menu-in 160ms var(--ease-out, ease-out);
}
@keyframes hv-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hv-combo-list { max-height: 268px; overflow-y: auto; }

.hv-combo-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hv-combo-opt:hover,
.hv-combo-opt.is-active { background: var(--accent-soft); }
.hv-combo-flag { font-size: 18px; line-height: 1; flex: none; }
.hv-combo-label { font-weight: 500; }
.hv-combo-sub {
    margin-left: auto;
    font-size: 12px;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* Pied du menu : dit explicitement que la liste n'est pas une limite. */
.hv-combo-foot {
    padding: 8px 10px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.45;
}
.hv-combo-foot strong { color: var(--ink); font-weight: 600; }


@media (max-width: 700px) {
    /* Le titre-phrase ne tient pas sur un écran de téléphone en 34px+ :
       les champs se disloquaient. On réduit et on autorise le retour à la
       ligne au lieu de forcer « à <ville>. » sur une seule ligne. */
    .hero-title { font-size: clamp(21px, 6.2vw, 30px); line-height: 1.3; }
    /* « à <ville>. » reste solidaire : sinon la préposition finit seule en
       bout de ligne et le point flotte. Le titre a été réduit pour que le
       groupe tienne, y compris sur un nom long type « São Paulo ». */
    .hero .hb-nb { white-space: nowrap; }
    .hv-combo { max-width: 100%; }
    .hv-combo-input { border-bottom-width: 2px; }

    /* Le menu se cale sur la largeur de l'écran, pas sur celle du champ. */
    .hv-combo-menu {
        position: fixed;
        left: 50%;
        top: auto;
        width: 92vw;
        min-width: 0;
        max-width: 92vw;
        max-height: 54vh;
    }
    .hv-combo-list { max-height: 40vh; }
    .hv-combo-sub { font-size: 11px; }
    .hv-scope { font-size: 11px; gap: 4px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hv-combo-menu { animation: none; }
}

/* =============================================================
   BLOCS DE STRUCTURE — hero et analyse
   =============================================================
   Correctif de conception : ces deux zones n'étaient qu'une pile
   de petites lignes de texte. Elles portent pourtant les deux
   arguments les plus forts de la page (l'étendue mondiale, et ce
   qu'une simple URL révèle). Elles ont besoin d'un cadre et d'une
   échelle typographique, pas d'un badge de plus.
   ============================================================= */

/* ---------- Portée : trois chiffres, pas une ligne grise ---------- */

.hv-reach {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    /* Les trois chiffres ont besoin d'air des deux côtés : collés au
       sous-titre, ils redevenaient une ligne parmi d'autres. */
    margin: 30px auto 34px;
    max-width: 620px;
}
.hv-reach-item {
    flex: 1 1 0;
    min-width: 130px;
    padding: 0 20px;
    text-align: center;
    /* Filets fins entre les colonnes : structure sans boîte lourde. */
    border-left: 1px solid var(--border);
}
.hv-reach-item:first-child { border-left: 0; }
.hv-reach-n {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.hv-reach-l {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.35;
}

/* ---------- Aperçu de l'export : un vrai bloc, pas des chips en vrac ---------- */

.hv-export {
    max-width: 820px;
    margin: 26px auto 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    overflow: hidden;
    text-align: left;
}
.hv-export-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
    font-size: 12.5px;
    color: var(--ink-muted);
}
.hv-export-head-title { font-weight: 600; color: var(--ink); }
.hv-export-head-right { margin-left: auto; font-family: var(--font-mono); font-size: 12px; }
.hv-export-head-right b { color: var(--ink); font-weight: 700; }
.hv-export-body { padding: 14px 16px; }

/* ---------- Panneau d'analyse de site ---------- */

.hv-analyse {
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    text-align: left;
}
.hv-analyse-body { padding: 22px 22px 18px; }

.hv-analyse-label {
    display: block;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.hv-analyse-form { display: flex; gap: 10px; flex-wrap: wrap; }
.hv-analyse-form .hv-url-input { flex: 1 1 300px; padding: 15px 18px; font-size: 16px; }
.hv-analyse-form .btn { padding: 15px 26px; }

/* Exemples cliquables : lever la page blanche du champ vide. */
.hv-examples {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--ink-muted);
}
.hv-example {
    border: 0;
    background: transparent;
    padding: 2px 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--accent-text);
    cursor: pointer;
    border-bottom: 1px dotted var(--border-strong);
}
.hv-example:hover { border-bottom-color: var(--accent); }

/* Ce que l'analyse rend — visible AVANT de taper quoi que ce soit. */
.hv-yield {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
}
.hv-yield-item {
    padding: 13px 14px;
    border-left: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-muted);
}
.hv-yield-item:first-child { border-left: 0; }
.hv-yield-item b {
    display: block;
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}

@media (max-width: 700px) {
    .hv-reach { max-width: 100%; }
    .hv-reach-item { flex: 1 1 45%; min-width: 0; padding: 10px 8px; border-left: 0; }
    .hv-reach-item:nth-child(2) { border-left: 1px solid var(--border); }
    .hv-reach-item:last-child {
        flex-basis: 100%;
        border-top: 1px solid var(--border);
        border-left: 0;
        margin-top: 10px;
        padding-top: 12px;
    }
    .hv-analyse-body { padding: 18px 16px 14px; }
    .hv-analyse-form .btn { width: 100%; }
    .hv-yield { grid-template-columns: 1fr 1fr; }
    .hv-yield-item { border-top: 1px solid var(--border); }
    .hv-yield-item:nth-child(odd) { border-left: 0; }
}

/* ---------- Case de responsabilité ---------- */
/* Elle conditionne l'affichage de coordonnées réelles : elle doit être
   lisible, pas noyée en pied de page. */
/* Sans cadre au repos : une boîte de plus flottait entre la barre et
   l'aperçu et cassait la lecture. Le cadre n'apparaît que si on tente de
   lancer sans avoir coché. */
.hv-consent {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 560px;
    margin: 20px auto 0;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-snap, .15s) ease, background var(--t-snap, .15s) ease;
}
.hv-consent:hover { color: var(--ink); }
.hv-consent input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--accent); }
.hv-consent a { color: var(--accent-text); }
/* Signalée seulement quand on a tenté de lancer sans cocher. */
.hv-consent.is-warn { border-color: var(--danger); background: var(--danger-soft); color: var(--ink); }

/* ---------- Colonnes réservées au compte ---------- */
.hv-table th.is-locked { color: var(--ink-faint); background: var(--bg-soft); }
.hv-table td.is-locked { color: var(--ink-faint); font-style: italic; }
.hb-col.is-locked { color: var(--ink-faint); border: 1px dashed var(--border-strong); background: transparent; }

/* ---------- Phase d'avancement ---------- */
/* L'ouverture des connexions prend une minute pendant laquelle aucun
   compteur métier ne bouge. Cette ligne-là bouge, et elle est vraie. */
.hv-phase {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-soft);
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-muted);
    white-space: nowrap;
}
.hv-phase strong { color: var(--ink); font-weight: 700; }
.hv-phase-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
    animation: hv-pulse 1.2s ease-in-out infinite;
}
.hv-queue-text .hv-phase { margin: 10px 0 0; display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .hv-phase-dot { animation: none; } }

/* ---------- Aperçu du fichier : chips d'ajout ---------- */

.hv-export-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}
.hv-export-add-label {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin-right: 2px;
}
.hv-export-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* ---------- Barre de recherche : téléphone ---------- */

@media (max-width: 760px) {
    /* En colonne : sur un écran étroit, deux champs côte à côte
       deviennent deux champs illisibles. */
    .hv-search {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 12px;
        border-radius: var(--r-lg);
    }
    .hv-field-trade, .hv-field-city, .hv-field-mail,
    .hv-search .hv-search-go { grid-column: 1; grid-row: auto; }
    .hv-search-go { width: 100%; height: 50px; }
    .hv-title { font-size: clamp(26px, 7.4vw, 34px); }
    .hv-tries { gap: 6px; font-size: 12.5px; }
    .hv-try { font-size: 12.5px; padding: 5px 9px; }
    .hv-export-add { gap: 6px; }
}

/* ---------- Champ e-mail de la barre ---------- */
/* L'adresse est la contrepartie du fichier : elle occupe une rangée
   pleine, à côté du bouton qui déclenche l'envoi. */
.hv-field-trade { grid-column: 1; grid-row: 1; }
.hv-field-city  { grid-column: 2; grid-row: 1; }
.hv-field-mail  { grid-column: 1; grid-row: 2; }
.hv-search .hv-search-go { grid-column: 2; grid-row: 2; width: 100%; }

/* Signalé seulement après une tentative de lancement, jamais pendant la
   frappe : personne n'aime un champ qui vire au rouge dès la 1re lettre. */
.hv-field-box.is-error {
    border-color: var(--danger);
    background: var(--danger-soft);
}
.hv-field-box.is-error .hv-field-icon { color: var(--danger); }

.hv-count-mail { color: var(--ink-muted); }
.hv-count-mail strong { color: var(--accent-text); }