/*
 * Blocs génériques de l’éditeur (bb-*) et enveloppe des sections — communs à
 * TOUS les thèmes. Repris de themes/zummi/builder.css, que plus aucun gabarit
 * ne chargeait : ces blocs s’affichaient sans mise en forme sur la vitrine.
 */

/* ------------------------------------------------ enveloppe et apparence */

.builder-section {
    position: relative;
}

.builder-section__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.builder-section__inner {
    position: relative;
    z-index: 2;
}

/* Recolorer le texte doit emporter les titres, sinon le thème reprend la main. */
.builder-section--recolor,
.builder-section--recolor h1,
.builder-section--recolor h2,
.builder-section--recolor h3,
.builder-section--recolor h4,
.builder-section--recolor h5,
.builder-section--recolor h6,
.builder-section--recolor p,
.builder-section--recolor li {
    color: inherit;
}

.builder-section--narrow .container { max-width: 760px; }
.builder-section--wide .container { max-width: 1560px; }
.builder-section--full .container { max-width: none; padding-inline: 24px; }

@media (min-width: 992px) {
    .builder-section--hide-desktop { display: none !important; }
}
@media (max-width: 991.98px) {
    .builder-section--hide-mobile { display: none !important; }
}

/* --------------------------------- édition directe (aperçu de l'éditeur seul) */

.is-builder-editable {
    outline: 1px dashed rgba(0, 0, 0, 0.25);
    outline-offset: 3px;
    cursor: text;
    border-radius: 2px;
    transition: outline-color 0.15s, background-color 0.15s;
}

.is-builder-editable:hover,
.is-builder-editable:focus {
    outline: 2px solid var(--rr-theme-primary, #b8860b);
    background-color: rgba(255, 255, 255, 0.06);
}

.is-builder-editable:focus {
    outline-style: solid;
}

.is-builder-editable-img {
    cursor: pointer;
    outline: 1px dashed rgba(0, 0, 0, 0.25);
    outline-offset: 3px;
    transition: outline-color 0.15s;
}

.is-builder-editable-img:hover {
    outline: 2px solid var(--rr-theme-primary, #b8860b);
}

/* ------------------------------------------------------- briques communes */

.bb {
    padding-block: 80px;
}

.bb__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rr-theme-primary, #b8860b);
}

.bb__title {
    margin-bottom: 20px;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.2;
}

.bb__title--small {
    font-size: clamp(18px, 2vw, 24px);
}

.bb__lead {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 28px;
    font-size: 17px;
    line-height: 1.7;
}

.bb__prose {
    font-size: 16px;
    line-height: 1.8;
}

.bb__prose > :last-child { margin-bottom: 0; }
.bb__prose ul, .bb__prose ol { padding-inline-start: 22px; }
.bb__prose a { color: var(--rr-theme-primary, #b8860b); text-decoration: underline; }

.bb__btn { margin-top: 28px; }

.bb__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.bb__btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
}

.bb__media {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

.bb__empty {
    padding: 32px;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    text-align: center;
    opacity: 0.75;
}

/* ------------------------------------------------------------------ blocs */

.bb-feature {
    height: 100%;
    padding: 28px 22px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.03);
    text-align: center;
}

.bb-feature img {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    object-fit: contain;
}

.bb-feature h6 { margin-bottom: 8px; }

.bb__accordion .accordion-item {
    margin-bottom: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.bb__accordion .accordion-button {
    font-size: 16px;
    font-weight: 600;
}

.bb__accordion .accordion-button:not(.collapsed) {
    color: var(--rr-theme-primary, #b8860b);
    background: rgba(0, 0, 0, 0.03);
    box-shadow: none;
}

.bb-gallery__item { margin: 0; }

.bb-gallery__item img {
    width: 100%;
    height: 260px;
    border-radius: 12px;
    object-fit: cover;
}

.bb-gallery__item figcaption {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.75;
}

.bb-video__frame {
    position: relative;
    max-width: 960px;
    margin-inline: auto;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

.bb-video__frame--16-9 { aspect-ratio: 16 / 9; }
.bb-video__frame--4-3 { aspect-ratio: 4 / 3; }
.bb-video__frame--9-16 { aspect-ratio: 9 / 16; max-width: 420px; }

.bb-video__frame iframe,
.bb-video__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bb-logos__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.bb-logos__row img {
    max-width: 140px;
    max-height: 56px;
    object-fit: contain;
}

.bb-logos__row.is-gray img {
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.2s, opacity 0.2s;
}

.bb-logos__row.is-gray img:hover {
    filter: none;
    opacity: 1;
}

.bb-countdown__clock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
}

.bb-countdown__unit {
    min-width: 92px;
    padding: 18px 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.05);
}

.bb-countdown__value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bb-countdown__label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
}

.bb-countdown__over {
    font-size: 18px;
    font-weight: 600;
}

.bb-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 560px;
    margin-inline: auto;
}

.bb-newsletter__form input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    font-size: 15px;
}

