.public-producer-profile-shell {
    width: min(100%, var(--hp-content-max));
    margin: 0 auto;
    padding: 6px var(--hp-page-x) 24px;
    overflow: clip;
}

.public-producer-hero {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hp-border-strong);
    border-radius: 20px;
    background: var(--hp-surface);
    box-shadow: 0 16px 36px rgba(27, 29, 24, .1);
}

.public-producer-hero__visual {
    position: relative;
    height: clamp(180px, 48vw, 220px);
    min-height: 0;
    overflow: hidden;
    background: #245A3B;
}

.public-producer-hero__visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(180deg, rgba(18, 30, 21, .02) 38%, rgba(18, 30, 21, .68)),
        linear-gradient(90deg, rgba(18, 30, 21, .26), transparent 62%);
    pointer-events: none;
}

.public-producer-hero__main-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: 62% center;
}

.public-producer-hero__badge {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(255, 248, 236, .7);
    background: rgba(20, 34, 24, .66);
    color: var(--hp-surface-warm);
    box-shadow: 0 12px 30px rgba(18, 30, 21, .2);
    backdrop-filter: blur(10px);
}

.public-producer-hero__badge {
    top: 10px;
    left: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #F4CE8E;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.public-producer-hero__mark {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(36, 90, 59, .16);
    border-radius: 16px;
    background: var(--hp-green);
    color: var(--hp-surface-warm);
    font-size: .84rem;
    font-weight: 700;
}

.public-producer-hero__identity {
    display: grid;
    min-width: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.public-producer-hero__content {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: 0;
    gap: 7px;
    margin-top: -20px;
    padding: 12px;
    border-radius: 20px 20px 0 0;
    background: var(--hp-surface);
}

.public-producer-hero__intro {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.public-producer-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.public-producer-hero__tags span {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 7px;
    border: 1px solid rgba(36, 90, 59, .14);
    border-radius: 999px;
    background: rgba(223, 232, 220, .64);
    color: var(--hp-green);
    font-size: 0.7rem;
    font-weight: 700;
}

.public-producer-hero__back,
.public-producer-action,
.public-producer-info__map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.public-producer-hero__back {
    width: fit-content;
    min-height: var(--tap-size);
    gap: 5px;
    padding: 0 10px;
    border: 1px solid var(--hp-border-strong);
    border-radius: 999px;
    background: var(--hp-surface);
    color: var(--hp-green);
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 7px 16px rgba(27, 29, 24, .05);
}

.public-producer-hero h1 {
    max-width: 100%;
    margin: 0;
    color: var(--hp-green);
    font-size: clamp(1.62rem, 7.4vw, 2.15rem);
    font-weight: 700;
    line-height: .98;
    overflow-wrap: anywhere;
}

.public-producer-hero__byline,
.public-producer-hero__lead,
.public-producer-hero__voice p {
    margin: 0;
}

.public-producer-hero__byline {
    color: var(--hp-ink);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
}

.public-producer-hero__lead {
    display: -webkit-box;
    overflow: hidden;
    color: #526052;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 62ch;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.public-producer-hero__voice {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 7px 9px;
    border-left: 3px solid var(--hp-orange);
    border-radius: 11px;
    background: rgba(223, 232, 220, .56);
}

.public-producer-hero__voice-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 253, 247, .88);
    color: var(--hp-green);
}

.public-producer-hero__voice p {
    color: var(--hp-ink);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.28;
}

.public-producer-hero__actions {
    /* Flex, pas grille : le nombre de boutons varie (retrait, histoire),
       une grille a colonnes fixes etirait le bouton orphelin — c etait le
       bouton muet de la capture de Julien. */
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.public-producer-action {
    transition: transform .16s ease, box-shadow .16s ease;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: var(--tap-size);
    gap: 5px;
    padding: 0 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.public-producer-action .ui-icon {
    flex: 0 0 auto;
}

.public-producer-action--primary {
    background: var(--hp-orange);
    color: var(--hp-surface-warm);
    box-shadow: 0 9px 18px rgba(200, 97, 56, .18);
}

.public-producer-action--secondary {
    border: 1px solid rgba(36, 90, 59, .18);
    background: rgba(223, 232, 220, .72);
    color: var(--hp-green);
}

































.public-producer-profile-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-top: 9px;
    padding: 3px 2px 6px;
    border-bottom: 1px solid var(--hp-border-strong);
    scrollbar-width: none;
}

.public-producer-profile-nav::-webkit-scrollbar {
    display: none;
}

.public-producer-profile-nav a {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: var(--tap-size);
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
}

.public-producer-profile-nav a:first-child {
    background: rgba(223, 232, 220, .62);
    color: var(--hp-green);
}

















.public-producer-profile-nav a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -4px;
}



















.public-producer-profile-layout,
.public-producer-profile-main,
.public-producer-offers {
    display: grid;
    min-width: 0;
    gap: 11px;
}

