/*
Theme Name: 300g.fr
Theme URI: https://300g.fr/
Description: Child theme for GeneratePress powering 300g.fr — recipe cards, homepage builder, article layout, skins and top bar, all driven from admin panels.
Author: Abdo
Template: generatepress
Version: 1.2
*/

/*
 * This is the single physical file actually shipped to visitors —
 * ONE request, fully browser-cacheable across every page view in a
 * session. It's built by concatenating the smaller, easier-to-edit
 * source files under css/ (base, cards, hero, sections, footer,
 * header-nav, mobile-menu, search, misc, single, sidebar, pagination, comments, background, frames, ambiance, home-blocks). When any of those
 * source files change, this file needs to be rebuilt from them to
 * match — editing happens in css/, this file is what ships.
 */

/*
 * Recettes Rapides — Base styles
 * Multi-page post pagination buttons, ad visibility for staff.
 */

/*-[ Custom pagination buttons for multi-page posts ]------------------*/
.pagination {
    clear: both;
    overflow: hidden;
    float: left;
    width: 100%;
    text-align: center;
    display: block !important;
}
.single .pagination {
    border: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    width: 100%;
}
.pagination ul {
    list-style: none;
    margin: 0;
}
.pagination ul li {
    float: left;
}
.pagination a,
.pagination > .current {
    background: #373737 !important;
    margin: 0 10px 0 0;
    display: inline-block;
    float: left;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    color: #fff !important;
    padding: 5px 5px 5px;
    transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    font-weight: 500;
    border: 1px solid #062a54;
    border-radius: 5px;
}
.single .pagination > .current > .currenttext {
    background: transparent !important;
    margin: 0;
}
.pagination a:hover {
    color: #fff;
}
.pagination-previous-next a {
    border-radius: 5px;
    min-width: 100px;
}
.pagination .nav-previous {
    float: left;
}
.pagination .nav-next {
    float: right;
}
.pagination .nav-previous a:hover,
.pagination .nav-next a:hover {
    background-color: #87bcde;
}
.pagination ul li:last-child a {
    margin-right: 0;
}
.pagination .nav-links {
    display: inline-block;
}
.pagination .nav-links a:last-child {
    margin-right: 0;
}
.single .pagination a .currenttext,
.single .pagination a:hover .currenttext {
    padding: 0;
    background: transparent;
    margin-right: 0;
}
.single .pagination a:hover .currenttext {
    color: #fff;
}


/*-[ Hide ad containers for admin/editor/author when logged in ]------------------*/
body.ads-hidden-for-role center:has(ins.adsbygoogle),
body.ads-hidden-for-role ins.adsbygoogle {
    display: none !important;
}


/*-[ Archive pagination wrapper ]------------------*/
/* The page-number pills are styled, but GeneratePress wraps them in
   .paging-navigation with its own white background and 20px padding,
   which shows as a flat square block sitting on the page background.
   The pills supply all the visual weight needed, so the wrapper is
   stripped back to nothing.

   The leading `body` is required: GeneratePress prints its own
   `.separate-containers .paging-navigation{padding…}` and the shared
   background rule in an inline <style> block that comes AFTER this
   stylesheet, so an equal-specificity selector would lose the tie. */
body .paging-navigation,
body.separate-containers .paging-navigation {
    background-color: transparent;
    padding: 0;
    border: 0;
    /* The cards above already carry their own bottom margin, and the
       section frame adds its inner padding below — so this needs very
       little of its own or the gap compounds into a large empty band. */
    margin: 6px 0 0;
    text-align: center;
}

.paging-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* GeneratePress also outputs "Articles plus anciens / plus récents"
   text links above the numbers. They point to the same pages the
   numbered pills already cover, so they are removed rather than
   shown twice.

   Hidden with display:none rather than visually-hidden on purpose:
   the numbered links remain in the markup and are fully reachable by
   keyboard and screen readers, so no navigation is lost. */
.paging-navigation .nav-previous,
.paging-navigation .nav-next {
    display: none;
}

@media (max-width: 768px) {
    body .paging-navigation,
    body.separate-containers .paging-navigation {
        margin: 2px 0 0;
    }

    .paging-navigation .nav-links {
        gap: 6px;
    }
}


/*
 * Recettes Rapides — Recipe cards
 * Card grid (home/archive/category), sidebar widget styling, and
 * the 5 card visual style presets (Classique/Minimaliste/Moderne/
 * Magazine/Vivid) selectable in Réglages → Options du thème.
 */

/*-[ Recipe card grid (home / archive / category) ]------------------*/
/* Note: column layout itself is handled natively by GeneratePress
   Premium's "Columns" feature (.generate-columns-container). We only
   style the individual cards here, not the grid/column structure. */

.recipe-card {
    margin: 0 !important;
}

.recipe-card-inner {
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    height: 100%;
}

/* High-specificity override: GeneratePress Premium's own dynamic CSS
   resets card margin-bottom to 0 with matching specificity, and since
   its rule prints after ours it wins on a tie. Adding #main plus a
   doubled class here makes our selector unambiguously more specific,
   so this wins regardless of load order. */
#main .generate-columns-container article.recipe-card.recipe-card {
    margin-bottom: 28px !important;
}

/* Same trick for the horizontal gutter between columns: GP Premium's
   wrapper uses padding-left: 20px by default, widen it to 40px.
   IMPORTANT: this padding lives on the same <article> element as
   the "generate-columns" class (not a separate wrapper div), so the
   visible card background/border must sit on an INNER element
   (.recipe-card-inner) — otherwise this padding just shifts content
   inside the card instead of creating a real visual gap. */
#main .generate-columns-container .generate-columns.generate-columns {
    padding-left: 20px !important;
}

/* Force 3 columns on desktop instead of GP Premium's default 2
   (its own "grid-50" class sizes each card at 50% width). Tablet
   and mobile breakpoints use different classes, so they're
   untouched and keep their own responsive behavior. */
@media (min-width: 1025px) {
    #main .generate-columns-container .generate-columns.grid-50.grid-50,
    #main .generate-columns-container .grid-sizer.grid-50.grid-50 {
        width: 33.333% !important;
    }
}