.bb-newsletter__consent {
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.7;
}

.bb-spacer {
    display: flex;
    align-items: center;
}

.bb-spacer__divider {
    width: 100%;
    margin: 0;
    opacity: 1;
    border-top-width: 1px;
    border-top-style: solid;
}

.bb-html { padding-block: 40px; }

/* ==========================================================================
   Cartes produit — présentation des visuels détourés
   ==========================================================================

   Le thème a été conçu pour des photos de plats en pleine largeur. Nos visuels
   sont des packshots détourés sur fond transparent, et trois de ses partis pris
   les desservent :

     1. La zone d'image n'a pas de hauteur fixe. Chaque produit ayant son propre
        format, la grille devient irrégulière et le bas des pots est rogné par le
        bloc de texte.
     2. Le survol pose un voile sombre SUR le produit et l'agrandit de 10 %.
        Sur une photo de plat c'est un effet ; sur un pot détouré, cela salit la
        couleur du miel et fait déborder le verre hors du cadre.
     3. Le fond est un gris plat. Un objet détouré posé dessus paraît flotter
        sans poids — il lui faut une ombre au sol et une lumière.

   Tout est écrit ici, jamais dans `main.css` : une mise à jour du thème ne doit
   pas emporter ce travail.
   ------------------------------------------------------------------------ */

.featured-product__item {
    /* Ambiance chaude plutôt que gris neutre : le miel y gagne, et le blanc du
       bloc de texte en dessous ressort mieux. */
    background: linear-gradient(180deg, #FBF7F1 0%, #F4EDE3 100%);
    border-radius: 14px;
    min-height: 0;                 /* la hauteur vient désormais du contenu réel */
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}


.featured-product__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(90, 55, 20, .45);
}

/* --------------------------------------------------------------- la scène */

.featured-product__media {
    position: relative;
    /* Rapport fixe : toutes les cartes s'alignent, quelle que soit l'image. */
    aspect-ratio: 1 / 1;
    padding: 26px 26px 30px;
    overflow: hidden;
}

/* Halo de lumière derrière le produit : lui donne un volume que le gris plat
   ne donnait pas. Sous l'image, jamais par-dessus. */
.featured-product__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 48% at 50% 42%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* Ombre portée au sol. Une ellipse floue, pas une ombre CSS sur l'image :
   un `box-shadow` suivrait le rectangle du fichier, pas le contour du pot. */
.featured-product__media::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 34px;
    width: 52%;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(92, 58, 24, .22);
    filter: blur(9px);
    transition: width .35s ease, opacity .35s ease;
    pointer-events: none;
}

.featured-product__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* `contain` et non `cover` : un packshot ne se recadre pas, il se pose.
       Rogner un pot pour remplir le cadre coupe le couvercle ou l'étiquette. */
    object-fit: contain;
    object-position: center;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
    /* Une ombre douce épouse le contour réel de l'objet détouré. */
    filter: drop-shadow(0 6px 10px rgba(80, 50, 20, .13));
}

