/* Page système « 17. Installation » (checklist de mise en place) : pensée pour le téléphone — grandes cibles tactiles, une colonne. */
/* Préfixe .ins- ; en-tête commun .kg-page-head (page-head.css). Couleurs d'état : vert = posé / vérifié, orange = en attente, rouge = manquant. */
/* Date: 2026-10-18 ; Version: 1.0.0 ; GSt / Claude ; Création (demande GSt du 18/10), tenue à la largeur d'un téléphone (390 px). */

.ins-wrap { padding: 12px; box-sizing: border-box; color: #eee; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.ins-panel { max-width: 760px; margin: 0 auto; }
.ins-input { background: #151a17; color: #eee; border: 1px solid #2f4f3a; border-radius: 6px; padding: 8px; font-size: 1rem; }
.ins-btn { display: inline-flex; align-items: center; gap: 6px; background: #151a17; color: #eee; border: 1px solid #2f4f3a; border-radius: 6px; padding: 8px 12px; font-size: 0.95rem; cursor: pointer; text-decoration: none; }
.ins-btn:hover { border-color: #C6FF00; }
.ins-notice { margin: 10px 0; padding: 10px; border-radius: 6px; background: rgba(230, 126, 34, 0.15); border: 1px solid #e67e22; color: #ffd58a; }
.ins-titre { margin: 14px 0 8px; font-size: 1rem; color: #C6FF00; }
.ins-routes { display: flex; flex-direction: column; gap: 8px; }
.ins-route { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; text-align: left; background: #0D0F0E; color: #eee; border: 2px solid #2f4f3a; border-radius: 8px; padding: 12px; font-size: 1rem; cursor: pointer; }
.ins-route:hover { border-color: #009513; }
.ins-route-nom { font-weight: 700; }
.ins-route-comptes, .ins-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-autres { margin-top: 12px; }
.ins-autres summary { cursor: pointer; padding: 8px 0; color: #aab; }
.ins-autres .ins-route { margin-top: 8px; }
.ins-chip { font-size: 0.8rem; padding: 2px 8px; border-radius: 10px; border: 1px solid #555; }
.ins-chip.ok { border-color: #2ecc71; color: #2ecc71; }
.ins-chip.attente { border-color: #e67e22; color: #f5b041; }
.ins-chip.ko { border-color: #e74c3c; color: #ff7b6e; }
.ins-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.ins-detail-head h3 { flex: 1 1 100%; margin: 4px 0 0; font-size: 1.1rem; }
.ins-items { display: flex; flex-direction: column; gap: 10px; }
.ins-item { background: #0D0F0E; border: 2px solid #2f4f3a; border-left-width: 6px; border-radius: 8px; padding: 12px; }
.ins-item.etat-placed, .ins-item.etat-checked { border-left-color: #2ecc71; }
.ins-item.etat-missing { border-left-color: #e74c3c; }
.ins-item.etat-aucun, .ins-item.etat-retrieved { border-left-color: #e67e22; }
.ins-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ins-rang { color: #aab; font-weight: 700; }
.ins-item-titre { flex: 1 1 auto; }
.ins-type { font-size: 0.8rem; font-weight: 800; padding: 1px 8px; border-radius: 10px; }
.ins-type.fixe { color: #3498db; border: 2px solid #3498db; }
.ins-type.placer { color: #e67e22; border: 2px dashed #e67e22; }
.ins-item-etat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 0.9rem; }
.ins-etat { font-weight: 700; }
.ins-etat.ok { color: #2ecc71; } .ins-etat.ko { color: #ff7b6e; } .ins-etat.attente { color: #f5b041; } .ins-etat.neutre { color: #aab; }
.ins-dist { color: #aab; }
.ins-note { margin: 8px 0 0; white-space: pre-wrap; color: #ddd; }
.ins-item-media { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.ins-item-media img { width: 110px; height: 82px; object-fit: cover; border-radius: 6px; border: 1px solid #444; display: block; }
.ins-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ins-act { flex: 1 1 30%; min-height: 48px; font-size: 1rem; font-weight: 700; border-radius: 8px; border: 2px solid #2f4f3a; background: #151a17; color: #eee; cursor: pointer; }
.ins-act.actif { border-color: #C6FF00; background: rgba(198, 255, 0, 0.12); }
.ins-act:disabled { opacity: 0.5; }
.ins-wait, .ins-vide { color: #aab; font-style: italic; }
.ins-ko { color: #ff7b6e; }
@media (min-width: 700px) { .ins-wrap { padding: 20px; } }

/* Largeur d'un téléphone (390 px) : rien ne doit déborder — boîtes bordées, cibles qui rétrécissent, titres qui passent à la ligne. */
.ins-wrap, .ins-wrap * { box-sizing: border-box; }
.ins-panel { width: 100%; overflow-x: hidden; }
.ins-input { max-width: 160px; }
.ins-item-head, .ins-item-titre, .ins-route-nom { min-width: 0; overflow-wrap: anywhere; }
.ins-act { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 0.9rem; }