.recipe-card:hover .recipe-card-inner {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.recipe-card-image,
.recipe-card-image-placeholder {
    width: 100%;
    aspect-ratio: var(--rr-image-aspect-ratio, 4 / 3);
    object-fit: cover;
    display: block;
    background-color: #eee;
    transition: transform 0.4s ease;
    border-radius: var(--rr-image-corner-radius, 16px) var(--rr-image-corner-radius, 16px) 0 0;
}

.recipe-card:hover .recipe-card-image {
    transform: scale(1.03);
}

.recipe-card-image-wrap {
    position: relative;
    overflow: hidden;
}

.recipe-card-date {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--rr-card-date-bg, rgba(20, 20, 20, 0.75));
    color: var(--rr-card-date-text, #fff);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
}

.recipe-card-category {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: var(--rr-accent, #b5651d);
    color: var(--rr-button-text, #fff) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
}

.recipe-card-content {
    padding: 20px;
    text-align: center;
}

.recipe-card-title {
    font-size: 20px;
    margin: 0 0 12px;
    line-height: 1.3;
    font-family: var(--rr-heading-font, inherit);
}

.recipe-card-title a {
    color: var(--rr-card-title, #1a1a1a);
    text-decoration: none;
}

.recipe-card-excerpt {
    color: var(--rr-card-text, #666);
    font-size: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card-excerpt p {
    margin: 0;
}


/*-[ Sidebar widgets: match card styling (border + rounded corners) ]------------------*/
.widget-area .widget {
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 20px;
}


/*-[ Card style presets ]------------------
   "classique" is the default look already defined above — no extra
   rules needed. Each other preset below only overrides what's
   different, scoped to its body class, and layers on top of your
   existing color/font settings (which still apply everywhere). */

/* ---- Minimaliste: flat, square corners, thin border, no lift ---- */
body.rr-card-style-minimaliste .recipe-card-inner,
body.rr-card-style-minimaliste .recipe-hero {
    border-radius: 4px;
    box-shadow: none;
}

body.rr-card-style-minimaliste .recipe-card:hover .recipe-card-inner {
    box-shadow: none;
    transform: none;
    border-color: var(--rr-accent, #b5651d);
}

body.rr-card-style-minimaliste .recipe-card-image,
body.rr-card-style-minimaliste .recipe-card-image-placeholder {
    border-radius: 0;
}

body.rr-card-style-minimaliste .recipe-card-category,
body.rr-card-style-minimaliste .recipe-card-date {
    border-radius: 2px;
}

body.rr-card-style-minimaliste .recipe-card:hover .recipe-card-image {
    transform: none;
}

/* ---- Moderne: very rounded, strong shadow, bigger zoom on hover ---- */
body.rr-card-style-moderne .recipe-card-inner,
body.rr-card-style-moderne .recipe-hero {
    border-radius: 26px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

body.rr-card-style-moderne .recipe-card:hover .recipe-card-inner {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
    transform: translateY(-6px);
}

body.rr-card-style-moderne .recipe-card:hover .recipe-card-image {
    transform: scale(1.1);
}

body.rr-card-style-moderne .recipe-card-category,
body.rr-card-style-moderne .recipe-card-date {
    border-radius: 30px;
    padding: 10px 20px;
}

body.rr-card-style-moderne .recipe-hero-more,
body.rr-card-style-moderne .recipe-mobile-search-button,
body.rr-card-style-moderne .recipe-noresults-search-button {
    border-radius: 50px;
}

/* ---- Magazine: editorial feel, bold titles, underline accent ---- */
body.rr-card-style-magazine .recipe-card-inner,
body.rr-card-style-magazine .recipe-hero {
    border-radius: 0;
    box-shadow: none;
    border-bottom: 3px solid var(--rr-accent, #b5651d);
}

body.rr-card-style-magazine .recipe-card:hover .recipe-card-inner {
    box-shadow: none;
    transform: none;
}

body.rr-card-style-magazine .recipe-card-title,
body.rr-card-style-magazine .recipe-hero-title {
    font-size: 24px;
    text-transform: none;
}

body.rr-card-style-magazine .recipe-card-title a {
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

body.rr-card-style-magazine .recipe-card:hover .recipe-card-title a {
    border-bottom-color: var(--rr-accent, #b5651d);
}

body.rr-card-style-magazine .recipe-card-category {
    background: transparent;
    color: var(--rr-accent, #b5651d) !important;
    border: 1px solid var(--rr-accent, #b5651d);
}

/* ---- Vivid: colored border, bold badges ---- */
body.rr-card-style-vivid .recipe-card-inner,
body.rr-card-style-vivid .recipe-hero {
    border: 2px solid var(--rr-accent, #b5651d);
    box-shadow: none;
}

body.rr-card-style-vivid .recipe-card:hover .recipe-card-inner {
    border-color: var(--rr-accent-hover, #96521a);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

body.rr-card-style-vivid .recipe-card-category {
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.rr-card-style-vivid .recipe-card-date {
    border: 1px solid var(--rr-accent, #b5651d);
}


/*-[ Grid fallback when GP Premium Columns is absent ]------------------*/
/* content.php's cards get their grid from GP Premium's Columns module.
   With Columns OFF (or GP Premium absent) every card is a full-width
   block, so the theme lays them out itself.

   The condition is read from the MARKUP, not from PHP:

     Columns ON  -> cards live inside .generate-columns-container
     Columns OFF -> cards are DIRECT children of .site-main

   so `:has(> .recipe-card)` is true in exactly the case that needs
   fixing, and false otherwise. No detection to get wrong, nothing to
   keep in sync with a plugin's settings, and it cannot misfire on a
   site where Columns is doing its job. */
.site-main:has(> .recipe-card),
.rr-frame-latest-wrap:has(> .recipe-card),
body.rr-fallback-grid .site-main,
body.rr-fallback-grid .rr-frame-latest-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

/* Hero, section headings, pagination and showcase span the full row
   instead of becoming grid cells. */
.site-main:has(> .recipe-card) > *:not(.recipe-card),
.rr-frame-latest-wrap:has(> .recipe-card) > *:not(.recipe-card),
body.rr-fallback-grid .site-main > *:not(.recipe-card),
body.rr-fallback-grid .rr-frame-latest-wrap > *:not(.recipe-card) {
    grid-column: 1 / -1;
}

.site-main:has(> .recipe-card) > .recipe-card,
.rr-frame-latest-wrap:has(> .recipe-card) > .recipe-card,
body.rr-fallback-grid .recipe-card {
    margin: 0;
}

@media (max-width: 1024px) {
    .site-main:has(> .recipe-card),
    .rr-frame-latest-wrap:has(> .recipe-card),
    body.rr-fallback-grid .site-main,
    body.rr-fallback-grid .rr-frame-latest-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .site-main:has(> .recipe-card),
    .rr-frame-latest-wrap:has(> .recipe-card),
    body.rr-fallback-grid .site-main,
    body.rr-fallback-grid .rr-frame-latest-wrap {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/*
 * Recettes Rapides — Hero carousel
 * The featured post slideshow shown at the top of the homepage.
 */

/*-[ Hero carousel (homepage only) ]------------------*/
.recipe-hero {
    position: relative;
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: var(--rr-image-corner-radius, 16px);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}

.recipe-hero-slide {
    display: none;
    grid-template-columns: 1.3fr 1fr;
    align-items: stretch;
    height: 500px;
}

.recipe-hero-slide.is-active {
    display: grid;
}

.recipe-hero-image {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.recipe-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recipe-hero-info {
    height: 100%;
    padding: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.recipe-hero-category {
    color: var(--rr-accent, #b5651d);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.recipe-hero-title {
    font-family: var(--rr-heading-font, Georgia, 'Times New Roman', Times, serif);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.recipe-hero-title a {
    color: var(--rr-card-title, #1a1a1a);
    text-decoration: none;
}

.recipe-hero-excerpt {
    color: var(--rr-card-text, #555);
    font-size: 16px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.recipe-hero-excerpt p {
    margin: 0;
}

.recipe-hero-more {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background: var(--rr-accent, #b5651d);
    color: var(--rr-button-text, #fff);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 30px;
    align-self: flex-start;
    transition: background 0.2s ease;
}

.recipe-hero-more:hover {
    background: var(--rr-accent-hover, #96521a);
}

.recipe-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--rr-card-border, #ece4dc);
    color: var(--rr-card-title, #1a1a1a);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
}

.recipe-hero-arrow:hover {
    background: var(--rr-accent, #b5651d);
    color: var(--rr-button-text, #fff);
    border-color: var(--rr-accent, #b5651d);
    transform: translateY(-50%) scale(1.06);
}

.recipe-hero-prev {
    left: 20px;
}

.recipe-hero-next {
    right: 20px;
}

.recipe-hero-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .recipe-hero-slide {
        grid-template-columns: 1fr;
        height: auto;
    }

    .recipe-hero-image {
        height: 220px;
    }

    .recipe-hero-info {
        padding: 24px;
        min-height: 0;
    }

    .recipe-hero-arrow {
        top: 110px;
    }

    .recipe-hero-title {
        font-size: 24px;
    }

    /* Remove the desktop column gutter on mobile: with only one
       column per row, the left padding just shifts each card right
       instead of centering it. */
    #main .generate-columns-container .generate-columns.generate-columns {
        padding-left: 0 !important;
    }
}



/*-[ Hero style presets ]------------------
   "classique" is the default look already defined above — no extra
   rules needed. Each preset below restyles the SAME HTML structure
   (.recipe-hero > .recipe-hero-slides > .recipe-hero-slide >
   .recipe-hero-image + .recipe-hero-info) purely with CSS. */

/* ---- Plein écran: image fills the whole slide, text overlaid with a gradient scrim ---- */
body.rr-hero-style-plein_ecran .recipe-hero-slide {
    display: block;
    position: relative;
}

body.rr-hero-style-plein_ecran .recipe-hero-image {
    position: absolute;
    inset: 0;
}

body.rr-hero-style-plein_ecran .recipe-hero-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    justify-content: flex-end;
    padding: 60px 40px 36px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0) 100%);
}

body.rr-hero-style-plein_ecran .recipe-hero-title a,
body.rr-hero-style-plein_ecran .recipe-hero-excerpt {
    color: #fff;
}

body.rr-hero-style-plein_ecran .recipe-hero-category {
    color: var(--rr-accent, #d4941e);
}

@media (max-width: 768px) {
    body.rr-hero-style-plein_ecran .recipe-hero-info {
        padding: 40px 20px 24px;
    }
}

/* ---- Minimaliste: shorter, flatter, no shadow/border ---- */
body.rr-hero-style-minimaliste .recipe-hero {
    border: none;
    box-shadow: none;
}

body.rr-hero-style-minimaliste .recipe-hero-slide {
    height: 340px;
}

body.rr-hero-style-minimaliste .recipe-hero-info {
    padding: 24px 32px;
}

body.rr-hero-style-minimaliste .recipe-hero-title {
    font-size: 22px;
    -webkit-line-clamp: 2;
}

@media (max-width: 768px) {
    body.rr-hero-style-minimaliste .recipe-hero-slide {
        height: auto;
    }
}

/* ---- Carte flottante: image on top, info in a card overlapping its bottom edge ---- */
body.rr-hero-style-carte_flottante .recipe-hero {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    padding-bottom: 60px;
}

body.rr-hero-style-carte_flottante .recipe-hero-slide {
    display: block;
    height: auto;
}

body.rr-hero-style-carte_flottante .recipe-hero-image {
    height: 340px;
    border-radius: var(--rr-image-corner-radius, 16px);
}

body.rr-hero-style-carte_flottante .recipe-hero-info {
    height: auto;
    margin: -70px 24px 0;
    padding: 28px 32px;
    background: var(--rr-card-bg, #fff);
    border-radius: var(--rr-image-corner-radius, 16px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    body.rr-hero-style-carte_flottante .recipe-hero-image {
        height: 220px;
    }
    body.rr-hero-style-carte_flottante .recipe-hero-info {
        margin: -50px 14px 0;
        padding: 20px;
    }
}

/* ---- Split moderne: image on the right, tinted background on the left ---- */
body.rr-hero-style-split_moderne .recipe-hero-slide {
    grid-template-columns: 1fr 1.3fr;
}

body.rr-hero-style-split_moderne .recipe-hero-image {
    order: 2;
}

body.rr-hero-style-split_moderne .recipe-hero-info {
    order: 1;
    background: var(--rr-search-bg, #f7f5f3);
}

body.rr-hero-style-split_moderne .recipe-hero-more {
    border-radius: 999px;
}

@media (max-width: 768px) {
    body.rr-hero-style-split_moderne .recipe-hero-image {
        order: 1;
    }
    body.rr-hero-style-split_moderne .recipe-hero-info {
        order: 2;
    }
}


/*==================================================================
 * GRID HERO PRESETS
 *
 * The carousel keeps every slide in the DOM and shows one at a time
 * via .is-active. These presets simply show them all at once and lay
 * them out on a grid — no markup change, no extra query, and the same
 * "Diaporama vedette" settings still choose which recipes appear.
 *
 * The arrows and counter are hidden because there is nothing left to
 * page through. The auto-advance timer still runs harmlessly in the
 * background; it toggles a class nothing reacts to any more.
 *=================================================================*/

/*-[ Shared grid behaviour ]------------------*/
body.rr-hero-style-mosaique .recipe-hero,
body.rr-hero-style-grille .recipe-hero,
body.rr-hero-style-portraits .recipe-hero,
body.rr-hero-style-vedette_liste .recipe-hero {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

body.rr-hero-style-mosaique .recipe-hero-arrow,
body.rr-hero-style-mosaique .recipe-hero-counter,
body.rr-hero-style-grille .recipe-hero-arrow,
body.rr-hero-style-grille .recipe-hero-counter,
body.rr-hero-style-portraits .recipe-hero-arrow,
body.rr-hero-style-portraits .recipe-hero-counter,
body.rr-hero-style-vedette_liste .recipe-hero-arrow,
body.rr-hero-style-vedette_liste .recipe-hero-counter {
    display: none;
}

body.rr-hero-style-mosaique .recipe-hero-slides,
body.rr-hero-style-grille .recipe-hero-slides,
body.rr-hero-style-portraits .recipe-hero-slides,
body.rr-hero-style-vedette_liste .recipe-hero-slides {
    display: grid;
    gap: 12px;
}

/* Every slide becomes an image tile with the text laid over it. */
body.rr-hero-style-mosaique .recipe-hero-slide,
body.rr-hero-style-mosaique .recipe-hero-slide.is-active,
body.rr-hero-style-grille .recipe-hero-slide,
body.rr-hero-style-grille .recipe-hero-slide.is-active,
body.rr-hero-style-portraits .recipe-hero-slide,
body.rr-hero-style-portraits .recipe-hero-slide.is-active {
    display: block;
    position: relative;
    height: auto;
    overflow: hidden;
    border-radius: var(--rr-image-corner-radius, 16px);
}

body.rr-hero-style-mosaique .recipe-hero-image,
body.rr-hero-style-grille .recipe-hero-image,
body.rr-hero-style-portraits .recipe-hero-image {
    position: absolute;
    inset: 0;
    height: 100%;
}

/* The scrim is what keeps white text readable over an unpredictable
   photo — a plain overlay would flatten the image, a gradient only
   darkens the part sitting behind the words. */
body.rr-hero-style-mosaique .recipe-hero-info,
body.rr-hero-style-grille .recipe-hero-info,
body.rr-hero-style-portraits .recipe-hero-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 2;
    padding: 22px;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
}

body.rr-hero-style-mosaique .recipe-hero-title a,
body.rr-hero-style-grille .recipe-hero-title a,
body.rr-hero-style-portraits .recipe-hero-title a {
    color: #fff;
}

body.rr-hero-style-mosaique .recipe-hero-title,
body.rr-hero-style-grille .recipe-hero-title,
body.rr-hero-style-portraits .recipe-hero-title {
    font-size: 20px;
    line-height: 1.25;
    margin: 0;
}

/* Category becomes a solid chip, like a magazine kicker. */
body.rr-hero-style-mosaique .recipe-hero-category,
body.rr-hero-style-grille .recipe-hero-category,
body.rr-hero-style-portraits .recipe-hero-category {
    align-self: flex-start;
    display: inline-block;
    padding: 5px 11px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff);
    font-size: 11px;
    letter-spacing: 0.06em;
}

/* Excerpt and button are dropped: over a photo they add noise, and
   the whole tile is already a link target. */
body.rr-hero-style-mosaique .recipe-hero-excerpt,
body.rr-hero-style-mosaique .recipe-hero-more,
body.rr-hero-style-grille .recipe-hero-excerpt,
body.rr-hero-style-grille .recipe-hero-more,
body.rr-hero-style-portraits .recipe-hero-excerpt,
body.rr-hero-style-portraits .recipe-hero-more {
    display: none;
}


/*-[ Mosaïque — one large tile plus three ]------------------*/
body.rr-hero-style-mosaique .recipe-hero-slides {
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: 250px 250px;
}

body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(1) {
    grid-area: 1 / 1 / 3 / 2;
}

body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(2) {
    grid-area: 1 / 2 / 2 / 4;
}

body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
}

body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(4) {
    grid-area: 2 / 3 / 3 / 4;
}

/* The layout is built for exactly four. Anything beyond is hidden
   rather than allowed to break the grid. */
body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(n + 5) {
    display: none;
}

body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(1) .recipe-hero-title {
    font-size: 30px;
}

body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(1) .recipe-hero-info {
    padding: 30px;
}

body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(3) .recipe-hero-title,
body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(4) .recipe-hero-title {
    font-size: 17px;
}


/*-[ Grille — equal tiles ]------------------*/
body.rr-hero-style-grille .recipe-hero-slides {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
}

body.rr-hero-style-grille .recipe-hero-slide:nth-child(n + 7) {
    display: none;
}


/*-[ Portraits — tall magazine covers ]------------------*/
body.rr-hero-style-portraits .recipe-hero-slides {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.rr-hero-style-portraits .recipe-hero-slide {
    aspect-ratio: 3 / 4;
}

body.rr-hero-style-portraits .recipe-hero-slide:nth-child(n + 5) {
    display: none;
}


/*-[ Vedette + liste — one big, the rest as a list ]------------------*/
/* The list rows keep image and text side by side rather than
   overlaid, so short titles stay legible at small sizes. */
body.rr-hero-style-vedette_liste .recipe-hero-slides {
    grid-template-columns: 1.5fr 1fr;
    grid-auto-rows: min-content;
    grid-auto-flow: row;
    align-content: start;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide,
body.rr-hero-style-vedette_liste .recipe-hero-slide.is-active {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    height: auto;
    align-items: center;
    grid-column: 2;
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 12px;
    overflow: hidden;
    padding-right: 14px;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 20;
    display: block;
    position: relative;
    padding: 0;
    border-radius: var(--rr-image-corner-radius, 16px);
    min-height: 460px;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) .recipe-hero-image {
    position: absolute;
    inset: 0;
    height: 100%;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) .recipe-hero-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    padding: 30px;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) .recipe-hero-title {
    font-size: 30px;
    margin: 0;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) .recipe-hero-title a {
    color: #fff;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) .recipe-hero-category {
    align-self: flex-start;
    padding: 5px 11px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff);
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:not(:nth-child(1)) .recipe-hero-image {
    height: 90px;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:not(:nth-child(1)) .recipe-hero-info {
    padding: 0;
    height: auto;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:not(:nth-child(1)) .recipe-hero-title {
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

body.rr-hero-style-vedette_liste .recipe-hero-excerpt,
body.rr-hero-style-vedette_liste .recipe-hero-more {
    display: none;
}

body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(n + 6) {
    display: none;
}


/*-[ Empilé — still a carousel, image above text ]------------------*/
/* The one new preset that keeps the slideshow: useful when the
   featured photo deserves the full width. */
body.rr-hero-style-empile .recipe-hero-slide.is-active {
    display: block;
    height: auto;
}

body.rr-hero-style-empile .recipe-hero-image {
    height: auto;
    aspect-ratio: 21 / 9;
}

body.rr-hero-style-empile .recipe-hero-info {
    height: auto;
    padding: 28px 40px 34px;
    text-align: center;
    align-items: center;
}

body.rr-hero-style-empile .recipe-hero-excerpt {
    max-width: 640px;
}


/*-[ Mobile — every grid preset collapses to one column ]------------------*/
@media (max-width: 768px) {
    body.rr-hero-style-mosaique .recipe-hero-slides,
    body.rr-hero-style-grille .recipe-hero-slides,
    body.rr-hero-style-portraits .recipe-hero-slides,
    body.rr-hero-style-vedette_liste .recipe-hero-slides {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 10px;
    }

    /* Named grid areas and explicit column/row placement must ALL be
       cleared, or a tile keeps its desktop position inside a
       one-column grid and collapses to a sliver. !important is used
       because these override rules that are themselves written with
       :nth-child, which is more specific than the plain selectors
       available here. */
    body.rr-hero-style-mosaique .recipe-hero-slide,
    body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(1),
    body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(2),
    body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(3),
    body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(4),
    body.rr-hero-style-vedette_liste .recipe-hero-slide,
    body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) {
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* The list rows keep their thumbnail layout; only the placement
       changes on a narrow screen. */
    body.rr-hero-style-vedette_liste .recipe-hero-slide:not(:nth-child(1)) {
        grid-template-columns: 100px 1fr;
    }

    body.rr-hero-style-vedette_liste .recipe-hero-slide:not(:nth-child(1)) .recipe-hero-image {
        height: 80px;
    }

    body.rr-hero-style-mosaique .recipe-hero-slide,
    body.rr-hero-style-grille .recipe-hero-slide {
        min-height: 220px;
    }

    body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) {
        min-height: 260px;
    }

    body.rr-hero-style-mosaique .recipe-hero-slide:nth-child(1) .recipe-hero-title,
    body.rr-hero-style-vedette_liste .recipe-hero-slide:nth-child(1) .recipe-hero-title {
        font-size: 22px;
    }

    body.rr-hero-style-mosaique .recipe-hero-title,
    body.rr-hero-style-grille .recipe-hero-title,
    body.rr-hero-style-portraits .recipe-hero-title {
        font-size: 17px;
    }

    body.rr-hero-style-empile .recipe-hero-info {
        padding: 20px 18px 24px;
    }

    body.rr-hero-style-empile .recipe-hero-image {
        aspect-ratio: 16 / 10;
    }
}


/*
 * Recettes Rapides — Homepage sections
 * Category showcase ("Parcourir par catégorie"), custom sections
 * (e.g. "Apéro d'été"), and the "Les recettes les plus récentes"
 * title above the main grid.
 */

/*-[ Category showcase ("Parcourir par catégorie") ]------------------*/
.recipe-category-showcase {
    padding: 50px 0;
    text-align: center;
}

.recipe-category-showcase-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 20px;
    font-size: var(--rr-section-title-size, 32px);
    font-weight: 700;
    margin: 0 0 30px;
    color: var(--rr-section-title, #1a1a1a);
    font-family: var(--rr-heading-font, inherit);
}

.recipe-category-showcase-text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 80%;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
}

.recipe-category-showcase-line {
    flex-shrink: 0;
}

.recipe-category-showcase-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: var(--rr-accent, #b5651d);
}

/* Flex rather than grid, specifically so an incomplete row centres.
   A 6-column grid places 4 tiles in columns 1-4 and leaves a gap on
   the right; flex-wrap with justify-content centres whatever is left
   over. The flex-basis reproduces the exact width a 6-column grid
   would give, so a full row looks identical to before. */
.recipe-category-showcase-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.recipe-category-showcase-grid > .recipe-category-tile {
    flex: 0 1 calc((100% - 5 * 20px) / 6);
    min-width: 0;
}

.recipe-category-tile {
    position: relative;
    display: block;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    transition: transform 0.25s ease;
}

.recipe-category-tile:hover {
    transform: translateY(-3px);
}

.recipe-category-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 60%);
}

.recipe-category-tile-name {
    position: absolute;
    left: 16px;
    bottom: 38px;
    z-index: 2;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: left;
}

.recipe-category-tile-count {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 2;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 1024px) {
    .recipe-category-showcase-grid > .recipe-category-tile {
        flex-basis: calc((100% - 2 * 20px) / 3);
    }
}

@media (max-width: 600px) {
    .recipe-category-showcase-grid > .recipe-category-tile {
        flex-basis: calc((100% - 20px) / 2);
    }

    /* Shrink decorative lines/gap/font on narrow screens so longer
       titles (e.g. "Les recettes les plus récentes") don't overflow
       the viewport width and appear pushed to one side. */
    .recipe-category-showcase-title {
        font-size: var(--rr-section-title-size-mobile, 20px);
        gap: 10px;
    }

    .recipe-category-showcase-line {
        width: 30px;
    }
}


/*-[ Custom homepage sections ]------------------*/
.recipe-custom-section {
    padding: 30px 0;
}

.recipe-custom-section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.recipe-custom-section-grid .recipe-card {
    width: 100%;
    min-width: 0;
}

@media (max-width: 1024px) {
    .recipe-custom-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .recipe-custom-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/*-[ Latest posts title (homepage main grid) ]------------------*/
.recipe-latest-posts-section {
    padding-top: 10px;
    padding-bottom: 0;
}

.recipe-latest-posts-section .recipe-category-showcase-title {
    margin-bottom: 20px !important;
    justify-content: center !important;
    gap: 20px !important;
}

.recipe-latest-posts-section .recipe-category-showcase-text {
    flex-grow: 0 !important;
}


/*-[ Force latest-posts section to full width, even if trapped inside
     GP Premium's flex/grid wrapper ]------------------*/
.recipe-latest-posts-section {
    flex: 1 0 100%;
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}


/*-[ Archive header (category, tag, search, author) ]------------------*/
/* GeneratePress renders this block with a flat white background and
   square corners, which looks unfinished next to the rounded cards
   around it. Restyled to match them, using the same palette
   variables so it follows the theme and any ambiance.

   The leading `body` matters: GeneratePress' own background rule for
   .separate-containers .page-header is printed in an inline <style>
   block after this stylesheet, so a tie on specificity would go to
   GeneratePress. */
/* Only the OUTER .page-header draws the card. .inside-page-header is
   deliberately excluded: when GeneratePress outputs both, styling the
   two produced a box inside a box and doubled the padding into a tall
   empty block. */
/* NOTE: `body.separate-containers` — the dot is attached, no space.
   GeneratePress puts `separate-containers` on the <body> element
   itself, so `body .separate-containers X` (with a space) looks for a
   descendant carrying that class and matches nothing. Attached, this
   is (0,2,1) and beats GeneratePress' own (0,2,0) rule, which is
   printed in an inline <style> block after this stylesheet. */
body .page-header,
body.separate-containers .page-header {
    /* The TINTED surface, not the card surface. Recipe cards already
       use --rr-card-bg; under a light ambiance that value is close to
       white, so a header sharing it reads as a plain white block and
       cannot be told apart from the cards below it. */
    background-color: var(--rr-page-bg, #faf6ee);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: var(--rr-image-corner-radius, 16px);
    padding: 26px 40px;
    margin-bottom: 30px;
    text-align: center;
}

/* Make the card hug its content. Empty children — an unused
   description, an empty inner wrapper — otherwise still contribute
   their own margins and line boxes, which is what turns a one-line
   heading into a tall empty block. */
body .page-header > *:empty,
body .page-header .taxonomy-description:empty,
body .page-header .inside-page-header:empty,
body .page-header p:empty {
    display: none;
}

body .page-header > * {
    margin-top: 0;
}

body .page-header > *:last-child {
    margin-bottom: 0;
}

/* The inner wrapper contributes nothing of its own. Prefixed with
   body so it outranks anything GeneratePress prints later. */
body .page-header .inside-page-header,
body.separate-containers .page-header .inside-page-header,
body.separate-containers .inside-page-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-header .page-title,
.page-header h1 {
    font-family: var(--rr-heading-font, inherit);
    font-size: var(--rr-section-title-size, 32px);
    line-height: 1.2;
    color: var(--rr-section-title, #2e2a1f);
    /* No bottom margin by default — it is added back only when a
       description actually follows. */
    margin: 0;
}

body .page-header .page-title + .taxonomy-description,
body .page-header h1 + .taxonomy-description,
body .page-header .page-title + p,
body .page-header h1 + p {
    margin-top: 12px;
}

.page-header .taxonomy-description,
.page-header .author-info,
.page-header p {
    font-family: var(--rr-body-font, inherit);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--rr-card-text, #6b6355);
    max-width: 700px;
    margin: 0 auto;
}

.page-header .taxonomy-description p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    body .page-header,
    body.separate-containers .page-header {
        padding: 22px 18px;
        border-radius: 12px;
        margin-bottom: 22px;
    }

    .page-header .page-title,
    .page-header h1 {
        font-size: var(--rr-section-title-size-mobile, 20px);
    }

    .page-header .taxonomy-description,
    .page-header p {
        font-size: 14.5px;
    }
}


/*
 * Recettes Rapides — Site footer
 */

/*-[ Custom site footer ]------------------*/
.recipe-site-footer {
    background: var(--rr-footer-bg, #2a211c);
    color: var(--rr-footer-text, rgba(255, 255, 255, 0.85));
    padding: 40px 20px;
    text-align: center;
}

.recipe-site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.recipe-site-footer-links a {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: background 0.2s ease;
}

.recipe-site-footer-links a:hover {
    background: rgba(255, 255, 255, 0.08);
}

.recipe-site-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.recipe-site-footer-bottom a {
    color: inherit;
    text-decoration: none;
}

.recipe-site-footer-bottom a:hover {
    color: #fff;
}


/*-[ GeneratePress' leftover footer band ]------------------*/
/* This theme renders its own footer (.recipe-site-footer), but
   GeneratePress still outputs .site-info above it — empty, yet
   carrying a white background and padding, which shows as a blank
   white strip between the content and the real footer.

   Kept in the markup rather than removed, because GeneratePress and
   some plugins hook onto it; it is simply given nothing to paint. */
.site-footer .site-info,
.site-info {
    background-color: transparent;
}

/* With no widgets or copyright inside, the padding is the only thing
   left holding the strip open. */
.site-info .inside-site-info:empty,
.site-info .copyright-bar:empty {
    padding: 0;
    margin: 0;
}


/*
 * Recettes Rapides — Header & navigation
 * Logo/title sizing, nav menu active/hover states, search icon
 * placement, mobile header layout, and the custom hamburger icon.
 */

/*-[ Site logo sizing ]------------------*/
.custom-logo-link img,
.site-logo img {
    max-height: 60px;
    width: auto;
    height: auto;
}

@media (max-width: 768px) {
    .custom-logo-link img,
    .site-logo img {
        max-height: 48px;
    }
}


/*-[ Site title sizing to match reference proportions ]------------------*/
.main-title,
.site-title {
    font-size: 26px !important;
}

.site-description {
    font-size: 14px;
}


/*-[ Navigation menu: active state, hover highlight, consistent styling ]------------------*/
.main-navigation .main-nav > ul > li > a {
    font-size: 16px;
    font-weight: 500;
    color: var(--rr-nav-text, #2b2622);
    padding: 8px 14px !important;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus {
    background-color: var(--rr-nav-hover-bg, #f5efe8);
    color: var(--rr-accent, #b5651d);
}

/* Current page: colored text + underline, like the reference */
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current_page_item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
    color: var(--rr-accent, #b5651d);
    font-weight: 600;
    border-bottom: 2px solid var(--rr-accent, #b5651d);
}

/* Search icon: bordered rounded box, highlight on hover */
.main-navigation .search-item a,
.main-navigation .navigation-search a,
.main-navigation .menu-item-search a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.main-navigation .search-item a:hover,
.main-navigation .navigation-search a:hover,
.main-navigation .menu-item-search a:hover {
    background-color: var(--rr-nav-hover-bg, #f5efe8);
    border-color: var(--rr-card-border, #ece4dc);
}


/*-[ Keep search icon inline with menu, pinned to the right ]------------------*/
.main-navigation .inside-navigation.grid-container {
    flex-wrap: nowrap;
}

.main-navigation .menu-bar-items {
    margin-left: auto;
    flex-shrink: 0;
}

.main-navigation #primary-menu.main-nav {
    flex-shrink: 1;
}


/*-[ Header background (theme options) ]------------------*/
.site-header {
    background-color: var(--rr-header-bg, #ffffff);
}


/*-[ Mobile header: keep logo + hamburger menu on same row ]------------------*/
@media (max-width: 768px) {
    .site-header .inside-header.grid-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding-left: 8px;
        padding-right: 0;
    }

    .site-branding-container {
        margin-left: 0;
        padding-left: 0;
    }

    .site-branding-container .custom-logo-link img {
        max-height: 56px;
        width: auto;
    }

    .site-branding .main-title {
        font-size: 22px !important;
        line-height: 1.2;
        white-space: nowrap;
    }

    .site-branding .site-description {
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .mobile-menu-control-wrapper {
        margin-left: auto;
        margin-right: 0;
        flex-shrink: 0;
    }

    /* Push the toggle flush to the right edge.
       The cause: GeneratePress' nav wrapper around the toggle
       stretches WIDER than the viewport, and the button sits at its
       left end — so the button stopped short while the wrapper ran
       off-screen. Padding was never the problem.

       Selectors deliberately use .site-header and a direct-child
       "> nav" match rather than #masthead, because the id is not
       guaranteed to be present while these are known to match. */
    .site-header .inside-header,
    .site-header .inside-header.grid-container {
        padding-right: 0 !important;
    }

    /* Whatever the wrapper is called, it is the nav element sitting
       directly inside the header. Shrink it to its button. */
    .site-header .inside-header > nav,
    .site-header .mobile-menu-control-wrapper,
    .site-header nav.mobile-menu-control-wrapper,
    .site-header .main-navigation.mobile-menu-control-wrapper {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    /* Belt and braces: the last thing in the header hugs the edge. */
    .site-header .inside-header > *:last-child {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    /* Keep the branding off the left edge too, so both sides match. */
    .site-header .site-branding-container,
    .site-header .site-branding {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* GeneratePress' toggle button carries its own background, which
       stretches the full height of the header and reads as a big grey
       block. Make the button itself invisible and let the compact
       rounded icon below be the only visible shape. */
    .site-header .menu-toggle {
        margin-left: auto !important;
        margin-right: 0 !important;
        padding: 0 10px !important;
        background-color: transparent !important;
        border: 0 !important;
        line-height: 1 !important;
    }
}


/*-[ Custom hamburger menu icon (theme options controlled) ]------------------*/
.rr-hamburger-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 26px;
    height: 26px;
    padding: 4px;
    background-color: var(--rr-hamburger-bg, transparent);
    border: 1px solid var(--rr-hamburger-border, transparent);
    border-radius: 6px;
    box-sizing: border-box;
}

.rr-hamburger-icon span {
    display: block;
    width: 20px;
    height: var(--rr-hamburger-bar-height, 3px);
    background-color: var(--rr-hamburger-color, #2e2a1f);
    border-radius: 2px;
}

/*-[ Compact rounded hamburger box ]------------------*/
/* A small rounded square rather than a full-height block. The
   background still follows the theme option (--rr-hamburger-bg); the
   fallback is a soft neutral so it looks right out of the box. */
@media (max-width: 768px) {
    .rr-hamburger-icon {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 6px;
        border-radius: 10px;
        background-color: var(--rr-hamburger-bg, #f4f1ea);
    }

    .rr-hamburger-icon span {
        width: 22px;
    }
}


/*-[ Sticky mobile header ]------------------*/
/* Keeps the logo and hamburger pinned to the top of the screen while
   reading, so navigation is always one tap away on a long recipe.

   Only the header itself sticks. The mobile search bar renders on
   generate_after_header — outside .site-header — so it scrolls away
   normally and doesn't eat vertical space on a small screen.

   z-index sits below the mobile menu overlay (9999) and the desktop
   search popover (9998), so those still cover the header when open. */
@media (max-width: 768px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 9990;
        background-color: var(--rr-header-bg, #fff);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    }

    /* The WordPress admin bar is fixed at the top for logged-in
       users, so the header has to start below it. Visitors are
       unaffected. */
    body.admin-bar .site-header {
        top: 46px;
    }

    /* Trim the header height a little so the sticky bar takes less of
       the screen while scrolling. */
    .site-header .inside-header.grid-container {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}


/*
 * Recettes Rapides — Mobile menu
 * Full-screen popup menu sliding in from the right, replacing
 * GeneratePress's default (broken/off-screen) mobile menu.
 */

/*-[ Custom mobile menu popup ]------------------*/
.rr-mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
}

.rr-mobile-menu-overlay.is-open {
    display: block;
}

.rr-mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 82%;
    max-width: 340px;
    background: var(--rr-header-bg, #fff);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    padding: 24px;
    overflow-y: auto;
}

.rr-mobile-menu-close {
    display: block;
    margin-left: auto;
    width: 40px;
    height: 40px;
    font-size: 28px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--rr-nav-text, #2b2622);
}

.rr-mobile-menu-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.rr-mobile-menu-list li {
    border-bottom: 1px solid var(--rr-card-border, #ece4dc);
}

.rr-mobile-menu-list a {
    display: block;
    padding: 16px 4px;
    font-size: 17px;
    font-weight: 500;
    color: var(--rr-nav-text, #2b2622);
    text-decoration: none;
}

.rr-mobile-menu-list a:hover {
    color: var(--rr-accent, #b5651d);
}

/* Hide GeneratePress's own mobile menu panel entirely — we use our
   own overlay instead (the built-in one was rendering off-screen). */
@media (max-width: 768px) {
    #primary-menu {
        display: none !important;
    }
}


/*
 * Recettes Rapides — Search
 * Mobile/tablet inline search bar, desktop search popover, the
 * "no results" page, and the search results page title.
 */

/*-[ Mobile/tablet search bar (hidden on desktop) ]------------------*/
.recipe-mobile-search-bar {
    display: none;
    padding: 16px 20px;
    background: var(--rr-header-bg, #fff);
    border-bottom: 1px solid var(--rr-card-border, #ece4dc);
}

.recipe-mobile-search-form {
    display: flex;
    gap: 8px;
    max-width: 700px;
    margin: 0 auto;
}

.recipe-mobile-search-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 14px;
    background: var(--rr-search-bg, #f7f5f3);
}

.recipe-mobile-search-input:focus {
    outline: none;
    border-color: var(--rr-accent, #b5651d);
}

.recipe-mobile-search-button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 12px 20px;
    background: var(--rr-accent, #b5651d);
    color: var(--rr-button-text, #fff);
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.recipe-mobile-search-button:hover {
    background: var(--rr-accent-hover, #96521a);
}

@media (max-width: 1024px) {
    .recipe-mobile-search-bar {
        display: block;
    }

    .main-navigation .menu-bar-items {
        display: none !important;
    }
}


/*-[ No results / search results empty state ]------------------*/
.recipe-no-results {
    padding: 20px 0;
    text-align: center;
}

.recipe-no-results-title {
    font-family: var(--rr-heading-font, Georgia, serif);
    font-size: 42px;
    font-weight: 700;
    color: var(--rr-card-title, #1a1a1a);
    margin: 0 0 20px;
    text-align: center;
}

.recipe-no-results-subtitle {
    font-family: var(--rr-heading-font, Georgia, serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--rr-card-title, #1a1a1a);
    margin: 30px 0 16px;
    text-align: center;
}

.recipe-no-results-message {
    font-size: 16px;
    color: var(--rr-card-text, #555);
    margin: 0 auto 24px;
    text-align: center;
}

.recipe-noresults-search-form {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.recipe-noresults-search-input {
    flex: 1;
    min-width: 0;
    padding: 14px 20px;
    border: 1px solid var(--rr-card-border, #ddd);
    border-radius: 30px;
    font-size: 15px;
    background: var(--rr-search-bg, #f7f5f3);
}

.recipe-noresults-search-input:focus {
    outline: none;
    border-color: var(--rr-accent, #b5651d);
}

.recipe-noresults-search-button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 14px 28px;
    background: var(--rr-accent, #b5651d);
    color: var(--rr-button-text, #fff);
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.recipe-noresults-search-button:hover {
    background: var(--rr-accent-hover, #96521a);
}

@media (max-width: 600px) {
    .recipe-no-results-title {
        font-size: 28px;
    }

    .recipe-no-results-subtitle {
        font-size: 22px;
    }
}


/*-[ Search results / archive page title (when results ARE found) ]------------------*/
.page-header {
    text-align: center;
    margin-bottom: 20px;
}

.page-header .page-title {
    font-family: var(--rr-heading-font, Georgia, serif);
    font-size: 42px;
    font-weight: 700;
    color: var(--rr-card-title, #1a1a1a);
    margin: 0;
}

@media (max-width: 600px) {
    .page-header .page-title {
        font-size: 28px;
    }
}


/*-[ Custom desktop search popover (anchored near icon, not centered) ]------------------*/
.rr-desktop-search-popover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 340px;
    background: var(--rr-header-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 14px;
}

.rr-desktop-search-popover.is-open {
    display: block;
}

.rr-desktop-search-form {
    display: flex;
    gap: 8px;
}

.rr-desktop-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border: 1px solid var(--rr-card-border, #ddd);
    border-radius: 30px;
    font-size: 14px;
    background: var(--rr-search-bg, #f7f5f3);
}

.rr-desktop-search-input:focus {
    outline: none;
    border-color: var(--rr-accent, #b5651d);
}

.rr-desktop-search-button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 20px;
    background: var(--rr-accent, #b5651d);
    color: var(--rr-button-text, #fff);
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rr-desktop-search-button:hover {
    background: var(--rr-accent-hover, #96521a);
}

@media (max-width: 1024px) {
    .rr-desktop-search-popover {
        display: none !important;
    }
}


/*
 * Recettes Rapides — Misc
 * Mobile side margins and archive/category pagination pills.
 */

/*-[ Mobile side margins for hero/grid/sections ]------------------*/
@media (max-width: 768px) {
    .recipe-hero,
    #main .generate-columns-container,
    .recipe-category-showcase-grid,
    .recipe-custom-section-grid,
    .recipe-mobile-search-bar {
        margin-left: 16px;
        margin-right: 16px;
    }

    .recipe-mobile-search-bar {
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}


/*-[ Archive/category/home pagination pills (theme options) ]------------------*/
.paging-navigation .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0;
}

.paging-navigation .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 18px;
    border: 1px solid var(--rr-card-border, #e4dcd3);
    border-radius: 10px;
    background-color: var(--rr-card-bg, #fff);
    color: var(--rr-card-title, #3a3a3a);
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.paging-navigation .page-numbers.dots {
    border-color: transparent;
    background-color: transparent;
    color: var(--rr-card-text, #999);
}

.paging-navigation .page-numbers:hover {
    border-color: var(--rr-accent, #b5651d);
    color: var(--rr-accent, #b5651d);
}

.paging-navigation .page-numbers.current {
    background-color: var(--rr-accent, #b5651d);
    border-color: var(--rr-accent, #b5651d);
    color: var(--rr-button-text, #fff);
    font-weight: 700;
}

.paging-navigation .prev.page-numbers,
.paging-navigation .next.page-numbers {
    gap: 6px;
    color: var(--rr-card-title, #3a3a3a);
}

.paging-navigation .prev.page-numbers:hover,
.paging-navigation .next.page-numbers:hover {
    background-color: var(--rr-nav-hover-bg, #fff8f2);
}


/*
 * Recettes Rapides — Single post (article) page
 * Centred single-column layout, article typography, meta bar under
 * the title, share buttons (inline + sticky mobile bar), related
 * recipes grid, reading progress bar and back-to-top button.
 *
 * EVERYTHING here is scoped to body.rr-single (added by
 * inc/single.php only on single posts), so none of it can leak onto
 * the homepage, archives or pages.
 */

/*-[ Breadcrumb alignment (Simple SEO & Partage Social plugin) ]------------------*/
/* The plugin prints its trail on generate_before_main_content, i.e. OUTSIDE
   .inside-article — so by default it spans the full container width while the
   article card below it is narrower and centred. These rules line the two up.
   !important is required on the horizontal margins only because the plugin
   writes "margin:16px 0" as an inline style attribute, and inline styles beat
   stylesheet rules. Nothing else here needs it. */
.rr-single .sss-breadcrumb {
    max-width: var(--rr-single-width, 760px);
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    .rr-single .sss-breadcrumb {
        padding-left: 4px;
        padding-right: 4px;
    }
}


/*-[ Page background ]------------------*/
/* The article sits on the theme's "page background" colour instead of
   GeneratePress' default, so the white article card, the comments card
   and the related-recipes cards read as raised panels. That colour is
   already a theme option (Réglages → Options du thème) — it was simply
   never applied to the page itself, only used as a tint inside
   components.

   body.rr-single is specific enough to beat GeneratePress' own
   `body { background-color: ... }` from the Customizer, which is
   printed after this stylesheet, so no !important is needed. */
body.rr-single,
body.rr-single .site,
body.rr-single #page {
    background-color: var(--rr-page-bg, #faf6ee);
}

/* Keep the raised panels clearly lighter than the page behind them. */
body.rr-single .inside-article,
body.rr-single #comments {
    background-color: var(--rr-card-bg, #fff);
}


/*-[ Layout: one centred column ]------------------*/
.rr-single .inside-article {
    max-width: var(--rr-single-width, 760px);
    margin-left: auto;
    margin-right: auto;
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: var(--rr-image-corner-radius, 16px);
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.rr-single .entry-header {
    margin-bottom: 0;
}

/*-[ Article title ]------------------*/
.rr-single .entry-title {
    font-family: var(--rr-heading-font, inherit);
    font-size: var(--rr-single-title-size, 40px);
    line-height: 1.2;
    font-weight: 700;
    color: var(--rr-card-title, #2e2a1f);
    margin: 0 0 18px;
}

/*-[ Meta bar under the title ]------------------*/
.rr-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 0 0 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rr-card-border, #ece4dc);
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    color: var(--rr-card-text, #6b6355);
}

.rr-single-meta-category {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
}

.rr-single-meta-category:hover {
    background: var(--rr-accent-hover, #b37916);
}

.rr-single-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rr-single-meta-item svg {
    width: 15px;
    height: 15px;
    fill: var(--rr-accent, #d4941e);
    flex-shrink: 0;
}

/*-[ Featured image ]------------------*/
.rr-single .post-image,
.rr-single .featured-image {
    margin: 0 0 26px;
}

.rr-single .post-image img,
.rr-single .featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--rr-image-corner-radius, 16px);
}

/*-[ Share buttons (inline row) ]------------------*/
.rr-single-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
}

.rr-single-share-label {
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    font-weight: 700;
    color: var(--rr-card-title, #2e2a1f);
}

.rr-single-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rr-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 999px;
    background: transparent;
    color: var(--rr-card-text, #6b6355) !important;
    font-family: var(--rr-body-font, inherit);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.rr-share-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.rr-share-btn:hover {
    transform: translateY(-1px);
    color: #fff !important;
    border-color: transparent;
}

.rr-share-facebook:hover  { background: #1877f2; }
.rr-share-pinterest:hover { background: #e60023; }
.rr-share-whatsapp:hover  { background: #25d366; }
.rr-share-x:hover         { background: #000; }
.rr-share-copy:hover      { background: var(--rr-accent, #d4941e); }

/*-[ Sticky mobile share bar ]------------------*/
.rr-single-share-sticky {
    display: none;
}

.rr-copied-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translate(-50%, 12px);
    z-index: 100000;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(30, 26, 20, 0.94);
    color: #fff;
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.rr-copied-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/*-[ Horizontal overflow guards ]------------------*/
/* Nothing inside an article may be wider than the screen. When one
   element overflows, the whole page becomes pannable sideways on
   mobile and every line of text gets clipped at the right edge.
   These rules cap the usual culprits: the card itself, media, long
   unbroken words and URLs, tables, and ad units. */
.rr-single .inside-article {
    /* min() so the card can never exceed its parent, whatever the
       configured text width is. */
    max-width: min(var(--rr-single-width, 760px), 100%);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.rr-single .entry-content,
.rr-single .entry-title,
.rr-single-meta {
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
}

.rr-single .entry-content img,
.rr-single .entry-content video,
.rr-single .entry-content iframe,
.rr-single .entry-content embed,
.rr-single .entry-content object,
.rr-single .entry-content ins,
.rr-single .entry-content .wp-block-embed__wrapper {
    max-width: 100%;
}

.rr-single .entry-content pre {
    overflow-x: auto;
    max-width: 100%;
}

/* Safety net: clip anything that still escapes, rather than letting
   it turn into a page-wide horizontal scroll. `clip` and not `hidden`
   on purpose — `hidden` creates a scroll container and would break
   the sticky sidebar. This hides a symptom, so if you ever see
   content actually cut off, find the real culprit instead. */
@media (max-width: 768px) {
    body.rr-single .site-content {
        overflow-x: clip;
    }

    /* Wide tables scroll inside their own box instead of stretching
       the page. */
    .rr-single .entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}


/*-[ Article content typography ]------------------*/
.rr-single .entry-content {
    font-family: var(--rr-body-font, inherit);
    font-size: var(--rr-single-font-size, 18px);
    line-height: var(--rr-single-line-height, 1.75);
    /* --rr-single-text is printed only when "Contraste renforcé" is
       on; otherwise this falls through to the theme palette. */
    color: var(--rr-single-text, var(--rr-card-text, #4a453c));
}

.rr-single .entry-content p {
    margin: 0 0 var(--rr-single-para-spacing, 22px);
}

.rr-single .entry-content h2,
.rr-single .entry-content h3,
.rr-single .entry-content h4 {
    font-family: var(--rr-heading-font, inherit);
    color: var(--rr-single-heading, var(--rr-card-title, #2e2a1f));
    line-height: 1.3;
    font-weight: 700;
}

.rr-single .entry-content h2 {
    font-size: var(--rr-single-h2-size, 28px);
    margin: 44px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rr-card-border, #ece4dc);
}

.rr-single .entry-content h3 {
    font-size: var(--rr-single-h3-size, 22px);
    margin: 34px 0 14px;
}

.rr-single .entry-content h4 {
    font-size: 1.05em;
    margin: 26px 0 12px;
}

/* Amber on white measures 2.6:1 — well under the 4.5:1 minimum for
   body text. Links get their own darker colour rather than the accent. */
.rr-single .entry-content a {
    color: var(--rr-single-link, var(--rr-accent, #d4941e));
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.rr-single .entry-content a:hover {
    color: var(--rr-accent-hover, #b37916);
}

.rr-single .entry-content strong,
.rr-single .entry-content b {
    color: var(--rr-single-heading, var(--rr-card-title, #2e2a1f));
}

.rr-single .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rr-image-corner-radius, 16px);
}

.rr-single .entry-content figure {
    margin: 28px 0;
}

.rr-single .entry-content figcaption,
.rr-single .entry-content .wp-caption-text {
    font-size: 0.82em;
    color: var(--rr-card-text, #6b6355);
    text-align: center;
    margin-top: 8px;
}

/*-[ Lists — ingredients and steps ]------------------*/
.rr-single .entry-content ul,
.rr-single .entry-content ol {
    margin: 0 0 var(--rr-single-para-spacing, 22px);
    padding-left: 0;
    list-style: none;
}

.rr-single .entry-content li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}

.rr-single .entry-content ul > li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rr-accent, #d4941e);
}

.rr-single .entry-content ol {
    counter-reset: rr-step;
}

.rr-single .entry-content ol > li {
    counter-increment: rr-step;
    padding-left: 42px;
}

.rr-single .entry-content ol > li::before {
    content: counter(rr-step);
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff);
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.rr-single .entry-content li > ul,
.rr-single .entry-content li > ol {
    margin-top: 12px;
    margin-bottom: 0;
}

/*-[ Blockquote — tips and notes ]------------------*/
/* List markers and quotes follow the reading colour too, so a
   paragraph and a step in a list read at the same weight. */
.rr-single .entry-content li {
    color: var(--rr-single-text, var(--rr-card-text, #4a453c));
}

.rr-single .entry-content blockquote {
    margin: 30px 0;
    padding: 18px 24px;
    border: 0;
    border-left: 4px solid var(--rr-accent, #d4941e);
    border-radius: 0 12px 12px 0;
    background: var(--rr-page-bg, #faf6ee);
    font-style: italic;
    color: var(--rr-single-heading, var(--rr-card-title, #2e2a1f));
}

.rr-single .entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/*-[ Tables ]------------------*/
.rr-single .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--rr-single-para-spacing, 22px);
    font-size: 0.94em;
}

.rr-single .entry-content th,
.rr-single .entry-content td {
    padding: 11px 14px;
    border: 1px solid var(--rr-card-border, #ece4dc);
    text-align: left;
}

.rr-single .entry-content th {
    background: var(--rr-page-bg, #faf6ee);
    color: var(--rr-card-title, #2e2a1f);
    font-weight: 700;
}

/*-[ Related recipes ]------------------*/
.rr-single-related {
    margin: 50px auto 10px;
    padding: 0;
}

.rr-single-related-grid {
    display: grid;
    grid-template-columns: repeat(var(--rr-single-related-columns, 3), 1fr);
    gap: 20px;
}

.rr-single-related-grid .recipe-card {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}

/*-[ Reading progress bar ]------------------*/
.rr-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99998;
    background: transparent;
    pointer-events: none;
}

.rr-reading-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--rr-accent, #d4941e);
    transition: width 0.1s linear;
}

/*-[ Back to top ]------------------*/
.rr-back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99997;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s ease;
}

.rr-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rr-back-to-top:hover {
    background: var(--rr-accent-hover, #b37916);
}

.rr-back-to-top svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/*-[ Tablet ]------------------*/
@media (max-width: 1024px) {
    .rr-single-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*-[ Mobile ]------------------*/
@media (max-width: 768px) {
    .rr-single .inside-article {
        padding: 22px 18px;
        border-radius: 12px;
    }

    .rr-single .entry-title {
        font-size: var(--rr-single-title-size-mobile, 27px);
    }

    .rr-single .entry-content {
        font-size: var(--rr-single-font-size-mobile, 17px);
    }

    .rr-single .entry-content h2 {
        font-size: var(--rr-single-h2-size-mobile, 22px);
        margin-top: 34px;
    }

    .rr-single .entry-content h3 {
        font-size: var(--rr-single-h3-size-mobile, 19px);
        margin-top: 26px;
    }

    .rr-single-meta {
        font-size: 13px;
        gap: 8px 14px;
    }

    /* The inline share row is replaced by the sticky bottom bar. */
    .rr-single .rr-single-share {
        display: none;
    }

    .rr-single-share-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99996;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
        background: var(--rr-card-bg, #fff);
        border-top: 1px solid var(--rr-card-border, #ece4dc);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.07);
    }

    .rr-share-sticky-btn {
        flex: 1 1 0;
        max-width: 74px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: var(--rr-page-bg, #faf6ee);
        color: var(--rr-card-title, #2e2a1f);
        cursor: pointer;
    }

    .rr-share-sticky-btn svg {
        width: 19px;
        height: 19px;
        fill: currentColor;
    }

    .rr-share-sticky-btn.rr-share-facebook  { background: #1877f2; color: #fff; }
    .rr-share-sticky-btn.rr-share-pinterest { background: #e60023; color: #fff; }
    .rr-share-sticky-btn.rr-share-whatsapp  { background: #25d366; color: #fff; }
    .rr-share-sticky-btn.rr-share-x         { background: #000;    color: #fff; }
    .rr-share-sticky-btn.rr-share-copy      { background: var(--rr-accent, #d4941e); color: var(--rr-button-text, #fff); }

    /* Lift the back-to-top button above the sticky share bar. */
    .rr-back-to-top {
        bottom: 74px;
        right: 14px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 600px) {
    .rr-single-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}


/*-[ Static pages ]------------------*/
/* Pages carry .rr-single too, so everything above already applies.
   These are the few places where a page differs from an article. */

/* A page has no featured image or meta bar, so the title needs its
   own breathing room at the top of the card. */
.rr-page .entry-header {
    margin-bottom: 22px;
}

.rr-page .entry-title {
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rr-card-border, #ece4dc);
}

/* Contact forms and similar page content should use the full card
   width rather than the narrow reading measure. */
.rr-page .entry-content form,
.rr-page .entry-content .wp-block-columns {
    max-width: none;
}

/* GeneratePress hides page titles on some setups; when the title is
   absent the border above would float on its own. */
.rr-page .entry-header:empty {
    display: none;
}


/*
 * Recettes Rapides — Sidebar
 * Styles for the block-built sidebar (Réglages → Barre latérale):
 * block wrappers and titles, post lists, category list, image and
 * bio blocks, ad slots, sticky behaviour, and the mobile rules.
 *
 * Scoped to body.rr-sidebar-active, added by inc/sidebar.php only
 * when the sidebar actually renders.
 */

/*-[ Column width ]------------------*/
/* GeneratePress sets its own sidebar/content widths inline from the
   Customizer, so these need to be specific enough to win. */
body.rr-sidebar-active .site-content .is-right-sidebar,
body.rr-sidebar-active .site-content .is-left-sidebar {
    width: var(--rr-sidebar-width, 28%);
}

body.rr-sidebar-active .site-content .content-area {
    width: calc(100% - var(--rr-sidebar-width, 28%));
}

/* With a sidebar beside it, the article must NOT stay clamped to the
   narrow centred width set by css/single.css — it now shares the row. */
body.rr-single.rr-sidebar-active .inside-article {
    max-width: none;
}

body.rr-single.rr-sidebar-active .sss-breadcrumb {
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/*-[ Homepage: full-width hero and sections ]------------------*/
/* The hero carousel, custom sections and category showcase all render
   INSIDE <main>, so a sidebar next to it narrows them along with
   everything else. When "Garder le diaporama et les sections en pleine
   largeur" is ticked, these blocks break out of the column and span the
   viewport, leaving only the recipe grid beside the sidebar.

   100vw includes the scrollbar on desktop, which is why the container
   clips the overflow — without it the page gains a horizontal scrollbar
   of exactly the scrollbar's width. */
body.rr-sidebar-full-bleed .site-content {
    overflow-x: clip;
}

body.rr-sidebar-full-bleed .recipe-hero,
body.rr-sidebar-full-bleed .recipe-custom-section,
body.rr-sidebar-full-bleed .recipe-category-showcase {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Their inner content still needs to line up with the rest of the
   site rather than touching the screen edges. */
body.rr-sidebar-full-bleed .recipe-hero > *,
body.rr-sidebar-full-bleed .recipe-custom-section > *,
body.rr-sidebar-full-bleed .recipe-category-showcase > * {
    max-width: var(--rr-container-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    /* Stacked layout — nothing to break out of. */
    body.rr-sidebar-full-bleed .recipe-hero,
    body.rr-sidebar-full-bleed .recipe-custom-section,
    body.rr-sidebar-full-bleed .recipe-category-showcase {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}


/*-[ Hero above the sidebar row ]------------------*/
/* Rendered on generate_after_header, which sits outside
   GeneratePress' container — so the wrapper restores the site width
   and the spacing the hero had when it lived inside the content
   column. */
/* The wrapper carries GeneratePress' own .grid-container class, which
   already supplies the site width and centring — exactly the same box
   as #page, which holds the content and sidebar below. So it must add
   NO max-width and NO horizontal padding of its own: either one insets
   the hero and breaks the alignment with the columns underneath. */
.rr-hero-above {
    margin-left: auto;
    margin-right: auto;
}

.rr-hero-above .recipe-hero {
    margin-top: 30px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .rr-hero-above .recipe-hero {
        margin-top: 16px;
    }
}


/*-[ Breadcrumb above the columns row ]------------------*/
/* Same rule as the hero wrapper: .grid-container already supplies the
   width, so nothing here may add max-width or horizontal padding. */
.rr-breadcrumb-above {
    margin-left: auto;
    margin-right: auto;
}

/* Once the trail sits above both columns it no longer needs to be
   centred on the article card, so the single-post alignment rule is
   released. */
body.rr-single .rr-breadcrumb-above .sss-breadcrumb {
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*-[ Sticky ]------------------*/
.rr-sidebar-sticky {
    position: sticky;
    top: var(--rr-sidebar-sticky-offset, 30px);
}

/*-[ Block wrapper ]------------------*/
.rr-sb-block {
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: var(--rr-image-corner-radius, 16px);
    padding: 20px;
    margin-bottom: 24px;
}

.rr-sb-block:last-child {
    margin-bottom: 0;
}

/* Ad blocks get no card chrome — the ad supplies its own visual box,
   and a border around it looks like the ad is part of the site. */
.rr-sb-block-adsense {
    background: transparent;
    border: 0;
    padding: 0;
}

.rr-sb-title {
    font-family: var(--rr-heading-font, inherit);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rr-card-title, #2e2a1f);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--rr-accent, #d4941e);
}

/*-[ Post lists ]------------------*/
.rr-sb-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rr-sb-post {
    margin: 0 0 14px;
    padding: 0;
}

.rr-sb-post:last-child {
    margin-bottom: 0;
}

.rr-sb-post-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.rr-sb-post-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--rr-page-bg, #faf6ee);
}

.rr-sb-post-thumb img,
.rr-sb-post-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rr-sb-post-text {
    flex: 1;
    min-width: 0;
}

.rr-sb-post-title {
    display: block;
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--rr-card-title, #2e2a1f);
    transition: color 0.2s ease;
}

.rr-sb-post-link:hover .rr-sb-post-title {
    color: var(--rr-accent, #d4941e);
}

.rr-sb-post-date {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--rr-card-text, #6b6355);
}

/*-[ Category list ]------------------*/
.rr-sb-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rr-sb-cat-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rr-card-border, #ece4dc);
}

.rr-sb-cat-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.rr-sb-cat-list a {
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    font-weight: 600;
    color: var(--rr-card-title, #2e2a1f);
    text-decoration: none;
}

.rr-sb-cat-list a:hover {
    color: var(--rr-accent, #d4941e);
}

.rr-sb-cat-count {
    flex-shrink: 0;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rr-page-bg, #faf6ee);
    color: var(--rr-card-text, #6b6355);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/*-[ Image block ]------------------*/
.rr-sb-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.rr-sb-image-text {
    margin-top: 12px;
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    line-height: 1.6;
    color: var(--rr-card-text, #6b6355);
}

.rr-sb-image-text p:last-child {
    margin-bottom: 0;
}

/*-[ Bio block ]------------------*/
.rr-sb-bio {
    text-align: center;
}

.rr-sb-bio-avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--rr-accent, #d4941e);
}

.rr-sb-bio-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rr-sb-bio-name {
    font-family: var(--rr-heading-font, inherit);
    font-size: 18px;
    font-weight: 700;
    color: var(--rr-card-title, #2e2a1f);
    margin-bottom: 8px;
}

.rr-sb-bio-text {
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    line-height: 1.65;
    color: var(--rr-card-text, #6b6355);
}

.rr-sb-bio-text p:last-child {
    margin-bottom: 0;
}

.rr-sb-bio-button {
    display: inline-block;
    margin-top: 14px;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff) !important;
    font-family: var(--rr-body-font, inherit);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
}

.rr-sb-bio-button:hover {
    background: var(--rr-accent-hover, #b37916);
}

/*-[ HTML and ad blocks ]------------------*/
.rr-sb-html {
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    line-height: 1.6;
    color: var(--rr-card-text, #6b6355);
}

.rr-sb-html img,
.rr-sb-html iframe {
    max-width: 100%;
}

/* Reserve a minimum height so an ad slot filling in after page load
   doesn't shove the rest of the sidebar down — that shift is what
   damages CLS. */
.rr-sb-ad {
    min-height: 250px;
}

.rr-sb-ad ins,
.rr-sb-ad iframe {
    max-width: 100%;
}

/*-[ Search block ]------------------*/
.rr-sb-block-search form {
    display: flex;
    gap: 8px;
}

.rr-sb-block-search input[type="search"],
.rr-sb-block-search input[type="text"] {
    flex: 1;
    min-width: 0;
}

/*-[ Mobile ]------------------*/
@media (max-width: 768px) {
    /* GeneratePress stacks the sidebar below the content on mobile.
       When "show on mobile" is off, it is removed outright rather
       than merely hidden, so nothing loads for a column no one sees. */
    body.rr-sidebar-hide-mobile .is-right-sidebar,
    body.rr-sidebar-hide-mobile .is-left-sidebar {
        display: none !important;
    }

    body.rr-sidebar-active .site-content .is-right-sidebar,
    body.rr-sidebar-active .site-content .is-left-sidebar,
    body.rr-sidebar-active .site-content .content-area {
        width: 100%;
    }

    /* Sticky is pointless in a stacked single-column layout. */
    .rr-sidebar-sticky {
        position: static;
    }

    .rr-sb-block {
        padding: 16px;
    }
}


/*
 * Recettes Rapides — Article pagination
 * Six button presets and four number presets for multi-page posts,
 * configured under Réglages → Pagination des articles.
 *
 * Every preset reuses the same markup; only the classes on the
 * wrapper change (.rr-pg-style-* and .rr-pg-numbers-*), so switching
 * preset never changes the HTML.
 */

/*-[ Colour variables ]------------------*/
/* Every preset below paints with these, never with a raw colour. By
   default each one falls through to the site palette, so pagination
   matches the rest of the theme automatically. When custom colours
   are switched on in Réglages → Pagination des articles, PHP prints
   an override for these same names and every preset follows. */
.rr-pagination {
    --rr-pg-accent: var(--rr-accent, #d4941e);
    --rr-pg-accent-hover: var(--rr-accent-hover, #b37916);
    --rr-pg-btn-text: var(--rr-button-text, #fff);
    --rr-pg-surface: var(--rr-card-bg, #fff);
    --rr-pg-border: var(--rr-card-border, #ece4dc);
    --rr-pg-text: var(--rr-card-title, #2e2a1f);
    --rr-pg-muted: var(--rr-card-text, #6b6355);
    --rr-pg-bar-bg: var(--rr-page-bg, #faf6ee);

    /* Sizes come in pairs: a *-base value (what the admin panel sets)
       and the value the presets actually read. Keeping them separate
       lets the mobile rules scale FROM the base without a variable
       ever referring to itself, which CSS does not allow. */
    --rr-pg-btn-font-size-base: 15px;
    --rr-pg-pad-y-base: 12px;
    --rr-pg-pad-x-base: 20px;
    --rr-pg-num-size-base: 36px;
    --rr-pg-num-font-size-base: 14px;
    --rr-pg-gap-base: 12px;

    --rr-pg-btn-font-size: var(--rr-pg-btn-font-size-base);
    --rr-pg-pad-y: var(--rr-pg-pad-y-base);
    --rr-pg-pad-x: var(--rr-pg-pad-x-base);
    --rr-pg-num-size: var(--rr-pg-num-size-base);
    --rr-pg-num-font-size: var(--rr-pg-num-font-size-base);
    --rr-pg-gap: var(--rr-pg-gap-base);
    --rr-pg-radius: 8px;
}


/*-[ Shared layout ]------------------*/
.rr-pagination {
    clear: both;
    margin: 36px 0 10px;
    font-family: var(--rr-body-font, inherit);
}

.rr-pagination .rr-pg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rr-pg-gap);
    flex-wrap: wrap;
}

.rr-pagination.rr-pg-full .rr-pg-row {
    width: 100%;
}

.rr-pg-counter {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-pg-muted);
    margin-bottom: 12px;
}

.rr-pg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rr-pg-btn-font-size);
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.rr-pg-btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.rr-pg-arrow {
    font-size: 1.1em;
    line-height: 1;
}

.rr-pg-numbers {
    display: flex;
    align-items: center;
    gap: calc(var(--rr-pg-gap) / 2);
    flex-wrap: wrap;
    justify-content: center;
}

.rr-pg-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--rr-pg-num-size);
    height: var(--rr-pg-num-size);
    padding: 0 8px;
    font-size: var(--rr-pg-num-font-size);
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rr-pg-ellipsis {
    padding: 0 2px;
    color: var(--rr-pg-muted);
}


/*==================================================================
 * BUTTON PRESETS
 *=================================================================*/

/*-[ Classique — solid filled buttons ]------------------*/
.rr-pg-style-classic .rr-pg-btn {
    padding: var(--rr-pg-pad-y) var(--rr-pg-pad-x);
    border-radius: var(--rr-pg-radius);
    background: var(--rr-pg-accent);
    color: var(--rr-pg-btn-text) !important;
}

.rr-pg-style-classic .rr-pg-btn:hover {
    background: var(--rr-pg-accent-hover);
    transform: translateY(-1px);
}

/*-[ Contour — bordered buttons ]------------------*/
.rr-pg-style-outline .rr-pg-btn {
    padding: calc(var(--rr-pg-pad-y) - 1px) var(--rr-pg-pad-x);
    border: 2px solid var(--rr-pg-accent);
    border-radius: var(--rr-pg-radius);
    background: transparent;
    color: var(--rr-pg-accent) !important;
}

.rr-pg-style-outline .rr-pg-btn:hover {
    background: var(--rr-pg-accent);
    color: var(--rr-pg-btn-text) !important;
}

/*-[ Pilules — fully rounded ]------------------*/
.rr-pg-style-pills .rr-pg-btn {
    padding: var(--rr-pg-pad-y) calc(var(--rr-pg-pad-x) + 4px);
    border-radius: 999px;
    background: var(--rr-pg-accent);
    color: var(--rr-pg-btn-text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rr-pg-style-pills .rr-pg-btn:hover {
    background: var(--rr-pg-accent-hover);
    transform: translateY(-2px);
}

/*-[ Minimaliste — text and arrows only ]------------------*/
.rr-pg-style-minimal .rr-pg-btn {
    padding: calc(var(--rr-pg-pad-y) - 4px) 2px;
    background: transparent;
    color: var(--rr-pg-text) !important;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.rr-pg-style-minimal .rr-pg-btn:hover {
    color: var(--rr-pg-accent) !important;
    border-bottom-color: var(--rr-pg-accent);
}

.rr-pg-style-minimal .rr-pg-arrow {
    color: var(--rr-pg-accent);
}

/*-[ Cartes — large blocks with a label above ]------------------*/
.rr-pg-style-cards .rr-pg-row {
    gap: 14px;
}

.rr-pg-style-cards .rr-pg-btn {
    flex: 1 1 0;
    min-width: 140px;
    justify-content: center;
    padding: calc(var(--rr-pg-pad-y) + 6px) var(--rr-pg-pad-x);
    border: 1px solid var(--rr-pg-border);
    border-radius: var(--rr-pg-radius);
    background: var(--rr-pg-surface);
    color: var(--rr-pg-text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.rr-pg-style-cards .rr-pg-prev {
    justify-content: flex-start;
}

.rr-pg-style-cards .rr-pg-next {
    justify-content: flex-end;
}

.rr-pg-style-cards .rr-pg-btn:hover {
    border-color: var(--rr-pg-accent);
    color: var(--rr-pg-accent) !important;
    transform: translateY(-2px);
}

.rr-pg-style-cards .rr-pg-numbers {
    flex: 0 0 auto;
}

/*-[ Barre — one continuous bar ]------------------*/
.rr-pg-style-bar .rr-pg-row {
    padding: calc(var(--rr-pg-pad-y) - 2px) calc(var(--rr-pg-pad-x) - 6px);
    border-radius: 999px;
    background: var(--rr-pg-bar-bg);
    border: 1px solid var(--rr-pg-border);
    gap: 10px;
}

.rr-pg-style-bar .rr-pg-btn {
    padding: calc(var(--rr-pg-pad-y) - 3px) calc(var(--rr-pg-pad-x) - 4px);
    border-radius: 999px;
    background: transparent;
    color: var(--rr-pg-text) !important;
}

.rr-pg-style-bar .rr-pg-btn:hover {
    background: var(--rr-pg-accent);
    color: var(--rr-pg-btn-text) !important;
}


/*==================================================================
 * NUMBER PRESETS
 *=================================================================*/

/*-[ Cercles ]------------------*/
.rr-pg-numbers-circles .rr-pg-num {
    border-radius: 50%;
    border: 1px solid var(--rr-pg-border);
    background: var(--rr-pg-surface);
    color: var(--rr-pg-text) !important;
}

.rr-pg-numbers-circles .rr-pg-num:hover {
    border-color: var(--rr-pg-accent);
    color: var(--rr-pg-accent) !important;
}

.rr-pg-numbers-circles .rr-pg-num.is-current {
    background: var(--rr-pg-accent);
    border-color: var(--rr-pg-accent);
    color: var(--rr-pg-btn-text) !important;
}

/*-[ Carrés arrondis ]------------------*/
.rr-pg-numbers-squares .rr-pg-num {
    border-radius: var(--rr-pg-radius);
    border: 1px solid var(--rr-pg-border);
    background: var(--rr-pg-surface);
    color: var(--rr-pg-text) !important;
}

.rr-pg-numbers-squares .rr-pg-num:hover {
    border-color: var(--rr-pg-accent);
    color: var(--rr-pg-accent) !important;
}

.rr-pg-numbers-squares .rr-pg-num.is-current {
    background: var(--rr-pg-accent);
    border-color: var(--rr-pg-accent);
    color: var(--rr-pg-btn-text) !important;
}

/*-[ Minimaliste ]------------------*/
.rr-pg-numbers-minimal .rr-pg-num {
    min-width: calc(var(--rr-pg-num-size) * 0.7);
    height: calc(var(--rr-pg-num-size) * 0.78);
    border: 0;
    background: transparent;
    color: var(--rr-pg-muted) !important;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.rr-pg-numbers-minimal .rr-pg-num:hover {
    color: var(--rr-pg-accent) !important;
}

.rr-pg-numbers-minimal .rr-pg-num.is-current {
    color: var(--rr-pg-accent) !important;
    border-bottom-color: var(--rr-pg-accent);
}

/*-[ Points — compact dots, good for long articles ]------------------*/
.rr-pg-numbers-dots .rr-pg-num {
    min-width: 0;
    width: calc(var(--rr-pg-num-size) * 0.3);
    height: calc(var(--rr-pg-num-size) * 0.3);
    padding: 0;
    border-radius: 50%;
    background: var(--rr-pg-border);
    color: transparent !important;
    font-size: 0;
    overflow: hidden;
}

.rr-pg-numbers-dots .rr-pg-num:hover {
    background: var(--rr-pg-accent-hover);
}

.rr-pg-numbers-dots .rr-pg-num.is-current {
    background: var(--rr-pg-accent);
    width: calc(var(--rr-pg-num-size) * 0.72);
    border-radius: 999px;
}

.rr-pg-numbers-dots .rr-pg-ellipsis {
    font-size: 12px;
}


/*-[ Numbers-only mode ]------------------*/
/* With no buttons beside them, the numbers centre themselves rather
   than sitting hard left where space-between would leave them. */
.rr-pg-mode-numbers .rr-pg-row {
    justify-content: center;
}

.rr-pg-mode-numbers .rr-pg-numbers {
    gap: 8px;
}


/*-[ Mobile ]------------------*/
@media (max-width: 600px) {
    /* Everything shrinks proportionally from the configured sizes,
       so a custom size stays custom on a phone. */
    .rr-pagination {
        --rr-pg-btn-font-size: calc(var(--rr-pg-btn-font-size-base) * 0.93);
        --rr-pg-pad-y: calc(var(--rr-pg-pad-y-base) * 0.92);
        --rr-pg-pad-x: calc(var(--rr-pg-pad-x-base) * 0.75);
        --rr-pg-num-size: calc(var(--rr-pg-num-size-base) * 0.9);
        --rr-pg-gap: calc(var(--rr-pg-gap-base) * 0.83);
    }

    .rr-pg-mode-numbers .rr-pg-numbers {
        gap: 6px;
    }

    .rr-pg-style-cards .rr-pg-btn {
        padding: 14px 12px;
        min-width: 0;
    }

    .rr-pg-style-bar .rr-pg-row {
        border-radius: 16px;
    }
}


/*
 * Recettes Rapides — Comments
 * Comment list, nested replies and the reply form on article pages.
 *
 * Targets GeneratePress' own comment markup (#comments,
 * .comment-list, .comment-body, .comment-meta, .comment-content,
 * .comment-respond, .comment-form), so no template override is
 * needed — nothing here depends on custom HTML.
 *
 * Scoped to body.rr-single so it can't affect pages or archives.
 */

/*-[ GeneratePress' own wrapper ]------------------*/
/* GeneratePress puts comments inside .comments-area and gives it a
   white background plus 40px padding of its own. Our card below
   supplies both, so the wrapper only shows as a larger white block
   sitting behind it. Stripped back to nothing.

   The leading `body` is load-bearing. GeneratePress prints
   `.separate-containers .comments-area{background-color:var(--base-3)}`
   in an inline <style> block AFTER this stylesheet. That selector is
   (0,2,0); without `body` this rule ties at (0,2,0) and the later
   one — GeneratePress' — wins. `body` makes it (0,2,1). */
body.rr-single .comments-area,
body.rr-single.separate-containers .comments-area {
    background-color: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
}


/*-[ Section wrapper ]------------------*/
.rr-single #comments {
    max-width: var(--rr-single-width, 760px);
    margin: 40px auto 0;
    padding: 32px 40px 36px;
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: var(--rr-image-corner-radius, 16px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    font-family: var(--rr-body-font, inherit);
}

/* With a sidebar beside the article, the card shares the row and must
   not stay clamped to the narrow reading width. */
.rr-single.rr-sidebar-active #comments {
    max-width: none;
}

/*-[ Headings ]------------------*/
.rr-single .comments-title,
.rr-single .comment-reply-title {
    font-family: var(--rr-heading-font, inherit);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rr-card-title, #2e2a1f);
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--rr-accent, #d4941e);
}

.rr-single .comment-reply-title small {
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
    font-weight: 600;
}

.rr-single .comment-reply-title small a {
    color: var(--rr-card-text, #6b6355);
    text-decoration: underline;
}

/*-[ Comment list ]------------------*/
.rr-single .comment-list {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
}

.rr-single .comment-list li {
    list-style: none;
}

.rr-single .comment-list > li + li {
    margin-top: 18px;
}

.rr-single .comment-body {
    padding: 20px 22px;
    background: var(--rr-page-bg, #faf6ee);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 14px;
}

/*-[ Nested replies ]------------------*/
/* Indented with an accent rail rather than deeper boxes, so a long
   thread stays readable on a phone. */
.rr-single .comment-list .children {
    margin: 16px 0 0;
    padding: 0 0 0 22px;
    border-left: 3px solid var(--rr-accent, #d4941e);
    list-style: none;
}

.rr-single .comment-list .children > li + li {
    margin-top: 14px;
}

.rr-single .comment-list .children .comment-body {
    background: var(--rr-card-bg, #fff);
}

@media (max-width: 600px) {
    /* Deep threads would otherwise leave a sliver of text. */
    .rr-single .comment-list .children {
        padding-left: 12px;
    }

    .rr-single .comment-list .children .children {
        margin-left: 0;
        padding-left: 10px;
    }
}

/*-[ Comment header: avatar, name, date ]------------------*/
.rr-single .comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.rr-single .comment-meta .avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--rr-card-bg, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.rr-single .comment-author-info {
    min-width: 0;
}

.rr-single .comment-author,
.rr-single .comment-author cite,
.rr-single .comment-author .fn {
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    color: var(--rr-card-title, #2e2a1f);
}

.rr-single .comment-author a {
    color: var(--rr-card-title, #2e2a1f);
    text-decoration: none;
}

.rr-single .comment-author a:hover {
    color: var(--rr-accent, #d4941e);
}

.rr-single .comment-metadata,
.rr-single .comment-metadata a {
    font-size: 12.5px;
    color: var(--rr-card-text, #6b6355);
    text-decoration: none;
}

.rr-single .comment-metadata a:hover {
    color: var(--rr-accent, #d4941e);
}

/* The site owner's own replies are marked, which builds trust in a
   recipe thread where readers ask questions. */
.rr-single .bypostauthor > .comment-body {
    border-color: var(--rr-accent, #d4941e);
}

.rr-single .bypostauthor > .comment-body .comment-author .fn::after {
    content: "★";
    margin-left: 7px;
    font-size: 11px;
    color: var(--rr-accent, #d4941e);
}

/*-[ Comment text ]------------------*/
.rr-single .comment-content {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--rr-card-text, #4a453c);
    overflow-wrap: break-word;
}

.rr-single .comment-content p {
    margin: 0 0 12px;
}

.rr-single .comment-content p:last-child {
    margin-bottom: 0;
}

.rr-single .comment-content a {
    color: var(--rr-accent, #d4941e);
}

/* Comments awaiting approval look pending rather than broken. */
.rr-single .comment-awaiting-moderation {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--rr-card-border, #ece4dc);
    font-size: 12px;
    font-weight: 600;
    color: var(--rr-card-text, #6b6355);
}

/*-[ Reply link ]------------------*/
.rr-single .comment-body .reply {
    margin-top: 14px;
}

.rr-single .comment-reply-link {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 999px;
    background: var(--rr-card-bg, #fff);
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-card-title, #2e2a1f);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rr-single .comment-reply-link:hover {
    background: var(--rr-accent, #d4941e);
    border-color: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff);
}

/*-[ Reply form ]------------------*/
.rr-single .comment-respond {
    margin-top: 6px;
}

/* A reply form opened inside a thread sits in its own panel so it is
   obvious which comment is being answered. */
.rr-single .comment-list .comment-respond {
    margin-top: 16px;
    padding: 20px 22px;
    background: var(--rr-page-bg, #faf6ee);
    border: 1px dashed var(--rr-accent, #d4941e);
    border-radius: 14px;
}

.rr-single .comment-notes,
.rr-single .logged-in-as {
    font-size: 13px;
    color: var(--rr-card-text, #6b6355);
    margin: 0 0 16px;
}

.rr-single .comment-notes a,
.rr-single .logged-in-as a {
    color: var(--rr-accent, #d4941e);
}

.rr-single .comment-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rr-card-title, #2e2a1f);
}

.rr-single .comment-form p {
    margin-bottom: 16px;
}

.rr-single .comment-form input[type="text"],
.rr-single .comment-form input[type="email"],
.rr-single .comment-form input[type="url"],
.rr-single .comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 10px;
    background: var(--rr-card-bg, #fff);
    font-family: var(--rr-body-font, inherit);
    font-size: 15px;
    color: var(--rr-card-title, #2e2a1f);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rr-single .comment-form input[type="text"]:focus,
.rr-single .comment-form input[type="email"]:focus,
.rr-single .comment-form input[type="url"]:focus,
.rr-single .comment-form textarea:focus {
    outline: none;
    border-color: var(--rr-accent, #d4941e);
    box-shadow: 0 0 0 3px rgba(212, 148, 30, 0.15);
}

.rr-single .comment-form textarea {
    min-height: 130px;
    resize: vertical;
}

/* Name / email / website side by side on desktop, stacked on mobile. */
@media (min-width: 700px) {
    .rr-single .comment-form-author,
    .rr-single .comment-form-email,
    .rr-single .comment-form-url {
        display: inline-block;
        width: calc(33.333% - 11px);
        margin-right: 15px;
        vertical-align: top;
    }

    .rr-single .comment-form-url {
        margin-right: 0;
    }
}

.rr-single .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--rr-card-text, #6b6355);
}

.rr-single .comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
}

.rr-single .comment-form-cookies-consent input {
    margin-top: 3px;
}

.rr-single .form-submit {
    margin-bottom: 0;
}

.rr-single .comment-form input[type="submit"],
.rr-single .form-submit .submit {
    display: inline-block;
    padding: 13px 32px;
    border: 0;
    border-radius: 999px;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff);
    font-family: var(--rr-body-font, inherit);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.rr-single .comment-form input[type="submit"]:hover,
.rr-single .form-submit .submit:hover {
    background: var(--rr-accent-hover, #b37916);
    transform: translateY(-1px);
}

/*-[ Comments closed / navigation ]------------------*/
.rr-single .no-comments {
    margin: 0;
    padding: 16px 0 0;
    font-size: 14px;
    color: var(--rr-card-text, #6b6355);
    text-align: center;
}

.rr-single .comment-navigation,
.rr-single .comments-pagination {
    margin: 20px 0;
    font-size: 14px;
}

/*-[ Mobile ]------------------*/
@media (max-width: 768px) {
    .rr-single #comments {
        padding: 22px 18px 24px;
        border-radius: 12px;
        margin-top: 28px;
    }

    .rr-single .comments-title,
    .rr-single .comment-reply-title {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .rr-single .comment-body {
        padding: 16px 15px;
    }

    .rr-single .comment-meta .avatar {
        width: 40px;
        height: 40px;
    }

    .rr-single .comment-list .comment-respond {
        padding: 16px 15px;
    }

    .rr-single .comment-form input[type="submit"],
    .rr-single .form-submit .submit {
        width: 100%;
    }
}


/*
 * Recettes Rapides — Site background
 * Static rules for the custom site background (Réglages → Arrière-plan).
 * The colour, image and overlay values themselves are printed inline
 * in <head> by inc/background.php, since they change per site.
 *
 * Scoped to body.rr-bg-custom, added only when the background is on.
 */

/*-[ Let the background show through ]------------------*/
/* GeneratePress paints its own background on the page and content
   wrappers. Left alone, those cover a custom background completely,
   which is the usual reason a background "does not work". */
body.rr-bg-transparent-wrap .site,
body.rr-bg-transparent-wrap #page,
body.rr-bg-transparent-wrap #content,
body.rr-bg-transparent-wrap .site-content,
body.rr-bg-transparent-wrap .content-area,
body.rr-bg-transparent-wrap #primary {
    background-color: transparent;
    background-image: none;
}

/*-[ Keep panels readable on top ]------------------*/
/* Cards must stay opaque, or text sits directly on a photo. */
body.rr-bg-custom .inside-article,
body.rr-bg-custom #comments,
body.rr-bg-custom .recipe-card,
body.rr-bg-custom .rr-sb-block {
    background-color: var(--rr-card-bg, #fff);
}

/*-[ Fixed images on mobile ]------------------*/
/* background-attachment: fixed is ignored or janky on most mobile
   browsers, so it is dropped there rather than left half-working. */
@media (max-width: 768px) {
    body.rr-bg-custom {
        background-attachment: scroll !important;
    }
}


/*
 * Recettes Rapides — Section frames
 * Ten decorative frames for the homepage sections, the latest-recipes
 * grid, the category showcase and the related-recipes block.
 *
 * Every preset shares the .rr-framed base and adds one
 * .rr-frame-{style} class, so switching preset never changes markup.
 * Colours, padding, radius and border weight all come from variables
 * printed by inc/frames.php.
 */

/*-[ Base ]------------------*/
.rr-framed {
    /* Fall through to the theme palette unless custom colours are on. */
    --rr-frame-bg: var(--rr-card-bg, #fff);
    --rr-frame-border: var(--rr-card-border, #ece4dc);
    --rr-frame-accent: var(--rr-accent, #d4941e);
    --rr-frame-title: var(--rr-card-title, #2e2a1f);
    --rr-frame-pad: 30px;
    --rr-frame-radius: 16px;
    --rr-frame-border-width: 1px;
    --rr-frame-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);

    position: relative;
    padding: var(--rr-frame-pad);
    margin-bottom: 40px;
    border-radius: var(--rr-frame-radius);
}

/* The section heading follows the frame's own title colour. */
.rr-framed .recipe-category-showcase-text {
    color: var(--rr-frame-title);
}

.rr-framed .recipe-category-showcase-line {
    background: var(--rr-frame-border);
}

/* A framed section already has its own spacing; the inner section
   should not add a second layer of it. */
.rr-framed > .recipe-custom-section,
.rr-framed .recipe-latest-posts-section {
    margin: 0;
    padding: 0;
}


/*==================================================================
 * PRESETS
 *=================================================================*/

/*-[ Ligne fine — a quiet hairline box ]------------------*/
.rr-frame-line {
    background: var(--rr-frame-bg);
    border: var(--rr-frame-border-width) solid var(--rr-frame-border);
}

/*-[ Carte — raised panel ]------------------*/
.rr-frame-card {
    background: var(--rr-frame-bg);
    border: var(--rr-frame-border-width) solid var(--rr-frame-border);
    box-shadow: var(--rr-frame-shadow);
}

/*-[ Bandeau — tint, no border ]------------------*/
/* Useful for alternating bands down a long homepage: the section reads
   as a distinct zone without adding another outline to the page. */
.rr-frame-band {
    background: var(--rr-frame-bg);
    border: 0;
}

/*-[ Barre d'accent — coloured rule across the top edge ]------------------*/
.rr-frame-accent {
    background: var(--rr-frame-bg);
    border: var(--rr-frame-border-width) solid var(--rr-frame-border);
    overflow: hidden;
}

.rr-frame-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--rr-frame-accent);
}

/*-[ Coins — corner brackets ]------------------*/
/* Two elements, four corners: each pseudo-element draws an L, one at
   the top-left and one at the bottom-right, which reads as a framed
   plate without boxing the content in. */
.rr-frame-corners {
    background: var(--rr-frame-bg);
    border: 0;
    padding: calc(var(--rr-frame-pad) + 6px);
}

.rr-frame-corners::before,
.rr-frame-corners::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border-style: solid;
    border-color: var(--rr-frame-accent);
    border-width: 0;
}

.rr-frame-corners::before {
    top: 0;
    left: 0;
    border-top-width: 3px;
    border-left-width: 3px;
    border-top-left-radius: var(--rr-frame-radius);
}

.rr-frame-corners::after {
    bottom: 0;
    right: 0;
    border-bottom-width: 3px;
    border-right-width: 3px;
    border-bottom-right-radius: var(--rr-frame-radius);
}

/*-[ Double ligne — outer border plus an inset rule ]------------------*/
/* The classic recipe-book plate. The inner line is drawn with an
   inset box-shadow rather than a second element. */
.rr-frame-double {
    background: var(--rr-frame-bg);
    border: calc(var(--rr-frame-border-width) + 1px) solid var(--rr-frame-border);
    box-shadow: inset 0 0 0 5px var(--rr-frame-bg), inset 0 0 0 6px var(--rr-frame-accent);
    padding: calc(var(--rr-frame-pad) + 8px);
}

/*-[ Pointillés — rustic dashed edge ]------------------*/
.rr-frame-dashed {
    background: var(--rr-frame-bg);
    border: calc(var(--rr-frame-border-width) + 1px) dashed var(--rr-frame-accent);
}

/*-[ Ruban — the title sits on a tab above the frame ]------------------*/
.rr-frame-ribbon {
    background: var(--rr-frame-bg);
    border: var(--rr-frame-border-width) solid var(--rr-frame-border);
    margin-top: 34px;
    padding-top: calc(var(--rr-frame-pad) + 12px);
}

.rr-frame-ribbon .recipe-category-showcase-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 10px 30px;
    border-radius: 999px;
    background: var(--rr-frame-accent);
    white-space: nowrap;
    max-width: calc(100% - 40px);
}

.rr-frame-ribbon .recipe-category-showcase-text {
    color: var(--rr-button-text, #fff);
}

/* The decorative rules either side would overflow the tab. */
.rr-frame-ribbon .recipe-category-showcase-line {
    display: none;
}

/*-[ Liseré intérieur — thin rule set in from the edge ]------------------*/
.rr-frame-inset {
    background: var(--rr-frame-bg);
    border: 0;
    padding: calc(var(--rr-frame-pad) + 10px);
}

.rr-frame-inset::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: var(--rr-frame-border-width) solid var(--rr-frame-border);
    border-radius: calc(var(--rr-frame-radius) - 4px);
    pointer-events: none;
}

/*-[ Mobile ]------------------*/
@media (max-width: 768px) {
    /* Frames eat horizontal room on a phone, where it is scarcest.
       Padding is cut roughly in half and the decorative extras shrink
       so the cards inside keep their width. */
    .rr-framed {
        --rr-frame-pad: 16px;
        margin-bottom: 28px;
        border-radius: calc(var(--rr-frame-radius) * 0.75);
    }

    .rr-frame-corners,
    .rr-frame-inset {
        padding: 20px 14px;
    }

    .rr-frame-double {
        padding: 22px 16px;
    }

    .rr-frame-corners::before,
    .rr-frame-corners::after {
        width: 22px;
        height: 22px;
    }

    .rr-frame-ribbon .recipe-category-showcase-title {
        padding: 8px 18px;
        font-size: 0.9em;
    }

    .rr-frame-inset::before {
        inset: 7px;
    }
}


/*
 * Recettes Rapides — Ambiance
 * Six coordinated "moods" for the site: each sets the page background
 * AND the surface colours that cards, frames, the sidebar and the
 * comment panel all read from, so nothing has to be matched by hand.
 *
 * HOW IT CASCADES: the theme palette is printed on :root. A preset
 * re-declares --rr-card-bg, --rr-card-border and --rr-page-bg on
 * body, which is more specific for everything inside it. So one
 * choice re-tunes every component that already uses those variables —
 * recipe cards, section frames, the comment card, sidebar blocks,
 * pagination — with no per-component settings.
 *
 * Turning the ambiance off removes the body class and the site falls
 * straight back to the palette from Réglages → Options du thème.
 *
 * All textures are pure CSS gradients: no image request, nothing extra
 * to download, which matters on a site funded by ad impressions.
 */

/*-[ Shared ]------------------*/
body.rr-amb-on {
    --rr-card-bg: var(--rr-amb-surface);
    --rr-card-border: var(--rr-amb-border);
    --rr-page-bg: var(--rr-amb-surface-2);

    background-color: var(--rr-amb-page);
    background-image: var(--rr-amb-glow, none);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* GeneratePress paints its own background over the page; without this
   the ambiance is invisible. */
body.rr-amb-on .site,
body.rr-amb-on #page,
body.rr-amb-on #content,
body.rr-amb-on .site-content {
    background-color: transparent;
    background-image: none;
}


/*==================================================================
 * PRESETS
 *=================================================================*/

/*-[ Crème — warm ivory, the safe everyday choice ]------------------*/
body.rr-amb-creme {
    --rr-amb-page: #faf7f1;
    --rr-amb-surface: #ffffff;
    --rr-amb-surface-2: #f6f1e8;
    --rr-amb-border: #ebe2d4;
    --rr-amb-glow: linear-gradient(180deg, #fdfbf7 0%, #f7f2e9 100%);
}

/*-[ Lin — linen, with the weave baked into the background ]------------------*/
body.rr-amb-lin {
    --rr-amb-page: #f6f2ea;
    --rr-amb-surface: #fffdf9;
    --rr-amb-surface-2: #f1ebe0;
    --rr-amb-border: #e4dbcb;
    --rr-amb-glow:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.012) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 1px, transparent 1px 4px);
    background-attachment: scroll;
}

/*-[ Papier — soft paper, barely there ]------------------*/
body.rr-amb-papier {
    --rr-amb-page: #f8f6f2;
    --rr-amb-surface: #ffffff;
    --rr-amb-surface-2: #f3f0e9;
    --rr-amb-border: #e8e2d6;
    --rr-amb-glow: radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 60%);
}

/*-[ Aube — dawn, warm light pooling at the top of the page ]------------------*/
/* Two soft off-centre glows. On a recipe homepage this reads as
   morning light on a kitchen counter rather than a flat colour. */
body.rr-amb-aube {
    --rr-amb-page: #faf6f0;
    --rr-amb-surface: #ffffff;
    --rr-amb-surface-2: #f9efe3;
    --rr-amb-border: #eaddcd;
    --rr-amb-glow:
        radial-gradient(60% 45% at 18% 0%, rgba(247, 206, 165, 0.42) 0%, transparent 62%),
        radial-gradient(55% 40% at 88% 6%, rgba(246, 224, 190, 0.38) 0%, transparent 58%);
}

/*-[ Jardin — herb garden, cool sage against warm food photos ]------------------*/
/* Green backgrounds flatter food photography: most dishes sit in the
   warm half of the wheel, so a cool surround makes them pop. */
body.rr-amb-jardin {
    --rr-amb-page: #f3f6f1;
    --rr-amb-surface: #ffffff;
    --rr-amb-surface-2: #ecf2e9;
    --rr-amb-border: #dbe5d5;
    --rr-amb-glow:
        radial-gradient(70% 50% at 85% 0%, rgba(203, 223, 197, 0.5) 0%, transparent 60%),
        linear-gradient(180deg, #f6f9f4 0%, #f0f4ed 100%);
}

/*-[ Cacao — toasted beige, richer and more editorial ]------------------*/
body.rr-amb-cacao {
    --rr-amb-page: #f4eee6;
    --rr-amb-surface: #fffaf4;
    --rr-amb-surface-2: #ebe1d5;
    --rr-amb-border: #ddcfbe;
    --rr-amb-glow:
        radial-gradient(80% 55% at 50% 0%, rgba(214, 186, 152, 0.28) 0%, transparent 65%),
        linear-gradient(180deg, #f7f2eb 0%, #f0e8dd 100%);
}


/*==================================================================
 * TEXTURE
 *=================================================================*/
/* Drawn on a fixed layer behind the content rather than on the body
   background, so it can be combined with a preset's gradients without
   the two fighting over the same property.
   Colour and strength come from --rr-amb-tex-color, printed by PHP. */
body.rr-amb-texture::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--rr-amb-tex-image);
    background-size: var(--rr-amb-tex-size);
}

/* Content sits above the texture layer. */
body.rr-amb-texture .site,
body.rr-amb-texture #page {
    position: relative;
    z-index: 1;
}

body.rr-amb-tex-dots {
    --rr-amb-tex-image: radial-gradient(var(--rr-amb-tex-color) 1.2px, transparent 1.2px);
    --rr-amb-tex-size: 20px 20px;
}

body.rr-amb-tex-grid {
    --rr-amb-tex-image:
        linear-gradient(var(--rr-amb-tex-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--rr-amb-tex-color) 1px, transparent 1px);
    --rr-amb-tex-size: 28px 28px;
}

body.rr-amb-tex-diagonal {
    --rr-amb-tex-image: repeating-linear-gradient(45deg, var(--rr-amb-tex-color) 0 1px, transparent 1px 14px);
    --rr-amb-tex-size: auto;
}

body.rr-amb-tex-weave {
    --rr-amb-tex-image:
        repeating-linear-gradient(45deg, var(--rr-amb-tex-color) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(-45deg, var(--rr-amb-tex-color) 0 1px, transparent 1px 10px);
    --rr-amb-tex-size: auto;
}

/* Small scattered marks — the only decorative one; keep it faint. */
body.rr-amb-tex-confetti {
    --rr-amb-tex-image:
        radial-gradient(var(--rr-amb-tex-color) 1.5px, transparent 1.5px),
        radial-gradient(var(--rr-amb-tex-color) 1px, transparent 1px);
    --rr-amb-tex-size: 46px 46px, 78px 78px;
}


/*==================================================================
 * POLISH
 *=================================================================*/

/*-[ Card lift ]------------------*/
/* A short, small movement. Long or large hover animations feel cheap
   and cost more on low-end phones than they give back. */
/* The lift MUST be applied to .recipe-card-inner, not .recipe-card.
   .recipe-card is only the grid cell: no border, no radius, and it
   stretches to the height of the tallest card in the row. Putting the
   shadow there draws a square-cornered rectangle around the whole
   cell, which shows as a stray edge below shorter cards. */
body.rr-amb-polish .recipe-card-inner {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.rr-amb-polish .recipe-card:hover .recipe-card-inner {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.09);
}

body.rr-amb-polish .recipe-card:hover .recipe-card-image {
    transform: scale(1.045);
}

body.rr-amb-polish .recipe-card-image {
    transition: transform 0.45s ease;
}

/*-[ Softer edges throughout ]------------------*/
body.rr-amb-polish .rr-framed,
body.rr-amb-polish .inside-article,
body.rr-amb-polish #comments {
    box-shadow: 0 2px 14px rgba(60, 45, 25, 0.05);
}

/*-[ Selection colour ]------------------*/
/* Small detail, noticed by anyone who copies a recipe out. */
body.rr-amb-on ::selection {
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff);
}

/*-[ Mobile ]------------------*/
@media (max-width: 768px) {
    /* Fixed backgrounds are ignored or janky on mobile browsers. */
    body.rr-amb-on {
        background-attachment: scroll;
    }

    /* Hover lift is meaningless on touch and can leave a card stuck in
       the hovered state after a tap. */
    body.rr-amb-polish .recipe-card:hover .recipe-card-inner {
        transform: none;
    }

    body.rr-amb-polish .recipe-card:hover .recipe-card-image {
        transform: none;
    }
}

/*-[ Reduced motion ]------------------*/
@media (prefers-reduced-motion: reduce) {
    body.rr-amb-polish .recipe-card-inner,
    body.rr-amb-polish .recipe-card-image {
        transition: none;
    }

    body.rr-amb-polish .recipe-card:hover .recipe-card-inner {
        transform: none;
    }

    body.rr-amb-polish .recipe-card:hover .recipe-card-image {
        transform: none;
    }
}


/*
 * Recettes Rapides — Homepage blocks
 * Free-form homepage sections (HTML, image, bio, newsletter, CTA,
 * quote, video, ad, spacer) from Réglages → Blocs page d'accueil.
 *
 * Every block reuses the theme palette variables, so a block follows
 * the theme colours and any ambiance unless custom colours are ticked
 * for it, in which case PHP prints them inline on the section.
 */

/*-[ Block wrapper ]------------------*/
.rr-hb {
    margin-bottom: 40px;
    font-family: var(--rr-body-font, inherit);
    color: var(--rr-card-text, #4a453c);
}

.rr-hb-boxed {
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: var(--rr-image-corner-radius, 16px);
    padding: 34px 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.rr-hb-align-center {
    text-align: center;
}

.rr-hb-align-left {
    text-align: left;
}

/* A block with custom colours sets them inline; the title and links
   inside must follow rather than keep the theme colours. */
.rr-hb[style*="background-color"] .recipe-category-showcase-text,
.rr-hb[style*="background-color"] .rr-hb-bio-name,
.rr-hb[style*="background-color"] .rr-hb-text {
    color: inherit;
}

.rr-hb .rr-hb-text {
    font-size: 16px;
    line-height: 1.7;
}

.rr-hb .rr-hb-text p:last-child {
    margin-bottom: 0;
}

.rr-hb .rr-hb-text a {
    color: var(--rr-accent, #d4941e);
}

/*-[ Button, shared by bio / CTA ]------------------*/
.rr-hb-button {
    display: inline-block;
    margin-top: 18px;
    padding: 13px 28px;
    border-radius: 999px;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.rr-hb-button:hover {
    background: var(--rr-accent-hover, #b37916);
    transform: translateY(-1px);
}

/*-[ Image ]------------------*/
.rr-hb-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--rr-image-corner-radius, 16px);
}

.rr-hb-type-image .rr-hb-text {
    margin-top: 16px;
}

/*-[ Bio — photo beside the text ]------------------*/
.rr-hb-bio {
    display: flex;
    align-items: center;
    gap: 30px;
    text-align: left;
}

.rr-hb-align-center .rr-hb-bio {
    justify-content: center;
}

.rr-hb-bio-photo {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--rr-card-bg, #fff);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
}

.rr-hb-bio-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rr-hb-bio-body {
    flex: 1;
    min-width: 0;
}

.rr-hb-bio-name {
    font-family: var(--rr-heading-font, inherit);
    font-size: 22px;
    font-weight: 700;
    color: var(--rr-card-title, #2e2a1f);
    margin-bottom: 8px;
}

/*-[ Newsletter ]------------------*/
.rr-hb-newsletter-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.rr-hb-align-left .rr-hb-newsletter-form {
    justify-content: flex-start;
}

.rr-hb-newsletter-form input[type="email"] {
    flex: 1 1 260px;
    max-width: 360px;
    padding: 13px 16px;
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 999px;
    background: var(--rr-card-bg, #fff);
    font-family: var(--rr-body-font, inherit);
    font-size: 15px;
}

.rr-hb-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--rr-accent, #d4941e);
    box-shadow: 0 0 0 3px rgba(212, 148, 30, 0.15);
}

.rr-hb-newsletter-form button {
    padding: 13px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--rr-accent, #d4941e);
    color: var(--rr-button-text, #fff);
    font-family: var(--rr-body-font, inherit);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.rr-hb-newsletter-form button:hover {
    background: var(--rr-accent-hover, #b37916);
}

/*-[ Call to action ]------------------*/
.rr-hb-type-cta.rr-hb-boxed {
    background: var(--rr-page-bg, #faf6ee);
    border-color: var(--rr-accent, #d4941e);
}

.rr-hb-type-cta .rr-hb-text {
    font-size: 17px;
}

/*-[ Quote ]------------------*/
.rr-hb-quote {
    margin: 0;
    padding: 0 0 0 22px;
    border-left: 4px solid var(--rr-accent, #d4941e);
    border-radius: 0;
    font-family: var(--rr-heading-font, inherit);
    font-size: 21px;
    line-height: 1.5;
    font-style: italic;
    color: var(--rr-card-title, #2e2a1f);
    text-align: left;
}

.rr-hb-align-center .rr-hb-quote {
    border-left: 0;
    padding: 0;
    text-align: center;
}

.rr-hb-quote cite {
    display: block;
    margin-top: 14px;
    font-family: var(--rr-body-font, inherit);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    color: var(--rr-card-text, #6b6355);
}

/*-[ Video ]------------------*/
/* aspect-ratio keeps the frame correct without the old
   padding-bottom hack, and stops the layout jumping as it loads. */
.rr-hb-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--rr-image-corner-radius, 16px);
    overflow: hidden;
    background: #000;
}

.rr-hb-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*-[ Ad ]------------------*/
/* No card chrome: an ad framed like site content reads as an
   endorsement. The min-height reserves space so the slot filling in
   doesn't shift the page and damage CLS. */
.rr-hb-type-adsense {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 100px;
}

.rr-hb-type-adsense ins,
.rr-hb-type-adsense iframe {
    max-width: 100%;
}

/*-[ Recipe grids inside the unified list ]------------------*/
/* A recipes block carries .rr-hb, .recipe-custom-section and possibly
   .rr-framed — but they are all the SAME element, so their bottom
   margins do not add up; the last one declared simply wins. Setting 0
   here therefore removed the gap between sections rather than
   preventing a double one. The spacing is stated explicitly instead. */
.rr-hb-type-recipes {
    margin-bottom: 40px;
    color: inherit;
}

/* Its own frame (Réglages → Cadres) supplies the card, so the generic
   block card must not draw a second one around it. */
.rr-hb-type-recipes.rr-framed {
    padding: var(--rr-frame-pad);
}

/*-[ Spacer ]------------------*/
.rr-hb-type-spacer {
    margin-bottom: 0;
}

/*-[ Mobile ]------------------*/
@media (max-width: 768px) {
    .rr-hb,
    .rr-hb-type-recipes {
        margin-bottom: 28px;
    }

    .rr-hb-boxed {
        padding: 22px 18px;
        border-radius: 12px;
    }

    /* The bio photo stacks above the text: side by side leaves the
       text in a column too narrow to read on a phone. */
    .rr-hb-bio {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }

    .rr-hb-bio-photo {
        flex-basis: auto;
        width: 110px;
        height: 110px;
    }

    .rr-hb-quote {
        font-size: 18px;
    }

    .rr-hb-newsletter-form input[type="email"],
    .rr-hb-newsletter-form button {
        flex: 1 1 100%;
        max-width: none;
    }
}


/*
 * Recettes Rapides — Top bar
 * Réglages → Barre supérieure. Colours and height arrive as CSS
 * variables printed by the module, so the strip is restyled from the
 * settings without touching this file.
 */

.rr-topbar {
    color: var(--rr-tb-text, #fff);
}

/* Full width: the colour runs edge to edge, the CONTENT still stops
   at the site width so it lines up with everything below. */
.rr-topbar-width-full {
    background: var(--rr-tb-bg, #41762c);
}

/* Site width: the coloured band itself stops at the container edges,
   matching the header and content beneath it. The background moves to
   the inner element, which is the one that carries the width. */
.rr-topbar-width-contained .rr-topbar-inner {
    background: var(--rr-tb-bg, #41762c);
}

/* space-between is what actually guarantees the layout: the button is
   the first child and the links the last, so one goes hard left and
   the other hard right no matter which of them is present, and
   without either depending on the other existing. */
.rr-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: var(--rr-tb-height, 46px);
    padding-left: 20px;
    padding-right: 20px;
}

/* Sticky sits above the header but below WordPress' admin bar, which
   is itself fixed at 32px for logged-in users. */
.rr-topbar-sticky {
    position: sticky;
    top: 0;
    z-index: 9995;
}

.admin-bar .rr-topbar-sticky {
    top: 32px;
}

/*-[ Menu button ]------------------*/
.rr-topbar-toggle {
    /* flex:0 0 auto stops the button growing to fill the row if any
       stylesheet ever sets a width on it again. */
    flex: 0 0 auto;
    width: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 4px;
    color: var(--rr-tb-text, #fff);
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.rr-topbar-toggle:hover,
.rr-topbar-toggle:focus {
    background: rgba(255, 255, 255, 0.14);
    color: var(--rr-tb-text, #fff);
}

.rr-topbar-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
}

.rr-topbar-bars span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
}

/* The overlay script injects its own three-bar icon into any button
   it binds to. Ours already has three bars, so the injected one is
   hidden rather than removed — the script is shared with the header
   hamburger and should not be special-cased for this button. */
.rr-topbar-toggle .rr-hamburger-icon {
    display: none !important;
}

/*-[ Links ]------------------*/
.rr-topbar-links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.rr-topbar-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--rr-tb-text, #fff);
    text-decoration: none;
    font-family: var(--rr-body-font, inherit);
    font-size: 15px;
    line-height: 1.2;
    transition: color 0.18s ease;
}

.rr-topbar-ico {
    display: inline-flex;
    line-height: 0;
}

.rr-topbar-ico svg {
    width: var(--rr-tb-icon, 20px);
    height: var(--rr-tb-icon, 20px);
    fill: currentColor;
}

/* Icon-only links get a larger tap target than the glyph itself —
   20px of artwork is well under the 44px a finger needs. */
.rr-topbar-link-icon {
    padding: 6px;
    margin: -6px;
}

.rr-topbar-links a:hover,
.rr-topbar-links a:focus {
    color: var(--rr-tb-hover, #d9e8cf);
}

/*-[ Placement ]------------------*/
/* Order, not margins. With space-between doing the work, the only
   thing these need to decide is which element comes first — margins
   would fight the justification and break as soon as one side was
   empty. */
.rr-topbar-toggle {
    order: 1;
}

.rr-topbar-links {
    order: 2;
}

.rr-topbar-toggle-right .rr-topbar-toggle {
    order: 3;
}

/* With no button present, a lone link group would be pushed left by
   space-between; auto margin puts it back where it was asked to go. */
.rr-topbar-align-right .rr-topbar-links {
    margin-left: auto;
}

.rr-topbar-align-left .rr-topbar-links {
    margin-right: auto;
}

.rr-topbar-align-center .rr-topbar-links {
    margin-left: auto;
    margin-right: auto;
}

/*-[ Where the button appears ]------------------*/
@media (max-width: 768px) {
    .rr-topbar-toggle-on-desktop .rr-topbar-toggle {
        display: none;
    }
}

@media (min-width: 769px) {
    .rr-topbar-toggle-on-mobile .rr-topbar-toggle {
        display: none;
    }
}

/*-[ Mobile ]------------------*/
@media (max-width: 768px) {
    .rr-topbar-inner {
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .rr-topbar-links {
        gap: 12px;
    }

    /* Four links at 15px will not fit beside a button on a phone.
       Shrinking the type keeps them on one line, which matters more
       here than size: a utility strip that wraps to two rows takes
       more vertical space than the content it sits above. */
    .rr-topbar-links a {
        font-size: 13px;
    }

    .rr-topbar-toggle {
        width: 40px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .rr-topbar-links {
        gap: 9px;
    }

    .rr-topbar-links a {
        font-size: 12px;
    }
}


/*-[ The header's own hamburger stands down ]------------------*/
/* With a menu button in the top bar, GeneratePress' mobile toggle sits
   a few pixels below an identical one that opens the same panel. Two
   buttons doing the same thing is not a choice a visitor can make
   sense of, so the header's is removed while the bar provides one.

   Only below the breakpoint: above it the header toggle is already
   hidden by GeneratePress, and the desktop menu must keep working. */
@media (max-width: 768px) {
    body.rr-topbar-owns-toggle .site-header .menu-toggle,
    body.rr-topbar-owns-toggle .site-header .mobile-menu-control-wrapper {
        display: none !important;
    }

    /* The header row then holds only the branding (or nothing at all),
       so it should not keep the height the toggle needed. */
    body.rr-topbar-owns-toggle .site-header .inside-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}


/*
 * Recettes Rapides — Section layouts
 *
 * The ten presentation styles offered by the featured slider, ported
 * to the homepage sections built in Réglages → Page d'accueil —
 * sections et blocs.
 *
 * WHY THIS IS NOT JUST A COPY OF hero.css
 *
 * The hero styles are body classes whose rules target hero markup:
 * .recipe-hero-slide, .recipe-hero-image, .recipe-hero-info. A
 * section renders .recipe-card / .recipe-card-image-wrap /
 * .recipe-card-content instead, so not one of those selectors
 * matches. Each layout is re-expressed here against card markup, with
 * the same visual result.
 *
 * The class goes on the grid (.recipe-custom-section-grid), not the
 * body, because every section chooses its own layout. Two classes
 * beat the single-class rules in sections.css, so no !important is
 * needed to win.
 *
 * Six of the ten describe how ONE slide looks and therefore become
 * per-card treatments (plein écran, minimaliste, carte flottante,
 * split moderne, empilé, and the default). The remaining four
 * (mosaïque, grille, portraits, vedette + liste) arrange several
 * items and act on the grid itself.
 *
 * OVERLAY LAYOUTS: .recipe-card-content is a SIBLING of
 * .recipe-card-image-wrap, not a child, so text is laid over the
 * photo by making .recipe-card-inner the positioning context and
 * absolutely positioning the content. No markup change needed —
 * which is what keeps this a stylesheet and not a rewrite of
 * inc/home-blocks.php.
 */


/*-[ Shared: overlay treatment used by several layouts ]------------------*/

.rr-sec-overlay .recipe-card-inner {
    position: relative;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: var(--rr-image-corner-radius, 16px);
    overflow: hidden;
}

.rr-sec-overlay .recipe-card:hover .recipe-card-inner {
    transform: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.rr-sec-overlay .recipe-card-image-wrap {
    height: 100%;
}

.rr-sec-overlay .recipe-card-image,
.rr-sec-overlay .recipe-card-image-placeholder {
    height: 100%;
    border-radius: 0;
}

/* The scrim. Without it, pale photos leave white text unreadable —
   this is the difference between a design and a bug report. */
.rr-sec-overlay .recipe-card-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.45) 35%,
        rgba(0, 0, 0, 0.05) 65%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}

.rr-sec-overlay .recipe-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 20px;
    text-align: left;
}

.rr-sec-overlay .recipe-card-title {
    margin: 0;
    font-size: 19px;
    line-height: 1.28;
}

.rr-sec-overlay .recipe-card-title a {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.rr-sec-overlay .recipe-card-excerpt {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    -webkit-line-clamp: 2;
}

/* The badge sits above the text block rather than pinned to the
   bottom edge, where it would collide with the title. */
.rr-sec-overlay .recipe-card-category {
    bottom: auto;
    top: 14px;
    left: 14px;
}


/*-[ Plein écran — image en fond, texte superposé ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-plein_ecran {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.recipe-custom-section-grid.rr-sec-layout-plein_ecran .recipe-card-image,
.recipe-custom-section-grid.rr-sec-layout-plein_ecran .recipe-card-image-placeholder {
    aspect-ratio: 16 / 9;
    height: auto;
}

.recipe-custom-section-grid.rr-sec-layout-plein_ecran .recipe-card-title {
    font-size: 23px;
}


/*-[ Minimaliste — plat, coins carrés, bordure fine ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-minimaliste .recipe-card-inner {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--rr-card-border, #ece4dc);
}

.recipe-custom-section-grid.rr-sec-layout-minimaliste .recipe-card:hover .recipe-card-inner {
    box-shadow: none;
    transform: none;
    border-color: var(--rr-accent, #b5651d);
}

.recipe-custom-section-grid.rr-sec-layout-minimaliste .recipe-card-image,
.recipe-custom-section-grid.rr-sec-layout-minimaliste .recipe-card-image-placeholder {
    border-radius: 0;
}

.recipe-custom-section-grid.rr-sec-layout-minimaliste .recipe-card:hover .recipe-card-image {
    transform: none;
}

.recipe-custom-section-grid.rr-sec-layout-minimaliste .recipe-card-category,
.recipe-custom-section-grid.rr-sec-layout-minimaliste .recipe-card-date {
    border-radius: 0;
}

.recipe-custom-section-grid.rr-sec-layout-minimaliste .recipe-card-content {
    padding: 16px 14px;
}


/*-[ Carte flottante — texte dans une carte qui chevauche la photo ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-carte_flottante .recipe-card-inner {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.recipe-custom-section-grid.rr-sec-layout-carte_flottante .recipe-card-image,
.recipe-custom-section-grid.rr-sec-layout-carte_flottante .recipe-card-image-placeholder {
    border-radius: var(--rr-image-corner-radius, 16px);
}

.recipe-custom-section-grid.rr-sec-layout-carte_flottante .recipe-card-image-wrap {
    border-radius: var(--rr-image-corner-radius, 16px);
}

/* Pulled up over the photo and inset on both sides — the overlap is
   the whole point of the style. */
.recipe-custom-section-grid.rr-sec-layout-carte_flottante .recipe-card-content {
    position: relative;
    z-index: 2;
    margin: -46px 16px 0;
    padding: 18px 18px 20px;
    background: var(--rr-card-bg, #fff);
    border: 1px solid var(--rr-card-border, #ece4dc);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
}

.recipe-custom-section-grid.rr-sec-layout-carte_flottante .recipe-card:hover .recipe-card-inner {
    transform: translateY(-3px);
}

.recipe-custom-section-grid.rr-sec-layout-carte_flottante .recipe-card-category {
    bottom: 60px;
}


/*-[ Split moderne — photo à droite, fond teinté à gauche ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-split_moderne {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

/* Photo to the right, tinted panel to the left. Source order is
   image-then-content, so the image is pushed to column 2. */
.recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-image-wrap {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
}

.recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-image,
.recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-image-placeholder {
    height: 100%;
    min-height: 210px;
    aspect-ratio: auto;
    border-radius: 0;
}

.recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-content {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 22px;
    background: var(--rr-section-tint, var(--rr-nav-hover-bg, #f5efe8));
}

.recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-title {
    font-size: 19px;
}

.recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-excerpt {
    -webkit-line-clamp: 3;
}

.recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-category {
    bottom: 14px;
    left: 14px;
}


/*-[ Empilé — grande photo, texte centré en dessous ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-empile {
    grid-template-columns: 1fr;
    gap: 34px;
}

.recipe-custom-section-grid.rr-sec-layout-empile .recipe-card-image,
.recipe-custom-section-grid.rr-sec-layout-empile .recipe-card-image-placeholder {
    aspect-ratio: 16 / 9;
}

.recipe-custom-section-grid.rr-sec-layout-empile .recipe-card-content {
    text-align: center;
    padding: 24px 20px 28px;
    max-width: 760px;
    margin: 0 auto;
}

.recipe-custom-section-grid.rr-sec-layout-empile .recipe-card-title {
    font-size: 28px;
}

.recipe-custom-section-grid.rr-sec-layout-empile .recipe-card-excerpt {
    font-size: 16px;
}


/*-[ Mosaïque — 1 grande + 3 vignettes ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-mosaique {
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 14px;
}

.recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(1) {
    grid-area: 1 / 1 / 3 / 2;
}

.recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(2) {
    grid-area: 1 / 2 / 2 / 4;
}

.recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
}

.recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(4) {
    grid-area: 2 / 3 / 3 / 4;
}

/* A fifth item and beyond would have nowhere to go in a four-cell
   mosaic, so they are hidden rather than allowed to spawn a ragged
   extra row. Set the section's count to 4 for this layout. */
.recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(n + 5) {
    display: none;
}

.recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(1) .recipe-card-title {
    font-size: 24px;
}

.recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(n + 2) .recipe-card-excerpt {
    display: none;
}


/*-[ Grille — vignettes égales sur 3 colonnes ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-grille {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 240px;
    gap: 14px;
}

.recipe-custom-section-grid.rr-sec-layout-grille .recipe-card-excerpt {
    display: none;
}


/*-[ Portraits — vignettes verticales façon couverture ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-portraits {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.recipe-custom-section-grid.rr-sec-layout-portraits .recipe-card-image,
.recipe-custom-section-grid.rr-sec-layout-portraits .recipe-card-image-placeholder {
    aspect-ratio: 4 / 5;
    height: auto;
}

.recipe-custom-section-grid.rr-sec-layout-portraits .recipe-card-image-wrap {
    height: auto;
}

.recipe-custom-section-grid.rr-sec-layout-portraits .recipe-card-title {
    font-size: 17px;
}

.recipe-custom-section-grid.rr-sec-layout-portraits .recipe-card-excerpt {
    display: none;
}


/*-[ Vedette + liste — 1 grande photo et une liste à droite ]------------------*/

.recipe-custom-section-grid.rr-sec-layout-vedette_liste {
    grid-template-columns: 1.35fr 1fr;
    gap: 22px;
    align-items: start;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(1) {
    grid-row: 1 / span 4;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(1) .recipe-card-image,
.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(1) .recipe-card-image-placeholder {
    aspect-ratio: 4 / 3;
    height: auto;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(1) .recipe-card-title {
    font-size: 26px;
}

/* Items 2+ become compact horizontal rows: small thumbnail, title
   beside it, no scrim and no overlay. */
.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-inner {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 14px;
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-image-wrap {
    height: auto;
    border-radius: 10px;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-image-wrap::after {
    display: none;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-image,
.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-image-placeholder {
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 10px;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-content {
    position: static;
    padding: 0;
    text-align: left;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-title {
    font-size: 16px;
    margin: 0;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-title a {
    color: var(--rr-card-title, #1a1a1a);
    text-shadow: none;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-excerpt,
.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-category,
.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-date {
    display: none;
}

.recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 6) {
    display: none;
}


/*==================================================================
 * Responsive
 *
 * Every multi-column layout collapses toward one or two columns.
 * The mosaic and vedette+liste arrangements depend on explicit grid
 * areas, so those are reset outright rather than squeezed — a
 * six-cell mosaic on a 375px screen is four unreadable slivers.
 *=================================================================*/

@media (max-width: 1024px) {

    .recipe-custom-section-grid.rr-sec-layout-portraits {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipe-custom-section-grid.rr-sec-layout-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipe-custom-section-grid.rr-sec-layout-mosaique {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(1),
    .recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(2),
    .recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(3),
    .recipe-custom-section-grid.rr-sec-layout-mosaique .recipe-card:nth-child(4) {
        grid-area: auto;
        min-height: 210px;
    }

    .recipe-custom-section-grid.rr-sec-layout-vedette_liste {
        grid-template-columns: 1fr;
    }

    .recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(1) {
        grid-row: auto;
    }
}

@media (max-width: 768px) {

    .recipe-custom-section-grid.rr-sec-layout-split_moderne {
        grid-template-columns: 1fr;
    }

    .recipe-custom-section-grid.rr-sec-layout-plein_ecran {
        grid-template-columns: 1fr;
    }

    .recipe-custom-section-grid.rr-sec-layout-empile .recipe-card-title {
        font-size: 22px;
    }
}

@media (max-width: 600px) {

    .recipe-custom-section-grid.rr-sec-layout-portraits,
    .recipe-custom-section-grid.rr-sec-layout-grille,
    .recipe-custom-section-grid.rr-sec-layout-mosaique {
        grid-template-columns: repeat(2, 1fr);
    }

    .rr-sec-overlay .recipe-card-title {
        font-size: 15px;
    }

    .rr-sec-overlay .recipe-card-content {
        padding: 12px 13px;
    }

    .rr-sec-overlay .recipe-card-excerpt {
        display: none;
    }

    /* Below this width the split card's two columns are each about
       150px — narrower than a single word of a long recipe title. */
    .recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-inner {
        grid-template-columns: 1fr;
    }

    .recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-image-wrap {
        grid-column: 1;
        grid-row: 1;
    }

    .recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-content {
        grid-column: 1;
        grid-row: 2;
    }

    .recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-image,
    .recipe-custom-section-grid.rr-sec-layout-split_moderne .recipe-card-image-placeholder {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .recipe-custom-section-grid.rr-sec-layout-vedette_liste .recipe-card:nth-child(n + 2) .recipe-card-inner {
        grid-template-columns: 84px 1fr;
    }
}


/*-[ Reduced motion ]------------------*/

@media (prefers-reduced-motion: reduce) {

    .recipe-custom-section-grid[class*="rr-sec-layout-"] .recipe-card-inner,
    .recipe-custom-section-grid[class*="rr-sec-layout-"] .recipe-card-image {
        transition: none;
    }

    .recipe-custom-section-grid[class*="rr-sec-layout-"] .recipe-card:hover .recipe-card-inner {
        transform: none;
    }
}



/*-[ Optional link on a section title ]------------------*/

/*
 * The title is styled on .recipe-category-showcase-title; the anchor
 * sits inside .recipe-category-showcase-text and must not introduce a
 * colour or underline of its own, or a linked title would look
 * different from an unlinked one sitting right below it.
 */
.rr-hb-title-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.rr-hb-title-link:hover,
.rr-hb-title-link:focus {
    color: var(--rr-accent, #b5651d);
    border-bottom-color: var(--rr-accent, #b5651d);
}

/* Keyboard focus needs to be visible even where the hover colour is
   close to the resting one. */
.rr-hb-title-link:focus-visible {
    outline: 2px solid var(--rr-accent, #b5651d);
    outline-offset: 4px;
}


/*-[ "See more" link under a recipe grid ]------------------*/

/*
 * Rendered as a sibling AFTER .recipe-custom-section-grid, never
 * inside it — the mosaic and portrait layouts assign explicit grid
 * areas and hide overflow children, so a link placed inside would
 * either land in a cell or vanish entirely.
 */
.rr-hb-more {
    display: flex;
    margin-top: 22px;
}

.rr-hb-more-align-left {
    justify-content: flex-start;
}

.rr-hb-more-align-center {
    justify-content: center;
}

.rr-hb-more-align-right {
    justify-content: flex-end;
}

.rr-hb-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rr-heading-font, inherit);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, gap 0.2s ease, border-color 0.2s ease;
}

.rr-hb-more-arrow {
    font-size: 1.35em;
    line-height: 1;
    transform: translateY(-1px);
}

/* Nudging the arrow instead of the whole label keeps the text
   baseline still, so the row does not appear to jitter on hover. */
.rr-hb-more-link:hover {
    gap: 13px;
}

/*-[ Text-link appearance ]------------------*/

.rr-hb-more-link {
    color: var(--rr-accent, #b5651d);
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
}

.rr-hb-more-link:hover,
.rr-hb-more-link:focus {
    color: var(--rr-accent-hover, #96521a);
    border-bottom-color: currentColor;
}

/*-[ Button appearance ]------------------*/

.rr-hb-more-link.rr-hb-more-button {
    padding: 12px 26px;
    border: 0;
    border-radius: 30px;
    background: var(--rr-accent, #b5651d);
    color: var(--rr-button-text, #fff);
}

.rr-hb-more-link.rr-hb-more-button:hover,
.rr-hb-more-link.rr-hb-more-button:focus {
    background: var(--rr-accent-hover, #96521a);
    color: var(--rr-button-text, #fff);
    border-bottom-color: transparent;
}

.rr-hb-more-link:focus-visible {
    outline: 2px solid var(--rr-accent, #b5651d);
    outline-offset: 3px;
}

@media (max-width: 600px) {

    /* Right-aligned on a phone the link ends up hugging the edge with
       nothing to anchor it, so every alignment centres instead. */
    .rr-hb-more {
        justify-content: center;
        margin-top: 18px;
    }

    .rr-hb-more-link {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rr-hb-more-link,
    .rr-hb-more-link:hover {
        transition: none;
        gap: 8px;
    }
}


/*-[ Vertical rhythm between homepage sections ]------------------*/

/*
 * The gap between two sections used to be the sum of four separate
 * values — .rr-hb's own margin, .recipe-custom-section's padding top
 * AND bottom, and the "voir plus" margin — which came to roughly
 * 120px and read as the page having ended.
 *
 * The section padding is now dropped for blocks, since every block
 * already carries a margin, and what remains is driven by a single
 * custom property set from Réglages → Page d'accueil — sections et
 * blocs. One number, one place to change it.
 *
 * Framed sections are untouched: .rr-framed supplies its own
 * --rr-frame-pad, which is the inner padding of the box and a
 * different thing entirely from the space between boxes.
 */

.rr-hb {
    margin-bottom: var(--rr-hb-gap, 40px);
}

.rr-hb:last-child {
    margin-bottom: 0;
}

/* Zeroed only where the element is both — a .recipe-custom-section
   rendered outside the block system keeps its original padding. */
.rr-hb.recipe-custom-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* The title sat 30px clear of its own grid, which on a tight gap
   setting left the heading closer to the section above than to the
   cards it labels. */
.rr-hb .recipe-category-showcase-title {
    margin-bottom: clamp(16px, calc(var(--rr-hb-gap, 40px) * 0.55), 30px);
}

.rr-hb .rr-hb-more {
    margin-top: clamp(12px, calc(var(--rr-hb-gap, 40px) * 0.45), 22px);
}

@media (max-width: 768px) {

    .rr-hb {
        margin-bottom: clamp(20px, calc(var(--rr-hb-gap, 40px) * 0.7), 40px);
    }
}