/*
Theme Name: Brasserie de la Pieuvre — Child
Theme URI: https://brasseriedelapieuvre.fr
Description: Child theme of Virtue Premium for Brasserie de la Pieuvre. Holds self-hosted fonts and custom CSS so the parent theme can be updated safely.
Author: Brasserie de la Pieuvre
Template: virtue_premium
Version: 1.0.10
Text Domain: brasserie-pieuvre-child
*/

/* ------------------------------------------------------------------ *
 *  Custom CSS goes here. Fonts are declared separately in
 *  assets/fonts.css (see fonts/README.md to add or change a font).
 * ------------------------------------------------------------------ */

/* Anti-débordement horizontal : les rangées WPBakery "full-width"
 * (data-vc-full-width) débordent de quelques px et créent une mini-barre
 * de défilement horizontale sur mobile. On rogne ce débordement sans
 * toucher à la mise en page (l'en-tête est "notsticky", donc pas de
 * positionnement collant cassé). Ne modifie PAS la disposition mobile. */
html, body { overflow-x: hidden; }

/* Grand écran : élargir la zone de contenu (réduire les marges latérales)
 * pour que les colonnes de la gamme soient plus larges et le texte moins
 * haut — sans changer le nombre de colonnes ni la taille des images. */
@media (min-width: 1200px) {
    .container {
        width: auto !important;
        max-width: 1480px !important;
    }
}

/* Cartes de la gamme : uniformiser les images + compacter texte/titres.
 * IMPORTANT : tout est dans @media (min-width: 768px) → le MOBILE (< 768px,
 * où les colonnes s'empilent en pleine largeur) garde sa mise en page
 * d'origine, intacte. (.vc_col-has-fill = cartes produits) */
@media (min-width: 768px) {
    /* Photo pleine largeur, BORD À BORD (comme le site d'origine) : on retire
     * le padding intérieur de la carte (haut + côtés) et on remet les marges
     * du bloc image à zéro, pour qu'aucune bande blanche n'entoure la bière.
     * overflow:hidden fait épouser à la photo les coins arrondis de la carte. */
    .home .vc_col-has-fill > .vc_column-inner {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }
    /* Forcer TOUTE la chaîne du bloc image en pleine largeur. WPBakery met
     * .vc_figure ET .vc_single_image-wrapper en display:inline-block (largeur
     * calée sur le contenu) + centrés (text-align:center) → l'image carrée se
     * réduisait à sa largeur "hauteur × ratio" et laissait du blanc sur les
     * côtés. En passant toute la chaîne en block + width:100%, le width:100%
     * de l'<img> se résout enfin sur la pleine largeur de la carte, et
     * object-fit:cover la fait s'étendre BORD À BORD (à n'importe quelle
     * hauteur). C'était ça le vrai problème, pas la hauteur. */
    .home .vc_col-has-fill .wpb_single_image,
    .home .vc_col-has-fill .wpb_single_image .vc_figure,
    .home .vc_col-has-fill .vc_single_image-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: 0 !important; /* pas de bordure grise : photo à fleur de carte */
        text-align: center;
    }
    .home .vc_col-has-fill .wpb_single_image { margin-bottom: 14px !important; }
    .home .vc_col-has-fill img.vc_single_image-img {
        width: 100% !important;
        max-width: 100% !important;
        height: 282px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        border-radius: 0 !important; /* coins gérés par la carte (overflow:hidden) */
    }
    /* Texte (titre + description) ré-encartré, puisque la carte n'a plus de
     * padding. 18px sur les côtés, appliqué à TOUTES les cartes (uniformité). */
    .home .vc_col-has-fill .vc_custom_heading,
    .home .vc_col-has-fill .wpb_text_column {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    .home .vc_col-has-fill .wpb_text_column:last-child {
        padding-bottom: 18px !important;
    }
    .home .vc_col-has-fill .wpb_text_column,
    .home .vc_col-has-fill .wpb_text_column span {
        font-size: 13.6px !important;
        line-height: 1.5 !important;
    }
    .home .vc_col-has-fill .vc_custom_heading {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    /* Largeur de colonne demandée. */
    .home .vc_col-sm-4 {
        width: 25.333333% !important;
    }
    /* Recentrer les rangées de la gamme : à 25.333 % les rangées de 3 cartes
     * (= ~76 %) étaient collées à gauche avec un vide à droite. justify-content
     * center répartit l'espace des deux côtés. La rangée de 4 cartes (éphémère,
     * sm-3 = 100 %) reste pleine largeur. Cible : les 3 rangées gamme qui
     * partagent vc_custom_1482330782692. */
    .home .vc_custom_1482330782692.vc_row-flex {
        justify-content: center !important;
    }
}

/* Small gap between top-nav items so the hover / active-page highlights
 * don't touch each other. */
.sf-menu > li { margin-right: 10px; }
.sf-menu > li:last-child { margin-right: 0; }

/* Accessibility (WCAG AA) — contrast.
 * The beer cards on the homepage are white; the H2 titles and in-card
 * links use the brand orange #d1891c (~2.8:1 on white = fails). #9c5e08
 * is a darker amber (~5.2:1) that passes while staying on-brand.
 * Scoped to .home so headings on dark/teal rows are not affected.
 * To revert, delete this block. To tweak the shade, change #9c5e08. */
.home .vc_custom_heading,
.home .wpb_text_column a {
    color: #9c5e08 !important;
}
/* ...except the teal intro row (#36827f bg), where links must stay light —
 * the darker amber above would fail contrast there. */
.home .vc_custom_1701094701500 a {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Cookie consent buttons (Cookie Notice plugin) — WCAG AA contrast.
 * The plugin sets background:#00a99d INLINE; with white text that's ~2.9:1
 * (fails AA). #007d74 is a darker teal (~5.0:1) that passes. An author
 * !important rule overrides the inline style (normal author importance). */
#cn-accept-cookie.cn-button,
#cn-refuse-cookie.cn-button,
#cn-more-info.cn-button,
.cookie-notice-container .cn-button {
    background-color: #007d74 !important;
    color: #ffffff !important;
}
/* Cookie notice BAR text — the bar background is brand orange #d1891c set
 * INLINE by the plugin; white text on it is ~2.9:1 (fails AA). Near-black
 * text (#1a1a1a) on that orange is ~6:1 → passes, and keeps the brand colour.
 * The teal buttons above keep white text (their ID+class rule is more specific). */
#cookie-notice,
#cookie-notice #cn-notice-text,
#cookie-notice .cn-text-container {
    color: #1a1a1a !important;
}
#cookie-notice #cn-notice-text a {
    color: #1a1a1a !important;
    text-decoration: underline;
}

