/**
 * ANACOLUTHE - CSS PRINT A4 PAYSAGE (AFFICHES)
 * =============================================
 * Styles pour le rendu PDF des affiches A4 via Puppeteer
 *
 * ⚠️ FICHIER AUTONOME - ne dépend PAS de style.css ni cards.css
 * Peut être chargé seul par Puppeteer pour le rendu PDF
 *
 * FORMAT :
 * - A4 paysage = 297 × 210 mm
 * - Padding = 10mm
 * - Zone utile = 277 × 190 mm
 */

/* ========================================
   FONTS (autonome)
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;700;800&family=Merriweather:wght@300;400;700&display=swap');

/* ========================================
   VARIABLES PRINT A4
   ======================================== */
:root {
    /* === DIMENSIONS A4 PAYSAGE === */
    --a4-width: 297mm;
    --a4-height: 210mm;
    --affiche-padding: 15mm;

    /* === COULEURS (dupliquées de style.css pour autonomie) === */

    /* Texte */
    --text-dark: #2D3748;
    --text-light: #718096;
    --border-light: #D1D5DB;

    /* Couleurs officielles Les Glénans */
    --bleu-glenans: #0066AD;

    /* Accents Anacoluthe */
    --teal-700: #3d8b87;
    --teal-50: #e8f4f3;
    --amber-700: #c96a30;
    --amber-50: #fff8f0;
    --amber-100: #ffe8d4;
    --brick-50: #FFEBEE;
    --brick-700: #C62828;  /* Rouge Joker */
    --navy-700: #1E3A5F;   /* Bleu marine Affiches */

    /* Bleu mer (Douglas) - désaturé */
    --sea-700: #4a7c91;
    --sea-50: #e8f1f4;

    /* Blocs */
    --bloc-bg: #f9f7f6;  /* gris léger */
    --bloc-accent: #fff4c4;
}

/* ========================================
   RESET
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   AFFICHE A4 - Container principal
   ======================================== */
.affiche-a4 {
    width: var(--a4-width);
    height: var(--a4-height);
    aspect-ratio: 297 / 210;  /* A4 paysage */
    padding: var(--affiche-padding);
    background: white;
    font-family: 'Merriweather Sans', sans-serif;
    color: var(--text-dark);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Dernière section (Programme) prend l'espace restant */
.affiche-a4 .section:last-of-type {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;  /* Pas de marge en bas, on utilise tout l'espace */
}

.affiche-a4 .section:last-of-type .grid-6 {
    flex: 1;
    align-content: stretch;  /* Étirer les blocs sur toute la hauteur */
}

/* ========================================
   TITRE PRINCIPAL (30pt)
   ======================================== */
.affiche-header h1 {
    font-size: 28pt;
    font-weight: 800;
    color: var(--bleu-glenans);
    text-align: center;
    text-transform: uppercase;
}
.affiche-header {
    margin-bottom: 6mm;
}

.header-logo {
    height: 1.1em;
    width: auto;
    vertical-align: -0.15em;
}

/* ========================================
   SECTIONS
   ======================================== */
.section {
    margin-bottom: 5mm;
}

.section-header {
    display: flex;
    align-items: baseline;
    gap: 2mm;
    margin-bottom: 2mm;
}

.section-icon {
    font-size: 16pt;
}

.section-header h2 {
    font-size: 16pt;
    font-weight: 400;
    color: var(--teal-700);
    text-transform: uppercase;
}

.section-header h2 strong {
    font-weight: 700;
}

.instruction {
    margin-left: auto;
    font-size: 10pt;
    font-style: italic;
    font-family: 'Merriweather', serif;
    color: var(--text-light);
}

/* ========================================
   GRILLES
   ======================================== */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3mm;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3mm;
}

/* ========================================
   BLOCS (titres 12pt)
   ======================================== */
