/*
 * Carte de séjour biométrique — format ID-1 (85,6 × 53,98 mm).
 *
 * Toutes les dimensions intérieures sont en unités de conteneur (cqw) : la
 * carte garde ses proportions exactes de 320 px jusqu'à l'impression.
 */

.jeu-carte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.5rem;
  margin: 1rem 0;
}

.carte-sejour {
  container-type: inline-size;
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 85.6 / 53.98;
  border-radius: 3.4cqw;
  overflow: hidden;
  color: #111b24;
  font-family: var(--sans);
  /* Fond clair bleu-gris : le micro-texte et les traits fins portent la sécurité visuelle. */
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #f4f7fa 0%, #e6eef5 45%, #dfe8f1 70%, #eef3f7 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 0 0 1px rgba(44, 62, 80, .18),
    0 18px 40px -18px rgba(0, 40, 20, .45);
  isolation: isolate;
}

/* Reflet holographique en diagonale. */
.carte-sejour::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 38%, rgba(120, 220, 200, .10) 44%, rgba(255, 225, 120, .15) 50%, rgba(210, 140, 220, .10) 56%, transparent 62%);
  pointer-events: none;
  z-index: 5;
}

.cs-fond, .cs-guilloche { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }

.cs-champ { min-width: 0; }
.cs-large { grid-column: 1 / -1; }
.cs-champ dt { font-size: 1.55cqw; text-transform: uppercase; letter-spacing: .03em; color: #2c3e50; line-height: 1.15; }
.cs-champ dt i { font-style: italic; color: #4b6075; text-transform: none; }
.cs-champ dd { font-variant-numeric: tabular-nums; margin: 0; font-size: 2.7cqw; font-weight: 700; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-champs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.2cqw; row-gap: .75cqw; align-content: start; }

/* --------------------------------- Recto -------------------------------- */
.cs-entete {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 3.4cqw 4cqw 0;
}
.cs-drapeau { width: 9.5cqw; height: auto; border-radius: .4cqw; box-shadow: 0 0 0 .15cqw rgba(0, 0, 0, .12); flex: none; }
.cs-republique { flex: 1; display: flex; flex-direction: column; line-height: 1.05; }
.cs-republique strong { font-size: 4.3cqw; font-weight: 800; letter-spacing: .07em; color: #0d4a2c; }
.cs-republique span { font-size: 2cqw; font-weight: 600; letter-spacing: .06em; color: #2c3e50; margin-top: .5cqw; }
.cs-republique span i { font-style: normal; font-weight: 500; }
.cs-code-pays {
  flex: none; display: grid; place-items: center; width: 9cqw; height: 6.2cqw; border-radius: .6cqw;
  background: #0d4a2c; color: #fdef42; font-weight: 800; font-size: 3cqw; letter-spacing: .05em;
}

/* Grande photo en noir et blanc, à gauche. */
.cs-photo {
  position: absolute; left: 4cqw; top: 15.5cqw; width: 25cqw; aspect-ratio: 35 / 45;
  border-radius: 1cqw; overflow: hidden; background: #d9e2ea;
}
.cs-photo img, .cs-photo svg { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.08); }
/* Image fantôme teintée, qui chevauche le bord de la photo : substituer l'une sans l'autre se voit. */
.cs-fantome {
  position: absolute; left: 24cqw; top: 22cqw; width: 11cqw; aspect-ratio: 35 / 45;
  opacity: .5; mix-blend-mode: multiply;
}
.cs-fantome img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% 50% 40% 40%; filter: grayscale(1) sepia(1) hue-rotate(55deg) saturate(2.2) brightness(1.15) contrast(.9); }
.cs-fantome svg { width: 100%; height: 100%; fill: #7dbb6f; }

.cs-champs-recto { position: absolute; left: 37cqw; top: 15cqw; width: 32cqw; row-gap: .9cqw; grid-template-columns: .7fr 1fr; }
.cs-dates { position: absolute; right: 3.6cqw; top: 25cqw; width: 25cqw; grid-template-columns: 1fr; row-gap: 2cqw; }
.cs-champ dd { color: #111b24; }
.cs-nom { font-size: 3.6cqw !important; letter-spacing: .05em !important; }
.cs-prenoms { font-size: 3cqw !important; font-weight: 600 !important; }
.cs-dates dd { font-size: 3cqw; letter-spacing: .07em; font-weight: 600; overflow: visible; }
.cs-motif dd { font-size: 2.6cqw; letter-spacing: .08em; }
.cs-numero dd { font-size: 3.9cqw !important; font-weight: 800 !important; letter-spacing: .06em !important; }

/* --------------------------------- Verso -------------------------------- */
/* Puce de contact au verso, au-dessus du QR code : or brossé et plages de contact. */
.cs-puce {
  width: 11cqw; height: 8.4cqw; margin-bottom: .6cqw; align-self: flex-start;
  border-radius: 1.3cqw;
  background: linear-gradient(135deg, #f7e19a 0%, #d4a93c 45%, #f3d27a 60%, #b98a26 100%);
  box-shadow: inset 0 0 0 .2cqw rgba(110, 75, 10, .45);
  display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw; padding: 1cqw;
}
.cs-puce span { border: .18cqw solid rgba(110, 75, 10, .45); border-radius: .4cqw; }
.cs-verso-haut {
  display: grid;
  grid-template-columns: 1fr 26cqw;
  gap: 3cqw;
  padding: 3cqw 3.6cqw 0;
}
.cs-champs-verso { row-gap: 1.05cqw; }
.cs-champs-verso dd { font-size: 2.3cqw; }
.cs-immat dd { font-variant-numeric: tabular-nums; font-size: 2.7cqw !important; font-weight: 800 !important; color: #111b24; letter-spacing: .06em !important; }
.cs-qr { position: relative; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: .8cqw; }
.cs-qr svg { width: 100%; height: auto; background: #fff; border-radius: 1cqw; padding: .6cqw; box-shadow: 0 0 0 .2cqw rgba(44, 62, 80, .2); }
.cs-qr small { font-size: 1.5cqw; text-align: center; line-height: 1.2; color: #2c3e50; }
.cs-qr i { color: #4b6075; }

.cs-mrz {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.8cqw 3.6cqw 2.4cqw;
  background: rgba(255, 255, 255, .82);
  display: flex;
  flex-direction: column;
  font-family: "OCR-B", "OCR B", "OCRB", "Consolas", "Menlo", "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 3.55cqw;
  letter-spacing: .17em;
  line-height: 1.22;
  color: #111;
  white-space: pre;
}

/* ------------------------------ Spécimen ------------------------------- */
.cs-specimen {
  position: absolute;
  top: 55%; left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font-size: 10cqw;
  font-weight: 900;
  letter-spacing: .12em;
  color: rgba(179, 18, 27, .15);
  border: .6cqw solid rgba(179, 18, 27, .15);
  padding: 0 3cqw;
  border-radius: 2cqw;
  pointer-events: none;
  z-index: 6;
}
.cs-specimen-verso { left: 38%; top: 42%; }

.page-carte-imprimable .jeu-carte { max-width: 1120px; }

@media print {
  .bandeau-officiel, .en-tete, .pied, .non-imprime { display: none !important; }
  .jeu-carte { display: block; }
  .carte-sejour { width: 85.6mm; max-width: none; box-shadow: none; margin: 0 0 8mm; page-break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .carte-sejour::after { display: none; }
}