/* =========================================
 * RECETTES FAMILY — PRINT
 * Reflet du front + footer stable + QR piloté en mm
 * Objectif: 1-3 pages propres, sans recouvrement ni espaces “au hasard”
 * ========================================= */

:root{
    --rf-orange:#ff6233;
    --rf-text:#333;
    --rf-muted:#777;
    --rf-border:#eee;

    --rf-title-mw:85%;
    --rf-title-lh:1.00;
    --rf-title-track:.4px;

    --rf-print-img-maxh: 62mm;
    --rf-print-intro-pt: 5mm;
    --rf-print-intro-pb: 0mm;
    --rf-print-grid-gap: 5mm;

    /* ⚠️ IMPORTANT: on n'utilise PAS transform: scale() en print (instable)
     *     => ces scales pilotent la typographie via calc() */
    --rf-print-protocol-scale: 1.0;
    --rf-print-inv-scale: 1.0;

    --rf-print-footer-author-mw: 55mm;
    --rf-print-footer-text-mw: 85mm;
    --rf-print-footer-row-gap: 3mm;

    /* QR réel (1.5cm par défaut, surchargé via inline style) */
    --rf-print-qr-mm: 15mm;

    /* “Tightness” global (maîtrise des espacements) */
    --rf-vspace-1: 6px;
    --rf-vspace-2: 8px;
    --rf-vspace-3: 10px;
}

@page{ margin:0; size:A4; }
html, body{ margin:0; padding:0; }

body.rf-print{
    background:#fff;
    color:var(--rf-text);
    font-family:'Open Sans', sans-serif;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
}

.rfp-page{ page-break-after:always; }
.rfp-page:last-child{ page-break-after:auto; }

.rfp-sheet{
    width:210mm;
    height:297mm;
    background:#fff;
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;
}