.bloc {
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 3mm 2mm;
    text-align: center;
    font-size: 10pt;
    font-family: 'Merriweather', serif;
    min-height: 18mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bloc strong {
    font-weight: 700;
    display: inline;
    color: #4a5568;  /* gris foncé doux */
}

.bloc .light {
    font-weight: 400;
    color: #4a5568;
}

/* Emoji et texte dans blocs intentions : display block pour saut de ligne naturel */
.bloc .emoji-line {
    display: block;
    opacity: 65%;
}

.bloc .text-line {
    display: block;
    opacity: 65%;
}

/* Colonnes multi-span */
.col-3 { grid-column: span 3; }

/* ========================================
   ACCENTS INTENTIONS
   Couleurs extrapolées depuis le système existant
   ======================================== */
.bloc.accent-patience {
    background: var(--teal-50);  /* #e8f4f3 - sérénité */
}

.bloc.accent-parole {
    background: #e8eef4;         /* bleu Glénans clair */
}

.bloc.accent-energie {
    background: #fff4c4;         /* jaune vif */
}

.bloc.accent-ecoute {
    background: #f4eef8;         /* violet clair */
}

.bloc.accent-precision {
    background: var(--brick-50); /* #FFEBEE - attention */
}

.bloc.accent-cooperation {
    background: var(--amber-50); /* #fff8f0 - chaleur */
}

/* ========================================
   BLOCS ÉDITABLES (Rôles, Programme)
   Contenu aligné en haut pour laisser de l'espace d'écriture
   ======================================== */
.bloc.editable {
    justify-content: flex-start;
    min-height: 22mm;
}

.bloc.editable.border-amber {
    border: 1px solid var(--amber-700);
}

.bloc.editable.border-teal {
    border: 1px solid var(--teal-700);
}  

/* Blocs éditables avec emoji + titre sur la même ligne (Rôles, Programme) */
.bloc.editable.inline {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 2mm;
    text-align: center;
    flex: 1;
}

/* ========================================
   SLIDER MÉTÉO
   ======================================== */
.meteo-slider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, #fff4c4, #f0f0f0);
    border-radius: 3mm;
    padding: 2mm 6mm;
    font-size: 18pt;
}

/* ========================================
   TWEMOJI
   ======================================== */
img.emoji {
    height: 1.2em;
    width: 1.2em;
    vertical-align: -0.15em;
}

.bloc img.emoji {
    height: 1.5em;
    width: 1.5em;
}

.affiche-header h1 img.emoji {
    height: 1em;
    width: 1em;
}

/* ========================================
   @MEDIA PRINT
   ======================================== */
@media print {
    @page {
        size: 297mm 210mm landscape;
        margin: 0;
    }

    .affiche-a4 {
        box-shadow: none;
    }
}

/* ========================================
   AFFICHE A4 PORTRAIT - Container
   ======================================== */
.affiche-a4-portrait {
    width: 210mm;
    height: 297mm;
    aspect-ratio: 210 / 297;
    padding: 8mm;
    background: white;
    font-family: 'Merriweather Sans', sans-serif;
    color: var(--text-dark);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.affiche-a4-portrait .affiche-header {
    flex-shrink: 0;
}

.affiche-a4-portrait .affiche-header h1 {
    font-size: 20pt;
}

/* Conteneur sections qui s'étale jusqu'en bas */
.affiche-a4-portrait .sections-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ========================================
   COULEURS PAR RÔLE (A1 Routines)
   ======================================== */
.role-card.role-bosco {
    background: #e8eef4;
}
.role-card.role-nav {
    background: var(--teal-50);
}
.role-card.role-second {
    background: var(--amber-50);
}
.role-card.role-cambuse {
    background: var(--brick-50);
}

/* ========================================
   SECTIONS COMPACTES (A1)
   ======================================== */
.section-routine {
    flex-shrink: 0;  /* Garde sa hauteur naturelle */
}

.section-routine .section-header {
    display: flex;
    align-items: center;
    gap: 2mm;
    margin-bottom: 0;  /* Collé à la collectif-line */
}

.section-routine .section-header h2 {
    font-size: 14pt;
    font-weight: 700;
    color: var(--teal-700);
    margin: 0;
    text-transform: uppercase;
}

.section-routine .section-icon {
    font-size: 12pt;
}

/* Ligne Collectif */
.collectif-line {
    background: var(--bloc-bg);
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 9pt;
    font-weight: 300;
    flex-shrink: 0;
}

/* Paradigme en gras dans la ligne collectif */
.collectif-line strong {
    font-weight: 700;
}

/* ========================================
   STYLE BLOC ENGLOBANT (section-wrapped)
   ======================================== */
.section-routine.section-wrapped {
    position: relative;
    padding-top: 4mm;  /* Espace pour le header débordant */
}

.section-wrapped .section-wrapper {
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 5mm 3mm 3mm 3mm;
    position: relative;
}

.section-wrapped .section-header {
    position: absolute;
    top: -4mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
    z-index: 1;
}

.section-wrapped .collectif-line {
    font-weight: 400;
}

/* ========================================
   GRILLE 4 RÔLES (A1)
   ======================================== */
.grid-4-roles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2mm;
    margin-top: 1.5mm;
}

/* ========================================
   BLOCS RÔLES COMPACTS (A1) - Emoji débordant
   ======================================== */
.role-card {
    position: relative;
    padding: 3.5mm 2mm 2mm 2mm;
    margin-top: 4mm;
    border-radius: 2mm;
    text-align: left;
}

.role-card .role-emoji {
    position: absolute;
    top: -3mm;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14pt;
    line-height: 1;     
}

.role-card .role-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.5mm;
    font-family: 'Merriweather', serif;
    font-size: 7pt;
    font-weight: 300;
    line-height: 1.4;
    color: var(--text-dark);
}