/* Agrandissement discret : 10 % faisait sortir le pot de son cadre. */
.featured-product__item:hover .featured-product__media img {
    transform: scale(1.045) translateY(-4px);
}

.featured-product__item:hover .featured-product__media::after {
    width: 46%;
    opacity: .75;
}

/* --------------------------------------------------------------- le texte */

.featured-product__content {
    border: 0;
    border-top: 1px solid rgba(14, 20, 40, .08);
    padding: 18px 22px 20px;
    background: #fff;
}

.featured-product__content h6 {
    /* Deux lignes réservées : sans cela, un nom court et un nom long
       désalignent les prix d'une carte à l'autre. */
    min-height: 2.6em;
    line-height: 1.3;
    display: flex;
    align-items: center;
}

.featured-product__badge {
    border-radius: 999px;
    padding: 3px 12px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 4px 10px -4px rgba(173, 26, 25, .6);
}


/* ------------------------------------------------------- appel à l'action */

/* Sur un écran tactile il n'y a pas de survol : les boutons resteraient
   introuvables. Ils sont donc toujours visibles là où le pointeur est grossier. */
@media (hover: none) {
    .featured-product__action-btn {
        opacity: 1;
        transform: translate(-50%, 0);
        z-index: 1;
    }
}

/* ------------------------------------------------------- fiche produit ---
   Même logique que les cartes : le visuel principal est un objet posé, pas une
   photo à recadrer. On lui donne une scène plutôt qu'un cadre.
   ------------------------------------------------------------------------ */

.shop-details__thumb {
    position: relative;
    background: linear-gradient(180deg, #FBF7F1 0%, #F2EAE0 100%);
    border-radius: 18px;
    padding: 36px;
    overflow: hidden;
}

.shop-details__thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(56% 46% at 50% 40%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.shop-details__thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 52px;
    width: 48%;
    height: 20px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(92, 58, 24, .2);
    filter: blur(12px);
    pointer-events: none;
}

.shop-details__thumb img[data-main-image] {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(80, 50, 20, .16));
}

/* Les vignettes de la galerie sortent de la scène : elles servent à choisir,
   pas à contempler. Fond neutre et cadre net pour rester lisibles en petit. */
