/* =====================================================================
   Page « Vérifier un démarcheur » — styles externalisés (CSP style-src
   stricte, sans 'unsafe-inline'). Reprend l'ancien bloc <style> inline
   + des classes remplaçant les attributs style="" du gabarit.
   ===================================================================== */

.verifier-page { min-height: calc(100vh - 200px); }
.verifier-wrap { padding-bottom: 40px; }

/* --- Cartes de choix de méthode (survol en CSS, sans JS) --- */
.verif-method {
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.verif-method:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
    border-color: var(--vert);
}
.verif-method-icon {
    width: 72px; height: 72px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
}
.verif-method-icon i { font-size: 2.2rem; color: #fff; }
.verif-method-icon--qr  { background: linear-gradient(135deg, var(--vert-d) 0%, var(--vert-l) 100%); }
.verif-method-icon--num { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); }
.verif-method-title { color: var(--text-color); margin-bottom: 12px; }
.verif-method-desc  { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.verif-method-warning {
    color: #856404; background: #fff3cd; border-radius: 8px;
    padding: 8px 12px; font-size: 0.85rem; margin-top: 10px; margin-bottom: 0;
}
@media (min-width: 768px) {
    .verif-method { padding: 40px 24px; }
    .verif-method-icon { width: 80px; height: 80px; }
    .verif-method-icon i { font-size: 2.5rem; }
}

/* --- Indicateur de chargement --- */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* --- Scanner QR --- */
#qr-reader { border: none !important; }
#qr-reader video { border-radius: 12px; }
#qr-reader__scan_region { background: rgba(27, 107, 58, 0.1) !important; }
#qr-reader__dashboard_section_csr span { color: var(--vert) !important; }
.verif-qr-zone {
    width: 100%; max-width: 500px; margin: 0 auto;
    border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* --- Largeurs de conteneur --- */
.verif-wrap-600 { max-width: 600px; }
.verif-wrap-700 { max-width: 700px; }
.verif-wrap-800 { max-width: 800px; }

/* --- En-têtes / éléments de section --- */
.verif-eyebrow-center { text-align: center; margin-bottom: 32px; }
.verif-eyebrow-center-sm { text-align: center; margin-bottom: 20px; }
.verif-section-hint { text-align: center; color: var(--text-muted); margin-bottom: 20px; }
.verif-back-btn { margin-bottom: 24px; }
.verif-card-pad { padding: 32px; }

/* --- Formulaire saisie manuelle --- */
.verif-form { display: flex; gap: 12px; flex-direction: column; }
.verif-form-group { margin-bottom: 0; }
.verif-form-label { font-weight: 600; margin-bottom: 8px; display: block; }
.verif-input-row { display: flex; gap: 12px; }
.verif-input { flex: 1; padding: 14px 16px; font-size: 16px; border-radius: 8px; border: 2px solid var(--gris-b); }
.verif-submit { white-space: nowrap; padding: 14px 24px; }
.verif-feedback { display: block; margin-top: 8px; color: #dc3545; }

/* --- États de chargement / erreur --- */
.verif-loading { text-align: center; margin-top: 20px; color: var(--vert); }
.verif-loading-icon { font-size: 1.5rem; }
.verif-error-box {
    margin-top: 24px; padding: 20px; background: #f8d7da;
    border-radius: 12px; border-left: 4px solid #dc3545;
}
.verif-error-row { display: flex; align-items: center; gap: 12px; color: #721c24; }
.verif-error-row > i { font-size: 1.5rem; }
.verif-error-msg { margin: 4px 0 0 0; }
.verif-retry-btn { margin-top: 12px; }

/* --- Bandeau de résultat --- */
.verif-result-head { text-align: center; margin-bottom: 32px; }
.verif-result-banner {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 32px; border-radius: 12px;
}
.verif-result-banner > i { font-size: 2rem; }
.verif-result-text { text-align: left; }
.verif-result-text strong { font-size: 1.1rem; }
.verif-result-text p { margin: 0; font-size: 0.9rem; }
.verif-result-banner--valide   { background: #d1e7dd; color: #0f5132; }
.verif-result-banner--expiree  { background: #fff3cd; color: #664d03; }
.verif-result-banner--invalide { background: #f8d7da; color: #842029; }

/* --- Grille des cartes d'information --- */
.verif-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px; max-width: 700px; margin: 0 auto;
}
.verif-card { padding: 24px; }
.verif-card-title { margin-bottom: 16px; }

/* --- Tables d'information --- */
.verif-table { width: 100%; font-size: 0.95rem; }
.verif-table tr { border-bottom: 1px solid var(--gris-b); }
.verif-table tr:last-child { border-bottom: 0; }
.verif-table td { padding: 10px 0; }
.verif-label { color: var(--text-muted); }
.verif-value { text-align: right; font-weight: 600; }
.verif-value-plain { text-align: right; }
.verif-value-mono { text-align: right; font-weight: 600; font-family: monospace; }
.verif-tel { color: var(--vert); text-decoration: none; }

/* --- Pastilles de statut / type --- */
.verif-pill { padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; color: #fff; }
.verif-pill--valide   { background: #198754; }
.verif-pill--expiree  { background: #fd7e14; }
.verif-pill--invalide { background: #dc3545; }
.verif-pill--physique { background: var(--vert); }
.verif-pill--morale   { background: #fd7e14; }

/* --- Actions --- */
.verif-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Utilitaires ponctuels --- */
.verif-mt-20 { margin-top: 20px; }
.verif-stop-wrap { text-align: center; margin-top: 20px; }

/* --- Message d'erreur caméra (injecté par le scanner) --- */
.verif-cam-error {
    padding: 24px; text-align: center; color: #842029;
    background: #f8d7da; border-radius: 8px; line-height: 1.5;
}
.verif-cam-error-hint { color: #555; }