/* =========================================================================
   Le kit de récupération, à imprimer ou à enregistrer en PDF.

   Construit et retiré par public/app/douze-mots.js (imprimerKit) : un
   <div class="kit-impression"> ajouté à <body> le temps de la boîte
   d'impression, avec data-impression="kit" sur la racine. Rempli des douze mots,
   ou vierge (data-vierge), pour être rempli à la main.

   POURQUOI DES COULEURS EN DUR, contrairement à coffre.css : une feuille de
   papier n'a pas de mode sombre. Reprendre « --texte » et « --fond » donnerait,
   chez qui lit en mode nuit, un texte crème sur une page blanche. Le kit est
   donc encre sur blanc, écrit une fois, ici. L'ambre de la charte ne sert qu'aux
   filets et aux petits titres : il s'imprime aussi en niveaux de gris.

   POURQUOI « display:none » et pas « hidden » : un élément caché l'est aussi à
   l'impression. Le kit est masqué à l'écran, et le basculement se fait par
   l'attribut de la racine.
   ========================================================================= */

.kit-impression { display: none; }

@media print {

  @page { size: A4 portrait; margin: 15mm 17mm; }

  /* Pendant l'impression du kit, tout le reste sort de la page : la barre, la
     colonne, le panneau, les notifications, et le grain de la charte. */
  :root[data-impression="kit"] body > *:not(.kit-impression) { display: none !important; }
  :root[data-impression="kit"] body::after { display: none !important; }
  :root[data-impression="kit"],
  :root[data-impression="kit"] body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }

  :root[data-impression="kit"] .kit-impression {
    display: block;
    color: #141D2E;
    background: #fff;
    font-family: Bricolage, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 9.5pt;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Les marges du site (lumiere.css : « section » en porte plus de sept
     centimètres) n'ont rien à faire sur la feuille. */
  .kit-impression h1,
  .kit-impression h2,
  .kit-impression p,
  .kit-impression ul,
  .kit-impression ol,
  .kit-impression dl,
  .kit-impression dd { margin: 0; }
  .kit-impression section,
  .kit-impression header,
  .kit-impression footer { padding-block: 0; }

  /* ---------------------------------------------------------------- tête */
  .kit-impression .kit-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4mm;
    border-bottom: .6pt solid #CFC6B3;
  }
  .kit-logo { display: block; width: auto; height: 11mm; }
  .kit-surtitre {
    font: 400 7.5pt/1 JetBrains, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #92540A;
  }

  .kit-titre {
    margin: 7mm 0 4mm !important;
    font: 500 21pt/1.15 Sora, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    letter-spacing: -.025em;
    color: #141D2E;
  }

  .kit-identite {
    display: flex;
    flex-wrap: wrap;
    gap: 2mm 12mm;
    margin-bottom: 6mm !important;
  }
  .kit-identite > div { display: flex; align-items: baseline; gap: 3mm; }
  .kit-identite dt {
    font: 400 7pt/1 JetBrains, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #616B7D;
  }
  .kit-identite dd { font-size: 10.5pt; color: #141D2E; }
  /* Vierge, la date est une ligne à remplir. */
  .kit-impression[data-vierge] .kit-identite > div:last-child dd {
    display: inline-block;
    min-width: 42mm;
    border-bottom: .6pt solid #9AA1AE;
  }

  /* --------------------------------------------------------- les mots */
  /* Trois colonnes de quatre, lues colonne par colonne, comme à l'écran. */
  .kit-bloc-mots { break-inside: avoid; margin-bottom: 5mm; }
  .kit-mots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 4.2mm 9mm;
    padding: 7mm 7mm 6.5mm;
    list-style: none;
    border: .9pt solid #92540A;
    border-radius: 3.5mm;
    background: #FBF8F2;
  }
  .kit-mot {
    display: flex;
    align-items: baseline;
    gap: 3mm;
    min-width: 0;
    break-inside: avoid;
  }
  .kit-mot-numero {
    flex: none;
    min-width: 5mm;
    text-align: right;
    font: 400 8.5pt/1 JetBrains, "SFMono-Regular", Menlo, Consolas, monospace;
    color: #8A6A2E;
    font-variant-numeric: tabular-nums;
  }
  .kit-mot-texte {
    flex: 1 1 auto;
    min-width: 0;
    font: 400 14.5pt/1.25 JetBrains, "SFMono-Regular", Menlo, Consolas, monospace;
    color: #141D2E;
    overflow-wrap: anywhere;
  }
  /* Vierge : une ligne par mot, assez haute pour une écriture à la main. */
  .kit-impression[data-vierge] .kit-mots { gap: 2mm 9mm; background: #fff; }
  .kit-impression[data-vierge] .kit-mot-texte {
    display: block;
    height: 9mm;
    border-bottom: .6pt solid #9AA1AE;
  }

  .kit-aide {
    margin-top: 2.5mm !important;
    font-size: 8.5pt;
    color: #46526A;
  }

  .kit-role {
    margin-bottom: 6mm !important;
    max-width: 160mm;
    font-size: 10.5pt;
    line-height: 1.55;
    color: #141D2E;
  }

  /* ------------------------------------------------------ les conseils */
  .kit-colonnes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9mm;
    margin-bottom: 6mm;
  }
  .kit-bloc { break-inside: avoid; }
  .kit-bloc h2 {
    margin-bottom: 2.5mm !important;
    font: 600 10.5pt/1.3 Sora, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    letter-spacing: -.01em;
    color: #141D2E;
  }
  .kit-bloc ul,
  .kit-bloc ol {
    display: grid;
    gap: 2mm;
    padding-left: 4.5mm;
    color: #2B3547;
  }
  .kit-bloc li::marker { color: #92540A; }
  .kit-bloc ol li::marker { font: 400 8pt JetBrains, "SFMono-Regular", Menlo, monospace; }
  .kit-bloc b { font-weight: 600; color: #141D2E; }

  .kit-impression .kit-rendez-vous {
    margin-bottom: 7mm;
    padding: 1mm 0 1mm 4.5mm;
    border-left: 1.6pt solid #E8A33D;
  }
  .kit-rendez-vous p { max-width: 160mm; color: #2B3547; }

  /* ------------------------------------------------------------- pied */
  .kit-impression .kit-pied {
    display: grid;
    gap: 1.5mm;
    padding-top: 3.5mm;
    border-top: .6pt solid #CFC6B3;
    font-size: 8pt;
    color: #616B7D;
    break-inside: avoid;
  }

  /* Impression d'une autre page que le kit : on enlève ce qui n'a pas de sens
     sur papier, et on laisse le reste au navigateur. */
  :root:not([data-impression]) .barre,
  :root:not([data-impression]) .colonne,
  :root:not([data-impression]) .cartouche,
  :root:not([data-impression]) .barre-selection,
  :root:not([data-impression]) .voile-panneau,
  :root:not([data-impression]) .voile-colonne { display: none !important; }
}