/* Native share buttons (replaces AddToAny). Teal circular icons,
 * matching the previous look (#36827f bg, white icon). No external assets. */
.bdlp-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0;
}
.bdlp-share__label {
    font-weight: 700;
    margin-right: 4px;
}
.bdlp-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #36827f;
    color: #fff !important;
    transition: opacity .15s ease;
}
.bdlp-share__btn:hover,
.bdlp-share__btn:focus {
    opacity: .8;
    color: #fff !important;
}
.bdlp-share__btn svg {
    fill: currentColor;
}

/* Bigger, more readable post dates on the blog / "Nos actualités" listing.
 * .postday is the day number ("30"); the month+year ("Avr 2026") is the
 * plain text in .postdate. Both were too small to read. */
.postdate {
    font-size: 35px !important;
    line-height: 1.25;
    font-weight: 700;
}
.postdate .postday {
    font-size: 50px !important;
    line-height: 1.1;
    display: block;
}

/* Lightweight map embed (replaces WP Go Maps). */
.bdlp-map {
    width: 100%;
    line-height: 0;
}
.bdlp-map iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Points-de-vente map (self-hosted Leaflet + OpenStreetMap). */
.bdlp-pv-map {
    height: 600px;
    width: 100%;
    border-radius: 8px;
    z-index: 0; /* keep below sticky header */
}
@media (max-width: 600px) {
    .bdlp-pv-map { height: 440px; }
}
/* Plain-text name labels (Google-style): no box, just text with a white halo
 * for legibility over the map. Shown progressively (no overlap) by JS. */
.bdlp-pv-label,
.leaflet-tooltip.bdlp-pv-label {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #2b2b2b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    text-shadow:
        -1px -1px 2px #fff, 1px -1px 2px #fff,
        -1px 1px 2px #fff, 1px 1px 2px #fff, 0 0 3px #fff;
}
.bdlp-pv-label::before { display: none !important; } /* no arrow */