/* ===================================================================
 * Comptoir de la Planèze — sections ajoutées au thème Lounge
 * (chiffres, producteurs, vignettes de la carte, cave, rendez-vous,
 * accès, crédits photos) + ajustements responsive.
 * Palette : #73030D #732F3B #F2F2F2 #8C8C8C #0D0D0D (via les tokens).
 * ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
 * ## shared
 * ------------------------------------------------------------------- */
.section-intro {
    align-items    : flex-end;
    justify-content: space-between;
    margin-bottom  : var(--vspace-2);
}

.section-intro .section-header {
    margin-bottom: var(--vspace-1);
}

.section-lead {
    max-width  : 60ch;
    color      : var(--color-text-light);
    font-size  : var(--text-md);
    line-height: var(--vspace-1_25);
    margin-bottom: var(--vspace-1);
}

.s-terroir,
.s-cave,
.s-events,
.s-access {
    padding-top: var(--vspace-5);
}

.s-access {
    padding-bottom: var(--vspace-5);
}

/* every image added for the Comptoir keeps its frame when it loads late */
.producer-card__pic img,
.event-card__pic img,
.s-cave__pic img,
.s-access__pic img,
.menu-list__item-pic img,
.menu-preview__img {
    display   : block;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

/* an emptied image hides its frame (contrat LPV : image vide masque) */
figure:has(> img[data-lpv-image-empty]) {
    display: none;
}


/* -------------------------------------------------------------------
 * ## chiffres clés
 * ------------------------------------------------------------------- */
.s-highlights {
    padding-top: var(--vspace-4);
}

.highlights {
    list-style           : none;
    margin               : 0;
    padding              : 0;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    border-top           : 1px solid var(--color-border);
    border-left          : 1px solid var(--color-border);
}

.highlights__item {
    margin        : 0;
    padding       : var(--vspace-1) var(--vspace-1) var(--vspace-1_25);
    border-right  : 1px solid var(--color-border);
    border-bottom : 1px solid var(--color-border);
    display       : flex;
    flex-direction: column;
    gap           : var(--vspace-0_25);
}

.highlights__value {
    font-family   : var(--type-headings);
    font-weight   : 400;
    font-size     : var(--text-3xl);
    line-height   : 1.1;
    letter-spacing: -0.02em;
    color         : var(--color-text-bold);
}

.highlights__label {
    font-size  : var(--text-sm);
    line-height: var(--vspace-0_875);
    color      : var(--color-text-light);
}


/* -------------------------------------------------------------------
 * ## producteurs
 * ------------------------------------------------------------------- */
.producer-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr));
    gap                  : var(--vspace-1_5) var(--gutter);
}

.producer-card {
    display       : flex;
    flex-direction: column;
    min-width     : 0;
}

.producer-card__pic {
    margin       : 0 0 var(--vspace-0_75);
    aspect-ratio : 4 / 3;
    overflow     : hidden;
    border-radius: var(--border-radius);
    background   : var(--color-bg-neutral);
}

.producer-card__pic img {
    transition: transform 0.6s ease;
}

.producer-card:hover .producer-card__pic img {
    transform: scale(1.04);
}

.producer-card__title {
    font-size    : var(--text-lg);
    margin-top   : 0;
    margin-bottom: var(--vspace-0_25);
    border-left  : 1px solid var(--color-bg-primary);
    padding-left : var(--vspace-0_5);
}

.producer-card__text {
    color        : var(--color-text-light);
    font-size    : var(--text-sm);
    line-height  : var(--vspace-0_875);
    margin-bottom: 0;
}


/* -------------------------------------------------------------------
 * ## carte : une photo par plat
 * ------------------------------------------------------------------- */
.menu-list__item {
    display              : grid;
    grid-template-columns: 8.4rem minmax(0, 1fr) auto;
    column-gap           : var(--vspace-0_75);
    align-items          : start;
    padding-bottom       : var(--vspace-0_75);
}

.menu-list__item:has(.menu-list__item-pic > img[data-lpv-image-empty]) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.menu-list__item-pic {
    margin       : 0;
    width        : 8.4rem;
    aspect-ratio : 1;
    overflow     : hidden;
    border-radius: var(--border-radius);
    background   : var(--color-bg-neutral);
}

.menu-list__item-pic img {
    transition: transform 0.4s ease;
}

.menu-list__item:hover .menu-list__item-pic img {
    transform: scale(1.06);
}

