/*
 * Les Brasseurs — Brand tokens & fonts
 *
 * Couche projet qui SURCHARGE la base neutre PULSE (tokens.css).
 * Source : maquette Figma "Home 2 - version 2" (fichier S6ytqnBFDWiJEtO8R1lvt8).
 * Chargé après pbs-tokens (voir inc/enqueue.php).
 */

/* ============================================================
   1. Polices self-hosted  (fichiers dans assets/fonts/)
   ============================================================
   Déposer les .woff2 avec EXACTEMENT ces noms. Tant qu'ils sont
   absents, le texte tombe sur le fallback système (pas de casse).
*/
/* Campaign Serif : PAS self-hosted — servie par Adobe Fonts (kit
   https://use.typekit.net/eel0rus.css, enqueue dans inc/enqueue.php).
   Le kit déclare la famille "campaign-serif" (slug en minuscules),
   graisses 400 + 700, normal + italique. */
@font-face {
    font-family: "Tosh B";
    src: url("fonts/tosh-b-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tosh B";
    src: url("fonts/tosh-b-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tosh B";
    src: url("fonts/tosh-b-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "TRY Tosh A";
    src: url("fonts/try-tosh-a-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "TRY Tosh A";
    src: url("fonts/try-tosh-a-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ============================================================
       2. Palette Les Brasseurs
       ============================================================ */
    --lb-green:         #00674D;              /* vert de marque (nav, titres, boutons) */
    --lb-green-dark:    #004B38;              /* vert foncé (labels boutons) */
    --lb-green-90:      rgba(0, 103, 77, 0.9);
    --lb-green-40:      rgba(0, 103, 77, 0.4);
    --lb-amber:         #CF8B3E;              /* accent or/ambre (rubans, prix, eyebrows) */
    --lb-ink:           #291600;              /* texte courant (brun) */
    --lb-black:         #1F1D18;              /* fond footer */
    --lb-red:           #CC0000;              /* statut "fermé" */
    --lb-cream:         #ECDCBB;              /* fond de page */
    --lb-sand:          #F2D7A8;              /* fond de section */
    --lb-cream-light:   #FFF0D6;              /* fond "Notre histoire" */
    --lb-white:         #FFFFFF;

    /* ============================================================
       3. Typographie
       ============================================================ */
    --lb-font-display:  "campaign-serif", Georgia, "Times New Roman", serif;
    --lb-font-body:     "tosh-b", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lb-font-alt:      "tosh-a", "tosh-b", system-ui, sans-serif;

    /* Échelle de tailles (valeurs px de la maquette 1440) */
    --lb-fs-display:    88px;   /* hero H1 */
    --lb-fs-h1:         62px;   /* titres de section */
    --lb-fs-h2:         36px;
    --lb-fs-h3:         32px;
    --lb-fs-h4:         24px;   /* titres de carte */
    --lb-fs-body-lg:    22px;
    --lb-fs-body:       18px;
    --lb-fs-sm:         14px;
    --lb-fs-xs:         12px;

    /* Interlignes / interlettrages spécifiques maquette */
    --lb-lh-display:    0.9;      /* 79.2 / 88 */
    --lb-ls-display:    -0.015em;
    --lb-ls-h1:         -0.0213em;
    --lb-ls-eyebrow:    0.3em;    /* labels majuscules */

    /* ============================================================
       4. Rayons (valeurs relevées dans la maquette)
       ============================================================ */
    --lb-radius-xs:     5px;
    --lb-radius-sm:     7px;
    --lb-radius-md:     15px;
    --lb-radius-lg:     20px;
    --lb-radius-xl:     25px;
    --lb-radius-2xl:    40px;
    --lb-radius-pill-sm:70px;
    --lb-radius-pill:   100px;

    /* ============================================================
       5. Layout
       ============================================================ */
    --lb-page-gutter:   75px;    /* marge latérale desktop de la maquette */
    --lb-content-max:   1290px;  /* largeur de contenu max */

    /* ============================================================
       6. Mapping → tokens PULSE (les composants de base héritent la marque)
       ============================================================ */
    --pulse-color-primary:       var(--lb-green);
    --pulse-color-primary-hover:  var(--lb-green-dark);
    --pulse-color-accent:        var(--lb-amber);
    --pulse-color-bg:            var(--lb-cream);
    --pulse-color-bg-alt:        var(--lb-sand);
    --pulse-color-fg:            var(--lb-ink);
    --pulse-color-danger:        var(--lb-red);
    --pulse-font-sans:           var(--lb-font-body);
    --pulse-font-serif:          var(--lb-font-display);
    --pulse-container-max:       var(--lb-content-max);
}

/* La maquette n'a pas de variante sombre : on neutralise le dark auto de la base PULSE. */
@media (prefers-color-scheme: dark) {
    :root {
        --pulse-color-bg:       var(--lb-cream);
        --pulse-color-bg-alt:   var(--lb-sand);
        --pulse-color-fg:       var(--lb-ink);
    }
}

/* ============================================================
   7. Application de base (front + canvas Bricks)
   ============================================================
   Les polices s'appliquent globalement pour éviter de les fixer
   élément par élément dans Bricks :
   - corps de texte  → Tosh B
   - titres (h1..h4) → Campaign Serif
*/
body,
.brx-body {
    font-family: var(--lb-font-body);
    color: var(--lb-ink);
}

h1, h2, h3, h4,
.brxe-heading {
    font-family: var(--lb-font-display);
    /* Le kit Adobe fournit 400 + 700 (normal & italique) : on interdit juste
       les graisses/italiques synthétisées pour les combinaisons absentes. */
    font-synthesis: none;
}

/* ============================================================
   8. Correctif burger menu mobile (nav-menu Bricks)
   ============================================================
   Bricks génère son CSS dynamique dans `@layer bricks`, mais son CSS
   d'élément statique (nav-menu.min.css, `.bricks-mobile-menu-toggle{display:none}`)
   n'est PAS dans un layer. En cascade CSS, une règle non-layered gagne
   toujours face à une règle layered, quelle que soit la spécificité — donc
   le `display:block` responsive du burger (dans @layer bricks) ne l'emporte
   jamais et le bouton reste invisible sur mobile. Cette règle n'est pas
   layered : elle gagne face au display:none de base.
*/
@media (max-width: 991px) {
    .bricks-mobile-menu-toggle {
        display: block !important;
    }
}

/* ============================================================
   9. "En images" — carrousel mobile (fiche établissement)
   ============================================================
   Le bloc image-gallery Bricks (`.bricks-layout-wrapper[data-layout=grid]`)
   pose son `display:grid` dans un CSS d'élément NON-layered — un override
   layered (_cssCustom) ne gagne donc pas. On force ici, en non-layered, la
   grille en carrousel horizontal scroll-snap sur mobile, comme la section
   Instagram. Le sélecteur #brxe-etsggal n'existe que sur la fiche établissement.
*/
@media (max-width: 767px) {
    #brxe-etsggal {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding-bottom: 6px;
        margin-right: -20px;
        list-style: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
    }
    #brxe-etsggal::-webkit-scrollbar {
        display: none;
    }
    #brxe-etsggal > .bricks-layout-item {
        flex: 0 0 78% !important;
        width: 78% !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }
    #brxe-etsggal > .bricks-layout-item:last-child {
        margin-right: 20px !important;
    }
    #brxe-etsggal > .bricks-layout-item figure {
        margin: 0;
        aspect-ratio: 1 / 1;
    }
    #brxe-etsggal > .bricks-layout-item a,
    #brxe-etsggal > .bricks-layout-item img {
        width: 100% !important;
        height: 100% !important;
    }
    #brxe-etsggal > .bricks-layout-item img {
        object-fit: cover;
    }
}

