/* Droplet ID — sign-in pages.
   Centred, quiet, one card. Two tiles joined by a thread say who is asking;
   the two-digit number is the only loud thing, because it is the security
   moment. Light and dark follow the system. */

@font-face {
  font-family: 'Instrument Sans';
  src: url('/static/InstrumentSans.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --fond: #f3f5f8;
  --carte: #ffffff;
  --encre: #0b1620;
  --doux: #5d6b77;
  --pale: #8794a0;
  --trait: #e3e8ee;
  --champ: #f3f6f9;
  --bleu: #0a72f0;
  --bleu-encre: #ffffff;
  --bleu-voile: #e8f1fe;
  --vert: #0f9d6a;
  --orange: #c26a0a;
  --rouge: #d0393f;
  --ombre: 0 1px 1px rgba(11, 22, 32, 0.04), 0 2px 6px rgba(11, 22, 32, 0.04), 0 24px 64px -28px rgba(11, 22, 32, 0.22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #070b10;
    --carte: #10171f;
    --encre: #eef3f7;
    --doux: #9aa8b4;
    --pale: #6e7d8a;
    --trait: #1e2933;
    --champ: #18212b;
    --bleu: #3a93ff;
    --bleu-encre: #04101c;
    --bleu-voile: #11263d;
    --vert: #37c48f;
    --orange: #f0a050;
    --rouge: #ff6b6f;
    --ombre: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 70px -30px rgba(0, 0, 0, 0.9);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--encre);
  font: 400 1rem/1.5 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 8px; }
.cache { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font: 500 0.88em/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.petit { font-size: 0.84rem; color: var(--pale); }

.test {
  background: repeating-linear-gradient(-45deg, #ffcf3f 0 14px, #ffd85c 14px 28px);
  color: #2a2000; text-align: center; font-size: 0.82rem; font-weight: 600; padding: 0.4rem 1rem;
}

main { flex: 1; display: grid; place-items: center; padding: clamp(1.25rem, 5vh, 4rem) 1rem 1.5rem; }

/* ── The card ──────────────────────────────────────────────────────── */
.carte {
  width: 100%; max-width: 27.5rem;
  background: var(--carte); border-radius: 28px; box-shadow: var(--ombre);
  padding: 2.5rem 2.25rem 1.75rem;
  text-align: center;
  animation: entree 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes entree { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
@media (max-width: 30rem) {
  main { place-items: start center; padding-top: 1rem; }
  .carte { padding: 2rem 1.35rem 1.5rem; border-radius: 24px; }
}

/* Who is asking: site ⋯ Droplet ID */
.liaison { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-bottom: 1.6rem; }
.liaison.seule { margin-bottom: 1.3rem; }
.tuile {
  width: 3.5rem; height: 3.5rem; border-radius: 16px; flex: none; display: grid; place-items: center; overflow: hidden;
  font-weight: 680; font-size: 1.35rem;
}
.tuile img { width: 100%; height: 100%; object-fit: cover; }
.tuile-site { background: var(--champ); color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait); }
.tuile-site.avec-logo { background: transparent; box-shadow: 0 0 0 1px var(--trait); }
.tuile-droplet { background: linear-gradient(160deg, #3d9bff, #0a62d8); color: #fff; box-shadow: 0 8px 20px -10px rgba(10, 98, 216, 0.8); }
.tuile-droplet svg { width: 1.7rem; height: 1.7rem; }
.tuile-erreur { background: color-mix(in oklab, var(--rouge) 14%, var(--carte)); color: var(--rouge); }
.tuile-erreur svg { width: 1.6rem; height: 1.6rem; }
.tuile.grande { width: 4.5rem; height: 4.5rem; border-radius: 20px; }
.tuile.grande svg { width: 2.2rem; height: 2.2rem; }
.fil { display: flex; gap: 0.3rem; }
.fil i { width: 0.3rem; height: 0.3rem; border-radius: 999px; background: var(--pale); opacity: 0.5; animation: fil 1.8s ease-in-out infinite; }
.fil i:nth-child(2) { animation-delay: 0.2s; }
.fil i:nth-child(3) { animation-delay: 0.4s; }
@keyframes fil { 30% { opacity: 1; transform: scale(1.3); } }

h1 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.022em; font-weight: 620; margin: 0; text-wrap: balance; }
.sous { margin: 0.45rem 0 0; color: var(--doux); font-size: 0.97rem; }
.sous .hote { color: var(--pale); }
.texte { color: var(--doux); margin: 0.8rem auto 0; max-width: 34ch; }

/* ── QR and number ─────────────────────────────────────────────────── */
.scan { margin: 1.8rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 1.4rem; align-items: center; text-align: left; }
.qr {
  position: relative; width: 11rem; aspect-ratio: 1; padding: 0.8rem; border-radius: 20px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--trait);
}
.qr svg.code { display: block; width: 100%; height: 100%; transition: filter 0.4s, opacity 0.4s; }
.qr .goutte {
  position: absolute; inset: 0; margin: auto; width: 2.5rem; height: 2.5rem; border-radius: 11px;
  background: linear-gradient(160deg, #3d9bff, #0a62d8); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 4px #fff;
}
.qr .goutte svg { width: 1.35rem; height: 1.35rem; }
.qr .temps { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; }
.qr .temps rect { fill: none; stroke: var(--bleu); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.qr[data-expire] svg.code, .qr[data-expire] .goutte { filter: blur(5px); opacity: 0.3; }
.nombre .etiquette { margin: 0; font-size: 0.86rem; color: var(--doux); }
.chiffres { font-size: 4.2rem; line-height: 1; font-weight: 640; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.etapes { grid-column: 1 / -1; list-style: none; counter-reset: e; margin: 0.4rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--trait); display: grid; gap: 0.5rem; font-size: 0.9rem; color: var(--doux); }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.5rem; align-items: baseline; }
.etapes li::before { content: counter(e); width: 1.4rem; height: 1.4rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.74rem; font-weight: 640; color: var(--bleu); background: var(--bleu-voile); transform: translateY(0.1rem); }
@media (max-width: 26rem) { .scan { grid-template-columns: 1fr; justify-items: center; text-align: center; } .etapes { text-align: left; width: 100%; } }

/* On a phone the QR is useless to the person holding it: open the app
   first; the QR stays one tap away for approving from another phone. */
.seulement-mobile { display: none !important; }
@media (max-width: 48rem) and (pointer: coarse), (max-width: 30rem) {
  .seulement-mobile { display: inline-flex !important; }
  .carte:not([data-qr-ouvert]) [data-scan] { display: none; }
  .carte[data-qr-ouvert] [data-montrer-qr] { display: none !important; }
}

/* ── Status ────────────────────────────────────────────────────────── */
.etat {
  margin: 1.2rem auto 0; display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem; border-radius: 999px; background: var(--champ); font-size: 0.9rem; color: var(--doux);
}
.etat .point { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--pale); flex: none; }
.etat[data-etat='attente'] .point { background: var(--bleu); animation: pouls 1.6s ease-in-out infinite; }
.etat[data-etat='vue'] { color: var(--encre); }
.etat[data-etat='vue'] .point { background: var(--orange); animation: pouls 0.9s ease-in-out infinite; }
.etat[data-etat='approuvee'] { color: var(--vert); background: color-mix(in oklab, var(--vert) 12%, var(--carte)); }
.etat[data-etat='approuvee'] .point { background: var(--vert); }
.etat[data-etat='refusee'], .etat[data-etat='annulee'] { color: var(--rouge); background: color-mix(in oklab, var(--rouge) 10%, var(--carte)); }
.etat[data-etat='refusee'] .point, .etat[data-etat='annulee'] .point { background: var(--rouge); }
@keyframes pouls { 50% { transform: scale(1.8); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .etat .point, .fil i, .carte { animation: none !important; }
  .qr .temps rect { transition: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.actions { display: grid; gap: 0.6rem; margin-top: 1rem; }
.actions:empty { display: none; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%;
  min-height: 3rem; padding: 0 1.2rem; border-radius: 14px; border: 0;
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none !important;
  transition: transform 0.15s, filter 0.15s, background 0.15s;
}
.bouton:active { transform: scale(0.985); }
.bouton:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }
.bouton svg { width: 1.2rem; height: 1.2rem; }
.principal { background: var(--bleu); color: var(--bleu-encre); }
.principal:hover:not(:disabled) { filter: brightness(1.07); }
.secondaire { background: var(--champ); color: var(--encre); margin-top: 0.6rem; }
.secondaire:hover { filter: brightness(0.97); }
.test-b { background: #ffcf3f; color: #2a2000; }
.carte > .principal { margin-top: 1.6rem; }
.lien-discret { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0.9rem auto 0; background: none; border: 0; color: var(--bleu); font: inherit; font-size: 0.93rem; font-weight: 560; cursor: pointer; }
.lien-discret svg { width: 1.1rem; height: 1.1rem; }

/* ── What the site gets ────────────────────────────────────────────── */
.partage { margin-top: 1.6rem; padding: 1.1rem 1.15rem; border-radius: 18px; background: var(--champ); text-align: left; }
.partage h2 { margin: 0 0 0.55rem; font-size: 0.86rem; font-weight: 600; color: var(--doux); }
.partage .oui { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.partage .oui li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.5rem; align-items: center; }
.partage .oui svg { width: 1.15rem; height: 1.15rem; color: var(--vert); }
.jamais { margin: 0.75rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--doux); }
.jamais span { font-weight: 600; margin-right: 0.15rem; }
.jamais s { text-decoration-color: var(--rouge); text-decoration-thickness: 1.5px; background: var(--carte); padding: 0.1rem 0.55rem; border-radius: 999px; }

.annuler { margin: 1.2rem 0 0; }
.annuler button { background: none; border: 0; font: inherit; font-size: 0.9rem; color: var(--doux); cursor: pointer; padding: 0.3rem; }
.annuler button:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* ── Continue as… ──────────────────────────────────────────────────── */
.continuer { margin-top: 1.6rem; text-align: left; }
.compte { display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center; padding: 0.95rem 1rem; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--trait); }
.compte .avatar { width: 2.6rem; height: 2.6rem; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(160deg, #3d9bff, #0a62d8); color: #fff; }
.compte .avatar svg { width: 1.3rem; height: 1.3rem; }
.compte b { display: block; font-weight: 600; }
.compte span span { display: block; font-size: 0.85rem; color: var(--doux); line-height: 1.35; }
.compte > svg { width: 1.1rem; height: 1.1rem; color: var(--vert); }
.continuer .bouton { margin-top: 1.4rem; }

/* ── Fields ────────────────────────────────────────────────────────── */
.champ { display: grid; gap: 0.4rem; margin: 1rem 0 0; font-size: 0.9rem; color: var(--doux); text-align: left; }
.champ.centre { text-align: center; }
.champ input[type='text'] { font: inherit; font-size: 1rem; padding: 0.8rem 0.95rem; border-radius: 12px; border: 0; background: var(--champ); color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait); }
.champ input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bleu); }
.nombre-saisi { font-size: 2.6rem !important; font-weight: 640; letter-spacing: 0.45em; text-align: center; padding: 0.55rem 0 0.55rem 0.45em !important; font-variant-numeric: tabular-nums; width: 9rem; justify-self: center; }
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; font-size: 0.95rem; cursor: pointer; text-align: left; }
.interrupteur input { appearance: none; width: 2.9rem; height: 1.75rem; border-radius: 999px; background: var(--trait); position: relative; cursor: pointer; transition: background 0.2s; flex: none; order: 2; margin: 0; }
.interrupteur input::after { content: ''; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.45rem; height: 1.45rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.interrupteur input:checked { background: var(--vert); }
.interrupteur input:checked::after { transform: translateX(1.15rem); }

/* ── Footer ────────────────────────────────────────────────────────── */
.bas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem; padding: 0.5rem 1rem 1.6rem; font-size: 0.84rem; }
.bas nav { display: flex; gap: 1.1rem; }
.bas a { color: var(--doux); }
.bas a[aria-current] { color: var(--encre); font-weight: 600; }

/* ── Content pages ─────────────────────────────────────────────────── */
.accueil, .document { width: 100%; max-width: 40rem; text-align: center; animation: entree 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.accueil h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem); letter-spacing: -0.035em; margin-top: 1.6rem; }
.accueil .texte { max-width: 44ch; font-size: 1.1rem; }
.accueil .liens { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.accueil .liens .bouton { width: auto; margin: 0; }
.accueil .tuile { margin: 0 auto; }
.document { text-align: left; }
.document > .tuile { margin-bottom: 1.2rem; }
.document h1 { font-size: 2.2rem; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.document section { padding: 1.1rem 0; border-top: 1px solid var(--trait); }
.document h2 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.document p { margin: 0; color: var(--doux); max-width: 62ch; }
.document .maj { margin-top: 1.5rem; font-size: 0.85rem; color: var(--pale); }
.code-erreur { margin: 1rem 0 0; }
.code-erreur code { background: var(--champ); padding: 0.3rem 0.6rem; border-radius: 8px; }

/* ── Test device ───────────────────────────────────────────────────── */
.telephone-test { display: flex; align-items: center; gap: 0.8rem; text-align: left; padding: 0.8rem; border-radius: 18px; background: var(--champ); margin-bottom: 1.6rem; }
.telephone-test .tuile { width: 2.75rem; height: 2.75rem; border-radius: 12px; }
.telephone-test .tuile svg { width: 1.35rem; height: 1.35rem; }
.telephone-test b { display: block; }
.telephone-test span span { display: block; font-size: 0.84rem; color: var(--doux); line-height: 1.35; }
.appareil h1 { margin-top: 0.4rem; }
.appareil .actions { margin-top: 1.3rem; }
.appareil .actions .secondaire { margin-top: 0; }
.sites { margin-top: 1.4rem; text-align: left; font-size: 0.9rem; }
.sites summary { cursor: pointer; color: var(--doux); }
.liste { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.5rem; }
.liste li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--champ); }
.liste .bouton { width: auto; min-height: 2.2rem; margin: 0; font-size: 0.85rem; }