.menu-list__item-desc {
    max-width    : none;
    padding-right: 0;
    min-width    : 0;
}

.menu-list__item p {
    margin-bottom: 0;
}

.menu-list__item-price {
    white-space: nowrap;
    text-align : right;
}

/* large preview of the hovered dish, under the tabs (wide screens only) */
.menu-preview {
    display: none;
}

@media screen and (min-width: 1001px) {
    .menu-preview {
        display      : block;
        position     : relative;
        margin       : var(--vspace-1_5) 0 0;
        width        : min(100%, 40vh);
        aspect-ratio : 1;
        overflow     : hidden;
        border-radius: var(--border-radius);
        background   : var(--color-bg-neutral);
        opacity      : 0;
        transition   : opacity 0.3s ease;
    }

    .menu-preview.has-image {
        opacity: 1;
    }

    .menu-preview__img {
        transition: opacity 0.25s ease;
    }

    .menu-preview.is-swapping .menu-preview__img {
        opacity: 0;
    }

    .menu-preview__caption {
        position   : absolute;
        left       : 0;
        right      : 0;
        bottom     : 0;
        padding    : var(--vspace-1) var(--vspace-0_75) var(--vspace-0_5);
        font-size  : var(--text-xs);
        line-height: var(--vspace-0_75);
        color      : var(--color-white);
        background : linear-gradient(0deg, rgba(13, 13, 13, 0.75) 0%, rgba(13, 13, 13, 0) 100%);
    }
}


/* -------------------------------------------------------------------
 * ## cave
 * ------------------------------------------------------------------- */
.s-cave__content {
    justify-content: space-between;
    align-items    : flex-start;
}

.s-cave__pic {
    margin       : var(--vspace-1) 0 var(--vspace-2);
    aspect-ratio : 4 / 5;
    max-height   : 64vh;
    width        : 100%;
    overflow     : hidden;
    border-radius: var(--border-radius);
}

.wine-list {
    list-style : none;
    margin     : 0 0 var(--vspace-1);
    padding    : 0;
    border-top : 1px solid var(--color-border);
}

.wine-list__item {
    margin       : 0;
    padding      : var(--vspace-0_75) 0;
    border-bottom: 1px solid var(--color-border);
}

.wine-list__head {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : baseline;
    justify-content: space-between;
    gap            : var(--vspace-0_25) var(--vspace-0_75);
}

.wine-list__name {
    font-family: var(--type-body);
    font-weight: 500;
    font-size  : var(--text-md);
    margin     : 0;
}

.wine-list__detail {
    font-size     : var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color         : var(--color-text-light);
}

.wine-list__aoc {
    margin     : var(--vspace-0_25) 0 0;
    font-size  : var(--text-sm);
    line-height: var(--vspace-0_875);
    color      : var(--color-text-light);
}

.s-cave__note {
    padding         : var(--vspace-0_75) var(--vspace-1);
    border-left     : 1px solid var(--color-bg-primary);
    background-color: var(--color-bg-neutral);
    font-size       : var(--text-sm);
    line-height     : var(--vspace-0_875);
    color           : var(--color-text);
    margin-bottom   : 0;
}


/* -------------------------------------------------------------------
 * ## rendez-vous & privatisations
 * ------------------------------------------------------------------- */
.event-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
    gap                  : var(--gutter);
}

.event-card {
    display       : flex;
    flex-direction: column;
    min-width     : 0;
    border        : 1px solid var(--color-border);
    border-radius : var(--border-radius);
    overflow      : hidden;
}

.event-card__pic {
    margin      : 0;
    aspect-ratio: 3 / 2;
    overflow    : hidden;
}

.event-card__body {
    padding: var(--vspace-1) var(--vspace-1) var(--vspace-1_25);
}

.event-card__eyebrow {
    display       : block;
    font-size     : var(--text-xs);
    line-height   : 1.4;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color         : var(--color-accent-text);
    margin-bottom : var(--vspace-0_5);
}

.event-card__title {
    font-size : var(--text-lg);
    margin-top: 0;
}

.event-card__text {
    color        : var(--color-text-light);
    font-size    : var(--text-sm);
    line-height  : var(--vspace-0_875);
    margin-bottom: 0;
}


/* -------------------------------------------------------------------
 * ## accès
 * ------------------------------------------------------------------- */
.s-access__content {
    justify-content: space-between;
    align-items    : center;
}

.access-list {
    list-style: none;
    margin    : var(--vspace-1) 0 0;
    padding   : 0;
}