.public-producer-profile-layout {
    grid-template-areas:
        "main"
        "info";
    margin-top: 13px;
}

.public-producer-profile-main {
    grid-area: main;
}

.public-producer-story {
    display: grid;
    gap: 9px;
    padding: 11px 2px 2px;
    border-top: 1px solid var(--hp-border-strong);
    scroll-margin-top: 128px;
}

.public-producer-story__intro {
    display: grid;
    gap: 5px;
}

.public-producer-story h2,
.public-producer-story h3,
.public-producer-story p,
.public-producer-story blockquote {
    margin: 0;
}

.public-producer-story h2 {
    color: var(--hp-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.06;
}

.public-producer-story__intro > p {
    color: var(--hp-ink);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.36;
}

.public-producer-story blockquote {
    padding: 7px 9px;
    border-left: 3px solid var(--hp-orange);
    border-radius: 9px;
    background: rgba(200, 97, 56, .07);
    color: var(--hp-green);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.28;
}

.public-producer-story__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.public-producer-story__tags span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid rgba(223, 212, 195, .76);
    border-radius: 999px;
    background: rgba(255, 248, 236, .58);
    color: var(--hp-green);
    font-size: 0.7rem;
    font-weight: 700;
}

.public-producer-story__cards {
    display: grid;
    gap: 6px;
}

.public-producer-story-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 2px 7px;
    align-items: start;
    padding: 8px;
    border: 1px solid rgba(223, 212, 195, .68);
    border-radius: 11px;
    background: rgba(255, 253, 247, .72);
}

.public-producer-story-card__icon {
    display: grid;
    width: 30px;
    height: 30px;
    grid-row: span 2;
    place-items: center;
    border-radius: 9px;
    background: rgba(223, 232, 220, .82);
    color: var(--hp-green);
}

.public-producer-story-card h3 {
    color: var(--hp-ink);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.public-producer-story-card p {
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.32;
}

.public-producer-info-anchor {
    grid-area: info;
    align-self: start;
    min-width: 0;
    scroll-margin-top: 128px;
}

.public-producer-info {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--hp-border-strong);
    border-radius: 14px;
    background: var(--hp-surface);
    box-shadow: 0 9px 22px rgba(27, 29, 24, .06);
}

.public-producer-info__header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 7px;
}

/* Nomme plutot que positionne — meme lecon que les reperes. */
.public-producer-info__header__icon {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: rgba(223, 232, 220, .82);
    color: var(--hp-green);
}

.public-producer-info__header > div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.public-producer-info h2,
.public-producer-info p {
    margin: 0;
}

.public-producer-info h2 {
    color: var(--hp-ink);
    font-size: .82rem;
    font-weight: 700;
}

.public-producer-info p,
.public-producer-info__list dt {
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.public-producer-info__verified {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 25px;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(223, 232, 220, .74);
    color: var(--hp-green) !important;
}

.public-producer-info__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 7px 0 0;
}

.public-producer-info__list div {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 7px;
    border: 1px solid rgba(223, 212, 195, .66);
    border-radius: 9px;
    background: rgba(255, 248, 236, .5);
}

.public-producer-info__list dt,
.public-producer-info__list dd {
    margin: 0;
}

