:root {
    --fond: #f4f6f9;
    --carte: #ffffff;
    --bordure: #dde3ea;
    --texte: #24303d;
    --texte-doux: #62707e;
    --accent: #3a6ea5;
    --accent-doux: #eaf1f9;
    --succes: #2f8f5b;
    --danger: #c0392b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Nunito', system-ui, sans-serif;
    background: var(--fond);
    color: var(--texte);
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: var(--carte);
    border-bottom: 1px solid var(--bordure);
}

.site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 2.3em;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--texte);
    margin: 28px 0 6px;
}

.site-logo span { color: var(--accent); }

.site-logo-icone { font-size: 0.85em; line-height: 1; }

.site-sous-logo {
    text-align: center;
    color: var(--texte-doux);
    margin: -4px 0 20px;
}

.site-conteneur {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

.site-conteneur-large {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

.site-carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}

.site-sous-titre { color: var(--texte-doux); }

.site-btn {
    display: inline-block;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.site-btn-primaire { background: var(--accent); color: #fff; }
.site-btn-primaire:hover { background: #2f5a86; }

.site-btn-secondaire { background: var(--accent-doux); color: var(--accent); }
.site-btn-secondaire:hover { background: #dbe8f5; }

.site-btn-texte { background: none; color: var(--texte-doux); padding: 6px 10px; }
.site-btn-texte:hover { color: var(--texte); }

.site-btn:disabled { opacity: 0.4; cursor: default; }
.site-btn:disabled:hover { color: var(--texte-doux); }

.site-champ {
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1em;
    margin-bottom: 12px;
}

.messages-erreur {
    color: var(--danger);
    margin-bottom: 12px;
    min-height: 1.2em;
}

.eleve-edition-bloc {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.95em;
}

/* Contrôles (bloc, dates, boutons) — masqués à l'impression */

.cueillette-controles {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.cueillette-champ-bloc {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cueillette-cases-bloc {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Listes générées : une .cueillette-page par bloc sélectionné */

.cueillette-page {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
}

.cueillette-titre-page {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 4px;
}

.cueillette-compte {
    color: var(--texte-doux);
    margin: 0 0 8px;
    font-size: 0.85em;
}

.cueillette-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Lignes compactes exprès : jusqu'à ~32 élèves doivent tenir sur une
   seule page imprimée (voir aussi .cueillette-titre-page/.cueillette-compte
   ci-dessus, réduits pour la même raison). */
.cueillette-table th,
.cueillette-table td {
    border: 1px solid var(--bordure);
    padding: 1px 4px;
    font-size: 0.72em;
    line-height: 1.3;
    text-align: center;
}

.cueillette-table .col-nom { text-align: left; }

/* Deux lignes d'entête plus foncées (fond gris, texte blanc) — repère
   visuel net même en noir et blanc, comme le style de tableau Excel du
   modèle d'origine (TableStyleMedium2, entête foncée). */
.cueillette-table thead th {
    background: #52606d;
    color: #fff;
    font-weight: 700;
}

.cueillette-table .fin-jour { border-right: 2px solid var(--texte); }

.cueillette-table tbody td.col-nom,
.cueillette-table tbody td.col-sigle {
    text-align: left;
    font-size: 0.78em;
}

.cueillette-table tbody td.col-case { height: 12px; }

/* Lignes alternées (bandes) — aide l'œil à suivre une ligne du nom
   jusqu'à ses cases à cocher, même modèle que le style de tableau Excel
   du fichier d'origine (showRowStripes). */
.cueillette-table tbody tr:nth-child(even) { background: #e8eaed; }

/* Forcer l'impression des couleurs de fond (entêtes + bandes) : par
   défaut, la plupart des navigateurs omettent les arrière-plans à
   l'impression sauf si "graphiques d'arrière-plan" est coché — sans ceci,
   la mise en page perdrait tout son repère visuel côté papier. */
.cueillette-table {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Impression : une page paysage par bloc, contrôles masqués */

@media print {
    body { background: #fff; }
    .site-header, .cueillette-controles, .cueillette-bouton-imprimer, .messages-erreur { display: none !important; }
    .site-logo, .site-sous-logo { display: none; }
    .site-conteneur-large { max-width: none; padding: 0; margin: 0; }
    .cueillette-page {
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        page-break-after: always;
    }
    .cueillette-page:last-child { page-break-after: auto; }
    .cueillette-table th, .cueillette-table td { border-color: #000; }
    .cueillette-table tbody td { color: #000; }
    @page { size: landscape; margin: 12mm; }
}