/* ============================================================
   Fiche A4 imprimable — styles partagés par la page publique
   (/fiche) et le dashboard (#printArea). Tout est préfixé .fiche
   pour ne jamais fuiter dans l'interface de l'app.
   ============================================================ */
/* Marges de page assumées : iOS Safari IGNORE margin:0 et impose les siennes —
   une feuille pleine hauteur débordait alors sur une 2e page (pages blanches). */
@page { size: A4 portrait; margin: 8mm; }

.fiche { --mc: #47566B; --mc-light: #6B7A8F; --mc-soft: #EEF1F4; }
.fiche * { box-sizing: border-box; }
.fiche .sheet {
  /* 260mm : tient dans la zone imprimable même avec les marges qu'iOS impose
     (une feuille trop haute déborde → page blanche après CHAQUE page) */
  width: 194mm; height: 260mm; margin: 0 auto; background: #fff;
  position: relative; display: flex; flex-direction: column;
  overflow: hidden;
  page-break-inside: avoid; break-inside: avoid;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1D1D1F; text-align: left;
  /* conserve fonds et couleurs à l'impression (pastilles, carte, dégradés) */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* saut de page AVANT chaque feuille suivante : jamais de saut traînant en fin */
.fiche .sheet + .sheet { page-break-before: always; break-before: page; }

/* ---------- recto ---------- */
/* la bannière est une VRAIE image (les fonds CSS ne s'impriment pas) */
.fiche .banner { height: 50mm; position: relative; overflow: visible; }
.fiche .banner .bannerimg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.fiche .logo {
  position: absolute; left: 50%; bottom: -14mm; transform: translateX(-50%);
  width: 28mm; height: 28mm; border-radius: 7mm;
  background: var(--mc); color: #fff; font-weight: 800; font-size: 11mm;
  display: grid; place-items: center; overflow: hidden;
  border: 1.6mm solid #fff; box-shadow: 0 2mm 7mm rgba(0,0,0,.18);
}
.fiche .logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.fiche .rname { text-align: center; margin: 18mm 10mm 1mm; font-size: 9.5mm; font-weight: 800; letter-spacing: -.02em; }
.fiche .rpill {
  display: block; width: fit-content; margin: 2.5mm auto 0;
  background: var(--mc-soft); color: var(--mc); border: .4mm solid var(--mc-light);
  font-weight: 700; font-size: 4.6mm; padding: 2mm 6.5mm; border-radius: 99mm;
}
.fiche .rphrase { text-align: center; margin: 7mm 14mm 1mm; font-size: 6.2mm; font-weight: 700; }
.fiche .rsub { text-align: center; color: #63676E; font-size: 4mm; margin: 0 14mm; }
.fiche .qrzone { display: flex; justify-content: center; margin: 7mm 0 2mm; }
.fiche .qrcard { background: #fff; border: .5mm solid #E2E4E8; border-radius: 6mm; padding: 5mm; box-shadow: 0 1.6mm 6mm rgba(0,0,0,.06); }
.fiche .qrcard img { display: block; width: 78mm; height: 78mm; image-rendering: pixelated; }
.fiche .steps { display: flex; justify-content: center; gap: 8mm; margin-top: 6mm; }
.fiche .step { text-align: center; width: 48mm; }
.fiche .step .ic { width: 13mm; height: 13mm; margin: 0 auto 2mm; border-radius: 4mm; background: #F2F3F5; display: grid; place-items: center; }
.fiche .step .ic svg { width: 6.5mm; height: 6.5mm; fill: none; stroke: #47566B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fiche .step .t { font-size: 3.4mm; color: #63676E; font-weight: 600; line-height: 1.3; }
.fiche .foot {
  margin-top: auto; border-top: .4mm solid #EEEFF1;
  padding: 4mm 10mm; display: flex; justify-content: space-between; align-items: center;
  font-size: 3.4mm; color: #8B909A;
}
.fiche .klik { font-weight: 800; letter-spacing: -.03em; color: #47566B; }
.fiche .klik::after { content: ""; display: inline-block; width: .3em; height: .3em; margin-left: .12em; background: #47566B; transform: rotate(45deg); border-radius: 20%; }
.fiche .kdomain { font-weight: 800; letter-spacing: -.01em; color: #47566B; }

/* ---------- verso ---------- */
.fiche .vhead { padding: 12mm 13mm 3mm; }
.fiche .vhead h2 { margin: 0; font-size: 8mm; letter-spacing: -.02em; }
.fiche .vhead p { margin: 1.5mm 0 0; color: #63676E; font-size: 4.1mm; }
.fiche .vsteps { padding: 3mm 13mm; display: grid; gap: 5mm; }
.fiche .vstep { display: flex; gap: 5mm; align-items: flex-start; }
.fiche .vstep .n { width: 10mm; height: 10mm; flex: none; border-radius: 3mm; background: var(--mc); color: #fff; font-weight: 800; font-size: 4.4mm; display: grid; place-items: center; }
.fiche .vstep .t { font-weight: 700; font-size: 4.6mm; }
.fiche .vstep .d { color: #63676E; font-size: 3.9mm; margin-top: .5mm; }
.fiche .vcardzone { display: flex; justify-content: center; margin: 6mm 0; }
.fiche .vcard { width: 92mm; border-radius: 5mm; padding: 5mm; background: linear-gradient(160deg, var(--mc-light), var(--mc)); color: #fff; box-shadow: 0 4mm 10mm rgba(0,0,0,.2); }
.fiche .vcard .top { display: flex; justify-content: space-between; font-weight: 700; font-size: 3.6mm; }
.fiche .vcard .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.6mm; margin-top: 4mm; }
.fiche .vcard .st { aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.fiche .vcard .st svg { width: 62%; height: 62%; }
.fiche .vcard .st.empty { background: transparent; border: .6mm solid rgba(255,255,255,.45); }
.fiche .vcard .gauge { margin-top: 5mm; height: 3.4mm; border-radius: 99mm; background: rgba(255,255,255,.28); position: relative; }
.fiche .vcard .gauge i { position: absolute; inset: 0 45% 0 0; border-radius: 99mm; background: #fff; }
.fiche .vcard .meta { display: flex; justify-content: space-between; font-size: 3mm; margin-top: 4mm; opacity: .85; }
.fiche .vbens { padding: 2mm 13mm; }
.fiche .vbens h3 { font-size: 4.2mm; letter-spacing: .1em; text-transform: uppercase; color: #8B909A; margin: 3mm 0; }
.fiche .ben { display: flex; gap: 4mm; align-items: flex-start; margin-bottom: 3.6mm; }
.fiche .ben svg { width: 5.5mm; height: 5.5mm; flex: none; margin-top: .5mm; fill: none; stroke: #178A50; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fiche .ben span { font-size: 4.1mm; color: #3A3E45; }

/* ---------- intégration dans le dashboard ----------
   À l'écran : la fiche n'existe pas. À l'impression : SEULE la fiche existe. */
@media screen { #printArea { display: none !important; } }
@media print {
  body.has-print-area { background: #fff !important; }
  body.has-print-area > *:not(#printArea) { display: none !important; }
  #printArea { display: block !important; }
  #printArea .sheet { box-shadow: none; border-radius: 0; margin: 0; }
}