/* ========================================
   TECHNO DOCS - Styles impression / PDF
   Chargé uniquement en media="print"
   Cible : rendu A4 propre via Ctrl+P → Chrome
   Objectif : fiche type (2 activités + conclusion) sur 2 pages A4
   ======================================== */

@media print {
  /* ══════════════════════════════════════
       1. RESET DARK THEME
       ══════════════════════════════════════ */

  *,
  *::before,
  *::after {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Masquage radical des placeholders de chargement qui pourraient prendre de la place */
  #header-placeholder,
  .cours-hero,
  .fiche-meta {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ══════════════════════════════════════
       2. MASQUAGE
       ══════════════════════════════════════ */
  body > *:not(main) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header,
  footer,
  nav,
  .header,
  .footer {
    display: none !important;
  }

  .cours-hero {
    display: none !important;
  }

  .fiche-meta {
    display: none !important;
  }

  /* ══════════════════════════════════════
       3. AFFICHAGE PRINT-HEADER
       ══════════════════════════════════════ */
  .print-header {
    display: block !important;
    margin-bottom: 0 !important;
    border: 1pt solid #333 !important;
    position: relative;
    top: 0;
  }

  #markdown-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .md-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .md-content > *:first-child {
    margin-top: 0 !important;
  }

  main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .md-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .md-content tr {
    page-break-inside: avoid !important;
  }

  .print-header__identite {
    display: flex;
    gap: 3mm;
    padding: 2mm 3mm;
    border-bottom: 0.5pt solid #999 !important;
    background: #fff !important;
  }

  .print-header__champ {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 2mm;
  }

  .print-header__champ--court {
    flex: 0.5;
  }

  .print-header__label {
    font-size: 8pt;
    font-weight: 600;
    white-space: nowrap;
    color: #333 !important;
  }

  .print-header__ligne {
    flex: 1;
    border-bottom: 0.5pt solid #333 !important;
    min-width: 15mm;
  }

  .print-header__bandeau {
    display: flex;
    align-items: center;
    min-height: 12mm;
    border-bottom: 0.5pt solid #999 !important;
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-header__gauche {
    flex: 0 0 auto;
    padding: 2mm 4mm;
    border-right: 0.5pt solid #999 !important;
    text-align: center;
    min-width: 28mm;
  }

  .print-header__sequence {
    font-size: 9pt;
    font-weight: 700;
    color: #000 !important;
  }

  .print-header__seance {
    font-size: 8pt;
    color: #444 !important;
  }

  .print-header__centre {
    flex: 1;
    padding: 2mm 4mm;
    text-align: center;
  }

  .print-header__type {
    font-size: 16pt;
    font-weight: 700;
    color: #000 !important;
    letter-spacing: 0.5pt;
  }

  .print-header__titre {
    font-size: 11pt;
    color: #444 !important;
    margin-top: 0.5mm;
  }

  .print-header__droite {
    flex: 0 0 auto;
    padding: 2mm 4mm;
    border-left: 0.5pt solid #999 !important;
    text-align: center;
    min-width: 25mm;
  }

  .print-header__logo {
    font-size: 10pt;
    font-weight: 700;
    color: #555 !important;
    letter-spacing: 0.3pt;
  }

  .print-header__infos {
    display: flex;
    gap: 6mm;
    padding: 1.5mm 3mm;
    font-size: 8pt;
    color: #333 !important;
    background: #fff !important;
  }

  .print-header__infos strong {
    color: #000 !important;
  }

  /* ══════════════════════════════════════
       4. STRUCTURE PAGE
       ══════════════════════════════════════ */
  @page {
    size: A4 portrait;
    margin: 10mm;

    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-size: 11pt;
      color: #999;
    }
  }

  body {
    font-size: 13pt !important;
    line-height: 1.1 !important;
  }

  main {
    padding: 0 3mm !important;
  }

  /* ══════════════════════════════════════
       5. COMPOSANTS
       ══════════════════════════════════════ */

  /* Bandeau OST + Problématique */
  .fiche-ost {
    display: flex !important;
    flex-direction: column;
    gap: 2mm !important;
    border: 1pt solid #000;
    padding: 1mm 3mm !important;
    margin-bottom: 2mm !important;
  }

  .fiche-ost__item {
    display: flex !important;
    align-items: baseline; /* Aligne le texte sur la ligne de base */
    gap: 4mm;
    line-height: 1.1 !important;
  }

  .fiche-ost__label {
    font-size: 10pt !important;
    margin-bottom: 0 !important;
    flex: 0 0 35mm !important; /* Largeur fixe de 35mm */
    font-weight: bold;
    text-transform: uppercase;
    color: #444 !important;
  }

  .fiche-ost__value {
    font-size: 10pt !important;
    line-height: 1.1 !important;
    flex: 1 !important;
    font-family: "Space Grotesk", sans-serif; /* Pour rappeler votre style */
    border-left: 0.5pt solid #ccc; /* Petite séparation visuelle */
    padding-left: 3mm;
  }

  /* Travail demandé */
  .fiche-travail {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 1mm 3mm !important;
    margin-bottom: 2mm !important;
    font-size: 10pt !important;
    color: #000 !important;
  }

  .fiche-travail strong {
    color: #000 !important;
  }

  /* Blocs d'activité et conclusion */
  .fiche-activite,
  .fiche-conclusion {
    padding: 1.5mm 2mm !important;
    margin-bottom: 2mm !important;
    border: 1pt solid #999 !important;
  }

  .fiche-activite__titre,
  .fiche-conclusion__titre {
    font-size: 9pt !important;
    margin-top: 2mm;
    margin-bottom: 1mm !important;
    color: #000 !important;
  }

  /* Deux colonnes */
  .fiche-deux-colonnes {
    display: flex !important;
    gap: 2mm !important;
    display: flex !important;
    gap: 10mm !important;
    align-items: flex-start;
  }

  /* Colonne de droite (Zones de saisie / Tableaux) */
  .fiche-deux-colonnes__droite {
    flex: 1 !important; /* Prend tout l'espace restant (65%) */
  }

  /* Ajustement pour que les tableaux à l'intérieur occupent 100% de leur colonne */
  .fiche-deux-colonnes__droite table {
    width: 100% !important;
  }

  /* Zones de réponse */
  .zone-reponse {
    min-height: 30mm !important;
    margin: 2mm 0 !important;
    padding: 2mm 3mm !important;
    border: 0.5pt solid #bbb !important;
    background: #fff !important;
  }

  .zone-reponse--medium {
    min-height: 45mm !important;
  }

  .zone-reponse--large {
    min-height: 60mm !important;
  }

  .zone-reponse--compact {
    min-height: 20mm !important;
  }

  .zone-reponse--lignes {
    background: #fff !important;
    background-image: repeating-linear-gradient(
      transparent,
      transparent 1.4rem,
      #ddd 1.4rem,
      #ddd calc(1.4rem + 1px)
    ) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .zone-reponse--fill {
    flex-grow: 1;
    min-height: 15mm !important;
  }

  /* Bloc notes */
  .fiche-notes {
    border: 0.5pt dashed #aaa !important;
    padding: 1mm 2mm !important;
    margin-top: 1mm !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .fiche-notes__titre {
    font-size: 7pt !important;
    font-weight: 600;
    margin-bottom: 0.5mm !important;
    color: #666 !important;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
  }

  /* Zone illustration */
  .zone-illustration {
    min-height: 40mm !important;
    border: 0.5pt dashed #aaa !important;
  }

  /* ── Images fiches : réduire en print ── */
  .fiche-img {
    margin: 1mm 0 !important;
    border: 0.5pt solid #999 !important;
  }

  .fiche-img img {
    opacity: 1 !important;
    max-height: 105mm !important;
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .fiche-img__caption {
    font-size: 7pt !important;
    padding: 0.5mm 2mm !important;
    border-top: 0.5pt solid #999 !important;
    color: #666 !important;
  }

  /* Badge ordi */
  .fiche-ordi {
    border: 0.5pt solid #999 !important;
    background: none !important;
    font-size: 8pt;
    padding: 1mm 2mm;
  }

  /* ══════════════════════════════════════
       6. TYPOGRAPHIE MARKDOWN
       ══════════════════════════════════════ */
  .md-content {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .md-content p {
    margin: 0.5mm 0 !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
  }

  .md-content ul,
  .md-content ol {
    margin: 0.5mm 0 !important;
    padding-left: 5mm !important;
  }

  .md-content li {
    margin-bottom: 0.25mm !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
  }

  .md-content table {
    font-size: 8pt !important;
    margin: 1mm 0 !important;
  }

  .md-content th,
  .md-content td {
    height: 8mm !important; /* Donne de l'espace pour écrire les chiffres */
    border: 0.5pt solid #666 !important;
    padding: 0.5mm 2mm !important;
    font-size: 7.5pt !important;
  }

  .md-content th {
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
  }

  .md-content hr {
    margin: 1mm 0 !important;
    border-width: 0.5pt !important;
  }

  .md-content h2 {
    font-size: 12pt !important;
    margin: 3mm 0 2mm 0 !important;
  }

  .md-content h3 {
    font-size: 11pt !important;
    margin: 2mm 0 1mm 0 !important;
  }

  .md-content h4 {
    font-size: 10pt !important;
    font-weight: 600;
    margin: 1.5mm 0 1mm 0 !important;
    page-break-after: avoid;
  }

  .md-content blockquote {
    margin: 2mm 0 !important;
    padding: 1.5mm 3mm !important;
    border-left: 2pt solid #999 !important;
    font-size: 9pt !important;
  }

  /* ══════════════════════════════════════
       7. SAUTS DE PAGE
       ══════════════════════════════════════ */
  .fiche-ost,
  .fiche-travail,
  .fiche-conclusion {
    page-break-inside: avoid;
  }

  .fiche-activite__titre,
  .fiche-conclusion__titre {
    page-break-after: avoid;
  }

  .zone-reponse,
  .zone-illustration {
    page-break-inside: avoid;
  }

  .md-content pre {
    page-break-inside: avoid;
  }

  .md-content table {
    page-break-inside: avoid;
    page-break-before: avoid;
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 4mm !important;
  }

  .page-break {
    page-break-before: always;
  }
}