/* ============================================================
   CookQuick - print-and-share.css
   - Améliorations de la fiche imprimée (A4 propre)
   - Styles des toques de difficulté
   - Style du bouton Partager (état "copié")
   À inclure dans le bundle ~/Content/css APRÈS site.css.
   ============================================================ */

/* ============================================================
   DIFFICULTÉ EN TOQUES
   ============================================================ */
.difficulty-toques {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.difficulty-toques .toque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.difficulty-toques .toque svg {
    fill: var(--text-dim);
    transition: fill .2s var(--ease);
}

.difficulty-toques .toque.is-on svg {
    fill: var(--accent);
}

.difficulty-label {
    margin-left: 8px;
    font-size: inherit;
    color: inherit;
}

/* Dans la meta-card, la valeur difficulté doit s'aligner joliment */
.meta-value .difficulty-toques {
    font-family: var(--font-display);
    font-size: 0.85em;
}

/* ============================================================
   BOUTON PARTAGER — état "copié"
   ============================================================ */
.btn-ghost.is-copied {
    border-color: rgb(56, 161, 105) !important;
    color: rgb(56, 161, 105) !important;
}

/* ============================================================
   FICHE IMPRIMÉE — compléments A4
   (s'ajoute aux règles @media print déjà présentes dans site.css)
   ============================================================ */
@media print {
    /* Marges de page A4 propres */
    @page {
        size: A4;
        margin: 1.5cm 1.6cm;
    }

    /* Les toques en impression : on les masque, on garde le libellé texte
       (plus lisible et économe en encre couleur) */
    .difficulty-toques .toque { display: none !important; }
    .difficulty-label { margin-left: 0 !important; }

    /* Affiche l'URL de la recette en petit sous le titre, pour pouvoir y revenir */
    .recipe-page::after {
        content: "Recette imprimée depuis cook.todoquick.fr";
        display: block;
        margin-top: 24px;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        font-size: 8pt;
        color: #888;
        text-align: center;
        page-break-before: avoid;
    }

    /* On garde la petite image du plat en haut de la fiche (N&B), discrète.
       Si tu préfères ne pas l'imprimer (encre), passe display:none. */
    .recipe-hero-mag-image {
        display: block !important;
        max-width: 50% !important;
        margin: 0 auto 16px !important;
        page-break-inside: avoid;
    }
    .recipe-hero-mag-image img {
        max-height: 6cm !important;
        width: auto !important;
        filter: grayscale(100%);
    }
    /* On ré-affiche le hero-mag (masqué par site.css) mais SEULEMENT l'image,
       pas le bloc texte (le titre vient déjà du ::before) */
    .recipe-hero-mag {
        display: block !important;
        border: none !important;
        padding: 0 !important;
    }
    .recipe-hero-mag-text { display: none !important; }
    .recipe-hero-mag-inner { display: block !important; }
}