/* =============================================================
   ATTESTATION TÉLÉPILOTE — template partagé (admin + public)
   Source : design_handoff_attestation_telepilote/ (2026-05-15)
   Canvas de référence : 3508 × 2480 px (A4 paysage @ 300 dpi)
   ============================================================= */

.cert-tp {
  /* Tokens scoped — n'écrasent pas les vars globales du dashboard */
  --display-w: 1075px;
  --orange: #ee5c2e;
  --blue:   #2f5dba;
  --ink:    #2a2a2a;

  --col-left:  714;
  --col-right: 2792;
  --col-drone: 1384;
  --col-qr:    2058;

  position: relative;
  width: var(--display-w);
  max-width: 100%;
  aspect-ratio: 3508 / 2480;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  background: #ffe8df;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  margin: 0 auto;
  /* Container query : permet aux enfants de se sizer en cqi (inline size = largeur réelle du cert) */
  container-type: inline-size;
}

/* Wrapper hôte (visuel uniquement — centrage et fond gris en preview) */
.cert-tp-host {
  display: flex;
  justify-content: center;
  padding: 0;
}

/* ---------- Fond composite (PNG préparé en PSD) ---------- */
.cert-tp__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* ---------- Champs texte ---------- */
.cert-tp__field {
  position: absolute;
  left:  calc(var(--x) / 3508 * 100%);
  top:   calc(var(--y) / 2480 * 100%);
  width: calc(var(--w) / 3508 * 100%);
  text-align: center;
  color: var(--ink);
  line-height: 1.25;
  /* font-size proportionnel à la largeur réelle du cert (cqi = container inline size) */
  font-size: calc(var(--fs) / 3508 * 100cqi);
  font-weight: var(--fw, 400);
  letter-spacing: 0.01em;
}
.cert-tp__field--orange   { color: var(--orange); }
.cert-tp__field--centered {
  left: calc(var(--cx) / 3508 * 100%);
  transform: translateX(-50%);
}

/* Nom : prénoms en 300, NOM (dernier mot) en 700 */
.cert-tp__field--name        { font-weight: 300; letter-spacing: 0.04em; }
.cert-tp__field--name strong { font-weight: 700; }

/* Qualification : uppercase via CSS (data brute en BDD reste en casse mixte) */
.cert-tp__field--qual { text-transform: uppercase; letter-spacing: 0.02em; }

/* Paragraphe règlementaire : ligne plus aérée */
.cert-tp__field--reg { line-height: 1.55; }

/* ---------- Visuels (logos, signature, cachet) ---------- */
.cert-tp__visual {
  position: absolute;
  left:  calc(var(--cx) / 3508 * 100%);
  top:   calc(var(--y)  / 2480 * 100%);
  width: calc(var(--w)  / 3508 * 100%);
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}
.cert-tp__visual img { display: block; width: 100%; height: auto; }

/* ---------- QR code ---------- */
.cert-tp__qr {
  position: absolute;
  left:  calc(var(--cx) / 3508 * 100%);
  top:   calc(var(--y)  / 2480 * 100%);
  width: calc(var(--w)  / 3508 * 100%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: #fff;
}
.cert-tp__qr canvas,
.cert-tp__qr img,
.cert-tp__qr svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* =============================================================
   IMPRESSION — A4 paysage, marges 0, on masque tout sauf .cert-tp
   ============================================================= */
@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #fff; }

  /* Cacher tout */
  body * { visibility: hidden; }

  /* Afficher uniquement le certificat et son contenu */
  .cert-tp, .cert-tp * { visibility: visible; }

  /* Le certificat occupe toute la page, override de l'aspect-ratio écran */
  .cert-tp {
    position: absolute !important;
    left: 0; top: 0;
    width: 100% !important;
    height: 100vh !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
}