/* =========================================
 *  RECETTES FAMILY (DESIGN APP + SCREEN)
 *  Phase 2 print multipage à part (plus tard)
 *  ========================================= */

/* ==========================================================
 *   THEME TOKENS (LIGHT)
 *   - 0 couleur/ombre/gradient "en dur" dans les règles.
 *   - Tout passe par variables.
 *   ========================================================== */

:root{
    /* Brand / accents */
    --rf-orange: #ff6233;
    --rf-blue: #007bff;

    /* Surfaces / texte */
    --rf-bg: #e0e0e0;
    --rf-surface: #ffffff;
    --rf-surface-soft: #f9f9f9;

    --rf-text: #333333;
    --rf-text-strong: #222222;
    --rf-muted: #777777;
    --rf-muted-2: #666666;
    --rf-muted-3: #555555;

    --rf-border: #eeeeee;
    --rf-border-strong: #aaaaaa;

    /* Action bar */
    --rf-actions-bg: var(--rf-surface);
    --rf-actions-border: rgba(0,0,0,0.05);
    --rf-actions-shadow: 0 5px 25px rgba(0,0,0,0.30);

    --rf-actions-label: var(--rf-muted-3);

    /* Buttons social */
    --rf-btn-whatsapp-bg: #25D366;
    --rf-btn-facebook-bg: #1877F2;
    --rf-btn-mail-bg: #888888;
    --rf-btn-ico: #ffffff;

    --rf-btn-print-bg: var(--rf-orange);
    --rf-btn-print-text: #ffffff;

    /* Sheet */
    --rf-paper-w: 210mm;
    --rf-sheet-bg: var(--rf-surface);
    --rf-sheet-shadow: 0 10px 30px rgba(0,0,0,0.15);

    /* Pins (gradients + reflets + ombres) */
    --rf-pin-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-gloss: rgba(255,255,255,0.45);

    --rf-pin-yellow-g1: #ffd700;
    --rf-pin-yellow-g2: #daa520;
    --rf-pin-blue-g1: #4facfe;
    --rf-pin-blue-g2: #00f2fe;
    --rf-pin-red-g1: #ff6b6b;
    --rf-pin-red-g2: #ee5253;
    --rf-pin-green-g1: #1dd1a1;
    --rf-pin-green-g2: #10ac84;

    /* Header ribbon */
    --rf-ribbon-bg: var(--rf-orange);
    --rf-ribbon-text: #ffffff;

    /* Titles / story */
    --rf-title-color: var(--rf-text-strong);
    --rf-objective-color: #444444;
    --rf-story-color: var(--rf-text);

    /* Image frame */
    --rf-img-frame-border: var(--rf-surface);
    --rf-img-frame-shadow: 0 3px 10px rgba(0,0,0,0.15);

    /* Section headings */
    --rf-h3-color: var(--rf-orange);
    --rf-h3-border: var(--rf-border);

    /* Inventory bullets + links underline */
    --rf-bullet-color: var(--rf-orange);
    --rf-link-underline: rgba(255,98,51,0.35);
    --rf-link-underline-hover: rgba(255,98,51,0.75);

    /* Kids box */
    --rf-kids-bg: #fff3e0;
    --rf-kids-border: var(--rf-orange);

    /* Step separator / tip box */
    --rf-step-sep-bg: var(--rf-orange);
    --rf-step-sep-text: #ffffff;

    --rf-tip-border: 1px dashed var(--rf-border-strong);
    --rf-tip-bg: var(--rf-surface-soft);

    /* Footer */
    --rf-footer-border: var(--rf-border);
    --rf-footer-text: var(--rf-muted-2);

    --rf-author-kicker: var(--rf-muted-2);
    --rf-author-name: var(--rf-text-strong);

    --rf-author-photo-border: var(--rf-surface);
    --rf-author-photo-shadow: 0 3px 10px rgba(0,0,0,0.15);

    /* QR */
    --rf-qr-rays-bg: radial-gradient(circle, rgba(255,98,51,0.22) 0%, rgba(255,98,51,0.00) 70%);

    /* PRINT */
    --rf-print-bg: #ffffff;

    /* TITRE (piloté via JSON → CSS vars / classes) */
    --rf-title-mw: 85%;
    --rf-title-lh: 1.00;
    --rf-title-track: .4px;
}

