/**
 * Le vérificateur — champ, rapport, constats.
 *
 * Toutes les couleurs viennent des jetons de variables.css : le statut d'une
 * ligne (conforme / manquant / à vérifier) est la SEULE chose qui colore cet
 * écran. Rien n'est décoratif ici.
 */

.vf { width: 100%; }

/* --- Le champ --- */
.vf-srlabel {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.vf-box {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.vf-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-100);
}
.vf-input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0.9rem 1rem;
    /* 16px minimum : en dessous, iOS zoome tout seul à la mise au point. */
    font-size: 16px;
    font-family: var(--font-mono);
    color: var(--text);
    background: transparent;
}
.vf-input::placeholder { color: var(--text-muted); }
.vf-input:focus { outline: none; }

.vf-submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;          /* cible tactile */
    padding: 0 1.4rem;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--transition);
}
.vf-submit:hover { background: var(--primary-dark); }
.vf-submit:focus-visible { outline: 3px solid var(--primary-100); outline-offset: -3px; }
.vf-submit:disabled { opacity: 0.7; cursor: default; }

.vf-spinner { display: none; width: 15px; height: 15px; }
.is-loading .vf-spinner {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vf-spin 0.7s linear infinite;
}
@keyframes vf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .is-loading .vf-spinner { animation-duration: 2.4s; }
}

.vf-hint { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted); }
.vf-error {
    margin-top: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: var(--error-bg);
    color: var(--error);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

/* --- Le rapport --- */
.vf-report {
    margin-top: 1.5rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    text-align: left;
}
.vf-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border-light);
}
.vf-report-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-light);
}
.vf-report-score {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
}
.vf-report-score.is-bad  { color: var(--error); }
.vf-report-score.is-warn { color: var(--warning); }
.vf-report-score.is-good { color: var(--primary); }

.vf-lines { list-style: none; margin: 0; padding: 0; }
.vf-line {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
}
.vf-line:last-child { border-bottom: 0; }
.vf-badge {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
}
.vf-badge.is-ok      { background: var(--primary); }
.vf-badge.is-missing { background: var(--error); }
.vf-badge.is-warn    { background: var(--warning); }

.vf-line-body { display: flex; flex-direction: column; gap: 0.15rem; }
.vf-line-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.3;
}
.vf-line-detail { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; }

/* Ce que la machine a lu : hébergeur, traceurs, bandeau. */
.vf-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    padding: 0 1.1rem;
}
.vf-facts:not(:empty) {
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg);
}
.vf-fact { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.25rem 0; }
.vf-fact-k {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.vf-fact-v { font-size: 0.9rem; color: var(--text); }

.vf-report-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    background: var(--primary-50);
    border-top: 1px solid var(--primary-100);
}
.vf-foot-text { margin: 0; font-size: 0.92rem; color: var(--primary-dark); max-width: 38ch; line-height: 1.45; }
.vf-foot-btn { flex: none; }

.vf-limits {
    margin: 0;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* --- La page /verifier --- */
.vf-page-hero { padding: 3.5rem 0 2.5rem; }
.vf-page-hero .vf { max-width: 620px; }
.vf-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.9rem;
}
.vf-page-hero h1 { font-size: 2.6rem; margin-bottom: 0.9rem; max-width: 16ch; }
.vf-page-lede { font-size: 1.05rem; color: var(--text-light); max-width: 54ch; margin-bottom: 1.8rem; }

.vf-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.vf-checklist-item { background: var(--bg-white); padding: 1.25rem 1.4rem; }
.vf-checklist-item h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.vf-checklist-item p { font-size: 0.9rem; color: var(--text-light); line-height: 1.55; }
.vf-checklist-item .vf-ref {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .vf-box { flex-direction: column; }
    .vf-submit { width: 100%; padding: 0.9rem; }
    .vf-page-hero h1 { font-size: 2rem; }
    .vf-report-foot { flex-direction: column; align-items: stretch; }
    .vf-foot-btn { width: 100%; }
}

/* L'exemple du héros : même dessin que le vrai rapport, en retrait.
   `.vf-report` porte `hidden` en HTML ; ici on l'affiche explicitement. */
.vf-report--sample {
    display: block;
    margin-top: 1.25rem;
    box-shadow: var(--shadow-md);
    opacity: 0.92;
}
.vf-report--sample .vf-report-title {
    font-family: var(--font-mono);
    color: var(--text-light);   /* --text-muted mesurait 4,37:1 sur --bg-alt */
}