/* MPYBS — feuille de style commune (externalisée). * Emplacements cibles : * /volume1/web/forms/public/assets/style.css (MPYBS FORMS) * /volume1/web/quitus/public/assets/style.css (MPYBS QUITUS) * * Base = style d'origine des pages (polices système), rendu affiné. * Contextes distingués par la classe du : * - body.page-login → page de connexion * - body.page-app → application (recherche + fiche) * - body.page-quitus → page publique Quitus (AJOUT, même charte) */ /* ------------------------------------------------------------------ */ /* 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} /* ================================================================== */ /* PAGE QUITUS PUBLIQUE (body.page-quitus) — AJOUT */ /* Même charte : mêmes variables, même bandeau, même pied fixé. */ /* ================================================================== */ body.page-quitus{background:var(--fond);padding-bottom:56px} /* [RÉGLAGE] HAUTEUR DU BANDEAU — alignée sur celle de MPYBS FORMS. Sur forms.mpybs.fr le bandeau contient un bouton « Se déconnecter » qui le fait respirer ; ici il n'y a qu'un texte, il était donc plus plat. On impose la même hauteur. Ajuste cette valeur si besoin. */ .page-quitus .topbar{min-height:56px} .page-quitus .topbar strong{font-size:1rem} .page-quitus main{max-width:640px;margin:18px auto;padding:0 14px} /* [RÉGLAGE] TITRE — même taille que le h1 de MPYBS FORMS (1.1rem). Le 3e chiffre de "margin" = l'espace SOUS le titre. */ .page-quitus h1{color:var(--bordeaux);font-size:1.1rem;margin:.2rem 0 .75rem} .page-quitus .sub{color:var(--gris);font-size:.88rem;margin:0 0 .6rem} /* Libellés et champs */ .page-quitus label.f{display:block;font-size:.85rem;margin:.95rem 0 .3rem;color:var(--nuit);font-weight:600} .page-quitus .req{color:var(--bordeaux)} .page-quitus input[type=text], .page-quitus input[type=date], .page-quitus textarea{ width:100%;padding:11px;border:1px solid #cfd4dc;border-radius:12px;font-size:1rem;font-family:inherit; } /* Champ date : sur iOS/Android il garde une largeur intrinsèque et déborde du cadre. On neutralise l'habillage natif et on le force à tenir dans la boîte. */ .page-quitus input[type=date]{ -webkit-appearance:none;appearance:none; min-width:0;max-width:100%; background-color:#fff; height:44px;line-height:normal; } .page-quitus input[type=date]::-webkit-date-and-time-value{ text-align:left; margin:0; } .page-quitus input[type=date]::-webkit-calendar-picker-indicator{ margin-left:auto; } .page-quitus textarea{min-height:110px;resize:vertical} /* Champs préremplis, non modifiables : visuellement « figés » */ .page-quitus input[readonly]{ background:#eef1f4 !important;color:var(--gris);border-color:var(--bord); } .page-quitus input[readonly]:focus{box-shadow:none;border-color:var(--bord)} .page-quitus .help{color:var(--gris);font-size:.8rem;margin:.25rem 2px 0} /* Check-list */ .page-quitus .cl{display:flex;flex-direction:column;gap:2px;margin-top:.3rem} .page-quitus .cl label{ display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--bord); border-radius:11px;padding:13px 14px;font-size:.94rem;cursor:pointer;line-height:1.4; } /* [RÉGLAGE] TAILLE DES CASES À COCHER — confortables au pouce, sans excès. Change les deux valeurs ensemble (width et height). */ .page-quitus .cl input{ width:20px;height:20px;margin:0;flex:0 0 auto; accent-color:var(--bordeaux); -webkit-appearance:auto;appearance:auto; } /* Signature */ .page-quitus .sig-state{color:var(--gris);font-size:.8rem;margin:.3rem 2px 0} .page-quitus canvas.sig{ width:100%;height:190px;display:block;background:#fff; border:1px solid #cfd4dc;border-radius:12px;touch-action:none;cursor:crosshair; } .page-quitus .sig-note{color:var(--gris);font-size:.8rem;margin:.5rem 2px 0;font-style:italic} .page-quitus .sig-clear{ margin-top:8px;padding:8px 14px;border-radius:10px;border:1px solid var(--bord); background:#fff;color:var(--gris);font-size:.85rem;cursor:pointer;font-family:inherit; } /* Photos */ /* [RÉGLAGE] BOUTON « Choisir les fichiers » — même gabarit que « Effacer la signature » : même hauteur, même arrondi, même bordure, même police. Sa COULEUR native n'est volontairement pas touchée (aucun background ni color ici). Pour l'ajuster, garde ces valeurs identiques à .sig-clear. */ .page-quitus input[type=file]{ font-family:inherit;font-size:.85rem;color:var(--gris);max-width:100%; } .page-quitus input[type=file]::file-selector-button{ padding:8px 14px;border:1px solid var(--bord);border-radius:10px; font-size:.85rem;font-family:inherit;cursor:pointer;margin-right:10px; } /* Même règle pour les Safari/anciens Chrome (le préfixe ne peut pas être fusionné). */ .page-quitus input[type=file]::-webkit-file-upload-button{ padding:8px 14px;border:1px solid var(--bord);border-radius:10px; font-size:.85rem;font-family:inherit;cursor:pointer;margin-right:10px; } .page-quitus .ph-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .page-quitus .ph{position:relative} .page-quitus .ph img{ width:78px;height:78px;object-fit:cover;border-radius:9px;border:1px solid var(--bord);display:block; } /* Croix pour retirer une photo */ .page-quitus .ph-del{ position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%; border:1px solid var(--bord);background:#fff;color:var(--bordeaux); font-size:16px;line-height:1;cursor:pointer;padding:0;font-family:inherit; box-shadow:0 1px 4px rgba(16,24,40,.15); } .page-quitus .ph-count{color:var(--gris);font-size:.8rem;margin-top:8px} /* Bouton d'envoi */ .page-quitus button.submit{ margin-top:22px;width:100%;padding:14px;border:0;border-radius:12px;background:var(--bordeaux); color:#fff;font-weight:600;font-size:1.02rem;cursor:pointer;font-family:inherit; } .page-quitus button.submit[disabled]{opacity:.5;cursor:not-allowed} /* Page de message (lien expiré, déjà rempli, merci) */ body.page-quitus.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px 16px 64px} .page-quitus .msgcard{ background:#fff;border:1px solid var(--bord);border-radius:16px;padding:28px;width:100%;max-width:420px; box-shadow:0 6px 24px rgba(16,24,40,.06);text-align:center; } .page-quitus .msgcard h1{margin:0 0 .5rem} /* Avis Google — DANS le formulaire, sous le bouton. Le libellé reprend le style des libellés de champ (classe .f, comme « Nom du signataire »). L'image est centrée et bornée pour ne jamais déborder du cadre du formulaire. */ .page-quitus .avis{margin-top:20px} .page-quitus .avis-qr{ display:block;margin:8px auto 0;width:160px;max-width:100%;height:auto;border-radius:8px; } @media (min-width:768px){ .page-quitus main{max-width:800px} .page-quitus canvas.sig{height:220px} }