/* =====================================================================
   Feuille d'impression — calibree pour une page A4.
   Aucun filigrane, aucune publicite : juste le titre, la grille, les mots.

   Presentee comme une fiche d'activite (bordure decorative, gros titre
   ludique, cadre NOM / DATE, legende a puces) : c'est le format que les
   enseignants et les parents reconnaissent d'un cahier d'activites, plutot
   qu'un simple export austere de la grille.
   ===================================================================== */

.print-page {
    background: #fff;
    /* Police d'affichage de la fiche, chargee via Google Fonts dans
       print.php. Repli sur une police systeme ludique si la police
       distante ne charge pas (hors ligne, blocage reseau). */
    /* Meme police d'affichage que l'interface (Fredoka) : la fiche imprimee
       et le site appartiennent visiblement au meme produit. */
    --sheet-font: 'Fredoka', 'Trebuchet MS', sans-serif;
}

/* La barre d'outils n'existe qu'a l'ecran. */
.print-toolbar {
    background: var(--paper-warm);
    border-bottom: 3px solid var(--ink);
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.print-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.print-toolbar__options {
    display: flex;
    gap: .35rem;
}

/* =====================================================================
   La fiche
   ===================================================================== */
.sheet {
    position: relative;
    width: min(100% - 2rem, 21cm);
    /* Meme rapport largeur/hauteur qu'une feuille A4 (210 x 297 mm), a
       l'ecran comme a l'impression : c'est ce qui permet aux autocollants
       de se positionner en millimetres et de tomber au meme endroit dans
       les deux cas (voir .puzzle-stickers plus bas). */
    aspect-ratio: 210 / 297;
    margin: 0 auto 2rem;
    /* La bordure rayee occupe cet espace tout autour de la fiche. */
    padding: 22px;
    background: #fff;
}

/* Bordure decorative rayee, dans la couleur du theme (--t-accent). Dessinee
   en CSS pur : aucune image a fournir, s'adapte automatiquement a n'importe
   quel theme ou decor, present ou futur. */
.sheet__border {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            135deg,
            var(--t-accent, #3b6ef5) 0 14px,
            #ffffff 14px 28px
        );
    border-radius: 18px;
}

.sheet__border::after {
    content: '';
    position: absolute;
    inset: 10px;
    background: #fff;
    border-radius: 10px;
}

.sheet__inner {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 8px;
    padding: clamp(1.1rem, 3vw, 2rem) clamp(1.2rem, 4vw, 2.5rem) 1.5rem;
}

/* --- Ligne NOM / DATE ------------------------------------------------ */
.sheet__topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    font-family: var(--sheet-font);
    font-weight: 700;
    color: var(--t-accent-deep, var(--accent-deep));
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.sheet__field {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    white-space: nowrap;
}

.sheet__field-line {
    display: inline-block;
    width: 9rem;
    border-bottom: 2px solid var(--ink-faint);
    height: 1px;
}

/* --- Titre ------------------------------------------------------------ */
.sheet__head {
    text-align: center;
    margin-bottom: 1.25rem;
}

.sheet__kicker {
    font-family: var(--sheet-font);
    font-weight: 700;
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    color: var(--t-accent, var(--accent));
    margin: 0 0 .1em;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.sheet__title {
    font-family: var(--sheet-font);
    font-weight: 800;
    font-size: clamp(1.6rem, 5.5vw, 2.6rem);
    color: var(--t-accent-deep, var(--accent-deep));
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.sheet__words { margin-top: 1.5rem; }

.sheet__words-title {
    font-family: var(--sheet-font);
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
    color: var(--t-accent-deep, var(--accent-deep));
    margin-bottom: .9rem;
}

/* Legende des mots a puces : plus proche d'une fiche d'activite qu'une
   simple liste. Chaque mot recoit une puce ronde a cocher a la main. */
.sheet .word-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .6rem 1.5rem;
    max-width: 34rem;
    margin: 0 auto;
    padding: 0;
}

.sheet .word {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    background: none;
    padding: 0;
    border-radius: 0;
    break-inside: avoid;
    font-family: var(--sheet-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
}

/* La puce est un cercle vide dessine en CSS : l'enfant peut le remplir au
   crayon une fois le mot trouve, comme sur une fiche imprimee classique. */
.sheet .word::before {
    content: '';
    flex: none;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    border: 2.5px solid var(--t-accent, var(--accent));
}

/* --- Pied de fiche : instructions + emoji du theme -------------------- */
.sheet__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 2px dashed var(--line);
}

.sheet__foot-emoji {
    font-size: 1.6rem;
    line-height: 1;
}

.sheet__foot-hint {
    font-family: var(--sheet-font);
    font-size: .82rem;
    color: var(--ink-soft);
    margin: 0;
    font-style: italic;
}

/* =====================================================================
   Signature (nom / date de l'auteur)
   ===================================================================== */
.puzzle-signature {
    text-align: center;
    font-family: var(--sheet-font);
    font-weight: 700;
    font-size: .95rem;
    color: var(--t-accent-deep, var(--accent-deep));
    margin: 0 0 .8rem;
}

.puzzle-signature__sep { margin: 0 .4em; opacity: .6; }

.puzzle-grid-frame { position: relative; }

/* =====================================================================
   Autocollants — positionnes en pourcentage de .sheet__inner (toute la
   fiche, pas seulement la grille) : l'auteur peut les placer pres du
   titre, dans les marges, etc. Meme rendu qu'a l'ecran (voir app.css pour
   les regles partagees) : ce qui est place dans l'editeur s'imprime tel quel.
   ===================================================================== */
/* Le reperage sur la grille (voir app.css) vaut tel quel a l'impression :
   c'est justement ce qui fait correspondre l'ecran et le papier, alors que
   la feuille, elle, s'etire pour remplir la page A4. Rien a redefinir ici. */

.puzzle-sticker {
    position: absolute;
    line-height: 1;
    transform: translate(-50%, -50%) rotate(var(--rotation, 0deg));
}

/* Fond blanc derriere l'emoji : reste lisible pose sur la grille de
   lettres, comme un vrai autocollant colle sur la feuille. */
.puzzle-sticker::before {
    content: '';
    position: absolute;
    inset: 8%;
    background: radial-gradient(circle, rgba(255, 255, 255, .92) 55%, rgba(255, 255, 255, 0) 82%);
    z-index: -1;
}

/* =====================================================================
   Styles de cadre — variantes de la bordure decorative de .sheet.
   Toutes sont dessinees en CSS pur a partir de la couleur du theme
   (--t-accent) : aucune image, aucun televersement necessaire.
   ===================================================================== */

/* rayures (par defaut) : deja definie plus haut sur .sheet__border. */

.sheet--frame-moderne .sheet__border {
    background: none;
    border: 6px solid var(--t-accent, #3b6ef5);
    border-radius: 18px;
}

.sheet--frame-moderne .sheet__border::after {
    inset: 6px;
    border-radius: 12px;
}

.sheet--frame-pointille .sheet__border {
    background: none;
    border: 4px dashed var(--t-accent, #3b6ef5);
    border-radius: 18px;
}

.sheet--frame-pointille .sheet__border::after {
    inset: 4px;
    border-radius: 14px;
}

.sheet--frame-double .sheet__border {
    background: none;
    inset: 6px;
    border: 3px solid var(--t-accent, #3b6ef5);
    border-radius: 14px;
    box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--t-accent, #3b6ef5);
}

.sheet--frame-double .sheet__border::after {
    inset: 3px;
    border-radius: 10px;
}

.sheet--frame-aucun .sheet__border {
    background: none;
}

.sheet--frame-aucun .sheet__border::after {
    inset: 0;
}

/* =====================================================================
   Regles d'impression
   ===================================================================== */
@media print {
    /* Marges de la feuille : le navigateur ajoute les siennes par-dessus.
       Marge fine : le cadre decoratif tient lieu de bordure visuelle, une
       grande marge blanche supplementaire ferait fuir la fiche sur deux
       pages avec une grille de taille moyenne ou grande. */
    @page {
        size: A4 portrait;
        margin: 6mm;
    }

    html, body {
        background: #fff !important;
        font-size: 10pt;
        /* Le corps occupe toute la hauteur de la page : sans cela, .sheet
           ne peut pas se dimensionner par rapport a la feuille et ne prend
           que la hauteur de son contenu, laissant un vide en bas. */
        height: 100%;
    }

    /* Tout ce qui n'est pas la fiche disparait. */
    .no-print,
    .print-toolbar,
    .site-header,
    .site-footer,
    .flash-zone,
    .skip-link {
        display: none !important;
    }

    /* La fiche occupe toute la hauteur disponible de la page A4, quelle que
       soit la quantite de contenu : une grille avec peu de mots ne doit pas
       laisser la moitie de la feuille vide. flex + space-between repartit
       le contenu (cadre nom/date, titre, grille, legende, pied de page) sur
       toute la hauteur plutot que de le tasser en haut. */
    .sheet {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .sheet__border,
    .sheet__border::after,
    .sheet .word::before {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sheet__inner {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 10pt 16pt 12pt;
    }

    .sheet__topbar {
        margin-bottom: 8pt;
        font-size: 10pt;
    }

    .sheet__field-line { width: 5.5cm; }

    .sheet__head { margin-bottom: 8pt; }

    .sheet__title {
        font-size: 22pt;
    }

    .sheet__kicker {
        font-size: 13pt;
    }

    .puzzle-signature { margin-bottom: 6pt; font-size: 9pt; }

    /* La grille est le bloc qui absorbe l'espace restant : avec peu de mots
       elle s'agrandit pour remplir la page, avec beaucoup elle se comprime
       jusqu'a sa limite raisonnable de lisibilite. C'est ce qui evite a la
       fois le vide en bas de page et le debordement sur deux pages.

       Principe : .puzzle-grid-frame recoit une hauteur fixe en mm, calculee
       comme le reste de l'espace disponible sur la feuille A4 une fois
       retire tout ce qui est au-dessus et en dessous (cadre nom/date,
       titre, legende, pied de page). La grille elle-meme ne prend que
       width: 100% ; sa hauteur decoule de aspect-ratio: 1 (regle de base de
       .grid). C'est le meme calcul simple qui fonctionnait a l'ecran,
       applique ici avec une hauteur de conteneur fixee explicitement :
       en jouant sur des hauteurs en pourcentage imbriquees sur plusieurs
       niveaux de flexbox, le navigateur retombe sur la taille naturelle
       (donc minuscule) du contenu plutot que d'etirer la grille. */
    .puzzle-grid-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Estimation genereuse mais sure de l'espace vertical restant sur
           une page A4 (297mm - marges - cadre nom/date - titre - legende -
           pied de page). La grille se limite a cette hauteur ; si l'espace
           reel est plus grand (peu de texte au-dessus/en dessous), elle
           reste centree dans .sheet__inner grace au flex ci-dessus. */
        height: 165mm;
        max-height: 60vh;
    }

    .grid-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .grid {
        /* Support des container queries : la taille de police des cases
           (ci-dessous) se calcule alors par rapport a la largeur reelle de
           la grille plutot que par rapport a la fenetre, pour rester lisible
           aussi bien sur une petite grille agrandie que sur une grande
           grille compressee. */
        container-type: inline-size;
        height: 100%;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        gap: 0.8pt;
        /* Sans cette ligne, les rangees se dimensionnent sur le contenu :
           avec aspect-ratio: 1 impose sur .grid dans son ensemble mais pas
           sur chaque rangee individuellement, les cases deviennent
           rectangulaires au lieu de carrees quand la grille est etiree en
           hauteur pour remplir la page. */
        grid-auto-rows: 1fr;
    }

    .cell {
        /* Les fonds de case doivent etre imprimes, sinon les solutions
           surlignees seraient invisibles sur le papier. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 0.4pt solid #d8d8d8;
        border-radius: 0;
        background: #fff;
        color: #000;
        /* Repli fixe pour les moteurs de rendu PDF sans container queries. */
        font-size: 9pt;
    }

    /* Avec les container queries (Chrome/Chromium, y compris le moteur de
       rendu PDF utilise pour l'impression), la lettre suit la largeur
       reelle de la grille : petite grille agrandie -> grosses lettres,
       grande grille compressee -> lettres plus fines mais toujours lisibles. */
    @container (min-width: 1px) {
        .cell {
            font-size: clamp(6pt, calc(90cqw / var(--grid-size, 15)), 16pt);
        }
    }

    .cell--empty {
        border-color: transparent;
        background: none;
    }

    .cell--answer {
        background: #e8e8e8 !important;
        color: #000 !important;
        font-weight: 700;
    }

    .sheet__words { margin-top: 8pt; }

    .sheet__words-title { font-size: 10pt; margin-bottom: 5pt; }

    .sheet .word-list { gap: 2pt 10pt; }

    .sheet .word { font-size: 9pt; }

    .sheet .word::before { width: 7pt; height: 7pt; }

    .sheet__foot { margin-top: 8pt; padding-top: 5pt; }

    .sheet__foot-emoji { font-size: 11pt; }

    .sheet__foot-hint { font-size: 7pt; }

    /* La fiche et sa liste de mots restent sur la meme page si possible. */
    .sheet { break-inside: avoid; }
    .sheet__words { break-before: avoid; }

    a { text-decoration: none; color: #000; }
}