/* Cartes à imprimer — aperçu des pages A4, les cartes, mise en page d'impression.
   Repris de la file d'attente (css/cartes.css). Réglages à l'écran : cartes-reglages.css ; palette, police
   et boutons : base.css. Marqueurs, numéros et dispositions inchangés (D2, D9, D13).
   Les mesures (--largeur-carte, --hauteur-carte, --marqueur, --bande, --lettre, --libelle, --numero,
   --colonnes, --lignes) sont posées sur chaque .page par js/cartes-carte.js. */

:root {
  --trait: 0.25mm dashed #9aa5ad; /* lignes de découpe */
}

html {
  font-size: 18px;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 1rem;
  font-family: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  color: var(--texte);
  background: var(--ardoise);
}

h1 {
  margin: 0;
  font-weight: 600;
}

/* ---------- Aperçu des pages ---------- */

.pages {
  overflow-x: auto;
  padding-bottom: 1rem;
}

.page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 1.5rem;
  padding: 6mm;
  background: #fff;
  color: var(--encre);
  box-shadow: var(--ombre);
}

.page-cartes {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), var(--largeur-carte));
  grid-auto-rows: var(--hauteur-carte);
  align-content: start;
}

/* ---------- Une carte ---------- */

.carte {
  position: relative;
  width: var(--largeur-carte);
  height: var(--hauteur-carte);
  overflow: hidden;
  background: #fff;
  color: var(--encre);
  border-right: var(--trait);
  border-bottom: var(--trait);
  break-inside: avoid;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Une seule ligne de découpe entre deux cartes. */
.carte.premiere-colonne { border-left: var(--trait); }
.carte.premiere-ligne { border-top: var(--trait); }

.marqueur {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--marqueur);
  height: var(--marqueur);
  transform: translate(-50%, -50%);
}

.marqueur svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Lettre de chaque bord : la boîte est centrée sur la bande du bord, puis tournée pour que le haut
   des lettres regarde ce bord (A lisible carte droite, B lisible quand le bord droit est en haut…). */
.bord {
  position: absolute;
  height: var(--bande);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  white-space: nowrap;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.bord-haut { left: 50%; top: calc(var(--bande) / 2); }
.bord-droite { left: calc(100% - var(--bande) / 2); top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.bord-bas { left: 50%; top: calc(100% - var(--bande) / 2); transform: translate(-50%, -50%) rotate(180deg); }
.bord-gauche { left: calc(var(--bande) / 2); top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }

.lettre {
  font-size: var(--lettre);
  font-weight: 700;
  line-height: 1;
}

.forme {
  display: block;
  flex: none;
  width: calc(var(--lettre) * 0.78);
  height: calc(var(--lettre) * 0.78);
}

.forme svg {
  display: block;
  width: 100%;
  height: 100%;
}

.libelle {
  padding: 0.05em 0.6em;
  border: 0.3mm solid transparent;
  border-radius: 999px;
  font-size: var(--libelle);
  font-weight: 600;
  line-height: 1.1;
}

/* Mêmes codes que les cartes de la file d'attente : inscription = pastille pleine, retrait = contour. */
.libelle-inscrire.libelle-question { background: var(--jaune); border-color: var(--jaune); }
.libelle-inscrire.libelle-correction { background: #a9cdf5; border-color: #a9cdf5; }
.libelle-retirer.libelle-question { border-color: var(--jaune-fonce); color: var(--jaune-fonce); }
.libelle-retirer.libelle-correction { border-color: var(--bleu-fonce); color: var(--bleu-fonce); }

.coin {
  position: absolute;
  line-height: 1;
}

.coin-numero {
  left: 1.5mm;
  top: 1.5mm;
  font-size: var(--numero);
  font-weight: 700;
}

.coin-taille {
  right: 1.5mm;
  bottom: 1.5mm;
  font-size: 5.5pt;
  font-weight: 400;
  color: #7d8a92;
}

/* ---------- Page du protocole (planche de test 0b) ---------- */

.page-protocole {
  display: grid;
  align-content: start;
  gap: 5mm;
  font-size: 11.5pt;
  line-height: 1.4;
}

.page-protocole h2 { margin: 0; font-size: 20pt; }
.page-protocole p { margin: 0; }
.protocole-etapes { margin: 0; padding-left: 7mm; display: grid; gap: 2mm; }

.protocole-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
}

.protocole-tableau th,
.protocole-tableau td {
  height: 16mm;
  padding: 1.5mm;
  border: 0.3mm solid #5b6770;
  text-align: left;
  vertical-align: top;
}

.protocole-tableau thead th { height: auto; background: #eef1f3; }

/* ---------- Dépôt de fichier ---------- */

.zone-depot {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(31, 43, 49, 0.85);
  font-size: 2rem;
  font-weight: 600;
  pointer-events: none;
}

.zone-depot p {
  padding: 2rem 3rem;
  border: 4px dashed var(--texte-doux);
  border-radius: var(--rayon);
}

/* ---------- Impression : A4 à 100 % ---------- */

@page {
  size: A4 portrait;
  margin: 6mm;
}

@media print {
  html { font-size: 12pt; }

  body {
    min-height: 0;
    padding: 0;
    background: #fff;
  }

  .entete,
  .reglages,
  .zone-depot,
  .toast {
    display: none !important;
  }

  .pages {
    overflow: visible;
    padding: 0;
  }

  .page {
    width: 198mm;
    min-height: 0;
    height: 284mm;
    margin: 0;
    padding: 0;
    box-shadow: none;
    break-after: page;
    overflow: hidden;
  }

  .page:last-child { break-after: auto; }
}

@media (max-width: 720px) {
  html { font-size: 16px; }
}