.role-card .task-line {
    display: flex;
    align-items: flex-start;
    gap: 1mm;
    padding-left: 1mm;
}

.role-card .task-checkbox {
    width: 2.8mm;
    height: 2.8mm;
    border: 0.4pt solid var(--text-light);
    border-radius: 0.4mm;
    flex-shrink: 0;
    margin-top: 0.5mm;
}

/* Icône rotation (section Navigation) */
.role-card .task-rotation {
    width: 2.8mm;
    height: 2.8mm;
    flex-shrink: 0;
    margin-top: 0.3mm;
}

/* ========================================
   GRILLE NOTES (A1 - Actions spécifiques)
   ======================================== */
.notes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2mm;
}

.notes-column {
    border-radius: 2mm;
    padding: 2mm;
    display: flex;
    flex-direction: column;
    gap: 1mm;
}

.notes-column.role-bosco { background: #e8eef4; }
.notes-column.role-nav { background: var(--teal-50); }
.notes-column.role-second { background: var(--amber-50); }
.notes-column.role-cambuse { background: var(--brick-50); }

.notes-column .role-header {
    font-size: 10pt;
    text-align: center;
    margin-bottom: 1mm;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 1.5mm;
    font-size: 6pt;
    min-height: 4mm;
}

.checkbox {
    width: 3mm;
    height: 3mm;
    border: 0.5pt solid var(--text-light);
    border-radius: 0.5mm;
    flex-shrink: 0;
}

/* ========================================
   FOOTER A1
   ======================================== */
.affiche-footer {
    display: flex;
    justify-content: space-evenly;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 7pt;
    font-weight: 300;
    color: var(--text-light);
    font-style: italic;
    padding-top: 2mm;
    flex-shrink: 0;
}

/* ========================================
   @MEDIA PRINT PORTRAIT
   ======================================== */
@media print {
    .affiche-a4-portrait {
        box-shadow: none;
    }
}

@page portrait {
    size: 210mm 297mm portrait;
    margin: 0;
}

/* ========================================
   A3 MARQUE-PAGE - STYLES SPÉCIFIQUES
   ======================================== */

/* Pages recto/verso avec saut de page */
.page-recto,
.page-verso {
    page-break-after: always;
}

.page-verso {
    page-break-after: auto;
}

/* ----------------------------------------
   BLOC POURQUOI LDB
   Style wrapped avec titre débordant, accent rouge Joker
   ---------------------------------------- */
.section-pourquoi-ldb {
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 4mm 3mm 3mm 3mm;
    margin-bottom: 3mm;
    position: relative;
    margin-top: 5mm;
}

.section-pourquoi-ldb .section-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
}

.section-pourquoi-ldb .section-header h2 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    color: var(--brick-700);
    text-transform: uppercase;
    margin: 0;
}

.section-pourquoi-ldb .section-icon {
    font-size: 16pt;
}

.section-pourquoi-ldb .pourquoi-list {
    font-family: 'Merriweather', serif;
    font-size: 8pt;
    font-weight: 300;
    margin: 0;
    padding-left: 2mm;
    line-height: 1.3;
    list-style: none;
}

.section-pourquoi-ldb .pourquoi-list strong {
    font-weight: 700;
}

.section-pourquoi-ldb .pourquoi-list li {
    margin-bottom: 1.5mm;
    position: relative;
    padding-left: 3mm;
}

.section-pourquoi-ldb .pourquoi-list li::before {
    content: "•";
    color: var(--brick-700);
    font-weight: 700;
    position: absolute;
    left: 0;
}

/* Liste avec checkboxes (Comment le remplir) - Layout colonnes */
.section-comment-ldb .comment-list {
    font-family: 'Merriweather', serif;
    font-size: 8pt;
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    list-style: none;
    display: flex;
    gap: 3mm;
}

.section-comment-ldb .comment-list strong {
    font-weight: 700;
}

.section-comment-ldb .comment-list li {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 2mm;
    padding: 2mm;
    background: white;
    border-radius: 2mm;
}

.section-comment-ldb .comment-list .checkbox {
    width: 3mm;
    height: 3mm;
    border: 0.5pt solid var(--brick-700);
    border-radius: 0.5mm;
    flex-shrink: 0;
    margin-top: 0.5mm;
}

/* ----------------------------------------
   TABLES ÉCHELLES (Beaufort, Douglas)
   Style wrapped : fond gris, titre débordant
   ---------------------------------------- */
.section-echelle {
    margin-bottom: 5mm;
}

.section-echelle.section-wrapped {
    position: relative;
    padding-top: 5mm;
}

.section-echelle.section-wrapped .section-wrapper {
    border-radius: 3mm;
    padding: 4mm 3mm 3mm 3mm;
}

/* Wrappers colorés par accent */
.echelle-beaufort-section .section-wrapper {
    background: var(--teal-50);
}

