/* Bonjour Connect, écrans du guichet central updates.bonjourprenom.fr, repris du lab (lab/_connect/public/connect.css).
   Ces règles reprennent la maquette templates/bonjour-connect-maquette.html. Les pages du guichet chargent cette feuille seule. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.connect{--c-ink:#0C1B43;--c-ink-2:#283452;--c-ink-3:#586484;--c-ink-4:#94A0BC;--c-bleu:#2060E0;--c-bleu-fonce:#16409C;--c-bleu-doux:#DCE8FD;--c-bleu-teinte:#EDF3FE;--c-ligne:#D9DEE8;--c-ok:#1B7A4B;--c-ko:#C0392B;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:#F8F9FB;color:var(--c-ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px}
.connect a{color:inherit;text-decoration:none}
.connect .colonne{display:flex;flex-direction:column;align-items:center;width:100%}
.connect .carte{width:100%;max-width:400px;background:#fff;border:1px solid var(--c-ligne);border-radius:28px;padding:36px 32px 28px}
.connect .marque{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.connect .marque img{height:64px;width:auto}
.connect h2{font-size:26px;font-weight:500;margin:0 0 8px;letter-spacing:-.01em}
.connect .sous{font-size:15px;color:var(--c-ink-2);margin:0 0 26px;line-height:1.5}
.connect .champ{position:relative;margin:18px 0 10px}
.connect .champ input{width:100%;font:inherit;font-size:16px;padding:16px 14px 8px;border:1px solid var(--c-ink-4);border-radius:6px;outline:none;color:var(--c-ink)}
.connect .champ input:focus{border:2px solid var(--c-bleu);padding:15px 13px 7px}
.connect .champ label{position:absolute;left:12px;top:-8px;background:#fff;padding:0 4px;font-size:12px;color:var(--c-bleu)}
.connect .aide{font-size:13px;color:var(--c-ink-3);margin:0 0 30px;line-height:1.5}
.connect .lien{color:var(--c-bleu);font-weight:600;font-size:14px}
.connect .bouton-lien{font:inherit;font-weight:600;font-size:14px;background:none;border:0;cursor:pointer;padding:0}
.connect .actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.connect .btn{font:inherit;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;white-space:nowrap}
.connect .btn.plein{background:var(--c-bleu);color:#fff;border-radius:999px;padding:10px 24px;font-size:14px;font-weight:600}
.connect .btn.plein:hover{background:var(--c-bleu-fonce)}
.connect .btn:focus-visible,.connect .lien:focus-visible{outline:2px solid var(--c-bleu);outline-offset:3px}
.connect .pied{display:flex;justify-content:space-between;font-size:12px;color:var(--c-ink-3);margin-top:22px;padding:0 6px;width:100%;max-width:400px}
.connect .puce-mail{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c-ligne);border-radius:999px;padding:4px 12px 4px 4px;font-size:14px;margin-bottom:24px;max-width:100%;overflow-wrap:anywhere}
.connect .puce-mail i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--c-bleu-doux);color:var(--c-bleu);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.connect .illu{width:64px;height:64px;border-radius:18px;background:var(--c-bleu-teinte);display:grid;place-items:center;margin-bottom:18px}
.connect .compte{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--c-ligne);border-radius:14px;margin-bottom:22px;overflow-wrap:anywhere}
.connect .avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--c-bleu);color:#fff;display:grid;place-items:center;font-weight:600}
.connect .compte small{display:block;color:var(--c-ink-3);font-size:13px}
.connect .liste-acces{list-style:none;margin:0 0 24px;padding:0}
.connect .liste-acces li{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--c-ligne);font-size:14px}
.connect .liste-acces li span{color:var(--c-ok);font-size:12.5px;font-weight:600}
.connect .alerte{display:flex;gap:10px;background:#FDF0EE;color:var(--c-ko);border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:24px;line-height:1.5}
@media(max-width:420px){.connect .carte{padding:28px 20px 22px;border-radius:22px}}