/* ─────────────────────────────────────────────────────────────────────────
   Zenkari Drive — page d'un lien de partage (publique)
   Ce que voit la personne qui reçoit un lien : le fichier, un bouton, et de
   quoi vérifier que sa copie est la bonne. L'empreinte est l'élément fort.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --fond:#f4f4f8;--surface:#fff;--surface-2:#efeef5;--ligne:#dfdde9;
  --texte:#1b1a26;--texte-2:#575370;--texte-3:#7c7894;
  --iris:#5b3fe0;--iris-fond:rgba(91,63,224,.09);--sur-iris:#fff;
  --vert:#0b8a5f;--vert-fond:rgba(11,138,95,.1);
  --rouge:#c92a48;--rouge-fond:rgba(201,42,72,.09);
  --t-image:#c47a12;--t-video:#c4365c;--t-audio:#0f8f86;--t-pdf:#c9343a;--t-doc:#2f6fd8;
  --t-tableur:#1f8a55;--t-diapo:#c9560f;--t-archive:#9a6b3f;--t-code:#5e6b84;--t-app:#5b3fe0;
  --t-disque:#5e6b84;--t-texte:#6b6884;--t-autre:#6b6884;--t-dossier:#5b3fe0;
  --texte-police:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono-police:'Atkinson Hyperlegible Mono',ui-monospace,'SF Mono',Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --fond:#13121b;--surface:#1b1a26;--surface-2:#242233;--ligne:#302e42;
    --texte:#eeecf7;--texte-2:#a9a5c0;--texte-3:#8a86a3;
    --iris:#9b82ff;--iris-fond:rgba(139,108,255,.14);--sur-iris:#fff;
    --vert:#45d695;--vert-fond:rgba(69,214,149,.12);
    --rouge:#ff7088;--rouge-fond:rgba(255,112,136,.12);
    --t-image:#f0a23b;--t-video:#f0668a;--t-audio:#2ec4b6;--t-pdf:#f2565c;--t-doc:#5b9bff;
    --t-tableur:#3ccf85;--t-diapo:#f7843a;--t-archive:#cf9a68;--t-code:#9aa6bd;--t-app:#9b82ff;
    --t-disque:#9aa6bd;--t-texte:#a9a5c0;--t-autre:#a9a5c0;--t-dossier:#9b82ff;
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:400 1rem/1.55 var(--texte-police);
  background:var(--fond);color:var(--texte);
  min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--iris)}
:focus-visible{outline:2px solid var(--iris);outline-offset:2px;border-radius:4px}
.masque{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.i{width:1.25em;height:1.25em;flex:none;display:block}

.page{
  max-width:35rem;margin:0 auto;
  padding:clamp(20px,6vh,64px) 16px 32px;
  display:flex;flex-direction:column;gap:20px;
}

/* Marque */
.marque{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  color:var(--texte);text-decoration:none;font-weight:700;font-size:.95rem}
.marque-logo{width:28px;height:28px;border-radius:8px;background:#7c5cff;color:#fff;
  display:grid;place-items:center}
.marque-logo .i{width:18px;height:18px}

/* Fiche */
.fiche{
  background:var(--surface);border:1px solid var(--ligne);border-radius:18px;
  padding:28px;display:flex;flex-direction:column;gap:18px;
}
@media (max-width:480px){ .fiche{padding:20px;border-radius:16px} }

.fichier{display:flex;align-items:center;gap:16px;min-width:0}
.fichier .fi{width:56px;height:56px;flex:none;display:grid;place-items:center;
  border-radius:14px;background:var(--surface-2)}