.echelle-douglas-section .section-wrapper {
    background: var(--sea-50);
}

.section-echelle.section-wrapped .section-header {
    position: absolute;
    top: 0;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
    z-index: 1;
}

.section-echelle .section-header h2 {
    font-size: 14pt;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

/* Headers différenciés par échelle */
.section-echelle.echelle-beaufort-section .section-header h2 {
    color: var(--teal-700);
}

.section-echelle.echelle-douglas-section .section-header h2 {
    color: var(--sea-700);
}

.section-echelle .section-icon {
    font-size: 16pt;
}

.section-echelle .instruction {
    font-size: 9pt;
    font-style: italic;
    font-family: 'Merriweather', serif;
    color: var(--text-light);
}

.echelle-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Merriweather', serif;
    font-size: 8pt;
}

.echelle-table th {
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 700;
    font-size: 8pt;
    padding: 1.5mm 2mm;
    text-align: left;
}

/* Beaufort = accent teal - fond transparent pour fusion avec wrapper */
.echelle-beaufort th {
    background: transparent;
    border-bottom: 0.5pt solid var(--teal-700);
    color: var(--teal-700);
}

/* Douglas = accent bleu mer - fond transparent pour fusion avec wrapper */
.echelle-douglas th {
    background: transparent;
    border-bottom: 0.5pt solid var(--sea-700);
    color: var(--sea-700);
}

.echelle-table td {
    padding: 1.2mm 2mm;
}

.echelle-table td:first-child {
    font-weight: 700;
    text-align: center;
    width: 12mm;
}

/* Lignes alternées teintées par accent */
.echelle-beaufort tbody tr:nth-child(even) {
    background: #d8edeb;  /* teal très clair */
}

.echelle-douglas tbody tr:nth-child(even) {
    background: #d5e3e9;  /* bleu mer désaturé très clair */
}

/* Coloration par gravité - Beaufort */
.echelle-beaufort tr[data-force="0"] td:first-child,
.echelle-beaufort tr[data-force="1"] td:first-child,
.echelle-beaufort tr[data-force="2"] td:first-child,
.echelle-beaufort tr[data-force="3"] td:first-child {
    background: #e8f5e9;
    color: #2e7d32;
}

.echelle-beaufort tr[data-force="4"] td:first-child,
.echelle-beaufort tr[data-force="5"] td:first-child,
.echelle-beaufort tr[data-force="6"] td:first-child {
    background: #fff8e1;
    color: #f57f17;
}

.echelle-beaufort tr[data-force="7"] td:first-child,
.echelle-beaufort tr[data-force="8"] td:first-child {
    background: #fff3e0;
    color: #e65100;
}

.echelle-beaufort tr[data-force="9"] td:first-child,
.echelle-beaufort tr[data-force="10"] td:first-child,
.echelle-beaufort tr[data-force="11"] td:first-child,
.echelle-beaufort tr[data-force="12"] td:first-child {
    background: #ffebee;
    color: #c62828;
}

/* Coloration par gravité - Douglas */
.echelle-douglas tr[data-degre="0"] td:first-child,
.echelle-douglas tr[data-degre="1"] td:first-child,
.echelle-douglas tr[data-degre="2"] td:first-child,
.echelle-douglas tr[data-degre="3"] td:first-child {
    background: #e8f5e9;
    color: #2e7d32;
}

.echelle-douglas tr[data-degre="4"] td:first-child,
.echelle-douglas tr[data-degre="5"] td:first-child {
    background: #fff8e1;
    color: #f57f17;
}

.echelle-douglas tr[data-degre="6"] td:first-child,
.echelle-douglas tr[data-degre="7"] td:first-child {
    background: #fff3e0;
    color: #e65100;
}

.echelle-douglas tr[data-degre="8"] td:first-child,
.echelle-douglas tr[data-degre="9"] td:first-child {
    background: #ffebee;
    color: #c62828;
}

/* ----------------------------------------
   LAYOUT RECTO : Échelles + Sidebar LDB
   ---------------------------------------- */
.recto-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 3mm;
    flex: 1;
    padding-top: 5mm;  /* Espace pour les titres débordants (positionnés à top: -5mm) */
}

.echelles-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* Première en haut, dernière en bas, espace réparti */
}

.echelles-column > *:first-child {
    margin-top: 0;  /* Retire le margin-top, géré par padding-top du parent */
}

.echelles-column > *:last-child {
    margin-bottom: 0;  /* Retire le margin de la dernière section pour aligner avec sidebar */
}

/* ----------------------------------------
   SIDEBAR COLONNES LDB
   ---------------------------------------- */
.ldb-sidebar {
    background: var(--amber-50);
    border-radius: 3mm;
    padding: 4mm 3mm 3mm 3mm;
    display: flex;
    flex-direction: column;
    position: relative;
}