.access-list__item {
    margin      : 0 0 var(--vspace-1);
    padding-left: var(--vspace-0_75);
    border-left : 1px solid var(--color-bg-primary);
}

.access-list__title {
    font-family  : var(--type-body);
    font-weight  : 500;
    font-size    : var(--text-base);
    margin       : 0 0 var(--vspace-0_25);
}

.access-list__text {
    margin     : 0;
    font-size  : var(--text-sm);
    line-height: var(--vspace-0_875);
    color      : var(--color-text-light);
}

.s-access__pic {
    margin       : 0;
    aspect-ratio : 16 / 10;
    overflow     : hidden;
    border-radius: var(--border-radius);
}


/* -------------------------------------------------------------------
 * ## crédits photos (pied de page)
 * ------------------------------------------------------------------- */
.photo-credits-wrap {
    margin-top: var(--vspace-0_5);
}

.photo-credits summary {
    cursor     : pointer;
    font-size  : var(--text-xs);
    color      : var(--color-text-light);
    width      : fit-content;
}

.photo-credits__list {
    list-style : none;
    margin     : var(--vspace-0_5) 0 0;
    padding    : 0;
    columns    : 3 18rem;
    column-gap : var(--gutter);
    font-size  : var(--text-xs);
    line-height: var(--vspace-0_75);
}

.photo-credits__list li {
    margin     : 0;
    break-inside: avoid;
}

/* Format de credit : « Photo : titre, auteur, licence — modification » */
.photo-credits__list li::before {
    content: "Photo : ";
}

.photo-credits__list a {
    color: var(--color-text-light);
    overflow-wrap: anywhere;
}

.photo-credits__list a:hover,
.photo-credits__list a:focus {
    color: var(--color-text-bold);
}


/* -------------------------------------------------------------------
 * ## responsive : pas de rupture entre les écrans
 * ------------------------------------------------------------------- */

/* réservation : la grille s'adapte à la largeur réelle de sa colonne */
.reservation-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

.reservation-card {
    min-height: 0;
    min-width : 0;
}

.reservation-card p {
    margin-bottom: var(--vspace-1);
}

/* nav à 6 entrées : on resserre avant le passage au menu mobile */
@media screen and (min-width: 901px) and (max-width: 1200px) {
    .header-nav__links {
        gap: 0;
    }

    .header-nav__links a {
        padding-inline: 0.6rem;
    }
}

/* long words never push the page wider than the screen */
.text-display-title,
.intro-header__big-type,
.producer-card__title,
.event-card__title,
.wine-list__name,
.menu-list__item h4 {
    overflow-wrap: break-word;
    hyphens      : auto;
}

@media screen and (max-width: 1000px) {
    .s-cave__pic {
        aspect-ratio: 16 / 10;
        max-height  : none;
    }

    .s-access__end {
        margin-top: var(--vspace-1);
    }
}

