/* MPYBS FORMS — feuille de style commune (externalisée). * Emplacement cible : /volume1/web/forms/public/assets/style.css * * Base = style d'origine des pages (polices système), rendu affiné. * Deux contextes distingués par la classe du : * - body.page-login → page de connexion * - body.page-app → application (recherche + fiche) */ /* ------------------------------------------------------------------ */ /* Police Poppins — DÉSACTIVÉE pour l'instant. */ /* À réactiver plus tard, une fois les graisses et le rendu ajustés */ /* (fichiers dans assets/fonts/). Pour basculer : */ /* 1) décommenter les @font-face ci-dessous */ /* 2) dans :root, remplacer --police par la variante « Poppins » */ /* ------------------------------------------------------------------ */ /* @font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap; src:url('fonts/poppins-light-webfont.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/poppins-regular-webfont.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/poppins-medium-webfont.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/poppins-semibold-webfont.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/poppins-bold-webfont.woff2') format('woff2')} */ /* ------------------------------------------------------------------ */ /* Base commune */ /* ------------------------------------------------------------------ */ :root{ --bordeaux:#7a1e2b;--nuit:#1c2433;--gris:#667085;--bord:#e4e7ec;--fond:#f5f6f8; --pied:#7a7a7a; /* Bleus « style iOS » — d'après les captures. Ajustables ici en un seul endroit. */ --focus-ring:#007aff; /* #5ac8fa contour clair du champ actif (bleu clair) */ --focus-halo:rgba(0,122,255,0.50); /* rgba(9,132,255,1.00); lueur translucide autour du champ */ --titre-liste:#007aff; /* titre des résultats (bleu clair + foncé) */ /* Icône flèche « retour » (fichier dans assets/icons/) */ --ico-arrow:url('icons/arrow.svg'); /* Police active = système (rendu net). Variante Poppins gardée en commentaire. */ --police:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* --police:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; */ } *{box-sizing:border-box} body{ font-family:var(--police);color:var(--nuit);margin:0; /* Rendu des polices affiné */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* Champs de saisie — focus « iOS » commun à toutes les pages */ input[type=text],input[type=password],input:not([type]),textarea{ font-family:inherit; -webkit-appearance:none;appearance:none; -webkit-tap-highlight-color:transparent; transition:border-color .18s ease, box-shadow .18s ease; background-color: #FFFFFF !important; } input[type=text]:focus,input[type=password]:focus,input:not([type]):focus,textarea:focus{ outline:none; border-color:var(--focus-ring); box-shadow:0 0 0 2px var(--focus-halo); background-color: #FFFFFF !important; } /* Fond blanc pour l'autocomplétion Chrome / Edge */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill{ background-color:#fff !important; -webkit-box-shadow:0 0 0 1000px #fff inset !important; box-shadow:0 0 0 1000px #fff inset !important; -webkit-text-fill-color:inherit !important; } /* Fond blanc pour l'autocomplétion DuckDuckGo */ input.ddg-autofilled, textarea.ddg-autofilled{ background:#fff !important; background-color:#fff !important; -webkit-box-shadow:0 0 0 1000px #fff inset !important; box-shadow:0 0 0 1000px #fff inset !important; } /* Pied de page — FIXÉ en bas, sur toutes les pages */ .site-footer{ position:fixed;left:0;right:0;bottom:0;z-index:10; text-align:center;color:var(--pied);font-size:.91rem; padding:9px 12px;background:var(--fond);border-top:1px solid var(--bord); } /* Encart d'erreur / info partagés */ .err{background:#fdecec;color:#b42318;border-radius:10px;padding:10px;font-size:.9rem} .muted{color:var(--gris)} /* ================================================================== */ /* PAGE DE CONNEXION (body.page-login) */ /* ================================================================== */ body.page-login{ background:var(--fond);min-height:100vh; display:flex;align-items:center;justify-content:center; padding:16px 16px 64px; } .page-login main.card{ background:#fff;border:1px solid var(--bord);border-radius:16px;padding:28px;width:100%;max-width:360px; box-shadow:0 6px 24px rgba(16,24,40,.06);text-align:center; } .page-login h1{color:var(--bordeaux);font-size:2rem;margin:0} .page-login .sub{color:var(--gris);font-size:.9rem;margin:.2rem 0 1.2rem} .page-login label{display:block;text-align:left;font-size:.85rem;margin:.7rem 0 .25rem;color:var(--nuit)} .page-login input[type=text], .page-login input[type=password], .page-login input:not([type]){width:100%;padding:11px;border:1px solid #cfd4dc;border-radius:12px;font-size:1rem} .page-login button{margin-top:18px;width:100%;padding:12px;border:0;border-radius:12px;background:var(--bordeaux); color:#fff;font-weight:600;font-size:1rem;cursor:pointer;font-family:inherit} .page-login .err{margin-bottom:12px} .page-login .note{background:#e7f0fb;color:#1b4f8a;border-radius:9px;padding:9px;font-size:.85rem;margin:.6rem 0} .page-login .chk{display:flex;align-items:center;gap:8px;font-size:.85rem;margin-top:.6rem} .page-login .chk input{width:auto} .page-login details{margin-top:.8rem;text-align:left} .page-login summary{cursor:pointer;color:var(--gris);font-size:.85rem} input#passwd { background-color: white; } /* ================================================================== */ /* APPLICATION (body.page-app) */ /* ================================================================== */ body.page-app{background:var(--fond);padding-bottom:48px} .topbar{background:var(--nuit);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 16px} .topbar button{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:8px; padding:7px 12px;cursor:pointer;font-size:.85rem;font-family:inherit} .page-app main{max-width:640px;margin:20px auto;padding:0 14px} .page-app h1{color:var(--bordeaux);font-size:1.1rem;margin:.4rem 0} #q{width:100%;padding:13px;border:1px solid #cfd4dc;border-radius:12px;font-size:1.05rem} .hint{color:var(--gris);font-size:.82rem;margin:.4rem 2px} .list{margin-top:8px;display:flex;flex-direction:column;gap:8px} .row{background:#fff;border:1px solid var(--bord);border-radius:11px;padding:12px 14px;cursor:pointer; text-align:left;font-family:inherit} .row:hover{border-color:var(--bordeaux)} .row .d{font-weight:700;color:var(--titre-liste)} .row .s{color:var(--gris);font-size:.88rem;margin-top:2px} .badge{font-size:.72rem;color:#1b7a3d} .card{background:#fff;border:1px solid var(--bord);border-radius:14px;padding:18px;margin-top:8px} .card h2{font-size:1.05rem;margin:.1rem 0 .2rem} .kv{color:var(--gris);font-size:.9rem;margin:.15rem 0} .qrbox{border:1px solid var(--bord);border-radius:12px;padding:14px;margin:16px auto;max-width:260px;text-align:center;background:#fff} .qrbox svg{width:220px;height:220px} .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;justify-content:center} .actions button,.actions a{padding:10px 16px;border-radius:10px;border:1px solid var(--bordeaux); background:#fff;color:var(--bordeaux);font-weight:600;font-size:.92rem;cursor:pointer;text-decoration:none;font-family:inherit} .actions .primary{background:var(--bordeaux);color:#fff} .actions button[disabled]{opacity:.4;border-color:#cfd4dc;color:#98a2b3;cursor:not-allowed} .msg{width:100%;min-height:200px;margin-top:8px;padding:11px;border:1px solid #cfd4dc;border-radius:12px;font:inherit;resize:vertical} .msglbl{color:var(--gris);font-size:.85rem;margin-top:14px} .back{background:none;border:0;color:var(--gris);cursor:pointer;font-size:1rem;padding:0;margin-bottom:6px; font-family:inherit;display:inline-flex;align-items:center;gap:.5em} /* Fleche retour : image (assets/icons/arrow.svg) en masque -> couleur du texte, nette et agrandie */ .back-ico{ width:1.1em;height:1em;flex:0 0 auto; background-color:currentColor; -webkit-mask:var(--ico-arrow) no-repeat center/contain; mask:var(--ico-arrow) no-repeat center/contain; } .flash{text-align:center;display:block}