.ldb-sidebar-header {
    position: absolute;
    top: -5mm;  /* Aligne avec section-echelle.section-wrapped top: 0 */
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
}

.ldb-sidebar-header .section-icon {
    font-size: 16pt;
}

.ldb-sidebar-header h2 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 12pt;
    font-weight: 700;
    color: var(--amber-700);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
}

.ldb-sidebar-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding-top: 4mm;  /* Espace sous le titre */
}

.ldb-item {
    display: flex;
    flex-direction: column;
    gap: 0.5mm;
}

.ldb-name {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 8pt;
    font-weight: 700;
    color: var(--amber-700);
    background: var(--amber-100);
    padding: 0.5mm 2mm;
    border-radius: 2mm;
    display: inline-block;
    width: fit-content;
}

.ldb-desc {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 6.5pt;
    font-weight: 300;
    color: var(--text-dark);
    line-height: 1.2;
}

/* ----------------------------------------
   PILIERS COOPÉRATIFS (verso)
   ---------------------------------------- */
.section-piliers {
    position: relative;
    margin-top: 8mm;
    margin-bottom: 2mm;
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 4mm 3mm 3mm 3mm;
}

.section-piliers .section-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
    margin-bottom: 0;
}

.section-piliers .section-header h2 {
    font-size: 14pt;
    font-weight: 700;
    color: var(--teal-700);
    text-transform: uppercase;
    margin: 0;
}

.section-piliers .section-icon {
    font-size: 16pt;
}

.section-piliers .instruction {
    font-size: 9pt;
    font-style: italic;
    font-family: 'Merriweather', serif;
    color: var(--text-light);
    display: block;
}

.piliers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2mm;
}

.pilier {
    background: white;
    border-radius: 2mm;
    padding: 2mm 2mm;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pilier-emoji {
    font-size: 18pt;
    display: block;
    margin-bottom: 1mm;
}

.pilier-title {
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 700;
    font-size: 8pt;
    color: var(--teal-700);
    text-transform: uppercase;
    margin-bottom: 2mm;
}

.pilier-items {
    font-family: 'Merriweather', serif;
    font-size: 8pt;
    font-weight: 300;
    line-height: 1.3;
    color: var(--text-dark);
}

/* ----------------------------------------
   RITUELS (brief/débrief)
   ---------------------------------------- */
.rituals-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3mm;
    margin-bottom: 2mm;
}

.section-ritual {
    position: relative;
    margin-top: 8mm;
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 4mm 4mm 3mm 4mm;
}

.section-ritual .section-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
}

.section-ritual .section-header h2 {
    font-size: 14pt;
    font-weight: 700;
    color: var(--teal-700);
    text-transform: uppercase;
    margin: 0;
}

.section-ritual .section-icon {
    font-size: 16pt;
}

.section-ritual .instruction {
    font-size: 9pt;
    font-style: italic;
    font-family: 'Merriweather', serif;
    color: var(--text-light);
}

.ritual-content {
    font-family: 'Merriweather', serif;
    font-size: 8pt;
}

.ritual-intro {
    margin: 1mm 0 2mm 0;
    font-size: 8pt;
}

.ritual-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 2mm;
    margin-bottom: 1.5mm;
    font-size: 8pt;
    font-weight: 300;
}

.ritual-checkbox .checkbox {
    width: 3mm;
    height: 3mm;
    border: 0.5pt solid var(--teal-700);
    border-radius: 0.5mm;
    flex-shrink: 0;
    margin-top: 0.5mm;
}

.ritual-exemples {
    margin: 2mm 0 0 0;
    font-size: 8pt;
    color: var(--text-light);
}

.ritual-exemples em {
    font-style: italic;
}

/* Débrief du soir : checkboxes + exemples en colonnes */
.rituals-grid .section-ritual:last-child .ritual-content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: 3mm;
}
.rituals-grid .section-ritual:last-child .ritual-intro {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 1mm 0;
}
.rituals-grid .section-ritual:last-child .ritual-checkbox {
    grid-column: 1;
}
.rituals-grid .section-ritual:last-child .ritual-exemples {
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0;
    align-self: center;
}

/* ----------------------------------------
   CITATION FINALE
   ---------------------------------------- */
.citation-finale {
    background: var(--amber-50);
    border-left: 2pt solid var(--amber-700);
    border-radius: 0 2mm 2mm 0;
    padding: 2mm 4mm;
    font-family: 'Merriweather', serif;
    font-size: 8pt;
    text-align: center;
    margin-bottom: 2mm;
}

/* ----------------------------------------
   FOOTER SPLIT (gauche/droite)
   ---------------------------------------- */
.affiche-footer-split {
    display: flex;
    justify-content: space-between;
    padding: 2mm 0 0 0;
}