.shop-details__gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shop-details__gallery-item {
    width: 78px;
    height: 78px;
    padding: 8px;
    border: 1px solid rgba(14, 20, 40, .12);
    border-radius: 10px;
    background: #FBF7F1;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.shop-details__gallery-item:hover,
.shop-details__gallery-item[aria-current="true"] {
    border-color: var(--rr-theme-secondary, #FF9D24);
    transform: translateY(-2px);
}

.shop-details__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ------------------------------------------- bloc « meilleures ventes » ---
   Ce bloc ne contraint la taille de l'image nulle part : le thème est livré
   avec des vignettes d'environ 200 px, et l'objet débordait donc simplement de
   sa carte. Nos packshots font 1250 px de haut — le pot sortait du cadre par le
   haut et se faisait couper.

   L'intention du thème est conservée : le produit dépasse légèrement au-dessus
   de la carte. On borne seulement sa hauteur.
   ------------------------------------------------------------------------ */

.best-selling__item-media {
    position: relative;
    z-index: 1;
    height: 230px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.best-selling__item-media img {
    max-width: 78%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(80, 50, 20, .16));
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.best-selling__item:hover .best-selling__item-media img {
    transform: translateY(-6px) scale(1.04);
}

/* Ombre au sol, pour que le pot ne paraisse pas flotter au-dessus de la carte. */
.best-selling__item-media::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 44%;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(92, 58, 24, .18);
    filter: blur(8px);
    z-index: -1;
}

/* Les noms de produits font une ou deux lignes : sans hauteur réservée, les
   prix ne s'alignent plus d'une carte à l'autre. */
.best-selling__content h6 {
    min-height: 2.6em;
    line-height: 1.3;
}

/* -------------------------------------------------- bandeau de rubrique ---
   Les deux motifs flottants livrés avec le thème sont des piments et des
   feuilles de basilic : ils viennent d'un modèle de restaurant italien et
   n'ont rien à faire sur une boutique de miel. Masqués plutôt que supprimés,
   pour qu'une mise à jour du thème ne les fasse pas réapparaître à moitié.
   ------------------------------------------------------------------------ */


/* Le bandeau est désormais un dégradé de marque : l'image le remplit
   entièrement, sans déformation, quelle que soit la largeur de l'écran. */
.breadcrumb__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   Animations du thème — rétablies
   ==========================================================================

   En adaptant les cartes aux visuels détourés, j'avais supprimé trois
   animations d'origine. Elles sont remises ; seul ce qui les rendait
   inexploitables sur un packshot est corrigé.

   Le voile au survol est le cas intéressant. Le thème le pose PAR-DESSUS la
   carte, produit compris : sur une photo de plat l'effet est joli, sur un pot
   de miel il ternit la couleur du miel, qui est précisément l'argument de
   vente. On le renvoie donc DERRIÈRE le produit : le mouvement reste, le miel
   garde son éclat.
   ------------------------------------------------------------------------ */

.featured-product__item::before {
    /* Le thème l'anime en hauteur, de 0 à 100 % : on ne touche pas au mouvement. */
    z-index: 0;
    /* Voile chaud plutôt que bleu nuit, et sans « darken » qui salissait l'image. */
    background: linear-gradient(180deg, rgba(173, 26, 25, .16) 0%, rgba(255, 157, 36, .22) 100%);
    mix-blend-mode: normal;
}

/* Le produit et le texte repassent devant le voile. */
.featured-product__media img { z-index: 2; }
.featured-product__badge { z-index: 3; }

/* Agrandissement au survol : le thème monte à 1,1. Avec `contain` et le
   rembourrage de la scène, le pot a désormais la place de le supporter. */
.featured-product__item:hover .featured-product__media img {
    transform: scale(1.09) translateY(-4px);
}

/* Les formes flottantes du bandeau retrouvent leurs animations `upDown` et
   `zooming2`. Leur dessin reste celui du thème — piments et basilic — et se
   remplace par les motifs abeille et alvéole du cahier des charges. */
.breadcrumb__shape-1,
.breadcrumb__shape-2 {
    display: block;
}

/* -------------------------------------------------- fonds blancs parasites
   Le thème pose un fond blanc sur les balises `img` elles-mêmes. Avec des
   photos opaques, on ne le voit jamais : l'image le recouvre entièrement.
   Avec un visuel détouré, il apparaît — un rectangle blanc à angles vifs
   derrière chaque pot, qui annule tout le travail de mise en scène.

   Le défaut ne se voyait pas sur les anciennes photos : c'est l'arrivée des
   packshots transparents qui l'a révélé.
   ------------------------------------------------------------------------ */

.featured-product__media img,
.best-selling__item-media img,
.shop-details__thumb img,
.shop-details__gallery-item img,
.food-list__item__thumb img,
.our-collections__media img {
    background-color: transparent;
}

/* ==========================================================================
   Bannière miel — composition en deux temps
   ==========================================================================

   Fond crème à gauche pour le texte, panneau incurvé coloré à droite pour le
   produit. Le pot chevauche la courbe : c'est ce débordement qui donne sa
   profondeur à la composition, et c'est pour cela que le visuel doit être
   détouré.

   Tout est dessiné en CSS et en SVG — aucune image de décor à télécharger, et
   les couleurs suivent le réglage du bloc.
   ------------------------------------------------------------------------ */

.hh {
    position: relative;
    overflow: hidden;
    background: #FDF6EC;
    padding-block: clamp(48px, 7vw, 96px);
}

/* Le panneau : un grand disque décalé, dont seule la partie gauche est
   incurvée à l'écran. Un `border-radius` sur un rectangle donnerait un angle
   arrondi, pas cette courbe continue. */
.hh__panel {
    position: absolute;
    inset: 0 -18% 0 42%;
    background: var(--hh-panel);
    border-start-start-radius: 50% 60%;
    border-end-start-radius: 50% 60%;
    /* Indispensable : sans lui, la photo posée à l interieur deborde de l arrondi
       et le panneau redevient un rectangle. */
    overflow: hidden;
}

.hh__comb {
    position: absolute;
    inset: 0;
    opacity: .16;
    /* Trame d'alvéoles obtenue par superposition de deux dégradés : plus légère
       qu'une image, et nette à toutes les résolutions. */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2297%22%20viewBox%3D%220%200%2056%2097%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M14%201h28l13%2024-13%2024H14L1%2025z%22%2F%3E%3Cpath%20d%3D%22M14%2049h28l13%2024-13%2024H14L1%2073z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 56px 97px;
}

.hh__inner { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ texte */

.hh__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rr-theme-primary, #AD1A19);
    margin-bottom: 14px;
}

.hh__title {
    margin: 0 0 22px;
    line-height: .96;
    font-weight: 800;
}

.hh__title span {
    display: block;
    text-transform: uppercase;
}

/* Trois graisses, trois teintes, trois espacements : la ligne accentuée est
   plus large et plus sombre, les deux autres l'encadrent. */
.hh__title-1 {
    font-size: clamp(34px, 5vw, 62px);
    letter-spacing: .22em;
    color: var(--rr-theme-secondary, #FF9D24);
}

.hh__title-2 {
    font-size: clamp(46px, 7.4vw, 96px);
    letter-spacing: .01em;
    color: #2E1A0C;
}

.hh__title-3 {
    font-size: clamp(30px, 4.4vw, 56px);
    letter-spacing: .26em;
    color: var(--rr-theme-primary, #AD1A19);
}

.hh__text {
    max-width: 46ch;
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.7;
    color: #6B5646;
}

.hh__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--rr-theme-primary, #AD1A19);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 10px 24px -10px rgba(173, 26, 25, .7);
}

.hh__btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(173, 26, 25, .8);
}

.hh__btn svg { transition: transform .25s ease; }
.hh__btn:hover svg { transform: translateX(4px); }

/* ----------------------------------------------------------------- visuel */

.hh__media {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hh__product {
    display: block;
    position: relative;
    z-index: 2;
}

.hh__product img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    background: transparent;
    filter: drop-shadow(0 24px 40px rgba(60, 30, 6, .38));
    animation: hh-float 6s ease-in-out infinite;
}

/* Étiquette de prix accrochée au pot : elle transforme une image décorative en
   entrée de tunnel d'achat. */
.hh__badge {
    position: absolute;
    z-index: 3;
    right: 4%;
    bottom: 12%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 30px -12px rgba(60, 30, 6, .5);
    text-decoration: none;
    animation: hh-float 6s ease-in-out infinite .8s;
}

.hh__badge-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #2E1A0C;
    max-width: 16ch;
}

.hh__badge-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--rr-theme-primary, #AD1A19);
}