@media screen and (max-width: 600px) {
    .menu-list__item {
        grid-template-columns: 6.4rem minmax(0, 1fr);
        padding-inline       : var(--vspace-0_5);
    }

    .menu-list__item-pic {
        width     : 6.4rem;
        grid-row  : span 2;
    }

    .menu-list__item-price {
        grid-column: 2;
        text-align : left;
        margin-top : var(--vspace-0_25);
    }

    .menu-list__item:has(.menu-list__item-pic > img[data-lpv-image-empty]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .menu-list__item:has(.menu-list__item-pic > img[data-lpv-image-empty]) .menu-list__item-price {
        grid-column: 1;
    }

    .highlights__value {
        font-size: var(--text-2xl);
    }
}


/* ------------------------------------------------------------------- 
 * ## ajustements après revue visuelle multi-écrans
 * ------------------------------------------------------------------- */

/* the hero name is a single short word per line: never hyphenate it */
.intro-header__big-type {
    hyphens      : manual;
    overflow-wrap: normal;
}

/* producteurs : 3 / 2 / 1 colonnes, jamais de rangée orpheline à 4 + 2 */
.producer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 1000px) {
    .producer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 550px) {
    .producer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* chiffres : 4 colonnes, puis 2 jusque sur les petits mobiles */
.highlights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 900px) {
    .highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* réservation : titre au-dessus, cartes sur toute la largeur */
.s-reservation__start,
.s-reservation__end {
    width: 100%;
}

.s-reservation__start {
    margin-bottom: var(--vspace-1_5);
}

.reservation-card h3 {
    font-size: var(--text-xl);
}

/* horaires du pied de page : l'horaire passe sous la période */
.s-footer .opening-hours li {
    flex-direction: column;
    align-items   : flex-start;
    margin-bottom : var(--vspace-0_375);
}

.s-footer .opening-hours__days {
    margin-right: 0;
}

.s-footer .opening-hours__time {
    color: var(--color-text-light);
}

/* "Comptoir" is twice as long as the source's word: scale the hero name so it
 * may overlap the photo (design intent) but never the intro text column */
.intro-header__big-type {
    font-size: clamp(var(--text-display), var(--text-3xl) + 6.4vw, 14rem);
}


/* ===================================================================
 * Boutons : angles droits, deux versions aux couleurs brutes
 *  - pleine   (.btn--primary) : #73030D plein, survol #732F3B
 *  - outline  (.btn)          : filet #F2F2F2, survol plein #F2F2F2 / texte #0D0D0D
 * ------------------------------------------------------------------- */
.btn,
input[type=submit] {
    --btn-radius    : 0;
    --btn-text-size : var(--text-xs);
    --btn-padding   : calc(var(--vspace-0_5) + 0.2rem);
    font-weight     : 500;
    letter-spacing  : 0.16em;
    text-transform  : uppercase;
    background-color: transparent;
    border-color    : var(--color-pure-white);
    color           : var(--color-pure-white);
}

.btn:focus,
.btn:hover,
input[type=submit]:focus,
input[type=submit]:hover {
    background-color: var(--color-pure-white);
    border-color    : var(--color-pure-white);
    color           : var(--color-pure-black);
}

.btn.btn--primary,
input[type=submit].btn--primary {
    background  : var(--color-1-500);
    border-color: var(--color-1-500);
    color       : var(--color-pure-white);
}

.btn.btn--primary:focus,
.btn.btn--primary:hover,
input[type=submit].btn--primary:focus,
input[type=submit].btn--primary:hover {
    background  : var(--color-1-700);
    border-color: var(--color-1-700);
    color       : var(--color-pure-white);
}

.btn:focus-visible,
input[type=submit]:focus-visible {
    outline       : 1px solid var(--color-pure-white);
    outline-offset: 3px;
}

.btn.btn--pill,
input[type=submit].btn--pill {
    --btn-radius: 0;
}

/* téléphone du header : outline */
.header-contact__num svg path {
    stroke: currentColor;
}

/* newsletter : champ et bouton à angles droits */
.footer-newsletter .mc-input-wrap {
    border-radius   : 0;
    background-color: transparent;
    border          : 1px solid var(--color-text-light);
}

.footer-newsletter input[type=email] {
    border-radius   : 0;
    background-color: transparent;
}

.footer-newsletter input[type=submit] {
    margin: 0;
}

@media screen and (max-width: 800px) {
    .footer-newsletter .mc-input-wrap {
        border: none;
    }

    .footer-newsletter input[type=email] {
        border: 1px solid var(--color-text-light);
    }

    .footer-newsletter input[type=submit] {
        width: 100%;
    }
}

/* retour en haut : carré, comme les boutons */
.ss-go-top a {
    border-radius: 0;
}

/* Jost a un œil plus petit que Roboto Flex : léger rattrapage du corps */
body {
    font-weight: 400;
}

.intro-block-content__text,
.s-about__content-end p {
    font-weight: 300;
    letter-spacing: 0.01em;
}

/* CTA compacts : petites marges internes, filet de 1px partout */
.btn,
input[type=submit] {
    --btn-border-width: 1px;
    --btn-padding     : 0.8rem;
    --btn-lineheight  : 2rem;
    --btn-gap         : 0.6rem;
}

.header-contact .btn {
    min-height: 0;
    height    : auto;
}

/* l'icône téléphone suit la couleur du texte du bouton (outline → survol) */
.header-contact__num svg {
    color : inherit;
    width : 1.4rem;
    height: 1.4rem;
}

/* newsletter : champ à la hauteur des CTA compacts */
.footer-newsletter input[type=email] {
    height     : 3.6rem;
    min-height : 0;
    line-height: 2rem;
    padding-top   : 0;
    padding-bottom: 0;
    margin-bottom : 0;
}

.footer-newsletter .mc-input-wrap {
    align-items: stretch;
}

@media screen and (max-width: 800px) {
    .footer-newsletter input[type=email] {
        flex      : none;
        width     : 100%;
        min-height: 3.6rem;
    }
}