/* Connexion de app.qommis.com, repris de la page App · Connexion du fichier Figma. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/polices/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/polices/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --encre: #1F1F1F; --doux: #4A4A47; --fond: #F7F7F5; --trait: #E3E2DE; --champ: #8A8A84; --terre: #8E3B20; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: 14px; line-height: 20px; color: var(--encre); background: var(--fond) url("/motif.svg") 0 0 / 208px 176px; }
.scene { position: relative; width: 100%; max-width: 440px; padding-top: 165px; }
.dame { position: absolute; z-index: 1; top: 0; left: 50%; width: 211px; height: 196px; margin-left: -105px; pointer-events: none; }
.dame svg, .dame img { display: block; width: 100%; height: 100%; }
h1:focus { outline: none; }
button[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.carte { position: relative; overflow: hidden; padding: 40px; border: 1px solid var(--trait); border-radius: 28px; background: #fff; }
.marque { display: inline-flex; align-items: center; gap: 9px; color: var(--encre); line-height: 0; }
h1 { margin: 12px 0; font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -0.01em; }
.texte { margin: 0 0 24px; color: var(--doux); overflow-wrap: anywhere; }
label { display: block; margin-bottom: 4px; }
input[type="email"] { display: block; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--champ); border-radius: 8px; background: #fff; color: var(--encre); font: inherit; }
input::placeholder { color: var(--doux); }
.aide { margin: 4px 0 16px; font-size: 12px; line-height: 16px; color: var(--doux); }
.aide.erreur { color: var(--terre); font-weight: 700; }
button, .bouton { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: var(--terre); color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
button:hover, .bouton:hover { background: #76301A; }
:focus-visible { outline: 2px solid var(--terre); outline-offset: 2px; }
.action { margin: 0; }
.note { margin: 16px 0 0; text-align: center; color: var(--doux); }
.note a { color: var(--terre); text-decoration: none; display: inline-block; padding: 2px 0; }
.note a:hover { text-decoration: underline; }
.pied { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 12px; line-height: 24px; color: var(--doux); }
.pied nav { display: flex; gap: 24px; }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
@media (max-width: 30rem) { .scene { padding-top: 133px; } .dame { width: 170px; height: 158px; margin-left: -85px; } .carte { padding: 24px; } h1 { font-size: 28px; line-height: 34px; } .pied { flex-wrap: wrap; } .pied nav { gap: 16px; } }