/* Humaneo : composant attestation (mini A4 paysage). Toutes les tailles internes sont en cqi
   (pourcentage de la largeur du document) : la miniature garde ses proportions à toutes les largeurs.
   Le papier reste blanc dans les deux thèmes (c'est un document imprimable) ; cadre et ombre suivent les jetons. */
.att{
  --att-paper:#FFFFFF; --att-ink:#14202A; --att-ink-2:#566772; --att-brand:#0E3B43; --att-gold:#E9A93A;
  --att-line:#D3DDDF; --att-ok:#137A50; --att-wait:#8A5A00; --att-ko:#B42318; --att-info:#2459C0;
  margin:0; width:100%; max-width:100%; min-width:0;
}
.att-paper{
  position:relative; container-type:inline-size; width:100%; aspect-ratio:297/210; overflow:hidden;
  background:var(--att-paper); color:var(--att-ink); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-up),0 0 0 6px color-mix(in srgb,var(--line) 35%,transparent);
  font-family:var(--font-text);
}
/* double filet intérieur, discret, façon diplôme */
.att-paper::before{content:"";position:absolute;inset:2.2cqi;border:.18cqi solid var(--att-line);border-radius:.6cqi;pointer-events:none}
.att-paper::after{content:"";position:absolute;inset:2.9cqi;border:.1cqi solid color-mix(in srgb,var(--att-gold) 55%,transparent);border-radius:.4cqi;pointer-events:none}
.att-in{position:absolute;inset:5cqi 6cqi 4.4cqi;display:flex;flex-direction:column;align-items:center;text-align:center}
.att p{margin:0}

.att-top{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.5cqi;text-align:left}
.att-logo{height:4.6cqi;width:auto;display:block}
.att-org{font-size:1.3cqi;line-height:1.35;color:var(--att-ink-2)}
.att-rule{width:16cqi;height:.45cqi;border-radius:1cqi;background:var(--att-gold);margin:auto 0 1.6cqi}
.att-title{font:700 3.6cqi/1.1 var(--font-title);letter-spacing:-.02em;color:var(--att-brand)}
.att-lead{font-size:1.65cqi;color:var(--att-ink-2);margin-top:1.3cqi!important}
.att-name{font:800 5.2cqi/1.1 var(--font-title);letter-spacing:-.025em;color:var(--att-ink);margin-top:.6cqi!important;max-width:100%;overflow-wrap:anywhere}
.att-course{font:700 2.5cqi/1.2 var(--font-title);color:var(--att-brand);margin-top:.5cqi!important;max-width:80%}
.att-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.4cqi 1.2cqi;font-size:1.6cqi;color:var(--att-ink);margin:1.4cqi 0 auto!important}
.att-meta span+span::before{content:"";display:inline-block;width:.6cqi;height:.6cqi;border-radius:50%;background:var(--att-gold);margin-right:1.2cqi;vertical-align:middle}