/* ----------------------------------------
   MÉMOS RÔLES + PAQUETS (verso marque-page)
   ---------------------------------------- */
.memos-stack {
    display: flex;
    flex-direction: column;
    gap: 2mm;
    margin-bottom: 2mm;
}

.section-memo {
    position: relative;
    margin-top: 8mm;
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 4mm 3mm 3mm 3mm;
}

.section-memo .section-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
}

.section-memo .section-header h2 {
    font-size: 14pt;
    font-weight: 700;
    color: var(--teal-700);
    text-transform: uppercase;
    margin: 0;
}

.section-memo .section-icon {
    font-size: 16pt;
}

.memo-content {
    font-family: 'Merriweather', serif;
    font-size: 8pt;
    font-weight: 300;
    line-height: 1.4;
}

/* Mémo Rôles - Grille 4 colonnes */
.memo-roles {
    padding: 4mm 3mm 3mm 3mm;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2mm;
}

.role-bloc {
    position: relative;
    border-radius: 2mm;
    padding: 3mm 2mm 2mm 2mm;
    margin-top: 4mm;
    text-align: center;
}

/* Header débordant avec emoji + nom */
.role-bloc .role-header {
    position: absolute;
    top: -2.5mm;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 10pt;
    font-weight: 700;
    margin: 0;
    padding: 0;
    background: transparent;
}

.role-bloc .role-header .role-emoji {
    font-size: 10pt;
    vertical-align: middle;
}

/* Couleurs de texte par rôle */
.role-bloc.role-bosco .role-header { color: var(--bleu-glenans); }
.role-bloc.role-nav .role-header { color: var(--teal-700); }
.role-bloc.role-second .role-header { color: var(--amber-700); }
.role-bloc.role-cambuse .role-header { color: #C62828; }

.role-bloc .role-text {
    font-family: 'Merriweather', serif;
    font-size: 8pt;
    font-weight: 300;
    line-height: 1.3;
    color: var(--text-dark);
}

.role-bloc .role-inspire {
    font-family: 'Merriweather', serif;
    font-size: 6pt;
    font-style: italic;
    color: var(--text-light);
    margin-top: 1mm;
}

/* Couleurs par rôle (comme A1 Routines) */
.role-bloc.role-bosco {
    background: #e8eef4;
}

.role-bloc.role-nav {
    background: var(--teal-50);
}

.role-bloc.role-second {
    background: var(--amber-50);
}

.role-bloc.role-cambuse {
    background: var(--brick-50);
}

/* Mémo Paquets - Grille 2x2 */
.paquets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2mm;
}

.paquet-bloc {
    background: white;
    border-radius: 2mm;
    padding: 2mm 3mm;
    text-align: center;
}

.paquet-bloc .paquet-header {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 9pt;
    font-weight: 700;
    color: var(--teal-700);
    margin: 0 0 1mm 0;
}

.paquet-bloc .paquet-intention {
    font-family: 'Merriweather', serif;
    font-size: 7pt;
    font-style: italic;
    color: var(--text-light);
    margin-bottom: 1mm;
}

.paquet-bloc .paquet-detail {
    font-family: 'Merriweather', serif;
    font-size: 7pt;
    font-weight: 300;
    color: var(--text-dark);
    line-height: 1.3;
}

/* Couleurs d'accent par paquet */
.paquet-affiches .paquet-header { color: var(--navy-700); }
.paquet-roles .paquet-header    { color: var(--amber-700); }
.paquet-moments .paquet-header  { color: var(--teal-700); }
.paquet-joker .paquet-header    { color: var(--brick-700); }

/* ----------------------------------------
   BLOC NOTES EFFAÇABLES (verso marque-page)
   ---------------------------------------- */
.section-notes {
    position: relative;
    margin-top: 8mm;
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 4mm 3mm 3mm 3mm;
    flex-grow: 1;
}

.section-notes .section-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
}

.section-notes .section-header h2 {
    font-size: 14pt;
    font-weight: 700;
    color: var(--teal-700);
    text-transform: uppercase;
    margin: 0;
}

.section-notes .section-icon {
    font-size: 16pt;
}

.notes-lines {
    height: 100%;
    min-height: 20mm;
    background: transparent;
}

/* ========================================
   A4 DÉCOUVERTE DISPOSITIF - STYLES SPÉCIFIQUES
   ======================================== */

/* ----------------------------------------
   TITRE RECTO : rouge Glénans (#C62828)
   Surcharge du bleu-glenans par défaut
   ---------------------------------------- */
.affiche-header-rouge h1{
    color: var(--brick-700)!important;
}

.affiche-header-amber h1{
    color: var(--amber-700)!important;
}

.affiche-header-teal h1{
    color: var(--teal-700)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
}

.affiche-header-teal {
    margin-bottom: 3mm ;
}