/* ==========================================================
 *   THEME TOKENS (DARK)
 *   Supporte plusieurs conventions de thème sans casser l’existant :
 *   - html[data-theme="dark"] / body[data-theme="dark"]
 *   - html.pd-theme-dark / body.pd-theme-dark
 *   - html.theme-dark / body.theme-dark
 *   ========================================================== */

html[data-theme="dark"],
body[data-theme="dark"],
html.pd-theme-dark,
body.pd-theme-dark,
html.theme-dark,
body.theme-dark{
    --rf-bg: #0b0f14;
    --rf-surface: #121821;
    --rf-surface-soft: #0f141c;

    --rf-text: rgba(241,245,249,0.92);
    --rf-text-strong: rgba(241,245,249,0.98);
    --rf-muted: rgba(203,213,225,0.78);
    --rf-muted-2: rgba(203,213,225,0.78);
    --rf-muted-3: rgba(203,213,225,0.85);

    --rf-border: rgba(148,163,184,0.20);
    --rf-border-strong: rgba(148,163,184,0.40);

    --rf-actions-bg: rgba(18,24,33,0.92);
    --rf-actions-border: rgba(148,163,184,0.22);
    --rf-actions-shadow: 0 8px 34px rgba(0,0,0,0.50);

    --rf-actions-label: rgba(203,213,225,0.85);

    --rf-sheet-bg: #121821;
    --rf-sheet-shadow: 0 10px 34px rgba(0,0,0,0.55);

    --rf-ribbon-text: rgba(15,23,42,0.98);

    --rf-title-color: var(--rf-text-strong);
    --rf-objective-color: rgba(226,232,240,0.88);
    --rf-story-color: var(--rf-text);

    --rf-img-frame-border: #0b0f14;
    --rf-img-frame-shadow: 0 6px 20px rgba(0,0,0,0.50);

    --rf-h3-border: rgba(148,163,184,0.20);

    --rf-link-underline: rgba(255,98,51,0.45);
    --rf-link-underline-hover: rgba(255,98,51,0.85);

    --rf-kids-bg: rgba(255,98,51,0.10);
    --rf-tip-bg: rgba(15,23,42,0.55);

    --rf-footer-text: rgba(203,213,225,0.78);
    --rf-author-kicker: rgba(203,213,225,0.72);
    --rf-author-name: rgba(241,245,249,0.98);

    --rf-author-photo-border: #0b0f14;
    --rf-author-photo-shadow: 0 8px 26px rgba(0,0,0,0.55);

    --rf-qr-rays-bg: radial-gradient(circle, rgba(255,98,51,0.28) 0%, rgba(255,98,51,0.00) 70%);
}

/* ==========================================================
 *   PAGE
 *   ========================================================== */

body.page-recette-family{ background-color: var(--rf-bg); }

/* --- WRAPPER APP --- */
.rf-app-mode{
    padding: 20px 0 100px; /* espace sticky bottom */
    display:flex;
    flex-direction:column;
    align-items:center;
    font-family:'Open Sans', sans-serif;
    color: var(--rf-text);
}

/* --- ACTION BAR (STICKY BOTTOM FIXED) --- */
.rf-actions-bar{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    display:flex;
    align-items:center;
    gap:15px;

    background: var(--rf-actions-bg);
    padding: 12px 25px;
    border-radius: 50px;
    box-shadow: var(--rf-actions-shadow);
    border: 1px solid var(--rf-actions-border);
}

.rf-actions-label{
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--rf-actions-label);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.rf-actions-group{ display:flex; gap:12px; }

.btn-action{
    width:42px; height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.3rem;
    text-decoration:none;
    transition: transform .2s ease;
    border:none;
    cursor:pointer;
}
.btn-action:hover{ transform: translateY(-3px); }

.btn-action.whatsapp{ background: var(--rf-btn-whatsapp-bg); color: var(--rf-btn-ico); }
.btn-action.facebook{ background: var(--rf-btn-facebook-bg); color: var(--rf-btn-ico); }
.btn-action.mail{ background: var(--rf-btn-mail-bg); color: var(--rf-btn-ico); }

.btn-action.print-btn{
    width:auto;
    padding: 0 25px;
    border-radius:30px;
    background: var(--rf-btn-print-bg);
    color: var(--rf-btn-print-text);
    font-weight:700;
    font-family:'Oswald', sans-serif;
    font-size:1rem;
    gap:10px;
}

/* --- FEUILLE A4 (SCREEN) --- */
.rf-sheet-container{
    width:100%;
    display:flex;
    justify-content:center;
}