/* ------------------------------------------------------------- flottement */

.hh__float {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.hh__float--1 { top: 8%;  right: 10%; animation: hh-float 7s ease-in-out infinite; }
.hh__float--2 { top: 34%; left: 2%;   animation: hh-float 5.5s ease-in-out infinite 1.2s; }
.hh__float--3 { bottom: 12%; left: 12%; animation: hh-spin 14s linear infinite; }

@keyframes hh-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

@keyframes hh-spin {
    0%   { transform: rotate(-8deg) translateY(0); }
    50%  { transform: rotate(8deg) translateY(-12px); }
    100% { transform: rotate(-8deg) translateY(0); }
}

/* Une animation permanente devient pénible pour qui y est sensible — et le
   système d'exploitation le dit déjà. */
@media (prefers-reduced-motion: reduce) {
    .hh__product img,
    .hh__badge,
    .hh__float {
        animation: none;
    }
}

/* -------------------------------------------------------------- mobile ---
   Sous 992 px les colonnes s'empilent : le panneau devient une bande basse
   derrière le produit, sinon il couperait le titre en deux. */
@media (max-width: 991.98px) {
    .hh__panel {
        inset: auto -20% -10% -20%;
        height: 62%;
        border-radius: 50% 50% 0 0 / 22% 22% 0 0;
    }

    .hh__content { text-align: center; }
    .hh__text { margin-inline: auto; }
    .hh__media { margin-top: 32px; min-height: 320px; }
    .hh__badge { right: 0; bottom: 4%; }
}

/* ---------------------------------------- photo d'ambiance dans le panneau */

.hh__panel-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La photo se recadre à droite : le sujet de nos visuels d'ambiance s'y
       trouve, la gauche n'est qu'un fond flou. */
    object-position: 70% center;
    /* Léger zoom permanent : la scène respire au lieu d'être figée. */
    animation: hh-breathe 22s ease-in-out infinite;
}