.affiche-header-teal h1 span {
    text-align: left;
}

.page-verso .intro-text {
    text-align: center;
}

.affiche-header-teal .header-logo {
    height: 2.2em;
    width: auto;
    flex-shrink: 0;
}

/* ----------------------------------------
   INTRO PERSONNIFIÉE (recto)
   Section avec titre débordant, couleur Glénans
   ---------------------------------------- */
.section-intro {
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 5mm 4mm 3mm 4mm;
    margin-top: 3mm;
    position: relative;
}

.section-intro .section-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
}

.section-intro .section-header h2 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    color: var(--bleu-glenans);
    text-transform: uppercase;
    margin: 0;
}

.section-intro .section-icon {
    font-size: 16pt;
}

.intro-text {
    font-family: 'Merriweather', serif;
    text-align: justify;
    font-size: 9.5pt;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-dark);
}

.intro-text p {
    margin: 0 0 4pt 0;
}

.intro-text p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------
   COMPOSITION DU KIT (recto)
   Grille 2 colonnes + URL mise en avant
   ---------------------------------------- */
.section-kit {
    background: var(--bloc-bg);
    border-radius: 3mm;
    padding: 5mm 4mm 3mm 4mm;
    position: relative;
}
.section-kit .intro-text {
    text-align: justify;
}

.section-kit .section-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
}

.section-kit .section-header h2 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    color: var(--bleu-glenans);
    text-transform: uppercase;
    margin: 0;
}

.section-kit .section-icon {
    font-size: 16pt;
}

.kit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3mm;
    margin-top: 1mm;
}

.kit-bloc {
    position: relative;
    background: white;
    border-radius: 2mm;
    padding: 5mm 4mm 0mm 4mm;
    margin-top: 5mm;
}

/* Titre en pill, à cheval sur le bord supérieur */
.kit-header {
    position: absolute;
    top: -3.5mm;
    left: 3mm;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: white;
    background: var(--brick-700);
    padding: 1mm 4mm;
    border-radius: 99mm;
}

.kit-header-sub {
    display: block;
    font-size: 7pt;
    font-weight: 400;
    opacity: 0.85;
}

.kit-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Chaque item : nom + description empilés, compact */
.kit-item {
    display: flex;
    flex-direction: column;
    gap: 0.5mm;
    padding: 2mm 0;
}

.kit-item-name {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 10pt;
    font-weight: 700;
    color: var(--bleu-glenans);
}

.kit-item-desc {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 8.5pt;
    font-weight: 300;
    font-style: italic;
    color: var(--text-light);
    line-height: 1.3;
}

.kit-note {
    margin: 2mm 0 3mm 0;
    font-size: 8.5pt;
    font-weight: 300;
    color: var(--brick-700);
    line-height: 1.35;
}

.kit-url {
    display: block;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 15pt;
    font-weight: 800;
    color: #b5651d;
}

.kit-url-sub {
    display: block;
    font-family: 'Merriweather', serif;
    font-size: 7.5pt;
    font-weight: 300;
    color: var(--text-light);
    margin-top: 0.5mm;
}

/* ----------------------------------------
   APPEL À RETOURS (recto)
   Fond sea-50, bordure et titre sea-700
   ---------------------------------------- */
.section-feedback {
    background: var(--sea-50);
    border-radius: 3mm;
    padding: 4mm 3mm 3mm 3mm;
    position: relative;
}

.section-feedback .section-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: center;
    gap: 2mm;
}

.section-feedback .section-header h2 {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    color: var(--sea-700);
    text-transform: uppercase;
    margin: 0;
}

.section-feedback .section-icon {
    font-size: 16pt;
}

.feedback-content {
    font-family: 'Merriweather', serif;
    font-size: 9.5pt;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-dark);
}

.feedback-content p {
    margin: 0 0 2pt 0;
}

.feedback-content p:last-child {
    margin-bottom: 0;
}

/* QR code + URL du site */
.kit-url-bloc {
    margin-top: 3mm;
    display: flex;
    align-items: center;
    gap: 3mm;
    padding: 2mm;
    background: #fff8f0;
    border-radius: 2mm;
}

.kit-logo-img {
    width: 16mm;
    height: 16mm;
    flex-shrink: 0;
    border-radius: 2mm;
}

.kit-url-text {
    flex: 1;
    text-align: center;
}

.qr-img {
    width: 16mm;
    height: 16mm;
    flex-shrink: 0;
}

.tel-number {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 11pt;
    font-weight: 800;
    color: var(--sea-700);
}

.feedback-note {
    font-size: 8.5pt;
    color: var(--text-light);
    font-style: italic;
}

/* ----------------------------------------
   LÉGENDE DES TYPES DE CARTES (verso)
   ---------------------------------------- */
.types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2mm;
    margin-top: -5mm;
}