.att-foot{margin-top:2cqi;width:100%;display:grid;grid-template-columns:1.05fr 1fr 1.25fr;gap:2.6cqi;align-items:end;text-align:left}
.att-id{display:flex;gap:1.4cqi;align-items:flex-end}
.att-qr{width:11.5cqi;flex:none;border:.12cqi solid var(--att-line);border-radius:.6cqi;background:#FFFFFF;overflow:hidden}
.att-qr svg{display:block;width:100%;height:auto}
.att-qr-vide{display:grid;place-items:center;aspect-ratio:1;padding:.6cqi;text-align:center;font-size:1.25cqi;line-height:1.25;color:#566772}
.att-k{font-size:1.25cqi;line-height:1.35;color:var(--att-ink-2)}
.att-serial{font:700 1.95cqi/1.3 var(--font-mono);letter-spacing:.04em;color:var(--att-ink);margin:.2cqi 0!important;white-space:nowrap}

.att-sig{display:flex;flex-direction:column;gap:.55cqi;min-width:0}
.att-sig-k{font-size:1.25cqi;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--att-ink-2)}
.att-sig-row{display:flex;gap:1cqi;align-items:center}
.att-sig-row .att-sig-box{flex:1;min-width:0}
.att-sig-box{height:6.2cqi;border:.16cqi dashed var(--att-line);border-radius:.7cqi;display:grid;place-items:center;padding:0 .8cqi;text-align:center;font-size:1.2cqi;line-height:1.25;color:var(--att-ink-2);background:#FBFCFC}
.att-sig-box.is-set{border-color:color-mix(in srgb,var(--att-brand) 45%,#FFFFFF);background:color-mix(in srgb,var(--att-brand) 4%,#FFFFFF);color:var(--att-brand)}
.att-sig-box.is-file{border-color:var(--att-gold);background:color-mix(in srgb,var(--att-gold) 8%,#FFFFFF);color:var(--att-wait);font-weight:600}
.att-sig-st{display:flex;align-items:center;gap:.5cqi;font-size:1.2cqi;font-weight:600;line-height:1.25}
.att-sig-st.is-ok{color:var(--att-ok)}
.att-sig-st.is-wait{color:var(--att-wait)}
.att-ic{width:1.7cqi;height:1.7cqi;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.att-sig-n{font:700 1.45cqi/1.3 var(--font-title);color:var(--att-ink);border-top:.12cqi solid var(--att-line);padding-top:.5cqi}
.att-sig-n small{display:block;font:400 1.2cqi/1.3 var(--font-text);color:var(--att-ink-2)}

/* cachet : simple emplacement circulaire, clairement un repère et non un vrai tampon */
.att-seal{width:8.4cqi;height:8.4cqi;flex:none;opacity:.32;transform:rotate(-8deg)}
.att-seal.on{opacity:.9}
.att-seal .s1{fill:none;stroke:var(--att-brand);stroke-width:2.4}
.att-seal .s2{fill:none;stroke:var(--att-brand);stroke-width:1.4;stroke-dasharray:3 3}
.att-seal text{fill:var(--att-brand);font-family:var(--font-title);font-weight:700}
.att-seal .s-ring{font-size:11.5px;letter-spacing:1.6px}
.att-seal .s-mid{font-size:12px;text-anchor:middle;letter-spacing:1px}
.att-seal .s-sub{font-size:8.5px;text-anchor:middle;font-weight:500;font-family:var(--font-text)}


/* bandeau diagonal de statut */
.att-band{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}
.att-band span{transform:rotate(-14deg);padding:1.2cqi 4.4cqi;border:.45cqi solid currentColor;border-radius:1cqi;font:800 4.4cqi/1 var(--font-title);text-align:center;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,#FFFFFF 78%,transparent);white-space:nowrap}
.att-band.is-ko span{color:var(--att-ko)}
.att-band.is-warn span{color:var(--att-wait);font-size:3.6cqi}
.att-band small{display:block;font:700 1.7cqi/1.2 var(--font-text);letter-spacing:.06em;margin-top:.6cqi}
.att-band.is-info span{color:var(--att-info)}
.att--revoquee .att-in,.att--apercu .att-in,.att--en_attente .att-in{opacity:.78}

@media (prefers-reduced-motion:no-preference){
  .att-band span{animation:att-stamp .55s var(--spring,cubic-bezier(.34,1.56,.64,1)) .15s both}
}
@keyframes att-stamp{from{opacity:0;transform:rotate(-14deg) scale(1.5)}to{opacity:1;transform:rotate(-14deg) scale(1)}}
@media print{.att-paper{box-shadow:none;border-color:#D3DDDF}}
.att-sig-img{display:block;height:9cqi;width:auto;max-width:100%;margin:-1.2cqi 0 -.6cqi;object-fit:contain}

/* Prototype : toute attestation affichée est un exemple fictif */
.att-demo{position:absolute;z-index:3;top:17cqi;left:-1cqi;padding:.6cqi 4cqi;border:.35cqi solid #E73256;border-radius:1cqi;background:rgba(255,255,255,.88);color:#C41E42;font:800 2.6cqi/1 var(--font-title,Sora,sans-serif);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-12deg);pointer-events:none}