.hh__panel-veil {
    position: absolute;
    inset: 0;
    /* Un pot doré sur une photo dorée se confond. Le voile creuse l'écart sans
       éteindre la photo. */
    background:
        linear-gradient(105deg, var(--hh-panel) 0%, rgba(0, 0, 0, 0) 62%),
        radial-gradient(70% 60% at 62% 52%, rgba(50, 22, 4, .52) 0%, rgba(50, 22, 4, .12) 100%);
}

@keyframes hh-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .hh__panel-photo { animation: none; }
}

/* ==========================================================================
   Apparition au défilement
   ==========================================================================

   Les sections montent de quelques pixels en apparaissant. Piloté par
   `IntersectionObserver` plutôt que par la position de défilement : le
   navigateur fait le calcul lui-même, sans exécuter de code à chaque pixel.

   L'état de départ n'est posé QUE si le script est là (classe sur `html`) :
   sans cette précaution, un échec de chargement laisserait toute la page
   invisible.
   ------------------------------------------------------------------------ */

html.has-reveal .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}

html.has-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Décalage en cascade pour les éléments d'une même rangée : ils arrivent l'un
   après l'autre plutôt qu'en bloc. */
html.has-reveal .reveal[data-reveal-delay="1"] { transition-delay: .09s; }
html.has-reveal .reveal[data-reveal-delay="2"] { transition-delay: .18s; }
html.has-reveal .reveal[data-reveal-delay="3"] { transition-delay: .27s; }
html.has-reveal .reveal[data-reveal-delay="4"] { transition-delay: .36s; }
html.has-reveal .reveal[data-reveal-delay="5"] { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
    html.has-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Bandeau « nos engagements »
   ==========================================================================
   Quatre arguments, une abeille qui traverse. Les icônes sont des tracés SVG :
   elles prennent la couleur du bloc et restent nettes partout.
   ------------------------------------------------------------------------ */

.hs {
    position: relative;
    overflow: hidden;
    padding-block: clamp(44px, 6vw, 82px);
    background:
        radial-gradient(120% 90% at 50% 0, #FFF6E7 0%, #FDF6EC 55%, #F8EEDF 100%);
}

.hs__inner { position: relative; z-index: 2; }

.hs__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }

.hs__eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rr-theme-secondary, #FF9D24);
    margin-bottom: 10px;
}

.hs__title {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 40px);
    color: #2E1A0C;
    text-wrap: balance;
}

/* ------------------------------------------------------------------ cartes */

.hs__card {
    height: 100%;
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(173, 26, 25, .09);
    box-shadow: 0 2px 4px rgba(90, 55, 20, .04);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.hs__card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 157, 36, .55);
    box-shadow: 0 18px 34px -16px rgba(90, 55, 20, .42);
}