/* punaises */
.rf-pin{
    position:absolute;
    width:28px; height:28px;
    border-radius:50%;
    z-index:10;
    box-shadow:
    0 4px 8px rgba(0,0,0,0.30),
    inset 0 2px 3px rgba(255,255,255,0.65),
    inset 0 -3px 5px rgba(0,0,0,0.25);
}
.rf-pin::after{
    content:'';
    position:absolute;
    top:5px; left:7px;
    width:8px; height:8px;
    border-radius:50%;
    background: rgba(255,255,255,0.45);
}
.rf-pin.yellow{ background: radial-gradient(circle at 30% 30%, #ffd700, #daa520); top:15px; left:15px; }
.rf-pin.blue{ background: radial-gradient(circle at 30% 30%, #4facfe, #00f2fe); top:15px; right:15px; }
.rf-pin.red-btm{ background: radial-gradient(circle at 30% 30%, #ff6b6b, #ee5253); bottom:15px; left:15px; }
.rf-pin.green-btm{ background: radial-gradient(circle at 30% 30%, #1dd1a1, #10ac84); bottom:15px; right:15px; }

/* header ribbon */
.rf-header-ribbon{
    background-color:var(--rf-orange);
    color:#fff;
    text-align:center;
    padding:12px 40px;
    margin-top:35px;
    clip-path: polygon(0% 0%, 100% 0%, 98% 50%, 100% 100%, 0% 100%, 2% 50%);
}
.rf-header-text{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* intro */
.rf-intro{
    padding: var(--rf-print-intro-pt) 5px var(--rf-print-intro-pb);
    text-align:center;
    max-width: var(--rf-title-mw, 85%);
    margin:0 auto;
}

.rf-title{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    color:#222;
    margin:0 0 var(--rf-vspace-2);
    line-height: var(--rf-title-lh, 1.00);
    letter-spacing: var(--rf-title-track, .4px);
    white-space:nowrap;
}
.rf-title-xl{ font-size:2.6rem; }
.rf-title-lg{ font-size:2.35rem; }
.rf-title-md{ font-size:2.15rem; }
.rf-title-sm{ font-size:1.95rem; }

.rf-objective{
    font-weight:800;
    font-size:1.05rem;
    color:#444;
    margin-bottom: var(--rf-vspace-2);
}
.rf-story p{
    font-size:1rem;
    line-height:1.45;
    margin:0 0 var(--rf-vspace-2);
}

/* compact title */
.rfp-title-compact{
    padding:14px 40px 8px;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
}
.rfp-title-compact-main{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    font-size:1.15rem;
    color:#222;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:150mm;
}
.rfp-title-compact-meta{
    font-size:.85rem;
    color:#666;
    white-space:nowrap;
}

/* content = zone flexible (ne doit pas masquer le contenu) */
.rfp-content{
    flex:1;
    overflow: visible; /* ⚠️ pas hidden: sinon “contenu mangé” */
}

/* grid page 1 */
.rf-grid{
    display:grid;
    grid-template-columns: 38% 58%;
    gap: var(--rf-print-grid-gap);
    padding:8px 40px 0;
    align-items:start;
}
.rf-col-left{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}
.rf-col-right{
    display:block;
    min-width:0;
}

/* image */
.rf-img-frame{
    border:4px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.rf-img{
    width:100%;
    height:auto;
    display:block;
    max-height: var(--rf-print-img-maxh);
    object-fit: cover;
}

/* section titles */
.rf-inventory h3,
.rf-kids-box h3,
.rf-protocol h3{
    font-family:'Oswald', sans-serif;
    color:var(--rf-orange);
    font-size:1.1rem;
    border-bottom:2px solid var(--rf-border);
    padding-bottom:5px;
    margin:0 0 var(--rf-vspace-2);
}

/* inventory (sans transform scale) */
.rf-inventory ul{
    list-style:none;
    padding:0;
    margin:0;
    font-size: calc(.92rem * var(--rf-print-inv-scale));
    line-height: 1.28;
}
.rf-inventory li{
    margin-bottom:6px;
    padding-left:15px;
    position:relative;
}
.rf-inventory li::before{
    content:'•';
    color:var(--rf-orange);
    position:absolute;
    left:0;
    font-weight:900;
}
.rf-ing-highlight{ font-weight:800; }
.rf-ing-link{
    color:inherit;
    text-decoration:underline;
    text-decoration-color: rgba(255,98,51,0.35);
    text-underline-offset:2px;
}

/* kids box */
.rf-kids-box{
    background:#fff3e0;
    border:2px solid var(--rf-orange);
    border-radius:8px;
    padding:12px;
    break-inside:avoid;
    page-break-inside:avoid;
}
.rf-kids-content p{
    font-size:.88rem;
    margin:0 0 8px;
    line-height:1.30;
}
.rf-kids-content p:last-child{ margin-bottom:0; }

/* protocol (sans transform scale) */
.rf-step-item{
    margin-bottom:8px;
    font-size: calc(.96rem * var(--rf-print-protocol-scale));
    line-height:1.35;
    break-inside:avoid;
    page-break-inside:avoid;
}
.rf-step-name{
    font-weight:900;
    text-transform:uppercase;
    font-size:.85rem;
    display:block;
    margin-bottom:2px;
    letter-spacing:.2px;
}
.rf-step-sep{
    margin: 10px 0 8px;
    font-weight:800;
    color:#444;
    border-left:4px solid var(--rf-orange);
    padding-left:8px;
}
.rf-tip-box{
    margin-top:12px;
    border:1px dashed #aaa;
    padding:10px 12px;
    font-size:.92rem;
    background:#f9f9f9;
    border-radius:6px;
    break-inside:avoid;
    page-break-inside:avoid;
}

.rfp-full{ padding:8px 40px 0; }

/* footer (dans le flux, toujours en bas via flex) */
.rfp-footer{
    margin-top:auto;
    border-top:1px solid var(--rf-border);
    padding:6mm 40px 5mm;
    background:#fff;
}

.rfp-footer-main{
    display:grid;
    grid-template-columns:
    58px
    minmax(0, var(--rf-print-footer-text-mw))
    minmax(0, var(--rf-print-footer-author-mw))
    var(--rf-print-qr-mm);
    align-items:center;
    gap:12px;
}

.rfp-foot-logo img{ width:58px; height:auto; display:block; }

.rfp-foot-text{
    font-size:.80rem;
    color:#666;
    line-height:1.25;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.rfp-foot-author{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    overflow:hidden;
}
.rfp-foot-author-photo{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #fff;
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
    flex:0 0 auto;
}
.rfp-foot-author-meta{ line-height:1.12; min-width:0; }
.rfp-foot-author-kicker{ display:block; font-size:.74rem; color:#666; }
.rfp-foot-author-name{
    display:block;
    font-family:'Oswald', sans-serif;
    font-size:.92rem;
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Instagram jamais coupé */
.rfp-foot-author-ig{
    display:inline-block;
    font-size:.76rem;
    color:inherit;
    text-decoration:underline;
    text-decoration-color: rgba(255,98,51,0.35);
    text-underline-offset:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 100%;
}

.rfp-foot-qr{
    width: var(--rf-print-qr-mm);
    height: var(--rf-print-qr-mm);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.rf-qr-rays{
    position:absolute;
    inset:-6mm;
    border-radius:50%;
    background: radial-gradient(circle, rgba(255,98,51,0.18) 0%, rgba(255,98,51,0.00) 70%);
    pointer-events:none;
}
.rfp-qr{
    position:relative;
    z-index:1;
    width: var(--rf-print-qr-mm);
    height: var(--rf-print-qr-mm);
    display:flex;
    align-items:center;
    justify-content:center;
}

/* kids footer_last */
.rfp-footer-kids{
    margin-top:6px;
    padding-top:6px;
    border-top:1px dashed rgba(0,0,0,0.12);
    max-height: 24mm;
    overflow:hidden;
}
.rfp-footer-kids-title{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:.3px;
    font-size:.90rem;
    color:var(--rf-orange);
    margin-bottom:4px;
}
.rfp-footer-kids-list{
    margin:0;
    padding:0 0 0 16px;
    font-size:.80rem;
    line-height:1.16;
}
.rfp-footer-kids-list li{ margin:0 0 3px 0; }
.rfp-footer-kids-list li:last-child{ margin-bottom:0; }

.rfp-footer-page-no{
    margin-top:2mm;
    font-size:.74rem;
    color:#777;
    text-align:right;
}