/* ──────────────────────────────────────────────────────────── * Ngento — Logo Studio — brique « Photo d'identité » (En-dev) * Panneau AUTONOME, gated super-admin. Aucun style de l'éditeur touché. * ref:NGENTOJFP-1f4d9e7a2b6c4f80 * ──────────────────────────────────────────────────────────── */ /* Lanceur discret, coin bas-gauche, marqué En-dev. */ #idphoto-launch { position: fixed; left: 14px; bottom: 14px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; background: #171a21; color: #e7ebf2; border: 1px solid #2a2f3a; font: 13px/1 system-ui, Segoe UI, Roboto, sans-serif; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); } #idphoto-launch:hover { border-color: #4f8cff; } #idphoto-launch .idp-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #9db4e6; border: 1px solid #2a3a5a; border-radius: 5px; padding: 1px 5px; } #idphoto-launch svg { width: 18px; height: 18px; } /* Overlay plein écran (rattaché à documentElement pour éviter le piège ng-frame transform sur qui casse position:fixed). */ .idp-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(8,10,14,.72); display: flex; align-items: stretch; justify-content: center; font: 15px/1.45 system-ui, Segoe UI, Roboto, sans-serif; color: #e7ebf2; } .idp-modal { background: #0f1115; width: min(860px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: auto; } .idp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #2a2f3a; position: sticky; top: 0; background: #0f1115; } .idp-head h2 { font-size: 16px; margin: 0; } .idp-head .idp-sub { color: #9aa4b2; font-size: 12px; margin-top: 2px; } .idp-close { background: transparent; color: #e7ebf2; border: 1px solid #2a2f3a; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 18px; } .idp-body { padding: 16px; } .idp-stage { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; max-height: 52vh; margin: 0 auto; } .idp-stage video, .idp-stage canvas.idp-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Aperçu réglé affiché DANS la scène (à la place du rond) après capture. */ .idp-stage canvas.idp-result { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0d11; z-index: 2; } .idp-guide { position: absolute; inset: 0; pointer-events: none; } /* Pastille d'état du suivi (indications live + vert quand c'est bon). */ .idp-pill { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; pointer-events: none; background: rgba(15,17,21,.82); color: #e7ebf2; border: 1px solid #2a3a5a; font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 92%; box-shadow: 0 4px 16px rgba(0,0,0,.35); } .idp-pill.ok { background: rgba(16,44,30,.9); border-color: #22c55e; color: #7ff0b0; } .idp-pill.warn { background: rgba(46,36,14,.9); border-color: #e0a13a; color: #f0cf8a; } .idp-pill.bad { background: rgba(46,18,14,.9); border-color: #e0603a; color: #f0a58a; } .idp-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #9aa4b2; margin-left: auto; } /* Sélecteur de fond (détourage). */ .idp-bg { margin-top: 14px; } .idp-bg-title { font-size: 12px; color: #9aa4b2; margin-bottom: 8px; } .idp-bg-row { display: flex; gap: 10px; flex-wrap: wrap; } .idp-sw { width: 68px; height: 58px; border-radius: 10px; cursor: pointer; border: 2px solid #2a2f3a; background: #d9dde1; position: relative; padding: 0; display: flex; align-items: flex-end; justify-content: center; } .idp-sw.sel { border-color: #4f8cff; box-shadow: 0 0 0 2px rgba(79,140,255,.35); } .idp-sw-real { background: repeating-conic-gradient(#3a3f4a 0 25%, #2a2f3a 0 50%) 0 0 / 14px 14px; } .idp-sw-lbl { font-size: 10px; color: #0f1115; background: rgba(255,255,255,.78); border-radius: 0 0 8px 8px; width: 100%; padding: 2px 0; text-align: center; } .idp-sw-real .idp-sw-lbl { color: #e7ebf2; background: rgba(15,17,21,.7); } .idp-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .idp-btn { display: inline-flex; align-items: center; gap: 6px; background: #171a21; color: #e7ebf2; border: 1px solid #2a2f3a; border-radius: 10px; padding: 10px 14px; font-size: 14px; cursor: pointer; } .idp-btn svg { width: 16px; height: 16px; flex: none; } /* Colonne d'actions verticale, compacte, poussée à DROITE de la planche. flex 0 1 190px : ne grandit pas, peut rétrécir sur écran étroit (jamais de passage sous la planche). */ .idp-actcol { display: flex; flex-direction: column; gap: 8px; flex: 0 1 190px; min-width: 0; margin-left: auto; } .idp-actcol .idp-btn { width: 100%; justify-content: flex-start; } .idp-btn.idp-ib { padding: 9px 12px; } .idp-btn.primary { background: #4f8cff; border-color: #4f8cff; color: #fff; } .idp-btn.idp-ghost { background: transparent; margin-left: auto; } .idp-btn.idp-ghost.on { border-color: #4f8cff; color: #9db4e6; } .idp-btn:disabled { opacity: .45; cursor: not-allowed; } /* Rangée 2 colonnes NON cassante : planche (gauche) + actions (droite). */ .idp-extra { display: flex; gap: 12px; flex-wrap: nowrap; align-items: flex-start; margin-top: 14px; } .idp-sheetcard { flex: none; width: 132px; } .idp-extra .idp-card canvas { border: 1px solid #2a2f3a; border-radius: 8px; background: #fff; } .idp-ctl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9aa4b2; min-width: 140px; flex: 1; } .idp-ctl input[type=range] { width: 100%; } .idp-panel { background: #171a21; border: 1px solid #2a2f3a; border-radius: 12px; padding: 14px; margin-top: 16px; } .idp-results { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .idp-card { text-align: center; } .idp-card canvas { border: 1px solid #2a2f3a; border-radius: 8px; background: #fff; } .idp-muted { color: #9aa4b2; font-size: 12px; } .idp-hints { font-size: 13px; text-align: left; margin-top: 12px; } .idp-hint { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed #2a2f3a; } .idp-ok { color: #3fb37f; } .idp-warn { color: #e0a13a; } .idp-bad { color: #e0603a; } .idp-note { font-size: 12px; color: #9aa4b2; margin-top: 14px; } /* Services d'impression à proximité (liste géolocalisée). */ .idp-find { margin-top: 12px; } .idp-find-msg { color: #9aa4b2; font-size: 13px; padding: 6px 0; } .idp-find-title { font-weight: 600; font-size: 13px; margin: 6px 0 8px; } .idp-find-list { display: flex; flex-direction: column; gap: 6px; } .idp-find-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid #2a2f3a; border-radius: 9px; text-decoration: none; color: #e7ebf2; background: #171a21; } .idp-find-item:hover { border-color: #4f8cff; } .idp-find-name { font-weight: 600; font-size: 14px; } .idp-find-meta { font-size: 12px; color: #9aa4b2; } .idp-find-src { font-size: 11px; color: #7c8794; margin-top: 8px; line-height: 1.4; } /* Carte des points d'impression (Leaflet). */ .idp-map { height: 260px; border-radius: 10px; overflow: hidden; margin: 8px 0; } .idp-map .leaflet-popup-content a { color: #2563eb; } /* Formulaire « recevoir la planche chez moi » (livraison à domicile). */ .idp-deliver { max-width: 460px; } .idp-deliver-price { font-weight: 700; color: #a855f7; font-size: 14px; margin: 2px 0 12px; } /* Choix de l'USAGE : c'est lui qui décide du papier (homologué ou ordinaire), donc du prix ET de la validité. Deux options, lisibles, jamais présélectionnées par le prix. */ .idp-usage { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; } .idp-usage-opt { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; background: #0f1115; border: 1px solid #2a2f3a; border-radius: 8px; padding: 9px 11px; } .idp-usage-opt:hover { border-color: #3b4250; } .idp-usage-opt input { margin-top: 3px; flex: 0 0 auto; } .idp-usage-opt b { color: #e7ebf2; font-size: 13px; font-weight: 700; } .idp-usage-hint { display: block; font-size: 11px; color: #7c8794; line-height: 1.4; margin-top: 2px; } .idp-df { display: flex; flex-direction: column; gap: 8px; } .idp-df-row { display: flex; flex-direction: column; gap: 3px; } .idp-df-label { font-size: 12px; color: #9aa4b2; } .idp-df-input { background: #0f1115; color: #e7ebf2; border: 1px solid #2a2f3a; border-radius: 8px; padding: 9px 11px; font-size: 14px; width: 100%; } .idp-df-input:focus { outline: none; border-color: #4f8cff; } .idp-pay { width: 100%; justify-content: center; margin-top: 12px; }