.type-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1mm;
    padding: 5mm 2mm 2mm;
    background: var(--bloc-bg);
    border-radius: 2mm;
}

.type-icon {
    position: absolute;
    top: -3mm;
    font-size: 14pt;
}

.type-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.type-title-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1.5mm;
}

.type-name {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 8.5pt;
    font-weight: 700;
    text-transform: uppercase;
}
.type-affiches .type-name { color: var(--bleu-glenans); }
.type-roles .type-name { color: #b5651d; }
.type-moments .type-name { color: var(--teal-700); }
.type-jokers .type-name { color: var(--brick-700); }

.type-ref {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 7.5pt;
    font-weight: 400;
    color: var(--text-light);
}

.type-desc {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 7.5pt;
    font-weight: 300;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.3;
    margin-top: 0.5mm;
}

.type-avail {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 6pt;
    font-weight: 300;
    color: var(--text-light);
    margin-top: auto;
    padding-top: 1mm;
}

/* ----------------------------------------
   FIL DE LA SEMAINE (verso : 4 blocs pleine largeur)
   ---------------------------------------- */
.fil-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    margin-top: 2mm;
}

.fil-bloc {
    position: relative;
    border-radius: 3mm;
    padding: 3mm 3mm 3mm 3mm;
}
.fil-bloc-teal { background: #e8f4f3; }
.fil-bloc-teal .fil-bloc-title { color: var(--teal-700); }
.fil-bloc-amber { background: #fff8f0; }
.fil-bloc-amber .fil-bloc-title { color: #b5651d; }
.fil-bloc-brick { background: #FFEBEE; }
.fil-bloc-brick .fil-bloc-title { color: var(--brick-700); }

/* En-tête de bloc : titre en débord (même style que les autres affiches) */
.fil-bloc-header {
    position: absolute;
    top: -5mm;
    left: 3mm;
    display: flex;
    align-items: baseline;
    gap: 2mm;
}

.fil-bloc-title {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    color: var(--teal-700);
    text-transform: uppercase;
    margin: 0;
}

.fil-bloc-when {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 9pt;
    font-weight: 400;
    color: var(--text-light);
    font-style: italic;
}

/* Sous-titre : intention du bloc */
.fil-bloc-sub {
    font-family: 'Merriweather', serif;
    font-size: 8.5pt;
    font-weight: 300;
    color: var(--text-dark);
    margin-bottom: 3mm;
    padding-top: 1mm;
    line-height: 1.4;
}

/* Colonnes à l'intérieur du bloc */
.fil-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6mm;
}

.fil-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.fil-col-title {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1mm;
}
.fil-bloc-teal .fil-bloc-when { color: var(--teal-700); }
.fil-bloc-amber .fil-bloc-when { color: #b5651d; }
.fil-bloc-brick .fil-bloc-when { color: var(--brick-700); }

.fil-bloc-teal .fil-col-title { color: var(--teal-700); }
.fil-bloc-amber .fil-col-title { color: #b5651d; }
.fil-bloc-brick .fil-col-title { color: var(--brick-700); }

/* Items dans les colonnes */
.fil-item {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 8pt;
    font-weight: 400;
    color: var(--text-dark);
    padding: 1mm 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    line-height: 1.35;
}

.fil-item:last-child {
    border-bottom: none;
}

.fil-item-desc {
    font-family: 'Merriweather', serif;
    font-size: 7pt;
    font-weight: 300;
    color: var(--text-light);
}

/* Sous-temps (matin/nav/soir) */
.fil-sub-time {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 8pt;
    font-weight: 700;
    color: var(--teal-700);
    margin-bottom: 0.5mm;
}

/* Grille de cartes dans les fil-blocs */
.fil-card-grid {
    display: grid;
    gap: 2mm;
    margin-top: 4mm;
}

.fil-card {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2mm;
    padding: 4mm 2mm 2mm;
    display: flex;
    flex-direction: column;
    gap: 1mm;
}

.fil-card-pill {
    position: absolute;
    top: -2mm;
    left: 2mm;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 7.5pt;
    font-weight: 700;
    padding: 0.5mm 2mm;
    border-radius: 2mm;
}

.fil-card-name {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 8pt;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.fil-card-desc {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 7pt;
    font-weight: 300;
    font-style: italic;
    color: var(--text-light);
    line-height: 1.3;
}

/* Couleurs des pills par type de bloc */
.fil-bloc-teal .fil-card-pill { color: var(--teal-700); background: #b2dfdb; }
.fil-bloc-amber .fil-card-pill { color: #b5651d; background: #ffe0b2; }
.fil-bloc-brick .fil-card-pill { color: var(--brick-700); background: #FFCDD2; }

/* ----------------------------------------
   GRILLE 3 COLONNES (verso : les 3 affiches)
   ---------------------------------------- */
.affiches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2mm;
}