.fichier .fi .i{width:34px;height:34px}
.fichier-texte{min-width:0}
h1{font-size:1.5rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.fichier-details{color:var(--texte-2);font-size:.95rem;margin-top:4px}

.bouton-principal{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:12px;
  background:#6a4cf0;color:var(--sur-iris);text-decoration:none;
  font-weight:700;font-size:1.05rem;
  transition:background-color .15s;
}
.bouton-principal:hover{background:#5b3fe0}
.bouton-principal:active{transform:translateY(1px)}
.validite{color:var(--texte-2);font-size:.9rem;margin-top:-6px}

h2{font-size:1rem;font-weight:700}
.aide{color:var(--texte-2);font-size:.9rem;max-width:62ch}

/* Empreinte : seize groupes de quatre, pour comparer d'un coup d'œil */
.empreinte{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--ligne)}
.empreinte-tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.empreinte-grille{
  display:grid;grid-template-columns:repeat(4,1fr);text-align:center;
  row-gap:6px;column-gap:8px;
  padding:16px 12px;border-radius:12px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1.5px transparent;
  font:500 clamp(1.05rem,4.8vw,1.4rem)/1.35 var(--mono-police);
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
  transition:color .2s,box-shadow .2s;
}
/* Une seule différence d'un bit change TOUTE l'empreinte : on ne marque pas
   des groupes, on dit oui ou non pour l'ensemble. */
.empreinte-grille.identique{color:var(--vert);box-shadow:inset 0 0 0 1.5px var(--vert)}
.empreinte-grille.differente{box-shadow:inset 0 0 0 1.5px var(--rouge)}

.sceau{display:flex;gap:8px;align-items:flex-start;color:var(--texte-2);font-size:.88rem}
.sceau .i{color:var(--vert);margin-top:1px}

.bouton-discret{
  display:inline-flex;align-items:center;gap:6px;
  font:600 .85rem/1 var(--texte-police);color:var(--texte-2);
  background:none;border:1px solid var(--ligne);border-radius:8px;padding:7px 10px;cursor:pointer;
}
.bouton-discret:hover{color:var(--texte);background:var(--surface-2)}
.bouton-discret .i{width:16px;height:16px}

/* Vérification locale */
.verifier{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid var(--ligne)}
.depot{
  display:flex;flex-direction:column;gap:4px;cursor:pointer;
  border:1.5px dashed var(--ligne);border-radius:12px;padding:18px;
  transition:border-color .15s,background-color .15s;
}
.depot:hover,.depot.survol{border-color:var(--iris);background:var(--iris-fond)}
.depot:focus-within{border-color:var(--iris)}
.depot-texte{font-weight:600}
.depot-texte .lien{color:var(--iris);text-decoration:underline;text-underline-offset:3px}
.depot-note{color:var(--texte-3);font-size:.85rem}

.resultat{display:flex;flex-direction:column;gap:8px;border-radius:12px;padding:14px 16px;background:var(--surface-2)}
.resultat[hidden]{display:none}
.resultat-titre{display:flex;align-items:center;gap:8px;font-weight:700}
.resultat.identique{background:var(--vert-fond)}
.resultat.identique .resultat-titre{color:var(--vert)}
.resultat.differente{background:var(--rouge-fond)}
.resultat.differente .resultat-titre{color:var(--rouge)}
.resultat-detail{font-size:.88rem;color:var(--texte-2);overflow-wrap:anywhere}
.resultat-detail code{font-family:var(--mono-police);font-size:.82rem}
.resultat-empreinte{display:grid;grid-template-columns:repeat(4,max-content);gap:2px 14px;
  font:500 .9rem/1.4 var(--mono-police);letter-spacing:.05em;color:var(--texte)}
.sans-coupure{white-space:nowrap}
.progression{height:4px;border-radius:2px;background:var(--ligne);overflow:hidden}
.progression span{display:block;height:100%;width:0;background:var(--iris);transition:width .1s linear}

.commandes summary{cursor:pointer;color:var(--texte-2);font-size:.9rem;font-weight:600;width:max-content}
.commandes summary:hover{color:var(--texte)}
.commandes dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin-top:12px;font-size:.88rem;align-items:baseline}
.commandes dt{color:var(--texte-2)}
.commandes dd{min-width:0}
.commandes code{font:400 .84rem/1.4 var(--mono-police);background:var(--surface-2);padding:2px 6px;border-radius:5px;overflow-wrap:anywhere}
.commandes p{margin-top:12px;font-size:.88rem;color:var(--texte-2)}
@media (max-width:480px){ .commandes dl{grid-template-columns:1fr;gap:2px} .commandes dd{margin-bottom:8px} }

/* Erreur */
.fiche-erreur{gap:10px}
.fiche-erreur p{color:var(--texte-2);max-width:56ch}
.erreur-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--texte-2);margin-bottom:6px}
.erreur-ico .i{width:24px;height:24px}

.pied{color:var(--texte-3);font-size:.85rem;padding:0 4px}

/* Teintes des types de fichiers */
.fi{color:var(--t-autre)}
.t-image{color:var(--t-image)}.t-video{color:var(--t-video)}.t-audio{color:var(--t-audio)}
.t-pdf{color:var(--t-pdf)}.t-doc{color:var(--t-doc)}.t-tableur{color:var(--t-tableur)}
.t-diapo{color:var(--t-diapo)}.t-archive{color:var(--t-archive)}.t-code{color:var(--t-code)}
.t-app{color:var(--t-app)}.t-disque{color:var(--t-disque)}.t-texte{color:var(--t-texte)}
.t-dossier{color:var(--t-dossier)}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }