/**
 * ANACOLUTHE - CSS PRINT A6 (AUTONOME)
 * ====================================
 * Styles pour le rendu PDF des cartes A6 via Puppeteer
 * 
 * ⚠️ FICHIER AUTONOME - ne dépend PAS de style.css ni cards.css
 * Peut être chargé seul par Puppeteer pour le rendu PDF
 * 
 * CHAÎNE DE RENDU :
 * 1. Markdown source (card.path)
 * 2. Marked.js parse MD → HTML
 * 3. Ce CSS stylise le HTML
 * 4. Twemoji convertit emojis → SVG
 * 5. Auto-fit ajuste font-size si débordement
 * 6. Puppeteer capture → PDF
 * 
 * FORMAT :
 * - A6 = 105 × 148 mm
 * - Padding = 5mm
 * - Zone utile = 95 × 138 mm
 * 
 * MODIFIER CE FICHIER POUR :
 * - Ajuster les tailles de texte print
 * - Modifier les marges/espacements
 * - Changer les couleurs par type de carte
 */

/* ========================================
   FONTS (autonome - pas besoin de style.css)
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Merriweather+Sans:wght@400;600;700;800&display=swap');

/* ========================================
   VARIABLES PRINT (autonome)
   ======================================== */
:root {
    /* === COULEURS (dupliquées de style.css pour autonomie) === */
    
    /* Texte */
    --text-dark: #2D3748;
    --border-light: #D1D5DB;
    
    /* Couleurs officielles Les Glénans */
    --rouge-glenans: #F04839;
    
    /* Accents par type (titres uniquement, fonds = blanc) */
    --amber-700: #c96a30;   /* Rôles - principal */
    --teal-700: #3d8b87;    /* Moments - principal */
    --brick-700: #C62828;   /* SOS - principal (rouge brique) */
    
    /* Accents secondaires (H3, H4) */
    --amber-accent: #3d8b87;   /* Rôles → teal */
    --teal-accent: #c96a30;    /* Moments → amber */
    --brick-accent: #0066AD;   /* SOS → bleu Glénans */
    
    /* Couleurs légères pour borders */
    --amber-50: #fff8f0;
    --teal-50: #e8f4f3;
    --brick-50: #FFEBEE;
    --amber-200: #fcd9b8;
    --teal-200: #a3d4d0;
    --brick-200: #EF9A9A;
    --glenans-200: #90caf9;  /* Bleu Glénans clair */
    --amber-300: #f5b078;
    --teal-300: #7ec4bf;
    --brick-300: #E57373;
    
    /* === DIMENSIONS A6 === */
    --a6-width: 105mm;
    --a6-height: 148mm;
    --card-padding: 5mm;
    
    /* === FONT SIZING === */
    /* Base et limites pour auto-fit */
    --print-base-font-size: 11pt;
    --print-font-size-min: 5.5pt;
    --print-font-size-max: 11pt;
    --print-font-size-step: 0.1pt;
    
    /* Ratios pour les titres (en em, relatifs à --print-base-font-size) */
    --print-h1-size: 1.8em;     /* ~18pt à base 10pt */
    --print-h2-size: 1.25em;    /* ~12.5pt à base 10pt */
    --print-h3-size: 1.05em;    /* ~10.5pt */
    --print-h6-size: 1em;       /* ~10pt */
    --print-small-size: 0.778em; /* ~7.8pt */
}

/* ========================================
   CARTE A6 - Container
   ======================================== */
.print-card-face {
    width: var(--a6-width);
    height: var(--a6-height);
    background: #fff;
    border: none;
    /* border-radius: pas de valeur = 0 par défaut (PDF), prévisualisation gère son propre radius */
    padding: var(--card-padding);
    overflow: hidden;
    position: relative;
    
    /* Reset de base pour autonomie */
    box-sizing: border-box;
    margin: 0;
}

/* ========================================
   TYPES DE CARTES - Fonds blancs (économie d'encre)
   ======================================== */
.print-card-face.type-role { 
    background: #fff; 
}

.print-card-face.type-moment { 
    background: #fff; 
}

.print-card-face.type-sos { 
    background: #fff; 
}

.print-card-face.type-affiche { 
    background: #fff; 
}

/* ========================================
   CONTENU - Typographie
   ======================================== */
.print-card-content {
    height: 100%;
    overflow: hidden;
    font-family: 'Merriweather', serif;
    font-weight: 300;
    font-size: var(--print-base-font-size);
    line-height: 1.5;
    color: var(--text-dark);
    
    /* Reset pour autonomie */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* H1 - Titre principal */
.print-card-content h1 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: var(--print-h1-size);
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 0.2em 0;
    padding: 0;
    line-height: 1.2;
}

.type-role .print-card-content h1 { color: var(--amber-700); }
.type-moment .print-card-content h1 { color: var(--teal-700); }
.type-sos .print-card-content h1 { color: var(--brick-700); }

/* H6 - Sous-titre (après H1) */
.print-card-content h6 {
    font-family: 'Merriweather', serif;
    font-size: var(--print-h6-size);
    font-weight: 400;
    font-style: italic;
    margin: 0 0 1.1em 0;
    padding: 0;
    opacity: 0.8;
}

.type-role .print-card-content h6 { color: var(--amber-accent); }
.type-moment .print-card-content h6 { color: var(--teal-accent); }
.type-sos .print-card-content h6 { color: var(--brick-accent); }

/* H2 - Sections */
.print-card-content h2 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: var(--print-h2-size);
    font-weight: 800;
    text-transform: uppercase;
    margin: 1.2em 0 0.4em 0;
    padding-top: 0.4em;
    border-top: 1px solid #ddd;
}

/* Border H2 par type (couleur d'accent légère) */
.type-role .print-card-content h2 { border-top-color: var(--teal-200); }
.type-moment .print-card-content h2 { border-top-color: var(--amber-200); }
.type-sos .print-card-content h2 { border-top-color: var(--glenans-200); }

/* H2 en tête de page (verso) - pas de border-top */
.print-card-content > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.type-role .print-card-content h2 { color: var(--amber-700); }
.type-moment .print-card-content h2 { color: var(--teal-700); }
.type-sos .print-card-content h2 { color: var(--brick-700); }

/* H3 - Sous-sections (couleur accent) */
.print-card-content h3 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: var(--print-h3-size);
    font-weight: 600;
    margin: 0.55em 0 0.28em 0;
    padding: 0;
}

.type-role .print-card-content h3 { color: var(--amber-accent); }
.type-moment .print-card-content h3 { color: var(--teal-accent); }
.type-sos .print-card-content h3 { color: var(--brick-accent); }

/* H4 - Sous-sous-sections (couleur accent) */
.print-card-content h4 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 1em;
    font-weight: 600;
    margin: 0.4em 0 0.2em 0;
    padding: 0;
}

.type-role .print-card-content h4 { color: var(--amber-accent); }
.type-moment .print-card-content h4 { color: var(--teal-accent); }
.type-sos .print-card-content h4 { color: var(--brick-accent); }

/* Paragraphes */
.print-card-content p {
    margin: 0 0 0.55em 0;
    padding: 0;
    text-align: left;
}

/* Dernier élément - pas de margin-bottom (évite espace perdu en auto-fit) */
.print-card-content > *:last-child,
.print-card-content > *:last-child > *:last-child {
    margin-bottom: 0;
}

/* Citations */
.print-card-content blockquote {
    font-style: italic;
    padding: 0 0 0 0.85em;
    border-left: 2pt solid var(--border-light);
    margin: 0 0 0.55em 0;
}

/* Couleur bordure blockquote par type (accent) */
.type-role .print-card-content blockquote { border-left-color: var(--amber-accent); }
.type-moment .print-card-content blockquote { border-left-color: var(--teal-accent); }
.type-sos .print-card-content blockquote { border-left-color: var(--brick-accent); }

/* Listes */
.print-card-content ul,
.print-card-content ol {
    margin: 0 0 0.55em 0;
    padding: 0 0 0 1.4em;  /* padding-left au lieu de margin pour garder les puces visibles */
    list-style-position: outside;
}

.print-card-content li {
    margin: 0;
    padding: 0;
    /* Éviter que les puces soient coupées si rognage */
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Couleur des puces/numéros (accent) */
.print-card-content li::marker {
    font-weight: 700;
}

.type-role .print-card-content li::marker { color: var(--amber-accent); }
.type-moment .print-card-content li::marker { color: var(--teal-accent); }
.type-sos .print-card-content li::marker { color: var(--brick-accent); }

/* Emphases */
.print-card-content strong {
    font-weight: 700;
}

.print-card-content em {
    font-style: italic;
}

/* Séparateurs - trait court centré, couleur principale-300 */
.print-card-content hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 0.8em auto;
    width: 50%;
}

.type-role .print-card-content hr { border-top-color: var(--amber-300); }
.type-moment .print-card-content hr { border-top-color: var(--teal-300); }
.type-sos .print-card-content hr { border-top-color: var(--brick-300); }

/* Liens */
.print-card-content a {
    color: inherit;
    text-decoration: none;
}

/* Video embed - masqué en print */
.video-embed {
    display: none;
}

/* ========================================
   TWEMOJI - Emojis en SVG
   ======================================== */
.print-card-content img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
}

.print-card-content h1 img.emoji {
    height: 1.2em;
    width: 1.2em;
}

/* ========================================
   INDICATEURS (masqués en mode Puppeteer)
   ======================================== */
.overflow-warning {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(255,0,0,0.2));
    color: var(--rouge-glenans);
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 8pt;
    font-weight: 700;
    text-align: center;
    padding: 10mm 2mm 2mm;
    pointer-events: none;
}

.overflow-warning.hidden {
    display: none;
}

body.mode-print .overflow-warning {
    display: none;
}

/* ========================================
   MARQUEURS SKIP - Masquage conditionnel
   ======================================== */
/* En mode print, on masque les blocs SKIP-PRINT */
.skip-print {
    display: none;
}

/* En mode print, on affiche les blocs SKIP-WEB (ils sont masqués en web) */
.skip-web {
    display: block;
}

/* ========================================
   @MEDIA PRINT (Ctrl+P)
   ======================================== */
@media print {
    .print-card-face {
        box-shadow: none;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    .overflow-warning {
        display: none;
    }
    
    @page {
        size: 105mm 148mm;
        margin: 0;
    }
}