/**
 * a4w_recipe – Front-office styles
 * BEM naming with a4w- prefix
 * Tous les tokens locaux sont préfixés --a4w-recipe-* : ils ne redéfinissent jamais un nom
 * du thème. Chaque chaîne part du vocabulaire theme_a4w (--primary-color, --signature-color,
 * --font-family-title…), retombe sur le vocabulaire Foodex (--foodex-*), puis sur Bootstrap
 * (--bs-*) et enfin sur la valeur littérale rendue avant harmonisation.
 */

/* ──────────────────────────────────────────────
 * 0. Tokens locaux mappés sur le thème
 * ────────────────────────────────────────────── */

.a4w-recipe-card,
.a4w-home-recipes,
.a4w-recipes,
.a4w-product-recipes,
.a4w-detail,
.a4w-toast,
.a4w-pagination,
.a4w-add-all-to-cart {
    --a4w-recipe-color-bg:           var(--background-color, var(--bs-body-bg, #fff));
    --a4w-recipe-color-surface:      var(--foodex-gray-50, var(--bs-tertiary-bg, #f7f7f7));
    --a4w-recipe-color-surface-alt:  var(--foodex-gray-100, #efefef);
    --a4w-recipe-color-border:       var(--foodex-gray-200, var(--bs-border-color, #e5e5e5));
    --a4w-recipe-color-text:         var(--text-color, var(--foodex-gray-900, var(--bs-body-color, #1a1a1a)));
    --a4w-recipe-color-text-muted:   var(--medium-gray, var(--foodex-gray-500, #6b7280));
    /* Un titre prend la couleur de son niveau (standards-module.md § Tokens de couleur) :
       plus d'alias --color-heading unique consomme par les h1, h2 et le texte courant —
       trois alias distincts, chacun conservant a l'identique le repli en cascade
       (foodex-navy, bs-heading-color, #1e2a38) : le rendu sur foodexv2, qui ne definit
       aucun de ces jetons de niveau, ne bouge pas. */
    --a4w-recipe-ink-h1:   var(--h1-color, var(--foodex-navy, var(--bs-heading-color, #1e2a38)));
    --a4w-recipe-ink-h2:   var(--h2-color, var(--foodex-navy, var(--bs-heading-color, #1e2a38)));
    --a4w-recipe-ink-body: var(--text-color, var(--foodex-navy, var(--bs-heading-color, #1e2a38)));
    --a4w-recipe-ink-link: var(--link-color, var(--foodex-navy, var(--bs-heading-color, #1e2a38)));
    /* Un alias par metier ; le repli en cascade (bs-primary, foodex-orange)
       est conserve tel quel sur chacun : le module tourne aussi sur foodexv2. */
    --a4w-recipe-ink-accent: var(--accent-ink-color, var(--bs-primary, var(--foodex-orange, #f58840)));
    --a4w-recipe-ink-title: var(--h3-color, var(--bs-primary, var(--foodex-orange, #f58840)));
    --a4w-recipe-action-bg: var(--btn-primary-bg, var(--bs-primary, var(--foodex-orange, #f58840)));
    --a4w-recipe-outline: var(--btn-secondary-color, var(--bs-primary, var(--foodex-orange, #f58840)));
    --a4w-recipe-color-primary-hover: var(--foodex-orange-hover, #e5732c);
    --a4w-recipe-color-dark:         var(--foodex-navy, var(--bs-dark, #1e2a38));
    --a4w-recipe-color-dark-hover:   var(--foodex-navy-hover, #2c3e54);
    --a4w-recipe-color-on-dark:      var(--bs-white, #fff);

    --a4w-recipe-radius-sm:    var(--foodex-radius-sm, 6px);
    --a4w-recipe-radius-md:    var(--foodex-radius-md, 12px);
    --a4w-recipe-radius-lg:    var(--foodex-radius-lg, 20px);
    --a4w-recipe-radius-pill:  var(--foodex-radius-full, 999px);

    --a4w-recipe-shadow-sm:    var(--foodex-shadow-sm, 0 2px 6px rgba(0,0,0,.05));
    --a4w-recipe-shadow-md:    var(--foodex-shadow-md, 0 8px 24px rgba(0,0,0,.08));
    --a4w-recipe-shadow-lg:    var(--foodex-shadow-lg, 0 16px 40px rgba(0,0,0,.12));

    /* 1.8.0 — page recette et bloc « Recettes avec ce produit » : vocabulaire theme_a4w (encre 3,
       crème, rose des fonds, or de texte, filet) avec repli sur les jetons déjà définis ci-dessus. */
    --a4w-recipe-color-rule:      var(--border-color, var(--a4w-recipe-color-border));
    --a4w-recipe-color-cream:     var(--light-bg, var(--a4w-recipe-color-surface));
    --a4w-recipe-color-caption:   var(--muted-color, var(--a4w-recipe-color-text-muted));
    --a4w-recipe-color-panel:     var(--tertiary-color, var(--a4w-recipe-color-surface));
    --a4w-recipe-color-gold-rule: var(--link-decoration-color, currentColor);
    --a4w-recipe-ink-gold:        var(--accent-text-color, var(--a4w-recipe-ink-accent));
    --a4w-recipe-alert:           var(--alert-warning-color, #8a5a00);
    --a4w-recipe-alert-bg:        var(--alert-warning-bg-color, #fbf4e6);
    --a4w-recipe-radius-theme:    var(--border-radius, var(--foodex-radius-sm, 6px));

    --a4w-recipe-font-title:   var(--font-family-title, var(--foodex-font-title, var(--bs-body-font-family, "Inter", sans-serif)));
    --a4w-recipe-font-body:    var(--font-family-base, var(--foodex-font-body, var(--bs-body-font-family, "Inter", sans-serif)));
}

/* ──────────────────────────────────────────────
 * 1. Common / Shared
 * ────────────────────────────────────────────── */

.a4w-icon {
    flex-shrink: 0;
    vertical-align: middle;
}

.a4w-tag {
    display: inline-block;
    color: var(--a4w-recipe-color-on-dark);
    font-size: 0.75rem;
    line-height: 1;
    padding: 4px 10px;
    border-radius: var(--a4w-recipe-radius-pill);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: uppercase;
    background: var(--a4w-recipe-color-text-muted);
}

/* Buttons */
.a4w-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid transparent;
    border-radius: var(--a4w-recipe-radius-pill);
    padding: 12px 28px;
    font-family: var(--a4w-recipe-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}

.a4w-btn--dark,
.a4w-btn--primary {
    background: var(--a4w-recipe-color-dark);
    color: var(--a4w-recipe-color-on-dark);
    border-color: var(--a4w-recipe-color-dark);
}

.a4w-btn--dark:hover,
.a4w-btn--primary:hover {
    background: var(--a4w-recipe-color-dark-hover);
    border-color: var(--a4w-recipe-color-dark-hover);
    color: var(--a4w-recipe-color-on-dark);
    transform: translateY(-1px);
    box-shadow: var(--a4w-recipe-shadow-md);
}

.a4w-btn--outline {
    background: var(--a4w-recipe-color-bg);
    color: var(--a4w-recipe-color-text);
    border-color: var(--a4w-recipe-color-border);
}

.a4w-btn--outline:hover {
    border-color: var(--a4w-recipe-color-dark);
    background: var(--a4w-recipe-color-bg);
    color: var(--a4w-recipe-color-text);
}

.a4w-btn--outline-primary {
    background: var(--a4w-recipe-color-bg);
    color: var(--a4w-recipe-outline);
    border-color: var(--a4w-recipe-outline);
}

.a4w-btn--outline-primary:hover {
    background: var(--a4w-recipe-action-bg);
    color: var(--btn-primary-color, #fff);
    border-color: var(--a4w-recipe-action-bg);
    transform: translateY(-1px);
    box-shadow: var(--a4w-recipe-shadow-md);
}

.a4w-btn svg {
    flex-shrink: 0;
}

/* Collapse component */
.a4w-collapse__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    gap: 12px;
}

.a4w-collapse__trigger:hover {
    opacity: 0.8;
}

.a4w-collapse__chevron {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--a4w-recipe-color-text-muted);
}

.a4w-collapse__trigger[aria-expanded="false"] .a4w-collapse__chevron {
    transform: rotate(-90deg);
}

.a4w-collapse__content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* ──────────────────────────────────────────────
 * 2. Recipe Card (.a4w-recipe-card)
 * Base = listing/produit. Variante --home = page d'accueil.
 * ────────────────────────────────────────────── */

.a4w-recipe-card {
    background: var(--a4w-recipe-color-bg);
    border-radius: var(--a4w-recipe-radius-md);
    overflow: hidden;
    box-shadow: var(--a4w-recipe-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.a4w-recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--a4w-recipe-shadow-md);
}

.a4w-recipe-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.a4w-recipe-card__link:hover {
    color: inherit;
    text-decoration: none;
}

/* Image wrapper – 4:3 ratio */
.a4w-recipe-card__image-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--a4w-recipe-color-surface) 0%, var(--a4w-recipe-color-surface-alt) 100%);
}

@supports not (aspect-ratio: 4 / 3) {
    .a4w-recipe-card__image-wrapper {
        padding-top: 75%;
    }
    .a4w-recipe-card__image-wrapper .a4w-recipe-card__image {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.a4w-recipe-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.a4w-recipe-card:hover .a4w-recipe-card__image {
    transform: scale(1.06);
}

.a4w-recipe-card__image--placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--a4w-recipe-color-surface-alt) 0%, var(--a4w-recipe-color-border) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.a4w-recipe-card__image--placeholder::after {
    content: '';
    width: 48px;
    height: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.5;
}

/* Tags overlay on image */
.a4w-recipe-card__tags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

/* Body */
.a4w-recipe-card__body {
    padding: 18px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.a4w-recipe-card__title {
    font-family: var(--h3-font-family, var(--a4w-recipe-font-title));
    font-size: var(--font-size-h3, 1.1rem);
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.3;
    /* Toujours ink-h2, meme rendu en h3/a par le gabarit : dans une grille de
       cartes, un titre qui changerait de couleur selon la balise serait
       incoherent a l'oeil — l'uniformite prime ici sur la fidelite au niveau. */
    color: var(--a4w-recipe-ink-h2);
}

.a4w-recipe-card__title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.a4w-recipe-card__title-link:hover {
    color: var(--a4w-recipe-ink-accent);
    text-decoration: none;
}

.a4w-recipe-card__meta {
    display: flex;
    flex-direction: row;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--a4w-recipe-color-text-muted);
    margin-bottom: 10px;
    align-items: center;
}

/* .__time est la classe réellement posée par _recipe_card.tpl ; .__meta-item
   sert au listing. Les deux alignent icône et libellé sur la même ligne. */
.a4w-recipe-card__meta-item,
.a4w-recipe-card__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.a4w-recipe-card__meta-item svg,
.a4w-recipe-card__time svg {
    color: var(--a4w-recipe-color-text-muted);
    flex-shrink: 0;
}

.a4w-recipe-card__description {
    font-size: 0.85rem;
    color: var(--a4w-recipe-color-text-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 auto;
}

.a4w-recipe-card__cta {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--a4w-recipe-color-text);
    transition: color 0.2s ease;
}

.a4w-recipe-card__cta::after {
    content: ' \2192';
    transition: transform 0.2s ease;
    display: inline-block;
}

.a4w-recipe-card:hover .a4w-recipe-card__cta {
    color: var(--a4w-recipe-ink-accent);
}

.a4w-recipe-card:hover .a4w-recipe-card__cta::after {
    transform: translateX(4px);
}

/* Home variant – image en haut sans bord arrondi, body gris clair centré */
.a4w-recipe-card--home {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.a4w-recipe-card--home:hover {
    transform: none;
    box-shadow: none;
}

.a4w-recipe-card--home .a4w-recipe-card__image-wrapper {
    border-radius: 0;
    overflow: hidden;
}

.a4w-recipe-card--home .a4w-recipe-card__body {
    background: var(--a4w-recipe-color-surface);
    padding: 28px 26px 32px;
    text-align: center;
    align-items: center;
    gap: 14px;
}

.a4w-recipe-card--home .a4w-recipe-card__title {
    font-size: var(--font-size-h3, 1.25rem);
    line-height: 1.25;
    margin: 0;
    max-width: 16ch;
}

.a4w-recipe-card--home .a4w-recipe-card__description {
    margin: 0;
    max-width: 32ch;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* Réserve toujours 3 lignes (line-height 1.55) pour que la meta
       reste alignée d'une carte à l'autre, quelle que soit la longueur. */
    min-height: calc(3 * 1.55em);
}

.a4w-recipe-card--home .a4w-recipe-card__action {
    margin-top: 4px;
    padding: 12px 32px;
}

/* ──────────────────────────────────────────────
 * 3. Listing Page (.a4w-recipes)
 * ────────────────────────────────────────────── */

.a4w-recipes {
    padding: 20px 0 40px;
}

.a4w-recipes__title {
    font-family: var(--h2-font-family, var(--a4w-recipe-font-title));
    font-size: var(--font-size-h2, 1.6rem);
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--a4w-recipe-ink-h1);
}

.a4w-recipes__count {
    font-size: 0.9rem;
    color: var(--a4w-recipe-color-text-muted);
    margin: 0 0 24px;
}

.a4w-recipes__empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--a4w-recipe-color-text-muted);
    font-size: 1rem;
}

.a4w-recipes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    list-style: none;
    margin: 0;
}

@media (max-width: 992px) {
    .a4w-recipes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .a4w-recipes-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ──────────────────────────────────────────────
 * 4. Homepage Carousel (.a4w-home-recipes)
 * ────────────────────────────────────────────── */

.a4w-home-recipes {
    padding: 70px 0;
    position: relative;
}

/* En-tête : titre à gauche, lien « toutes nos recettes » et flèches
   à droite. Le markup porte .__tools / .__arrows depuis l'origine, mais aucune
   règle ne les plaçait : l'en-tête retombait sur l'empilement centré prévu pour
   l'ancien markup (sous-titre / titre / intro), aujourd'hui absent des .tpl. */
.a4w-home-recipes__header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 16px 24px;
    margin-bottom: 48px;
}

.a4w-home-recipes__subtitle {
    font-family: var(--a4w-recipe-font-body);
    font-size: var(--font-size-small, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--a4w-recipe-ink-title);
    margin: 0;
}

.a4w-home-recipes__title {
    font-family: var(--h2-font-family, var(--a4w-recipe-font-title));
    font-size: var(--font-size-h2, clamp(2rem, 4vw, 3rem));
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
    color: var(--a4w-recipe-ink-h2);
}

.a4w-home-recipes__intro {
    font-family: var(--a4w-recipe-font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--a4w-recipe-color-text-muted);
    max-width: 640px;
    margin: 8px 0 0;
}

.a4w-home-recipes__view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--a4w-recipe-color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.a4w-home-recipes__view-all:hover {
    color: var(--a4w-recipe-ink-accent);
    text-decoration: none;
}

/* Colonne de droite de l'en-tête : lien de repli puis flèches du carrousel. */
.a4w-home-recipes__tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.a4w-home-recipes__arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Le carrousel n'héberge plus que le swiper : les flèches vivent dans l'en-tête. */
.a4w-home-recipes__carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.a4w-home-recipes__swiper {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.a4w-home-recipes__swiper .swiper-slide {
    height: auto;
    display: flex;
}

/* Flèches de navigation — dans l'en-tête, à droite du lien. Le fond transparent
   d'origine les rendait invisibles hors survol une fois sorties du carrousel :
   un liseré les matérialise. */
.a4w-home-recipes__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--a4w-recipe-color-bg);
    border: 1px solid var(--a4w-recipe-color-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--a4w-recipe-color-text-muted);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.a4w-home-recipes__nav:hover {
    color: var(--a4w-recipe-color-dark);
    background: var(--a4w-recipe-color-surface);
    border-color: var(--a4w-recipe-color-dark);
}

.a4w-home-recipes__nav:active {
    transform: scale(0.95);
}

.a4w-home-recipes__nav.swiper-button-disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

.a4w-home-recipes__nav::after {
    display: none;
}

/* Bottom CTA */
.a4w-home-recipes__cta-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.a4w-home-recipes__cta {
    padding: 14px 36px;
}

/* ──────────────────────────────────────────────
 * 5. Product Page Recipe Block (.a4w-product-recipes) — « Recettes avec ce produit »
 *    Cartes sans surlignage : au survol, seule l'image s'estompe. Grille sans script.
 * ────────────────────────────────────────────── */

.a4w-product-recipes {
    margin-top: 96px;
}

@media (max-width: 767.98px) {
    .a4w-product-recipes {
        margin-top: 64px;
    }
}

.a4w-product-recipes__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
}

.a4w-product-recipes__title {
    margin: 0;
    font-family: var(--h2-font-family, var(--a4w-recipe-font-title));
    font-size: var(--font-size-h2, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--a4w-recipe-ink-h2);
}

.a4w-product-recipes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 24px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.a4w-product-recipes__item {
    min-width: 0;
}

.a4w-product-recipe {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--a4w-recipe-ink-body);
    text-decoration: none;
}

.a4w-product-recipe:hover,
.a4w-product-recipe:hover * {
    color: var(--a4w-recipe-ink-body);
    text-decoration: none;
}

.a4w-product-recipe:focus-visible {
    outline: 2px solid var(--a4w-recipe-ink-body);
    outline-offset: 3px;
    border-radius: var(--a4w-recipe-radius-theme);
}

.a4w-product-recipe__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--a4w-recipe-radius-theme);
    background: var(--a4w-recipe-color-cream);
}

.a4w-product-recipe__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.a4w-product-recipe:hover .a4w-product-recipe__image img {
    opacity: 0.88;
}

.a4w-product-recipe__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
}

.a4w-product-recipe__name {
    font-family: var(--a4w-recipe-font-title);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
}

.a4w-product-recipe__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--a4w-recipe-color-text-muted);
}

.a4w-product-recipe__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 0.875rem;
    color: var(--a4w-recipe-color-text-muted);
}

.a4w-product-recipe__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .a4w-product-recipe__image img {
        transition: none;
    }
}

/* ──────────────────────────────────────────────
 * 6. Detail Page (.a4w-detail)
 * ────────────────────────────────────────────── */

.a4w-detail {
    margin: 0 auto;
    padding: 24px 0 60px;
}

/* --- 6a. En-tête — informations à gauche (5/11), image 4:3 à droite (6/11) --- */

.a4w-detail__hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
    align-items: center;
    margin-bottom: 80px;
}

.a4w-detail__hero-info {
    min-width: 0;
}

.a4w-detail__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--a4w-recipe-color-caption);
    margin-bottom: 8px;
}

.a4w-detail__title {
    font-family: var(--h1-font-family, var(--a4w-recipe-font-title));
    font-size: var(--font-size-h1, clamp(2.2rem, 4vw, 3.1rem));
    font-weight: 600;
    line-height: 1.15;
    margin: 12px 0 0;
    color: var(--a4w-recipe-ink-h1);
}

/* Titres et textes saisis : un mot sans coupe ne doit jamais élargir la page */
.a4w-detail__title,
.a4w-detail__author,
.a4w-detail__description,
.a4w-ingredients__name,
.a4w-steps__item,
.a4w-detail__info-box,
.a4w-detail__tip {
    overflow-wrap: anywhere;
}

/* Signature : « Recette de Christophe Gumuche » + qualité */
.a4w-detail__author {
    margin: 20px 0 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--a4w-recipe-color-text-muted);
}

.a4w-detail__author-link,
.a4w-detail__author-name {
    color: var(--a4w-recipe-ink-body);
    font-weight: 600;
}

.a4w-detail__author-link {
    text-decoration: underline;
    text-decoration-color: var(--a4w-recipe-color-gold-rule);
    text-underline-offset: 4px;
}

.a4w-detail__author-link:hover {
    color: var(--a4w-recipe-ink-body);
    text-decoration-thickness: 2px;
}

.a4w-detail__author-link:focus-visible {
    outline: 2px solid var(--a4w-recipe-ink-body);
    outline-offset: 3px;
    border-radius: var(--a4w-recipe-radius-theme);
}

.a4w-detail__author-role {
    display: block;
    font-size: 0.8125rem;
    color: var(--a4w-recipe-color-caption);
}

/* Temps et difficulté : valeur en Gelasio au-dessus, légende dessous, pictogramme à gauche */
.a4w-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: 28px 0 0;
}

.a4w-detail__meta-item {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    color: var(--a4w-recipe-ink-gold);
}

.a4w-detail__meta-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-shrink: 0;
}

.a4w-detail__meta-label {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--a4w-recipe-color-caption);
}

.a4w-detail__meta-value {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-family: var(--a4w-recipe-font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--a4w-recipe-ink-body);
}

.a4w-detail__meta-item--difficulty {
    grid-template-columns: auto;
}

.a4w-detail__meta-item--difficulty .a4w-detail__meta-label,
.a4w-detail__meta-item--difficulty .a4w-detail__meta-value {
    grid-column: 1;
}

/* Le libellé de difficulté s'aligne sur la taille de valeur du hero */
.a4w-detail__meta .a4w-difficulty__label {
    font-size: 1.0625rem;
}

.a4w-detail__meta .a4w-difficulty__stick {
    height: 20px;
}

/* ─── Difficulté (3 repères) : repères pleins à l'encre, vides au filet ─── */
.a4w-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.a4w-difficulty__sticks {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 0;
}

/* Le repère est une forme CSS : aucun glyphe, donc rien de propre à un thème.
   Le niveau reste lisible par le nombre de repères pleins (.is-active) et par le libellé. */
.a4w-difficulty__stick {
    display: block;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--a4w-recipe-color-rule);
}

.a4w-difficulty__stick.is-active {
    background: var(--a4w-recipe-ink-body);
}

.a4w-difficulty__label {
    font-family: var(--a4w-recipe-font-title);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--a4w-recipe-ink-body);
    line-height: 1.2;
}

/* Compact variant — recipe cards (listing, home carousel, fiche produit) */
.a4w-difficulty--compact {
    gap: 6px;
}

.a4w-difficulty--compact .a4w-difficulty__label {
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}

/* Texte d'introduction */
.a4w-detail__description {
    margin-top: 28px;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--a4w-recipe-color-text-muted);
}

.a4w-detail__description p {
    margin: 0 0 12px;
}

.a4w-detail__description p:last-child {
    margin-bottom: 0;
}

/* Bouton d'achat : le style est celui du bouton d'achat du thème (.btn.btn-primary) ; le
   module ne pose que la mise en page (icône + libellé, retour à la ligne propre). */
.a4w-detail__actions {
    margin-top: 32px;
}

.a4w-detail__actions .btn,
.a4w-detail__courses-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    text-align: center;
}

.a4w-detail__actions-note {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: var(--a4w-recipe-color-caption);
}

.a4w-detail__actions-link {
    color: var(--a4w-recipe-color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.a4w-detail__actions-link:focus-visible {
    outline: 2px solid var(--a4w-recipe-ink-body);
    outline-offset: 3px;
}

/* Image : 4:3, coins du thème */
.a4w-detail__hero-image-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--a4w-recipe-color-cream);
    border-radius: var(--a4w-recipe-radius-theme);
    width: 100%;
    aspect-ratio: 4 / 3;
}

.a4w-detail__hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.a4w-detail__hero-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--a4w-recipe-color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.a4w-detail__hero-placeholder::after {
    content: '';
    width: 64px;
    height: 64px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.6;
}

/* Les tags reprennent .a4w-tag (pastille des cartes) : ce conteneur ne gère plus que le
   positionnement en surimpression de l'image. */
.a4w-detail__tags {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 2;
}

/* --- 6b. Corps — ingrédients et informations à gauche (5/11), panneau rose à droite (6/11) --- */

.a4w-detail__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
    align-items: start;
    margin-bottom: 96px;
}

/* Pas de déroulé ni de conseil : la colonne ingrédients occupe toute la largeur */
.a4w-detail__body--single {
    grid-template-columns: minmax(0, 1fr);
}

.a4w-detail__main {
    min-width: 0;
}

.a4w-detail__section {
    margin-bottom: 40px;
}

/* Titre de bloc (Ingrédients / Déroulé de la recette) */
.a4w-detail__heading {
    margin: 0;
    font-family: var(--h2-font-family, var(--a4w-recipe-font-title));
    font-size: var(--font-size-h3, 1.35rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--a4w-recipe-ink-h2);
}

.a4w-detail__heading--on-panel {
    color: var(--a4w-recipe-ink-body);
}

.a4w-detail__yield {
    margin: 6px 0 0;
    color: var(--a4w-recipe-color-text-muted);
}

/* --- 6c. Ingrédients : une ligne par ingrédient, filets --- */

.a4w-ingredients {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    border-top: 1px solid var(--a4w-recipe-color-rule);
}

.a4w-ingredients__item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid var(--a4w-recipe-color-rule);
    line-height: 1.5;
    color: var(--a4w-recipe-color-text);
}

.a4w-ingredients__qty {
    display: inline-block;
    min-width: 84px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.a4w-ingredients__name {
    min-width: 0;
    color: var(--a4w-recipe-color-text);
}

/* Ingrédient lié à un produit du site : encre, souligné or */
.a4w-ingredients__product-link {
    color: var(--a4w-recipe-ink-body);
    text-decoration: underline;
    text-decoration-color: var(--a4w-recipe-color-gold-rule);
    text-underline-offset: 4px;
}

.a4w-ingredients__product-link:hover {
    color: var(--a4w-recipe-ink-body);
    text-decoration-thickness: 2px;
}

.a4w-ingredients__product-link:focus-visible {
    outline: 2px solid var(--a4w-recipe-ink-body);
    outline-offset: 3px;
    border-radius: var(--a4w-recipe-radius-theme);
}

/* --- 6d. Encadré crème : allergènes, cuisson, conservation (texte, sans pictogramme) --- */

.a4w-detail__info-box {
    margin-top: 32px;
    padding: 24px;
    background: var(--a4w-recipe-color-cream);
    border-radius: var(--a4w-recipe-radius-theme);
    font-size: 0.9375rem;
    color: var(--a4w-recipe-ink-body);
}

.a4w-detail__info-block + .a4w-detail__info-block {
    margin-top: 20px;
}

.a4w-detail__info-box-label {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--a4w-recipe-color-caption);
}

.a4w-detail__info-line {
    margin: 0 0 4px;
}

.a4w-detail__info-box-note {
    margin: 10px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--a4w-recipe-color-caption);
}

/* Allergènes : étiquettes d'alerte */
.a4w-allergens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.a4w-allergens__item {
    padding: 5px 10px;
    border: 1px solid var(--a4w-recipe-alert);
    border-radius: var(--a4w-recipe-radius-theme);
    background: var(--a4w-recipe-alert-bg);
    color: var(--a4w-recipe-alert);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* --- 6e. Panneau rose : déroulé de la recette + conseil gourmand --- */

.a4w-detail__steps-panel {
    padding: 40px;
    min-width: 0;
    background: var(--a4w-recipe-color-panel);
    border-radius: var(--a4w-recipe-radius-theme);
    color: var(--a4w-recipe-color-text-muted);
}

/* Étapes numérotées 01, 02… en Gelasio or (texte), non italique */
.a4w-steps {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    counter-reset: step-counter;
}

.a4w-steps__item {
    counter-increment: step-counter;
    position: relative;
    padding: 0 0 24px 56px;
    line-height: 1.7;
    color: var(--a4w-recipe-color-text-muted);
}

.a4w-steps__item::before {
    content: counter(step-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -2px;
    font-family: var(--a4w-recipe-font-title);
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--a4w-recipe-ink-gold);
}

.a4w-steps__title {
    color: var(--a4w-recipe-ink-body);
}

/* Conseil gourmand : carte blanche dans le panneau rose (maquette Recette) */
.a4w-detail__tip {
    margin-top: 8px;
    padding: 24px;
    background: var(--a4w-recipe-color-bg);
    border-radius: var(--a4w-recipe-radius-theme);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--a4w-recipe-color-text-muted);
}

.a4w-detail__tip-title {
    margin: 0 0 10px;
    font-family: var(--h3-font-family, var(--a4w-recipe-font-title));
    font-size: var(--font-size-h4, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--a4w-recipe-ink-body);
}

.a4w-detail__tip-content p {
    margin: 0 0 6px;
}

.a4w-detail__tip-content p:last-child {
    margin-bottom: 0;
}

.a4w-detail__tip-content strong {
    color: var(--a4w-recipe-ink-body);
}

/* --- 6f. Votre liste de courses : cartes produit du thème + bloc d'ajout groupé --- */

.a4w-detail__products-section {
    margin-bottom: 40px;
    scroll-margin-top: 120px;
}

.a4w-detail__products-title {
    margin: 0;
    font-family: var(--h2-font-family, var(--a4w-recipe-font-title));
    font-size: var(--font-size-h2, clamp(1.6rem, 3vw, 2.2rem));
    font-weight: 600;
    line-height: 1.2;
    color: var(--a4w-recipe-ink-h2);
}

/* Grille de quatre colonnes de la maquette : les cartes, puis le bloc d'ajout sur deux colonnes juste
   après (avant 1.8.2, la liste prenait toute la largeur et repoussait le bloc au bord droit). La
   liste et la rangée du thème s'effacent : chaque carte devient une case de la grille. */
.a4w-detail__courses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
    margin-top: 32px;
}

.a4w-detail__courses-list,
.a4w-detail__courses-list > .products {
    display: contents;
}

.a4w-detail__courses-list > .products > * {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.a4w-detail__courses-cta {
    grid-column: span 2;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-left: 32px;
    border-left: 1px solid var(--a4w-recipe-color-rule);
}

.a4w-detail__courses-count,
.a4w-detail__courses-note {
    margin: 0;
}

.a4w-detail__courses-count {
    font-size: 0.875rem;
    color: var(--a4w-recipe-color-text-muted);
}

.a4w-detail__courses-note {
    font-size: 0.8125rem;
    color: var(--a4w-recipe-color-caption);
}

/* Responsive de la page recette (points de rupture du thème) */
@media (max-width: 991.98px) {
    .a4w-detail__hero,
    .a4w-detail__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* Photo d'abord, puis le texte */
    .a4w-detail__hero-image-wrapper {
        order: -1;
    }

    .a4w-detail__hero {
        margin-bottom: 48px;
    }

    .a4w-detail__body {
        margin-bottom: 64px;
    }

    .a4w-detail__courses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .a4w-detail__courses-cta {
        grid-column: 1 / -1;
        max-width: none;
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid var(--a4w-recipe-color-rule);
    }
}

@media (max-width: 767.98px) {
    .a4w-detail {
        padding: 16px 0 40px;
    }

    .a4w-detail__steps-panel {
        padding: 24px 20px;
    }

    .a4w-steps__item {
        padding-left: 46px;
    }

    .a4w-detail__info-box {
        padding: 20px;
    }

    .a4w-detail__actions .btn,
    .a4w-detail__courses-cta .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* ──────────────────────────────────────────────
 * 7. Add all to cart button
 *    Style du bouton : celui du thème (.btn.btn-primary, achat). Le module ne gère que les
 *    états « envoi en cours » et le lien de connexion.
 * ────────────────────────────────────────────── */

/* Login prompt shown in place of the cart button for groups that must sign in */
.a4w-add-all-to-cart-login,
.a4w-add-all-to-cart-login:hover {
    text-decoration: none;
}

.a4w-add-all-to-cart:disabled,
.a4w-add-all-to-cart--loading {
    opacity: 0.65;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .a4w-add-all-to-cart--loading {
        opacity: 0.8;
    }
}

/* ──────────────────────────────────────────────
 * 8. Pagination
 * ────────────────────────────────────────────── */

.a4w-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 36px 0 10px;
    margin: 0;
}

.a4w-pagination__list {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.a4w-pagination__item {
    display: inline-block;
}

.a4w-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--a4w-recipe-color-text);
    text-decoration: none;
    border: 1px solid var(--a4w-recipe-color-border);
    border-radius: var(--a4w-recipe-radius-sm);
    background: var(--a4w-recipe-color-bg);
    transition: all 0.2s ease;
}

.a4w-pagination__link:hover {
    background: var(--a4w-recipe-color-surface);
    border-color: var(--a4w-recipe-color-dark);
    color: var(--a4w-recipe-color-dark);
    text-decoration: none;
}

.a4w-pagination__item--active .a4w-pagination__link,
.a4w-pagination__link--current {
    background: var(--a4w-recipe-color-dark);
    color: var(--a4w-recipe-color-on-dark);
    border-color: var(--a4w-recipe-color-dark);
    pointer-events: none;
    font-weight: 600;
}

.a4w-pagination__item--disabled .a4w-pagination__link {
    opacity: 0.35;
    pointer-events: none;
}

/* ──────────────────────────────────────────────
 * 9. Toast notification
 * ────────────────────────────────────────────── */

.a4w-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 380px;
    padding: 16px 22px;
    background: var(--a4w-recipe-color-dark);
    color: var(--a4w-recipe-color-on-dark);
    border-radius: var(--a4w-recipe-radius-md);
    font-size: 0.9rem;
    line-height: 1.45;
    box-shadow: var(--a4w-recipe-shadow-lg);
    z-index: 99999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.a4w-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.a4w-toast--success {
    background: var(--bs-success, #27ae60);
}

.a4w-toast--error {
    background: var(--bs-danger, #e74c3c);
}

.a4w-toast--warning {
    background: var(--bs-warning, #e67e22);
    /* Bandeau d'alerte, pas un titre : sur ce fond ambre plutôt clair, il faut
       une encre sombre lisible — le même rôle que le texte courant, pas une
       couleur de niveau qui pourrait diverger de ce que porte le reste du
       message. */
    color: var(--a4w-recipe-ink-body);
}

/* ──────────────────────────────────────────────
 * 10. Responsive (carrousel d'accueil, cartes, listing). Les règles de la page recette
 *     sont en fin de section 6, aux points de rupture du thème.
 * ────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .a4w-home-recipes {
        padding: 40px 0;
    }

    .a4w-home-recipes__header {
        margin-bottom: 32px;
    }

    .a4w-home-recipes__carousel {
        gap: 4px;
    }

    .a4w-home-recipes__nav {
        width: 36px;
        height: 36px;
    }

    .a4w-recipe-card--home .a4w-recipe-card__body {
        padding: 22px 20px 26px;
    }

    .a4w-recipe-card--home .a4w-recipe-card__title {
        font-size: var(--font-size-h3, 1.1rem);
    }
}

@media (max-width: 575.98px) {
    .a4w-recipe-card__body {
        padding: 14px 16px 18px;
    }

    .a4w-home-recipes__header {
        gap: 12px;
    }

    .a4w-home-recipes__tools {
        width: 100%;
        justify-content: space-between;
    }

    .a4w-home-recipes__cta-wrapper {
        margin-top: 32px;
    }

    .a4w-btn {
        width: 100%;
        justify-content: center;
    }
}