.rf-sheet{
    background: var(--rf-sheet-bg);
    width:100%;
    max-width: var(--rf-paper-w);
    min-height: 297mm;
    position:relative;

    box-shadow: var(--rf-sheet-shadow);
    padding: 0 0 20px 0;
    display:flex;
    flex-direction:column;
}

/* PUNAISES (effet 3D amélioré) */
.rf-pin{
    position:absolute;
    width:28px; height:28px;
    border-radius:50%;
    z-index:10;

    box-shadow: var(--rf-pin-shadow);
}
.rf-pin::after{
    content:'';
    position:absolute;
    top:5px; left:7px;
    width:8px; height:8px;
    border-radius:50%;
    background: var(--rf-pin-gloss);
}
.rf-pin.yellow{
    background: radial-gradient(circle at 30% 30%, var(--rf-pin-yellow-g1), var(--rf-pin-yellow-g2));
    top: 15px; left: 15px;
}
.rf-pin.blue{
    background: radial-gradient(circle at 30% 30%, var(--rf-pin-blue-g1), var(--rf-pin-blue-g2));
    top: 15px; right: 15px;
}
.rf-pin.red-btm{
    background: radial-gradient(circle at 30% 30%, var(--rf-pin-red-g1), var(--rf-pin-red-g2));
    bottom: 15px; left: 15px;
}
.rf-pin.green-btm{
    background: radial-gradient(circle at 30% 30%, var(--rf-pin-green-g1), var(--rf-pin-green-g2));
    bottom: 15px; right: 15px;
}

/* HEADER RIBBON */
.rf-header-ribbon{
    background-color: var(--rf-ribbon-bg);
    color: var(--rf-ribbon-text);
    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.1rem;
    text-transform:uppercase;
    letter-spacing: 1px;
}

/* INTRO (supporte intro longue + titre piloté par JSON) */
.rf-intro{
    padding: 35px 50px 18px;
    text-align:center;
    max-width: var(--rf-title-mw, 85%);
    margin: 0 auto;
}

/* TITRE — IMPORTANT :
 *   - Pas d’ellipsis
 *   - Pas de “cut”
 *   - Objectif desktop : 1 ligne via JSON (taille choisie)
 */
.rf-title{
    font-family:'Oswald', sans-serif;
    text-transform: uppercase;
    color: var(--rf-title-color);
    margin: 0 0 10px;

    line-height: var(--rf-title-lh, 1.00);
    letter-spacing: var(--rf-title-track, .4px);

    white-space: nowrap;
}

/* Tailles (choisies via JSON → classe) */
.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: var(--rf-objective-color);
    margin-bottom: 12px;
}

.rf-story{ color: var(--rf-story-color); }

.rf-story p{
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 12px;
}
.rf-story p:first-child{ font-size: 1.08rem; }

/* GRID */
.rf-grid{
    display:grid;
    grid-template-columns: 38% 58%;
    gap: 4%;
    padding: 10px 40px;
    align-items:start;
}
.rf-col-left{
    display:flex;
    flex-direction:column;
    gap: 20px;
}

/* Image cadre */
.rf-img-frame{
    transform: rotate(-2deg);
    border: 4px solid var(--rf-img-frame-border);
    box-shadow: var(--rf-img-frame-shadow);
}
.rf-img{
    width:100%;
    height:auto;
    display:block;
}

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

/* INVENTAIRE */
.rf-inventory ul{
    list-style:none;
    padding:0;
    margin:0;
    font-size:0.92rem;
}
.rf-inventory li{
    margin-bottom: 7px;
    padding-left: 15px;
    position:relative;
    line-height:1.35;
}
.rf-inventory li::before{
    content:'•';
    color: var(--rf-bullet-color);
    position:absolute;
    left:0;
    font-weight:900;
}
.rf-ing-highlight{ font-weight: 800; }

.rf-ing-link{
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--rf-link-underline);
    text-underline-offset: 2px;
}
.rf-ing-link:hover{
    text-decoration-color: var(--rf-link-underline-hover);
}

/* KIDS BOX */
.rf-kids-box{
    background: var(--rf-kids-bg);
    border: 2px solid var(--rf-kids-border);
    border-radius: 8px;
    padding: 15px;
}
.rf-kids-content p{
    font-size:0.88rem;
    margin: 0 0 10px;
    line-height: 1.35;
}
.rf-kids-content p:last-child{ margin-bottom:0; }