.hs__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--rr-theme-primary, #AD1A19), var(--rr-theme-secondary, #FF9D24));
    box-shadow: 0 10px 20px -10px rgba(173, 26, 25, .7);
    /* Le pas de temps décalé vient du gabarit : les quatre icônes ne pulsent
       pas ensemble, ce qui serait mécanique. */
    animation: hs-pulse 4.5s ease-in-out infinite;
    animation-delay: var(--hs-delay, 0ms);
}

.hs__card:hover .hs__icon { animation-play-state: paused; }

.hs__card-title {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 700;
    color: #2E1A0C;
    line-height: 1.3;
}

.hs__card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #6B5646;
}

@keyframes hs-pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.04); }
}

/* ----------------------------------------------------------------- abeille */

.hs__bee {
    position: absolute;
    z-index: 1;
    top: 12%;
    left: -160px;
    width: 92px;
    height: auto;
    pointer-events: none;
    opacity: .9;
    /* Deux animations combinées : la traversée horizontale, et un tangage
       vertical plus rapide. Séparées, le vol paraît vivant plutôt que glissé. */
    animation: hs-fly 26s linear infinite, hs-bob 2.4s ease-in-out infinite;
}

@keyframes hs-fly {
    0%   { transform: translateX(0) rotate(6deg); }
    100% { transform: translateX(calc(100vw + 260px)) rotate(6deg); }
}

@keyframes hs-bob {
    0%, 100% { margin-top: 0; }
    50%      { margin-top: -22px; }
}

