/* captures.css — Brief Capture : boîte « Captures à classer », page « Relier Brief Capture », encadré « Capture web » des notes.
   Charte : h1 1,85rem + icône #4f8cff + sous-titre ; boutons jamais pleine largeur. */
.cap-page { max-width: 1100px; margin: 0 auto; padding: 8px 0 40px; }
.cap-h1 { font-size: 1.85rem; margin: 0 0 4px; display: flex; align-items: center; gap: 12px; }
.cap-h1 i { color: #4f8cff; }
.cap-sous-titre { color: #64748b; margin: 0 0 22px; max-width: 760px; }
.cap-carte { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; }
.cap-autoriser .cap-carte { max-width: 640px; }
.cap-note { color: #64748b; font-size: .9rem; }
.cap-vide { text-align: center; color: #64748b; }
.cap-vide i { font-size: 2rem; color: #10b981; }
.cap-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cap-capture { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: opacity .8s; }
.cap-capture.is-partie { opacity: 0; }
.cap-vignette { display: block; background: #f1f5f9; max-height: 220px; overflow: hidden; }
.cap-vignette img { width: 100%; display: block; }
.cap-corps { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cap-ref { font: 600 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; color: #475569; }
.cap-titre { font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.cap-url { font-size: .82rem; color: #2563eb; overflow-wrap: anywhere; }
.cap-date { font-size: .82rem; color: #64748b; }
.cap-commentaire { margin: 4px 0 0; font-size: .9rem; color: #334155; }
.cap-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cap-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 7px 14px; border-radius: 8px; border: 1px solid #cbd5e1;
    background: #fff; color: #334155; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.cap-btn:hover { background: #f8fafc; }
.cap-btn:disabled { opacity: .6; cursor: wait; }
.cap-btn-bleu { background: #4f8cff; border-color: #4f8cff; color: #fff; }
.cap-btn-bleu:hover { background: #3b7af0; }
.cap-btn-rouge { color: #b91c1c; border-color: #fecaca; }
.cap-btn-rouge.is-arme { background: #dc2626; border-color: #dc2626; color: #fff; }
.cap-rangement { margin-top: 6px; }
.cap-recherche { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: .9rem; }
.cap-resultats { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.cap-resultat { width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 6px; cursor: pointer;
    display: flex; flex-direction: column; }
.cap-resultat:hover, .cap-resultat:focus-visible { background: #eef4ff; }
.cap-resultat small { color: #64748b; }
.cap-aucune { color: #64748b; font-size: .88rem; padding: 6px 8px; }
.cap-message { margin: 4px 0 0; font-size: .86rem; min-height: 1em; }
.cap-message.is-ok { color: #047857; }
.cap-message.is-erreur { color: #b91c1c; }

/* Page de présentation /extension */
.cap-presentation { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cap-presentation h2 { font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.cap-presentation h2 i { color: #4f8cff; }
.cap-presentation ul { margin: 0; padding-left: 18px; color: #334155; }
.cap-presentation li { margin-bottom: 6px; }
.cap-presentation kbd { font: 600 .75rem ui-monospace, Menlo, monospace; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: #f8fafc; }

/* Encadré « Capture web » d'une note de tâche (task_view.php) */
.capture-web { margin-top: 8px; border: 1px solid #c7d7fe; background: #f5f8ff; border-radius: 10px; padding: 10px 12px; font-size: .86rem; color: #334155; }
.capture-web-tete { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1e3a8a; }
.capture-web-tete i { color: #4f8cff; }
.capture-web a { color: #2563eb; overflow-wrap: anywhere; }
.capture-web-ligne { margin-top: 3px; overflow-wrap: anywhere; }
.capture-web-empreinte { font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; border: 0; background: none; padding: 0; color: #475569; text-align: left; }
.capture-web-verifier { margin-top: 6px; }
.capture-web-resultat.is-ok { color: #047857; font-weight: 600; }
.capture-web-resultat.is-erreur { color: #b91c1c; font-weight: 600; }

/* 06/10 : page « Captures d'écrans » vide = invitation à installer l'extension (texte à gauche, visuel à droite) */
.cap-invite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; padding: 26px; text-align: left; }
.cap-invite i { font-size: 1em; color: inherit; } /* annule .cap-vide i : icônes à la taille du texte */
.cap-invite-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: .78rem; font-weight: 700; margin: 0 0 12px; }
.cap-invite h2 { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.3; color: #0f172a; }
.cap-invite p { color: #334155; margin: 0 0 14px; line-height: 1.55; }
.cap-liste { list-style: none; margin: 0 0 16px; padding: 0; color: #334155; }
.cap-liste li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; line-height: 1.5; }
.cap-liste li i { flex: 0 0 auto; margin-top: 4px; font-size: .9rem; color: #10b981; }
.cap-invite .cap-actions { margin: 0 0 12px; }
.cap-invite .cap-btn-bleu, .cap-invite .cap-btn-bleu i { color: #fff; }
.cap-invite .cap-note { margin: 0; }
.cap-invite-visuel img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 23, 42, .14); }
@media (max-width: 900px) { .cap-invite { grid-template-columns: 1fr; gap: 18px; } .cap-invite-visuel { order: -1; } }

/* ── Rangement dans un voyage (07/10/2026) : groupes de résultats et panneau catégorie + étape ── */
.cap-groupe{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;padding:8px 4px 2px;list-style:none}
.cap-resultat.is-voyage span::before{content:"\f5c1";font-family:"Font Awesome 6 Free";font-weight:900;color:#4f8cff;margin-right:6px;font-size:.85em}
.cap-voyage{margin-top:10px;padding:12px;border:1px solid #c7d7ff;border-radius:10px;background:#f3f7ff}
.cap-voyage-titre{display:flex;align-items:center;gap:8px;font-size:.92rem;color:#1e293b;margin-bottom:10px}
.cap-voyage-titre i{color:#4f8cff}
.cap-voyage-titre b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap-lien{background:none;border:0;padding:0;color:#4f8cff;font:inherit;font-size:.82rem;cursor:pointer;text-decoration:underline}
.cap-voyage-champs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.cap-voyage-champs label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:700;color:#475569}
.cap-voyage-champs label small{font-weight:400;color:#94a3b8}
.cap-voyage-champs select{font:inherit;font-size:.88rem;padding:7px 9px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#1e293b;min-width:0}
@media (max-width:640px){.cap-voyage-champs{grid-template-columns:1fr}}
/* Constats horodatés (Brief Capture 2, lot 1, 11/10/2026) — /verifier-empreinte, /constats, /constats/<id> */
.cst-page .cap-carte { margin-top: 14px; }
.cst-depot { display: flex; align-items: center; gap: 12px; padding: 18px; border: 2px dashed #cbd5e1; border-radius: 12px; cursor: pointer; color: #334155; line-height: 1.4; }
.cst-depot i { font-size: 1.6rem; color: #4f8cff; }
.cst-depot:hover, .cst-depot.cst-survol { border-color: #4f8cff; background: #f5f9ff; }
.cst-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cst-form input { flex: 1 1 320px; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.cst-erreur { color: #b91c1c; margin: 8px 0 0; }
.cst-erreur[hidden] { display: none; }
.cst-resultat h2 { font-size: 1.1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.cst-ok h2 i { color: #0d9f6e; }
.cst-alerte h2 i, .cst-absent h2 i { color: #b91c1c; }
.cst-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: .9rem; }
.cst-dl dt { color: #64748b; font-weight: 600; }
.cst-dl dd { margin: 0; word-break: break-word; }
.cst-hash { font-size: .78rem; word-break: break-all; }
.cst-filtre { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cst-filtre select { width: auto; padding: 6px 10px; border-radius: 8px; border: 1px solid #cbd5e1; }
.cst-tableau { overflow-x: auto; }
.cst-tableau table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cst-tableau th, .cst-tableau td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.cst-tableau th { color: #64748b; font-weight: 600; }
.cst-page-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-pages { display: flex; gap: 10px; margin-top: 10px; }
.cst-sceau-ok { color: #0d9f6e; font-weight: 600; }
.cst-sceau-ko { color: #b91c1c; font-weight: 600; }
@media (max-width: 600px) { .cst-dl { grid-template-columns: 1fr; } .cst-dl dt { margin-top: 6px; } }

/* Page /extension — Brief Capture 2 (11/10/2026) : bandeau « en cours de validation », aperçus, carte des limites */
.cap-nouveau { margin: 0 0 20px; padding: 10px 14px; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: .92rem; display: flex; gap: 10px; align-items: flex-start; }
.cap-nouveau i { color: #4f8cff; margin-top: 3px; }
.cap-apercus { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 22px 0; }
.cap-apercus figure { margin: 0; }
.cap-apercus img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 6px 20px rgba(15, 23, 42, .08); }
.cap-apercus figcaption { color: #64748b; font-size: .85rem; margin-top: 6px; }
.cap-limites { margin-top: 4px; }
.cap-limites h2 { font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.cap-limites h2 i { color: #4f8cff; }
.cap-limites ul { margin: 0 0 8px; padding-left: 18px; color: #334155; }
.cap-limites li { margin-bottom: 6px; }
/* Encart vidéo « tutoriel » (partials/video_tuto.php, 13/10/2026) : texte à gauche, lecteur à droite ; refermable sur /captures. */
.cap-tuto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: center; margin: 0 0 22px; padding: 22px 26px;
    border-radius: 14px; background: linear-gradient(135deg, #0f172a, #1e3a8a 70%, #312e81); color: #e2e8f0; --bp-rayon: 10px; }
.cap-tuto[hidden] { display: none; }
.cap-tuto h2 { margin: 10px 0 8px; font-size: 1.35rem; color: #fff; }
.cap-tuto p { margin: 0; color: #c7d2e6; font-size: .95rem; line-height: 1.5; }
.cap-tuto .cap-invite-tag { background: rgba(255,255,255,.12); color: #fff; }
.cap-tuto-liens { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px !important; font-size: .88rem; }
.cap-tuto-liens a { color: #bfdbfe; text-decoration: none; }
.cap-tuto-liens a:hover { text-decoration: underline; }
.cap-tuto-fermer { border: 0; background: none; padding: 0; color: #94a3b8; font: inherit; font-size: .88rem; cursor: pointer; }
.cap-tuto-fermer:hover { color: #fff; }
.cap-tuto-ecran { min-width: 0; box-shadow: 0 18px 40px rgba(2, 6, 23, .45); border-radius: 10px; }
@media (max-width: 860px) { .cap-tuto { grid-template-columns: 1fr; gap: 16px; padding: 18px; } .cap-tuto-ecran { order: -1; } }