/* PROTOCOLE */
.rf-step-item{
    margin-bottom: 14px;
    font-size: 0.96rem;
    line-height: 1.5;
}
.rf-step-name{
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.85rem;
    display:block;
    margin-bottom: 2px;
    letter-spacing: .2px;
}
.rf-step-sep{
    font-family:'Oswald', sans-serif;
    color: var(--rf-step-sep-text);
    background: var(--rf-step-sep-bg);
    display:inline-block;
    padding: 2px 10px;
    margin: 16px 0 10px;
    font-size: 0.9rem;
    transform: skewX(-10deg);
}
.rf-tip-box{
    margin-top: 18px;
    border: var(--rf-tip-border);
    padding: 10px 12px;
    font-size: 0.92rem;
    background: var(--rf-tip-bg);
    border-radius: 6px;
}

/* FOOTER */
.rf-footer{
    margin-top:auto;
    padding: 15px 40px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top: 1px solid var(--rf-footer-border);
    gap: 20px;
}

.rf-brand-logo img{
    width:60px;
    height:auto;
}

.rf-footer-txt{
    font-size:0.82rem;
    color: var(--rf-footer-text);
    max-width: 50%;
    line-height:1.35;
}

/* AUTEUR DANS LE FOOTER (compact) */
.rf-footer-author{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 220px;
}

.rf-footer-author-photo{
    width:44px;
    height:44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rf-author-photo-border);
    box-shadow: var(--rf-author-photo-shadow);
}

.rf-footer-author-meta{ line-height: 1.15; }

.rf-footer-author-kicker{
    display:block;
    font-size: .78rem;
    color: var(--rf-author-kicker);
}

.rf-footer-author-name{
    display:block;
    font-family:'Oswald', sans-serif;
    font-size: .95rem;
    letter-spacing: .2px;
    color: var(--rf-author-name);
}

.rf-footer-author-ig{
    display:inline-block;
    font-size: .82rem;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--rf-link-underline);
    text-underline-offset: 2px;
}
.rf-footer-author-ig:hover{
    text-decoration-color: var(--rf-link-underline-hover);
}

/* QR premium avec rayons */
.rf-qr-wrapper{
    position: relative;
    width: 90px;
    height: 90px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.rf-qr-rays{
    position:absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--rf-qr-rays-bg);
    filter: blur(.2px);
}
.rf-qr{
    position:relative;
    z-index:1;
    width: 80px;
    height: 80px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.rf-qr img{ width:100%; height:auto; }

/* MOBILE */
@media (max-width: 768px){
    .rf-app-mode{ padding: 0 0 90px 0; }

    .rf-actions-bar{
        width:92%;
        padding: 10px 15px;
        justify-content: space-between;
    }
    .rf-actions-label{ display:none; }

    .rf-sheet{
        box-shadow:none;
        max-width:100%;
        min-height:auto;
    }
    .rf-pin{ display:none; }

    .rf-intro{
        padding: 25px 16px 12px;
        max-width: 100%;
    }

    /* Sur mobile : on autorise le retour à la ligne (sinon débordement) */
    .rf-title{ white-space: normal; }

    .rf-grid{
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 10px 16px 20px;
    }
    .rf-col-left{ order:-1; }
    .rf-img-frame{ transform:none; width:100%; }

    /* Footer mobile : on empile proprement */
    .rf-footer{
        padding: 12px 16px 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .rf-footer-txt{ max-width: 100%; }
    .rf-footer-author{ min-width: 0; }
}

/* PRINT (screen -> print simple, phase 2 multipage après) */
@media print{
    @page { margin: 0; size: A4; }

    body{
        background: var(--rf-print-bg);
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rf-app-mode{ padding:0; background:none; }
    .rf-actions-bar,
    .internal-header-wrapper,
    .internal-footer-wrapper,
    #themeToggle{ display:none !important; }

    .rf-sheet{
        box-shadow:none;
        width: 210mm;
        margin:0;
        padding:0;
        min-height:auto;
    }
    .rf-header-ribbon{ margin-top:0; }

    /* Ne casse pas le rendu de base : on garde simple pour l’instant */
    .rf-grid{ display:block; padding: 20px 40px; }
    .rf-col-left, .rf-col-right{ width:100%; display:block; }

    .rf-img-frame{
        float:right;
        width:40%;
        margin: 0 0 20px 20px;
        transform:none;
        box-shadow:none;
    }

    .rf-step-item{ break-inside: avoid; }
    .rf-footer{ break-inside: avoid; margin-top: 50px; }

    /* Footer print : garde compact */
    .rf-footer{
        flex-direction: row;
        align-items: center;
    }
}