/* ============================================================
   10. Carte interactive — point(s) de localisation
   ============================================================
   Partagé par la home (5 points, essec) et les fiches établissement
   (1 point, etsiphoto*) — même image carte-etablissements.png.
   La vraie position est posée en JS (lb-etablissements.js, MAP_POS) :
   l'image est en `cover` dans des cadres de proportions variables, un %
   fixe du cadre ne tombe donc juste que pour une seule proportion. Les
   valeurs ci-dessous ne servent que sans JS : elles sont calculées pour
   le cadre desktop de la home (779/480).
*/
.lb-dot{position:absolute;width:20px;height:20px;z-index:2}
.lb-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(0,103,77,.9);box-shadow:0 0 0 10px rgba(0,103,77,.4);transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;cursor:pointer}
.lb-dot:hover,.lb-dot.lb-active{z-index:3}
.lb-dot:hover::before,.lb-dot.lb-active::before{transform:scale(1.35);background:#CC0000;box-shadow:0 0 0 13px rgba(204,0,0,.45)}
.lb-dot-1{left:calc(25.52% - 10px);top:calc(86.76% - 10px)} /* Genève */
.lb-dot-2{left:calc(29.28% - 10px);top:calc(70.42% - 10px)} /* Nyon */
.lb-dot-3{left:calc(45.22% - 10px);top:calc(57.33% - 10px)} /* Lausanne */
.lb-dot-4{left:calc(74.48% - 10px);top:calc(84.68% - 10px)} /* Sion */
.lb-dot-5{left:calc(57.27% - 10px);top:calc(12.35% - 10px)} /* Neuchâtel */

.lb-dot .lb-tip{position:absolute;left:50%;bottom:calc(100% + 16px);transform:translate(-50%,8px);width:max-content;max-width:none;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:#F2D7A8;border:3px solid rgba(0,75,56,.4);border-radius:5px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .25s ease, transform .25s ease, visibility .25s;pointer-events:none}
.lb-tip::after{content:"";position:absolute;top:100%;left:50%;width:11px;height:11px;background:inherit;border:inherit;border-top:none;border-left:none;transform:translate(-50%,-6px) rotate(45deg)}
.lb-dot.lb-closed .lb-tip{border-color:rgba(204,0,0,.4)}
.lb-dot:hover .lb-tip,.lb-dot.lb-active .lb-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.lb-tip .lb-tip-status{flex:0 0 auto;max-width:none;background:#fff;border-radius:7px;padding:4px 8px;font-family:var(--lb-font-body, sans-serif);font-size:14px;font-weight:500;line-height:1;color:#004B38}
.lb-dot.lb-closed .lb-tip .lb-tip-status{color:#CC0000}
.lb-tip .lb-tip-hours{flex:0 0 auto;max-width:none;font-family:var(--lb-font-alt, sans-serif);font-size:14px;font-weight:500;line-height:1;color:#004B38}

.lb-dot.lb-tip-below .lb-tip{bottom:auto;top:calc(100% + 16px);transform:translate(-50%,-8px)}
.lb-dot.lb-tip-below .lb-tip::after{top:auto;bottom:100%;border:inherit;border-bottom:none;border-right:none;transform:translate(-50%,6px) rotate(45deg)}
.lb-dot.lb-tip-below:hover .lb-tip,.lb-dot.lb-tip-below.lb-active .lb-tip{transform:translate(-50%,0)}

@media(max-width:600px){
    .lb-tip{padding:5px 8px 5px 5px}
    .lb-tip .lb-tip-status,.lb-tip .lb-tip-hours{font-size:12px}
}
@media(max-width:478px){
    .lb-dot .lb-tip{flex-direction:column;align-items:flex-start;gap:2px;max-width:min(200px, calc(100vw - 48px)) !important}
}

/* ============================================================
   11. Prix des bières vides
   ============================================================
   Plus de prix sur les pages bières (inc/tarifs.php) : le prix vide de la
   fiche bière ne doit pas garder sa place dans la colonne (row-gap 64px).
   Il réapparaît dès qu'un prix (canette) est saisi.
   ============================================================ */
.lb-price-split:empty{display:none}

/* Fiche bière, mobile : la rangée degré / volume / IBU déborde en anglais
   (« from 25cl » plus long que « dès 25cl ») → écarts réduits. */
@media(max-width:767px){
    #brxe-fbhstatrow{column-gap:16px !important}
}

/* ============================================================
   12. Cartes bières régulières (retours client du 04.11)
   ============================================================
   Accueil (catcard), Nos bières (bccard), « Autres bières » des fiches (occard).
   Maquette (_figma-ref/figma-catalogue-row.png) : nom à gauche, « dès 25cl · 5% »
   à droite sur la ligne de base du nom. Le libellé reste sur une ligne (il se cassait
   en 2-3 lignes à côté des noms longs : c'est le nom qui passe à la ligne) ; le corps
   remplit la carte et la ligne prix / « Voir la fiche » est poussée en bas → même
   alignement sur toute la rangée, quelle que soit la longueur du nom ou du texte.
   ============================================================ */
/* Classes doublées : la CSS inline de Bricks cible déjà « .brxe-catcard .brxe-catcnr.brxe-block » (0,3,0). */
.brxe-catcbody.brxe-catcbody.brxe-block,.brxe-bcbody.brxe-bcbody.brxe-block,.brxe-ocbody.brxe-ocbody.brxe-block{flex-grow:1;width:100%}
.brxe-catcnr.brxe-catcnr.brxe-block.brxe-block,.brxe-bctop.brxe-bctop.brxe-block.brxe-block,.brxe-octop.brxe-octop.brxe-block.brxe-block{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:baseline;column-gap:12px;width:100%}
.brxe-catcname.brxe-catcname,.brxe-bcname.brxe-bcname,.brxe-ocname.brxe-ocname{flex:1 1 auto;min-width:0}
.brxe-catctag.brxe-catctag.brxe-catctag.brxe-catctag,.brxe-bctag.brxe-bctag.brxe-bctag.brxe-bctag,.brxe-octag.brxe-octag.brxe-octag.brxe-octag{white-space:nowrap;flex-shrink:0;text-align:right;margin:0;width:auto;max-width:none}
.brxe-catcpr.brxe-catcpr.brxe-block.brxe-block,.brxe-bcdiv.brxe-bcdiv.brxe-block.brxe-block,.brxe-ocdiv.brxe-ocdiv.brxe-block.brxe-block{margin-top:auto}

/* Accueil : la carte reprend la maquette, comme les cartes Nos bières (bande verte 324px,
   verre centré, marges 30px, libellé gris, filet orange au-dessus du prix). */
.brxe-catcimg.brxe-catcimg.brxe-block.brxe-block{height:324px;padding:56px 101px;align-items:center;border-radius:39px 39px 0 0}
.brxe-catcbottle.brxe-catcbottle.brxe-block.brxe-block{width:100%;height:100%;background-position:center center}
.brxe-catcbody.brxe-catcbody.brxe-block.brxe-block{padding:14px 30px 20px;row-gap:12px}
.brxe-catctag.brxe-catctag.brxe-catctag.brxe-catctag{font-weight:500;color:rgba(41,22,0,.5)}
.brxe-catcpr.brxe-catcpr.brxe-block.brxe-block{border-top:1px solid rgba(207,139,62,.3);padding-top:12px}
@media(max-width:767px){
    .brxe-catcimg.brxe-catcimg.brxe-block.brxe-block{height:253px;padding:36px 30px}
    .brxe-catcbody.brxe-catcbody.brxe-block.brxe-block{padding-left:20px;padding-right:20px}
}

/* ============================================================
   13. Tablette paysage (992-1199px) - retours client du 04.11
   ============================================================
   En dessous de 1200px, le header desktop (logo + menu + 2 boutons + langue)
   dépassait de ~60px (scroll horizontal, sélecteur de langue hors écran sur
   iPad paysage) et le texte du bandeau orange du hero passait sous la photo.
   ============================================================ */
@media (min-width:992px) and (max-width:1199px){
    #brx-header #brxe-hdroot{column-gap:12px}
    #brx-header #brxe-hdnav .bricks-nav-menu.bricks-nav-menu{column-gap:4px}
    #brx-header #brxe-hdnav .bricks-nav-menu.bricks-nav-menu > li{margin-left:14px}
    #brx-header #brxe-hdnav .bricks-nav-menu > li > a,
    #brx-header #brxe-hdnav .bricks-nav-menu > li > .brx-submenu-toggle > *{font-size:13px}
    #brx-header #brxe-hdacts{column-gap:6px}
    #brx-header #brxe-hbres,#brx-header #brxe-hbcmd{padding-left:10px;padding-right:10px;font-size:13px}
    #brxe-hrosec #brxe-hrorbtxt{font-size:15px;letter-spacing:2.5px}
}