/* Page publique de vérification : sobre, claire, lisible sur téléphone (on y arrive surtout par un QR code) */
@font-face { font-family: "Inter"; src: url("/polices/inter-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
:root {
  --fond: #F6F7F5; --carte: #FFFFFF; --encre: #0E1A18; --doux: #4B5B57; --discret: #74837F; --ligne: #E3E8E6;
  --sarcelle: #0F766E; --sarcelle-fond: #E8F5F3; --vert: #067647; --vert-fond: #ECFDF3; --rouge: #B42318; --rouge-fond: #FEF3F2;
  --ambre: #93370D; --ambre-fond: #FFFAEB; --gris-fond: #F2F4F7;
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #07110F; --carte: #0E1C19; --encre: #EAF4F2; --doux: #A9BBB7; --discret: #7E918C; --ligne: #1F322E;
    --sarcelle: #5EEAD4; --sarcelle-fond: #0F2A26; --vert: #4ADE80; --vert-fond: #0E2A1C; --rouge: #F79A8A; --rouge-fond: #2C1412;
    --ambre: #F5C26B; --ambre-fond: #2A2010; --gris-fond: #13221F; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.6 var(--sans); }
a { color: var(--sarcelle); }
[hidden] { display: none !important; }
.barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 760px; margin: 0 auto; padding: 18px 16px; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); font-weight: 650; text-decoration: none; font-size: 17px; }
.barre-titre { color: var(--discret); font-size: 14px; }
.principal { max-width: 760px; margin: 0 auto; padding: 8px 16px 32px; display: grid; gap: 16px; }
.principal > div { display: grid; gap: 16px; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 18px; padding: 24px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 0 0 12px; }
.surtitre { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sarcelle); font-weight: 600; }
.intro { color: var(--doux); margin: 0; }
.ref { font-family: var(--mono); letter-spacing: .06em; }
.pastille { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26px; }
.pastille.ok { background: var(--vert); color: #fff; }
.pastille.ko { background: var(--gris-fond); color: var(--doux); margin-bottom: 12px; }
.verdict { display: flex; gap: 20px; align-items: flex-start; border-color: color-mix(in srgb, var(--vert) 35%, var(--ligne)); background: linear-gradient(180deg, var(--vert-fond), var(--carte) 70%); }
.bandeau-demo { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--ambre-fond); color: var(--ambre); font-weight: 600; font-size: 14px; }
.alerte { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--ambre-fond); color: var(--ambre); border: 1px solid color-mix(in srgb, var(--ambre) 25%, transparent); }
.faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.faits div { padding: 12px 0; border-top: 1px solid var(--ligne); }
.faits dt { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--discret); }
.faits dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.statut { display: inline-flex; align-items: center; gap: 8px; }
.statut::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--discret); }
.statut.vert::before { background: var(--vert); } .statut.rouge::before { background: var(--rouge); } .statut.ambre::before { background: #DC6803; }
.depot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px; margin-top: 14px; border: 2px dashed var(--ligne); border-radius: 16px; cursor: pointer; color: var(--doux); transition: border-color .2s, background .2s; }
.depot:hover, .depot.survol, .depot:focus-within { border-color: var(--sarcelle); background: var(--sarcelle-fond); }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot strong { color: var(--sarcelle); }
.depot small { color: var(--discret); }
.resultat-fichier { margin-top: 14px; padding: 14px 16px; border-radius: 14px; display: flex; gap: 12px; align-items: flex-start; }
.resultat-fichier.ok { background: var(--vert-fond); color: var(--vert); }
.resultat-fichier.ko { background: var(--rouge-fond); color: var(--rouge); }
.resultat-fichier.calcul { background: var(--gris-fond); color: var(--doux); }
.resultat-fichier p { margin: 2px 0 0; color: var(--doux); font-size: 14px; overflow-wrap: anywhere; }
.technique { margin-top: 16px; }
.technique summary { cursor: pointer; color: var(--doux); font-size: 14px; }
.empreintes { margin: 10px 0 0; }
.empreintes dt { font-size: 13px; color: var(--discret); margin-top: 8px; }
.empreintes dd { margin: 0; font: 13px/1.5 var(--mono); overflow-wrap: anywhere; }
.note { font-size: 13px; color: var(--discret); }
code { font-family: var(--mono); font-size: 12.5px; background: var(--gris-fond); padding: 1px 5px; border-radius: 5px; }
.formulaire { margin-top: 18px; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 6px; }
.ligne-saisie { display: flex; gap: 10px; }
.ligne-saisie input { flex: 1; min-width: 0; font: 600 18px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--fond); color: var(--encre); }
.ligne-saisie input:focus { outline: 3px solid color-mix(in srgb, var(--sarcelle) 35%, transparent); border-color: var(--sarcelle); }
button, .bouton { font: 600 15px var(--sans); border: 0; border-radius: 12px; padding: 12px 20px; background: var(--sarcelle); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
@media (prefers-color-scheme: dark) { button, .bouton { color: #04100F; } }
.aide { color: var(--rouge); margin: 8px 0 0; font-size: 14px; }
.attente { display: flex; align-items: center; gap: 14px; }
.roue { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ligne); border-top-color: var(--sarcelle); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation: none; } }
.portee { margin: 0; font-size: 13.5px; color: var(--discret); }
.pied { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; font-size: 13.5px; color: var(--discret); }
@media (max-width: 560px) {
  .carte { padding: 18px; }
  .verdict { flex-direction: column; gap: 12px; }
  .faits { grid-template-columns: 1fr; }
  .ligne-saisie { flex-direction: column; }
  .barre-titre { display: none; }
}