.public-producer-info__list dt {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.public-producer-info__list dd,
.public-producer-info__list dd a {
    color: var(--hp-ink);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.public-producer-info__list dd a {
    display: inline-flex;
    min-width: var(--tap-size);
    min-height: var(--tap-size);
    align-items: center;
}

.public-producer-info__map {
    width: 100%;
    min-height: var(--tap-size);
    gap: 6px;
    margin-top: 7px;
    padding: 0 10px;
    border-radius: 9px;
    background: var(--hp-green);
    color: var(--hp-surface-warm);
    font-size: 0.7rem;
    font-weight: 700;
}

.public-producer-pickup {
    display: grid;
    gap: 9px;
    padding-top: 13px;
    border-top: 1px solid var(--hp-border-strong);
    scroll-margin-top: 128px;
}

.public-producer-pickup__heading {
    display: flex;
    gap: 8px;
    align-items: center;
}

.public-producer-pickup__heading > span,
.public-producer-pickup__empty > .ui-icon {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    background: rgba(223, 232, 220, .82);
    color: var(--hp-green);
}

.public-producer-pickup__heading > div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.public-producer-pickup__heading p,
.public-producer-pickup__heading h2,
.public-producer-pickup__point h3,
.public-producer-pickup__point p,
.public-producer-pickup__hours {
    margin: 0;
}

.public-producer-pickup__heading p {
    color: var(--hp-orange);
    font-size: 0.7rem;
    font-weight: 700;
}

.public-producer-pickup__heading h2 {
    color: var(--hp-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.08;
}

.public-producer-pickup__points {
    display: grid;
    gap: 8px;
}

.public-producer-pickup__point {
    display: grid;
    min-width: 0;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--hp-border-strong);
    border-radius: 8px;
    background: var(--hp-surface);
}

.public-producer-pickup__point-heading {
    display: flex;
    min-width: 0;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.public-producer-pickup__point-heading > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.public-producer-pickup__point h3 {
    color: var(--hp-green);
    font-size: .76rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.public-producer-pickup__point-heading p,
.public-producer-pickup__instructions,
.public-producer-pickup__pending {
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Nomme plutot que positionne. */
.public-producer-pickup__point-badge {
    flex: 0 0 auto;
    max-width: 45%;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(223, 232, 220, .72);
    color: var(--hp-green);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.public-producer-pickup__hours {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.public-producer-pickup__hours div {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 7px;
    border-radius: 7px;
    background: rgba(255, 248, 236, .72);
}

.public-producer-pickup__hours dt,
.public-producer-pickup__hours dd {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.25;
}

.public-producer-pickup__hours dt {
    color: var(--hp-muted);
    font-weight: 700;
}

.public-producer-pickup__hours dd {
    color: var(--hp-ink);
    font-weight: 700;
    text-align: right;
}

.public-producer-pickup__instructions {
    padding-left: 8px;
    border-left: 2px solid var(--hp-orange);
}

.public-producer-pickup__empty {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border: 1px dashed var(--hp-border-strong);
    border-radius: 8px;
    background: rgba(255, 248, 236, .48);
}

.public-producer-pickup__empty p {
    display: grid;
    min-width: 0;
    gap: 2px;
    margin: 0;
}

.public-producer-pickup__empty strong {
    color: var(--hp-ink);
    font-size: 0.7rem;
    font-weight: 700;
}

.public-producer-pickup__empty span {
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
}

.public-producer-offers {
    scroll-margin-top: 128px;
}

.public-producer-offers__heading {
    align-items: end;
    margin-bottom: 3px;
}

.public-producer-offers__heading h2 {
    font-size: 1rem;
    line-height: 1.08;
}

.public-producer-offers__heading p {
    max-width: 46ch;
    margin-top: 2px;
    color: var(--hp-muted);
    font-size: 0.7rem;
    line-height: 1.25;
}

.public-producer-detail-page .assistant-widget {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
}

.public-producer-detail-page .assistant-widget__toggle {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
}

.public-producer-detail-page .assistant-widget__toggle-label,
.public-producer-detail-page .assistant-widget__dismiss {
    display: none;
}

@media (min-width: 520px) {
    .public-producer-profile-shell {
        padding-inline: var(--hp-space-4);
    }

    .public-producer-hero__visual {
        min-height: clamp(228px, 40vw, 310px);
    }

    .public-producer-hero__content {
        padding: 16px;
    }











    .public-producer-story__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 700px) {
    .public-producer-hero {
        display: block;
        height: clamp(390px, 43vw, 500px);
        min-height: 0;
        border-radius: 22px;
    }

    .public-producer-hero__visual {
        height: 100%;
        min-height: 0;
    }

    .public-producer-hero__visual::after {
        background:
            linear-gradient(180deg, rgba(18, 30, 21, .01) 42%, rgba(18, 30, 21, .3)),
            linear-gradient(90deg, rgba(18, 30, 21, .2), transparent 72%);
    }

    .public-producer-hero__content {
        position: absolute;
        inset: 0;
        align-content: end;
        gap: 10px;
        margin-top: 0;
        padding: 28px;
        border-radius: 0;
        background:
            linear-gradient(90deg, rgba(13, 28, 19, .74), rgba(13, 28, 19, .3) 58%, transparent 86%),
            linear-gradient(0deg, rgba(13, 28, 19, .58), transparent 56%);
        color: var(--hp-surface-warm);
        pointer-events: none;
    }

    .public-producer-hero__content > * {
        width: min(680px, 76%);
        pointer-events: auto;
    }

    .public-producer-hero__back {
        position: absolute;
        top: 18px;
        left: 20px;
        width: fit-content;
        border-color: rgba(255, 248, 236, .62);
        background: rgba(20, 34, 24, .56);
        color: var(--hp-surface-warm);
        backdrop-filter: blur(10px);
    }

    .public-producer-hero__badge {
        top: 18px;
        right: 20px;
        left: auto;
    }

    .public-producer-hero__identity {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 16px;
    }

    .public-producer-hero__mark {
        width: 88px;
        height: 88px;
        border: 2px solid rgba(255, 248, 236, .78);
        border-radius: 50%;
        background: rgba(255, 253, 247, .94);
        color: var(--hp-green);
        font-size: 1.05rem;
        box-shadow: 0 14px 32px rgba(13, 28, 19, .3);
    }

    .public-producer-hero .public-page-kicker {
        color: #D8F0A6;
    }

    .public-producer-hero h1 {
        max-width: 18ch;
        color: #FFFDF7;
        font-size: clamp(2.2rem, 4.7vw, 3.5rem);
        text-shadow: 0 2px 18px rgba(13, 28, 19, .3);
    }

    .public-producer-hero__byline {
        color: rgba(255, 253, 247, .92);
        font-size: .78rem;
    }

    .public-producer-hero__lead,
    .public-producer-hero__voice p {
        color: rgba(255, 253, 247, .9);
        font-size: 0.7rem;
    }

    .public-producer-hero__lead {
        max-width: 62ch;
        -webkit-line-clamp: 3;
    }

    .public-producer-hero__tags span {
        border-color: rgba(255, 248, 236, .34);
        background: rgba(255, 253, 247, .13);
        color: #FFFDF7;
        backdrop-filter: blur(8px);
    }

    .public-producer-hero__voice {
        border-left-color: #F4CE8E;
        background: rgba(20, 34, 24, .42);
        backdrop-filter: blur(8px);
    }

    .public-producer-hero__voice-icon {
        background: rgba(255, 253, 247, .9);
    }

    .public-producer-hero__actions {
        max-width: 520px;
        flex-wrap: nowrap;
    }

    .public-producer-action--secondary {
        border-color: rgba(255, 248, 236, .44);
        background: rgba(255, 253, 247, .12);
        color: #FFFDF7;
        backdrop-filter: blur(8px);
    }



    .public-producer-profile-nav {
        margin: 11px 22px 0;
        padding-bottom: 8px;
    }













    .public-producer-profile-layout,
    .public-producer-profile-main,
    .public-producer-offers {
        gap: 14px;
    }

    .public-producer-pickup__hours {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .public-producer-story {
        padding-top: 14px;
    }

    .public-producer-story__intro > p {
        font-size: .72rem;
    }
}

@media (min-width: 980px) {
    .public-producer-profile-shell {
        padding-top: 12px;
    }

    .public-producer-profile-layout {
        grid-template-areas: "main info";
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
        align-items: start;
        gap: 18px;
        margin-top: 18px;
    }

    .public-producer-hero h1 {
        max-width: 18ch;
        font-size: clamp(2.2rem, 3vw, 3rem);
    }

    .public-producer-story h2,
.public-producer-offers__heading h2 {
        font-size: 1.22rem;
    }



    .public-producer-detail-page .assistant-widget__toggle {
        width: auto;
        min-width: 0;
        padding: 0 14px 0 10px;
    }

    .public-producer-detail-page .assistant-widget__toggle-label,
    .public-producer-detail-page .assistant-widget__dismiss {
        display: inline-flex;
    }
}

@media (min-width: 1280px) {
    .public-producer-profile-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .public-producer-hero__content {
        padding: 24px 26px;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    .public-producer-profile-shell {
        padding-top: 5px;
    }

    .public-producer-hero {
        height: 300px;
    }

    .public-producer-hero__visual {
        height: 100%;
        min-height: 0;
    }

    .public-producer-hero__content {
        gap: 5px;
        margin-top: 0;
        padding: 10px 12px;
        border-radius: 0;
    }

    .public-producer-hero h1 {
        font-size: clamp(1.35rem, 4vw, 2rem);
    }

    .public-producer-hero__lead {
        -webkit-line-clamp: 1;
    }

    .public-producer-hero__voice {
        padding-block: 5px;
    }
}

/* =====================================================================
 * L'ORDRE v6 — FLUX PLEINE LARGEUR, PLUS DE RAIL LATERAL
 *
 * Reference : cible-vitrine-pro.html. « Plus de rail lateral : flux pleine
 * largeur, sur a toutes les tailles d'ecran. »
 *
 * Un rail a deux colonnes se defend mal en dessous de mille pixels : soit il
 * retrecit jusqu'a l'illisible, soit il tombe sous le contenu et devient un
 * appendice que personne ne lit. Le flux, lui, tient a toutes les largeurs
 * sans qu'on ait a le surveiller.
 * ===================================================================== */

.public-producer-profile-shell--flux .public-producer-profile-layout,
.public-producer-profile-shell--flux .public-producer-profile-main {
    display: block;
    width: auto;
    max-width: none;
}



@media (min-width: 900px) {

}


/* ======================================================================
 * v7 — POSE EN FIN DE FEUILLE, ET C EST VOULU : a specificite egale, le
 * dernier gagne. Le palier 700px redeclarait la grille de l identite ; le
 * modificateur pose ici l emporte a TOUTES les largeurs.
 * ====================================================================== */

/* Avec une photo, le monogramme sort du DOM : sa colonne aussi. Sans ce
   bloc, 52px (ou 88px au palier 700) de vide s ouvraient a gauche du H1. */
.public-producer-hero__identity--photo {
    grid-template-columns: minmax(0, 1fr);
}

/* Sans photo : le panneau vert de marque porte le badge et laisse le
   monogramme dire l identite. Jamais de photo partagee qui rendrait toutes
   les vitrines identiques. */
.public-producer-hero__visual {
    background: var(--hp-green, #245A3B);
}

/* Sections en flux v7 : chaque bloc de premier niveau reserve son souffle.
   Des classes NOMMEES, jamais un selecteur d enfant anonyme. */
.public-producer-profile-shell > .public-producer-links,
.public-producer-profile-shell > .public-producer-pickup,
.public-producer-profile-shell > .public-producer-info-anchor {
    margin-top: 16px;
}


/* « À VOIR AUTOUR » — le décor qui allonge le séjour, jamais une annonce. */
.producer-decor {
    padding: 20px 0 8px;
}

.producer-decor__titre {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.producer-decor__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.producer-decor__repere {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(36, 90, 59, .18);
    border-radius: 12px;
    background: var(--hp-surface-warm, #FFFDF7);
}

.producer-decor__repere small {
    color: var(--ui-color-muted, #6B6B60);
}

.producer-decor__source {
    margin-top: 10px;
    font-size: .72rem;
    color: var(--ui-color-muted, #6B6B60);
}

/* Trois familles, trois rubriques : le titre en petites capitales, la
 * couleur de la carte en rappel (vert / bleu / orange), la liste dessous. */
.producer-decor__famille + .producer-decor__famille {
    margin-top: 18px;
}

.producer-decor__famille-titre {
    margin: 0 0 8px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hp-vert, #245A3B);
}

.producer-decor__famille--faire .producer-decor__famille-titre,
.producer-decor__famille--faire .producer-decor__medaillon {
    color: #27627A;
}

.producer-decor__famille--bientot .producer-decor__famille-titre,
.producer-decor__famille--bientot .producer-decor__medaillon {
    color: var(--hp-orange, #C86138);
}

.producer-decor__meta {
    display: grid;
    gap: 4px;
    justify-items: end;
    align-self: start;
}

.producer-decor__date {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hp-orange, #C86138);
    white-space: nowrap;
}

.producer-decor__copie a {
    color: inherit;
    text-decoration: none;
}

.producer-decor__copie a:hover,
.producer-decor__copie a:focus {
    text-decoration: underline;
}


/* =====================================================================
 * VITRINE V8 — L'HUMAIN D'ABORD, ET LA PAGE PREND UN POULS (2026-08-25).
 *
 * Le mouvement est un accent, jamais une condition de lecture : tout est
 * coupe par prefers-reduced-motion. Et JAMAIS de transform sur un
 * conteneur de section : la minibar est en position fixed — un seul
 * pixel de transform sur un ancetre la ferait atterrir dans la page.
 * Les translations vivent sur les FEUILLES (boutons, cartes).
 * ===================================================================== */

/* 1. La lueur de terroir derriere le hero : elle derive, elle ne bouge
 *    aucun bloc — background-position uniquement. */
.public-producer-hero {
    background-image:
        radial-gradient(520px 240px at 14% 18%,
                        rgba(200, 97, 56, .10), transparent 70%),
        radial-gradient(460px 260px at 86% 80%,
                        rgba(255, 253, 247, .07), transparent 70%);
    background-size: 200% 200%;
}

/* 2. La bulle de parole — le visage de la vitrine. */
.public-producer-hero__voice {
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: 1fr;    /* v8 : la bulle NE reprend PAS les 28px
                                      de l'ancien encart [icone|texte] — la
                                      regle heritee ecrasait le blockquote en
                                      colonne d'un mot (capture du 25/08). */
    gap: 10px;
    max-width: 560px;
    padding: 0;
    border-left: 0;
    background: transparent;
    backdrop-filter: none;
}

.public-producer-hero__voice-bulle p {
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.55;
}

.public-producer-hero__voice-bulle {
    position: relative;
    margin: 0;
    padding: 14px 16px;
    border-radius: 16px 16px 16px 4px;
    background: rgba(255, 253, 247, .12);
    border: 1px solid rgba(255, 253, 247, .22);
    font-style: italic;
    line-height: 1.5;
}

.public-producer-hero__voice-bulle p { margin: 0; }

.public-producer-hero__voice-signature {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.public-producer-hero__voice-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    color: #FFFDF7;
    background: linear-gradient(135deg, var(--hp-orange, #C86138), var(--hp-vert, #245A3B));
    border: 2px solid rgba(255, 253, 247, .55);
    flex: 0 0 auto;
}

.public-producer-hero__voice-nom {
    display: grid;
    line-height: 1.25;
}

.public-producer-hero__voice-nom small {
    opacity: .75;
}

/* 3. Le badge de preuve : un point de vie, une pulsation discrete. */
.public-producer-hero__badge::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 7px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

/* 4. Les gestes se soulevent — transition posee dans le bloc canonique
   de .public-producer-action (le contrat n'admet qu'UN bloc). */

.public-producer-action:hover,
.public-producer-action:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(27, 29, 24, .22);
}

/* 5. La citation en exergue : le mot du producteur, en grand, a l'accent. */
.public-producer-story blockquote,
.producer-story__quote {
    position: relative;
    font-size: 1.25rem;
    line-height: 1.5;
    padding-inline-start: 26px;
}

.public-producer-story blockquote::before,
.producer-story__quote::before {
    content: '\201C';
    position: absolute;
    inset-inline-start: -2px;
    top: -14px;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--hp-orange, #C86138);
    opacity: .85;
}

/* 6. Les reperes « a voir autour » repondent au survol. */
.producer-decor__repere {
    transition: transform .16s ease, box-shadow .16s ease;
}

.producer-decor__repere:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(27, 29, 24, .12);
}

@media (prefers-reduced-motion: no-preference) {
    .public-producer-hero {
        animation: producer-lueur 18s ease-in-out infinite alternate;
    }

    @keyframes producer-lueur {
        from { background-position: 0% 0%, 100% 100%; }
        to   { background-position: 35% 45%, 65% 55%; }
    }

    .public-producer-hero__badge::before {
        animation: producer-preuve 2.4s ease-in-out infinite;
    }

    @keyframes producer-preuve {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: .5; transform: scale(.7); }
    }
}


/* =====================================================================
 * « À VOIR AUTOUR » v2 (26/08) — les médaillons de la carte entrent sur
 * la fiche : même vocabulaire, même hiérarchie. La distance se lit en
 * chip, le lieu en premier, la nature en dessous.
 * ===================================================================== */
.producer-decor__heading {
    margin-bottom: 14px;
}

.producer-decor__liste {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.producer-decor__repere {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.producer-decor__medaillon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--hp-surface-warm, #FFFDF7);
    border: 2px solid var(--hp-vert, #245A3B);
    color: var(--hp-vert, #245A3B);
}

.producer-decor__medaillon .picto-decor {
    width: 22px;
    height: 22px;
    display: block;
}

.producer-decor__copie {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.producer-decor__copie strong {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
}

.producer-decor__distance {
    align-self: start;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(200, 97, 56, .10);
    color: var(--hp-orange, #C86138);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}


/* =====================================================================
 * LE BOOK (26/08) — la vie du pro en images. Grille dense, tuiles
 * carrées, légende au survol, le compte en pastille dans l'en-tête.
 * ===================================================================== */
.producer-book {
    padding: 20px 0 8px;
}

.producer-book__entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.producer-book__compte {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(200, 97, 56, .10);
    color: var(--hp-orange, #C86138);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.producer-book__compte:hover,
.producer-book__compte:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(27, 29, 24, .14);
}

.producer-book__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.producer-book__tuile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 1;
    background: var(--hp-surface-warm, #FFFDF7);
}

.producer-book__tuile img,
.producer-book__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.producer-book__tuile:hover img {
    transform: scale(1.045);
}

.producer-book__legende {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px 10px 8px;
    background: linear-gradient(transparent, rgba(24, 57, 35, .82));
    color: #FFF8EC;
    font-size: .74rem;
    line-height: 1.3;
    opacity: 0;
    transition: opacity .2s ease;
}

.producer-book__tuile:hover .producer-book__legende,
.producer-book__tuile:focus-within .producer-book__legende {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .producer-book__tuile img,
.producer-book__img { transition: none; }
    .producer-book__legende { opacity: 1; }
}

/* ==================================================================
   LA VITRINE-PROFIL (26/08 — Julien : « une vitrine type compte
   Instagram, qui donne envie de scroller, de voir le pro »).
   L'en-tete profil, les pastilles « a la une », le fil de tuiles.
   Un bloc canonique par composant — le contrat n'en admet qu'un.
   ================================================================== */

.vp-entete {
    display: grid;
    gap: 14px;
    padding: 18px 4px 6px;
}

.vp-entete__haut {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.vp-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--hp-creme-doux, #DFE8DC);
    outline: 2px solid var(--hp-green, #245A3B);
    outline-offset: 2px;
    background: var(--hp-green-deep, #183923);
}

.vp-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vp-avatar__initiales {
    color: var(--hp-creme, #FFF8EC);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: 1.7rem;
    font-weight: 700;
}

.vp-identite {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.vp-nom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: clamp(1.15rem, 3.4vw, 1.5rem);
    line-height: 1.1;
    color: var(--hp-ink, #1B1D18);
    text-wrap: balance;
}

.vp-verifie {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--hp-green, #245A3B);
    color: var(--hp-creme, #FFF8EC);
}

.vp-compteurs {
    /* La grammaire d'Instagram : le chiffre AU-DESSUS du mot, en colonnes
       egales — lisible d'un pouce (alignements, Julien 26/08). */
    display: flex;
    justify-content: flex-start;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--hp-ink, #1B1D18);
}

.vp-compteurs li,
.vp-compteurs__lien {
    display: grid;
    justify-items: center;
    gap: 1px;
}

.vp-compteurs b {
    font-size: 1.05rem;
    line-height: 1.1;
}

.vp-compteurs span {
    font-size: .72rem;
    color: var(--hp-muted, #5F665D);
}

.vp-compteurs b {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.vp-bio {
    margin: 0;
    font-size: .88rem;
    line-height: 1.4;
    color: var(--hp-ink, #1B1D18);
}

.vp-bio-histoire {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    max-width: 62ch;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--hp-ink, #1B1D18);
}

.vp-bio-suite {
    justify-self: start;
    font-size: .8rem;
    font-weight: 700;
    color: var(--hp-terracotta, #C86138);
    text-decoration: none;
}

.vp-bio-suite:hover,
.vp-bio-suite:focus-visible {
    text-decoration: underline;
}

.vp-dieses {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    font-size: .76rem;
    color: var(--hp-green, #245A3B);
    font-weight: 600;
}

.vp-lieu {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: .78rem;
    color: var(--hp-muted, #5F665D);
}

.vp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vp-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* « Voir ses N produits » et « Reserver un retrait » sont les deux gestes
       de la page : 38px les mettait sous la cible tenable au pouce. */
    min-height: var(--tap-size, 44px);
    padding: 7px 16px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--hp-green, #245A3B) 35%, transparent);
    background: var(--hp-creme, #FFF8EC);
    color: var(--hp-green, #245A3B);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.vp-action:hover,
.vp-action:focus-visible {
    background: var(--hp-creme-doux, #DFE8DC);
    transform: translateY(-1px);
}

.vp-action--primaire {
    border-color: var(--hp-terracotta, #C86138);
    background: var(--hp-terracotta, #C86138);
    color: var(--hp-creme, #FFF8EC);
}

.vp-action--primaire:hover,
.vp-action--primaire:focus-visible {
    background: color-mix(in srgb, var(--hp-terracotta, #C86138) 88%, #000000);
}

.vp-action--icone {
    /* Un rond de 38px sans etiquette : la cible commune, au minimum. */
    width: var(--tap-size, 44px);
    padding: 7px;
}

.vp-unes {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    scrollbar-width: none;
}

.vp-unes::-webkit-scrollbar {
    display: none;
}

.vp-une {
    display: grid;
    justify-items: center;
    gap: 5px;
    flex: none;
    text-decoration: none;
}

.vp-une__disque {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--hp-terracotta, #C86138) 55%, transparent);
    background: var(--hp-creme, #FFF8EC);
    color: var(--hp-green, #245A3B);
    transition: transform .18s ease, border-color .18s ease;
}

.vp-une:hover .vp-une__disque,
.vp-une:focus-visible .vp-une__disque {
    transform: scale(1.06);
    border-color: var(--hp-terracotta, #C86138);
}

.vp-une__mot {
    font-size: .7rem;
    font-weight: 600;
    color: var(--hp-ink, #1B1D18);
}

.vp-une--perso .vp-une__disque {
    border-color: color-mix(in srgb, var(--hp-green, #245A3B) 45%, transparent);
    color: var(--hp-terracotta, #C86138);
}

.vp-mot {
    margin: 0;
    padding: 12px 16px;
    border-left: 3px solid var(--hp-terracotta, #C86138);
    border-radius: 0 12px 12px 0;
    background: color-mix(in srgb, var(--hp-creme-doux, #DFE8DC) 55%, transparent);
    font-size: .9rem;
    line-height: 1.5;
    color: var(--hp-ink, #1B1D18);
}

.vp-mot p {
    margin: 0 0 6px;
    font-style: italic;
}

.vp-mot footer {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .78rem;
}

.vp-mot small {
    color: var(--hp-muted, #5F665D);
}

.vp-grille {
    display: grid;
    /* Compacte et organisee (Julien, 26/08) : des tuiles ~170px qui
       gagnent des colonnes avec la largeur, jamais des paves geants. */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 3px;
    margin-top: 10px;
    border-radius: 14px;
    overflow: hidden;
}

.vp-tuile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    background: var(--hp-creme-doux, #DFE8DC);
}

.vp-tuile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

/* ---- UNE BOUTEILLE SE VOIT EN ENTIER. Le recadrage carre convient a une
 * photo de vie, ou le sujet remplit le cadre ; il decapite une bouteille,
 * qui est haute et etroite, et emporte l'etiquette avec elle — or c'est
 * l'etiquette qui distingue deux cuvees. Les tuiles d'OFFRE montrent donc
 * l'image entiere, posee sur le fond de charte. */
.vp-tuile:not(.vp-tuile--vie) {
    background: var(--hp-creme, #FFF8EC);
}

.vp-tuile:not(.vp-tuile--vie) .vp-tuile__img {
    object-fit: contain;
    padding: 10px 10px 22px;
}

.vp-tuile:hover .vp-tuile__img {
    transform: scale(1.04);
}

.vp-tuile__prix {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hp-creme, #FFF8EC) 92%, transparent);
    color: var(--hp-terracotta, #C86138);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vp-tuile__voile {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px 10px 8px;
    background: linear-gradient(transparent, color-mix(in srgb, var(--hp-green-deep, #183923) 82%, transparent));
    color: var(--hp-creme, #FFF8EC);
    font-size: .74rem;
    line-height: 1.3;
    opacity: 0;
    transition: opacity .25s ease;
}

.vp-tuile:hover .vp-tuile__voile,
.vp-tuile:focus-visible .vp-tuile__voile {
    opacity: 1;
}

@media (max-width: 639px) {
    .vp-avatar {
        width: 72px;
        height: 72px;
    }

    .vp-entete__haut {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
    }

    .vp-minicarte {
        display: none;
    }

    .vp-compteurs {
        gap: 4px 14px;
    }

    .vp-entete {
        padding-top: 10px;
    }

    /* Au pouce, la legende est toujours lisible : pas de survol sur mobile. */
    .vp-tuile__voile {
        opacity: 1;
        padding: 16px 8px 6px;
        font-size: .68rem;
    }

    .vp-grille {
        gap: 2px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-action,
    .vp-une__disque,
    .vp-tuile__img,
    .vp-tuile__voile {
        transition: none;
    }
}

/* La mini-carte regionale (idee Julien, 26/08) : une tuile OSM statique,
   le domaine en point terracotta, l'attribution due. En haut a droite sur
   grand ecran (order force la 3e colonne), sous l'identite sur mobile. */
.vp-entete__haut {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.vp-minicarte {
    order: 3;
    position: relative;
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--hp-green, #245A3B) 30%, transparent);
    box-shadow: 0 8px 18px rgba(27, 29, 24, .08);
}

.vp-minicarte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vp-minicarte i {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--hp-terracotta, #C86138);
    border: 2px solid var(--hp-creme, #FFF8EC);
    box-shadow: 0 1px 4px rgba(27, 29, 24, .35);
}

.vp-minicarte__mot {
    position: absolute;
    inset: auto 0 0 0;
    padding: 10px 6px 3px;
    background: linear-gradient(transparent, color-mix(in srgb, var(--hp-green-deep, #183923) 78%, transparent));
    color: var(--hp-creme, #FFF8EC);
    font-size: .58rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-minicarte__credit {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: .5rem;
    color: rgba(27, 29, 24, .55);
    background: rgba(255, 248, 236, .7);
    border-radius: 4px;
    padding: 0 3px;
}

.vp-compteurs__lien {
    color: inherit;
    text-decoration: none;
}

.vp-compteurs__lien:hover,
.vp-compteurs__lien:focus-visible {
    text-decoration: underline;
}

@media (max-width: 639px) {
    .vp-minicarte {
        width: 92px;
        height: 92px;
        border-radius: 12px;
    }
}

/* ---- Les avis de la vitrine : cartes sobres, la note en or discret. */
.vp-avis__entete {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.vp-avis__resume {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--muted, #6b6257);
    font-size: 0.9rem;
}

.vp-avis__note,
.vp-avis__etoiles {
    color: #c98a2d;
    font-weight: 700;
}

.vp-avis__liste {
    display: grid;
    gap: 12px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.vp-avis__carte {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 14px 16px;
    border: 1px solid rgba(223, 212, 195, .72);
    border-radius: 14px;
}

.vp-avis__etoiles {
    margin: 0;
    letter-spacing: 2px;
}

.vp-avis__carte blockquote {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
}

.vp-avis__carte footer {
    display: grid;
    gap: 2px;
}

.vp-avis__carte footer small {
    color: var(--muted, #6b6257);
}

/* ---- Desktop : le meme style, sans le vide. La vitrine s'elargit, et
   l'en-tete passe en deux colonnes : l'identite a gauche, les pastilles en
   rail vertical a droite avec le mot du producteur. Mobile inchange. */
@media (min-width: 960px) {
    .public-producer-profile-shell {
        --hp-content-max: 1080px;
    }

    .vp-entete {
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 44px;
    }

    .vp-entete > * {
        grid-column: 1;
    }

    .vp-entete > .vp-unes {
        grid-column: 2;
        grid-row: 1 / span 9;
        align-self: start;
        display: grid;
        gap: 6px;
        overflow: visible;
        padding-top: 44px;
    }

    .vp-entete > .vp-mot {
        grid-column: 2;
        align-self: start;
    }

    .vp-entete .vp-une {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: 12px;
        width: 100%;
        padding: 4px 6px;
        border-radius: 12px;
    }

    .vp-entete .vp-une__mot {
        font-size: 0.85rem;
    }
}

/* ---- LE BADGE DES PREMIERS ARRIVES. Discret et chaud : c'est une marque de
 * reconnaissance, pas une promotion — il se pose a cote du nom, jamais a la
 * place de ce que le producteur a a dire. */
.vp-pionnier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(200, 97, 56, .38);
    background: rgba(200, 97, 56, .09);
    color: #A9481F;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
    white-space: nowrap;
}

.vp-pionnier svg {
    width: 12px;
    height: 12px;
}

/* MENTIONS EN TOUT PETIT (04/09) — meme regle que le pied de la carte d'accueil. */
.producer-decor__source {
    font-size: .62rem;
    line-height: 1.3;
    opacity: .8;
}