@media (max-width: 767.98px) {
    .hs__bee { width: 62px; top: 4%; }
    .hs__card { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .hs__bee,
    .hs__icon {
        animation: none;
    }
    .hs__bee { left: 4%; }
}

/* Décors du thème sans rapport avec le miel — tomates, basilic, ustensiles. */
.cooking-experience__shape-1,
.cooking-experience__shape-2,
.cooking-experience__shape-3,
.cooking-experience__shape-4,
.cooking-experience__shape-5,
.cooking-experience__shape-6,
.cooking-experience__shape-7,
.best-selling__shape-1,
.best-selling__shape-2,
.client-testimonial__shape-1,
.client-testimonial__shape-2,
.client-testimonial__shape-3 {
    display: none;
}

/* Le titre se coupait au milieu d'un mot — « AUTHENTI / QUE ». Le thème force
   une césure agressive pour ses titres courts en anglais ; en français, les
   mots sont plus longs et la coupure devient une faute. */
.cooking-experience__item-text .title,
.cooking-experience__item-text h2,
.cooking-experience__item-text h3 {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    text-wrap: balance;
}


/* Le visuel chevauche volontairement le texte dans ce thème. En anglais les
   titres sont courts et passent ; « AUTHENTIQUE » finissait derrière le pot.
   On rend un peu de largeur au texte plutôt que de réduire le produit. */
.cooking-experience__item-text {
    max-width: 46%;
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------ bannière d'accueil (hero) */
/* Couleurs : celles du socle des thèmes (--t-*), sinon la couleur principale
   de la boutique (--rr-theme-primary) pour le thème historique. */
.bb-hero {
    --bb-h-accent: var(--t-primary, var(--rr-theme-primary, #b8860b));
    --bb-h-fond: var(--t-surface, #f6f3ee);
    position: relative;
    overflow: hidden;
    padding-block: 56px;
    background: var(--bb-h-fond);
    display: flex;
    align-items: center;
}
.bb-hero--small { min-height: 340px; }
.bb-hero--medium { min-height: 480px; }
.bb-hero--large { min-height: min(86vh, 760px); }
.bb-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 40px;
    align-items: center;
}
.bb-hero--split .bb-hero__inner { grid-template-columns: 1.05fr 1fr; }
.bb-hero--center .bb-hero__inner,
.bb-hero--cover .bb-hero__inner { grid-template-columns: 1fr; text-align: center; }
.bb-hero--center .bb-hero__texte,
.bb-hero--cover .bb-hero__texte { max-width: 760px; margin-inline: auto; }
.bb-hero__titre {
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.08;
    margin: 0 0 18px;
}
.bb-hero__accroche {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 0 28px;
    opacity: .85;
}
.bb-hero--center .bb-hero__accroche,
.bb-hero--cover .bb-hero__accroche { margin-inline: auto; }
.bb-hero__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.bb-hero--center .bb-hero__boutons,
.bb-hero--cover .bb-hero__boutons { justify-content: center; }
.bb-hero__visuel {
    position: relative;
    aspect-ratio: 4 / 4.2;
    border-radius: var(--t-radius, 16px);
    overflow: hidden;
}
.bb-hero__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sans image : formes douces aux couleurs du thème. */
.bb-hero--sans-image .bb-hero__visuel {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bb-h-accent) 85%, #fff), color-mix(in srgb, var(--bb-h-accent) 35%, var(--bb-h-fond)));
}
.bb-hero__forme { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.bb-hero__forme--1 { width: 62%; aspect-ratio: 1; right: -12%; top: -14%; }
.bb-hero__forme--2 { width: 38%; aspect-ratio: 1; left: 10%; bottom: 8%; background: rgba(255, 255, 255, .14); }
.bb-hero__forme--3 { width: 16%; aspect-ratio: 1; left: 48%; top: 30%; background: rgba(255, 255, 255, .35); }
.bb-hero--cover {
    color: #fff;
    background: linear-gradient(120deg, color-mix(in srgb, var(--bb-h-accent) 90%, #000), color-mix(in srgb, var(--bb-h-accent) 55%, #000));
}
.bb-hero--cover[style*="--bb-hero-image"] {
    background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), var(--bb-hero-image) center / cover no-repeat;
}
.bb-hero--cover .bb-hero__titre,
.bb-hero--cover .bb__eyebrow { color: #fff; }
.bb-hero--cover .t-btn--contour { color: #fff; }
@media (max-width: 991.98px) {
    .bb-hero--split .bb-hero__inner { grid-template-columns: 1fr; }
    .bb-hero__visuel { aspect-ratio: 16 / 10; order: -1; }
    .bb-hero--medium, .bb-hero--large { min-height: 0; }
}

/* ------------------------------------------------------- tuiles de rayons */
.bb-rayons__grille { display: grid; gap: 20px; }
.bb-rayons__grille--2 { grid-template-columns: repeat(2, 1fr); }
.bb-rayons__grille--3 { grid-template-columns: repeat(3, 1fr); }
.bb-rayons__grille--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767.98px) {
    .bb-rayons__grille--3, .bb-rayons__grille--4 { grid-template-columns: repeat(2, 1fr); }
    .bb-rayons__grille { gap: 12px; }
}
.bb-rayon {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}
.bb-rayon__visuel {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--t-radius, 12px);
    background: var(--t-surface, #f3efe8);
}
.bb-rayon__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bb-rayon:hover .bb-rayon__visuel img { transform: scale(1.05); }
.bb-rayon__initiale {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 48px; font-weight: 700;
    color: var(--t-primary, var(--rr-theme-primary, #b8860b));
}
.bb-rayon__nom { font-weight: 600; font-size: 16px; }
.bb-rayons--circle .bb-rayon { align-items: center; text-align: center; }
.bb-rayons--circle .bb-rayon__visuel { border-radius: 50%; width: 100%; }
.bb-rayons--overlay .bb-rayon { position: relative; }
.bb-rayons--overlay .bb-rayon__visuel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(transparent 45%, rgba(0, 0, 0, .6));
}
.bb-rayons--overlay .bb-rayon__nom {
    position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
    color: #fff; font-size: 18px;
}