/* ============================================================
   BièresBretonnes - styles thème FSE
   Les boutons et typographie de base sont gérés dans theme.json.
   Ce fichier couvre : navigation, hero, cartes, sections, footer.
   ============================================================ */

:root {
  --paper:         #F0EFE7;
  --surface:       #FFFDF8;
  --surface-2:     #F2ECE0;
  --ink:           #25190F;
  --ink-soft:      #6A5A4A;
  --ink-faint:     #9C8A77;
  --line:          rgba(37,25,15,0.12);
  --line-soft:     rgba(37,25,15,0.07);
  --accent:        #BAC800;
  --accent-d:      #2A1C12;
  --accent-on:     #2F3F46;
  --dark-band:     #2A1C12;
  --dark-band-ink: #F3EADB;
  --shadow:        0 1px 2px rgba(37,25,15,.05), 0 18px 40px -24px rgba(37,25,15,.45);
  --shadow-sm:     0 1px 2px rgba(37,25,15,.06), 0 8px 22px -16px rgba(37,25,15,.4);
  --radius:        8px;
}

/* ── BASE ─────────────────────────────────────────────────── */

/* Texte réservé aux lecteurs d'écran, toujours masqué visuellement (contrairement
   à .skip-link qui s'affiche au focus) - utilisé pour préciser des liens comme
   "Lire la suite →" répétés à l'identique dans une liste de cartes. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--surface) !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* overflow-x: clip = comme hidden mais ne casse pas position:sticky (nav) */
body { overflow-x: clip; }

/* Évite l'espace vide (padding) laissé par un wp:group qui ne contient
   qu'un shortcode conditionnel (ex. [bb_free_space]) quand celui-ci ne
   renvoie rien - le bloc Shortcode n'a pas de balise propre, donc le
   groupe se retrouve réellement vide dans ce cas. */
.wp-block-group:empty { display: none; }
a { text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.kicker {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-d);
  font-weight: 500;
}

/* Styles de bière (taxonomie multi-valeurs) sur la fiche - pastilles
   discrètes sous la couleur (.kicker), même famille visuelle que les
   étiquettes d'article (.taxonomy-post_tag) mais sans le préfixe "#". */
.wp-block-post-terms.taxonomy-style_biere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
}
.wp-block-post-terms.taxonomy-style_biere a {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.wp-block-post-terms.taxonomy-style_biere a:hover {
  color: var(--accent-d);
  border-color: var(--accent-d);
  background: var(--surface);
}
.wp-block-post-terms.taxonomy-style_biere .wp-block-post-terms__separator {
  display: none;
}

/* Couleur "Accent souligné" de la palette (theme.json) : sélectionnable
   depuis l'outil de surlignage natif de l'éditeur, sans avoir à coder une
   classe CSS à la main. Le texte reste dans sa couleur normale (hérite du
   parent - mark a un noir par défaut sinon), le vert n'apparaît que dans un
   arc décoratif sous le mot, qui n'est pas concerné par les règles de
   contraste de texte. */
/* Ciblage structurel (position dans le H1 de la hero) plutôt que par
   classe/couleur : peu importe quelle couleur "Mettre en évidence" est
   choisie (ou pas) dans l'éditeur pour ce mot, ou si le formatage est
   désactivé/réactivé - impossible de casser l'effet en se trompant de
   couleur, contrairement à une classe/couleur de palette dédiée. */
.hero-left h1 mark {
  color: inherit !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 20' preserveAspectRatio='none'%3E%3Cpath d='M4 15 Q 110 2 216 15' fill='none' stroke='%23BAC800' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 14px;
  padding-bottom: .08em;
}

/* ── BOUTON TAG (point coloré - style natif FSE) ─────────────────── */

.wp-block-button.is-style-tag .wp-block-button__link,
.wp-block-button.is-style-tag .wp-element-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  box-shadow: none;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.wp-block-button.is-style-tag .wp-block-button__link::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.wp-block-button.is-style-tag .wp-block-button__link:hover {
  background: var(--surface) !important;
  border-color: var(--ink-faint) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ── BOUTON GHOST (style enregistré via register_block_style) */

.wp-block-button.is-style-ghost .wp-block-button__link,
.wp-block-button.is-style-ghost .wp-element-button {
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none;
  border: 1px solid var(--line) !important;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--surface-2) !important;
  border-color: var(--ink-faint) !important;
  box-shadow: var(--shadow-sm);
}

/* Bouton principal - transition au repos pour un retour fluide hors hover */
.wp-element-button,
.wp-block-button__link {
  transition: background .2s, transform .2s, box-shadow .2s;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
  background: #AEBE00;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(37,25,15,.08), 0 12px 24px -14px rgba(37,25,15,.5);
}

/* focus accessibilité */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-d);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── NAVIGATION ───────────────────────────────────────────── */

.site-nav,
nav.nav {
  position: sticky;
  top: 0;
  /* position:sticky + z-index crée un contexte d'empilement : le menu mobile
     plein écran de WordPress (z-index:100000 en interne) reste piégé DANS ce
     contexte et ne compte que pour cette valeur par rapport au reste de la
     page. Une valeur trop basse (ex. 50) se faisait donc passer devant par
     d'autres éléments à z-index élevé ailleurs dans le DOM (ex. le bouton
     "Filtres" de la carte (carte-brasseries), z-index:1001/9999) - la barre de
     nav doit toujours dominer le reste de la page. Valeur choisie sous la
     barre d'admin WordPress (#wpadminbar, z-index:99999 en natif) : au-delà
     de 99999, la nav du site passerait devant elle pour les utilisateurs
     connectés. */
  z-index: 90000;
  border-bottom: 1px solid rgba(37,25,15,0.10);
}

/* backdrop-filter sur ::before pour ne pas piéger position:fixed (l'overlay du menu mobile) */
.site-nav::before,
nav.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  z-index: -1;
}

.nav-inner {
  height: 76px;
  gap: 24px;
}

/* logo */
.site-nav .wp-block-site-logo img,
nav.nav .wp-block-site-logo img { height: 60px; width: auto; display: block; }

/* liens de navigation */
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
nav.nav .wp-block-navigation-item__content {
  color: var(--ink-soft);
  padding: 9px 14px;
  border-radius: 9px;
  transition: background .18s, color .18s;
}
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover,
nav.nav .wp-block-navigation-item__content:hover {
  color: var(--ink);
  background: var(--surface-2);
}

/* ── DROPDOWN SOUS-MENU (desktop) ────────────────────────────── */

.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  /* !important : la couleur de superposition du bloc Navigation (classe
     has-accent-background-color, en !important) s'applique aussi aux
     sous-menus ; ici on garde le dropdown clair sur desktop. */
  background: var(--surface) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 210px;
  overflow: hidden;
}

/* Items du dropdown */
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--ink-soft);
  transition: background .15s, color .15s, padding-left .15s;
}
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--surface-2);
  color: var(--ink);
  padding-left: 18px;
}

/* pillars */
.pillars { display: flex; flex-wrap: wrap; gap: 9px; margin: 30px 0 34px; }
.pillar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.pillar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* pied du hero : "À écumer avec modération" + réseaux */
.hero-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 30px;
}
.hero-foot .since {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ── RÉSEAUX SOCIAUX (wp:social-links) ───────────────────── */
/* WordPress génère des inline styles (color/background) par service sur le <li>.
   Seul !important peut les battre. Pour le reste (display, taille, border…)
   on utilise le même sélecteur que WP (.wp-social-link) → même spécificité
   mais notre feuille arrive après → on gagne par ordre de cascade.          */

.wp-block-social-links .wp-block-social-link.wp-social-link a {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
/* !important sur color/fill uniquement : nécessaire pour battre les inline styles de marque */
.wp-block-social-links .wp-block-social-link.wp-social-link a,
.wp-block-social-links .wp-block-social-link.wp-social-link a svg {
  color: var(--ink-soft) !important;
  fill: var(--ink-soft) !important;
}
.wp-block-social-links .wp-block-social-link.wp-social-link a:hover,
.wp-block-social-links .wp-block-social-link.wp-social-link a:focus {
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(186,200,0,.3);
  color: var(--accent-on) !important;
  fill: var(--accent-on) !important;
}
.wp-block-social-links .wp-block-social-link.wp-social-link a svg {
  width: 18px;
  height: 18px;
}

/* variante footer (fond sombre) */
/* Reset le background de marque sur le <li> - notre <a> est semi-transparent,
   la couleur du <li> saignait à travers. Spécificité (0,3,0) > :where() (0,1,0) */
.footer-brand .wp-block-social-links .wp-social-link {
  background-color: transparent;
}
.footer-brand .wp-block-social-links .wp-block-social-link.wp-social-link a {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7) !important;
  fill: rgba(255,255,255,.7) !important;
}
.footer-brand .wp-block-social-links .wp-block-social-link.wp-social-link a svg {
  color: rgba(255,255,255,.7) !important;
  fill: rgba(255,255,255,.7) !important;
}
.footer-brand .wp-block-social-links .wp-block-social-link.wp-social-link a:hover {
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(186,200,0,.35);
  color: var(--accent-on) !important;
  fill: var(--accent-on) !important;
}


/* ── SECTIONS ─────────────────────────────────────────────── */

.bb-section { padding: 64px 0 8px; }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  margin-bottom: 26px;
}

.lead { color: var(--ink-soft); margin: 8px 0 0; font-size: 16px; max-width: 46ch; }

.sec-tools, .sec-arrows { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.arrow {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: grid; place-items: center;
  transition: background .18s, color .18s;
}
.arrow:hover { background: var(--accent); color: var(--ink); border-color: transparent; }
.arrow:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 3px; border-radius: 12px; }
.arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
.arrow svg { width: 18px; height: 18px; }

.link-all {
  font-weight: 700;
  color: var(--accent-d);
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .18s;
}
.link-all:hover { gap: 10px; color: var(--accent-d); }

.wp-block-button.is-style-link-all .wp-block-button__link,
.wp-block-button.is-style-link-all .wp-element-button {
  background: transparent !important;
  color: var(--accent-d, var(--wp--preset--color--accent-dark)) !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-weight: 700;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .18s, color .18s;
}
.wp-block-button.is-style-link-all .wp-block-button__link::after,
.wp-block-button.is-style-link-all .wp-element-button::after {
  content: '→';
  transition: transform .2s;
}
.wp-block-button.is-style-link-all .wp-block-button__link:hover,
.wp-block-button.is-style-link-all .wp-element-button:hover {
  background: transparent !important;
  opacity: 1 !important;
  gap: 10px;
}
.wp-block-button.is-style-link-all .wp-block-button__link:hover::after,
.wp-block-button.is-style-link-all .wp-element-button:hover::after {
  transform: translateX(4px);
}


/* ── CARROUSEL ────────────────────────────────────────────── */

.rail,
.wp-block-post-template.rail {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: var(--wp--preset--spacing--20);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 40px;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
  width: 100%;
  min-width: 0;
}
.rail::-webkit-scrollbar { display: none; }

.card { scroll-snap-align: start; flex: 0 0 auto; }

/* ── CARTE AVIS ───────────────────────────────────────────── */

.r-card {
  box-sizing: border-box;
  width: 268px;
  flex: 1;                  /* remplit le <li> pour égaliser les hauteurs dans le rail */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s, box-shadow .22s;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.r-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.r-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.r-thumb { aspect-ratio: 1/1; background: #fff; overflow: hidden; position: relative; }
.r-thumb .wp-block-post-featured-image {
  margin: 0; width: 100%; height: 100%; display: block;
}
.r-thumb .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.r-thumb a img { width: 100%; height: 100%; object-fit: cover; }
.r-thumb img { transition: transform .4s; }

.r-card:hover .r-thumb img { transform: scale(1.05); }

.r-style {
  display: inline-block;
  align-self: flex-start;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-d);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
/* .r-style est enfant direct d'un conteneur flex (.r-body) : le reset core
   ".is-layout-flex > :is(*, div) { margin: 0 }" (spécificité 0,1,1) bat un
   simple ".r-style" (0,1,0) - on cible le vrai parent pour le battre. */
.r-body > .r-style { margin-bottom: 8px; }

.r-name { font-weight: 800; font-size: 18px; margin: 0; line-height: 1.2; }
.r-meta { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-soft); font-size: 13px; }

.r-brewery { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.r-brewery:hover { text-decoration: underline; }
.r-meta-sep { color: var(--ink-soft); }

/* ── CARTE BLOG ───────────────────────────────────────────── */

/* Chaque <li> devient un conteneur flex → la carte peut le remplir */
.archive-grid > li,
.brew-grid > li,
.rail > li {
  display: flex;
  flex-direction: column;
  flex: 0 0 268px;
}

.b-card {
  box-sizing: border-box;
  width: 100%;
  height: 100%;             /* remplit la cellule de la grille pour égaliser les hauteurs */
  flex: 1;                  /* idem si le parent est en flex (carrousel) */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s, box-shadow .22s;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.b-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.b-banner { aspect-ratio: 16/8; overflow: hidden; background: var(--surface-2); }
.b-banner .wp-block-post-featured-image,
.b-banner .wp-block-post-featured-image img,
.b-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-banner img { transition: transform .4s; }
.b-card:hover .b-banner img { transform: scale(1.04); }

.b-body { padding: var(--wp--preset--spacing--20); display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* .b-card a un layout flex sur les templates blog/tag/catégorie : le reset core
   ".is-layout-flex > :is(*, div) { margin: 0 }" (spécificité 0,1,1) bat un
   simple ".b-body" (0,1,0) - on cible le vrai parent pour le battre. */
.b-card > .b-body { margin-top: 8px; }
/* date + "Lire →" toujours en bas de la carte */
.b-body > *:last-child { margin-top: auto; }

.b-date {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.b-date a { color: inherit; }

.b-title { font-weight: 800; font-size: 18px; line-height: 1.22; }
.b-title a,
.b-title a:hover { color: inherit; }
.b-card:hover .b-title { color: var(--accent-d); }

.b-excerpt,
.b-excerpt p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin: 0; }

.b-more {
  margin-top: auto;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--accent-d);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .18s;
}
.b-more:hover { gap: 10px; color: var(--accent-d); }

/* ── ARTICLE À LA UNE (pattern article-featured) ─────────────────── */

.featured-article {
  overflow: hidden;
  margin-bottom: 40px;
  padding: 0 !important;
  box-shadow: var(--shadow-sm);
  transition: transform .22s, box-shadow .22s;
}

.featured-article:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.featured-article__media {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 16/8 !important;
}

.featured-article__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform .4s;
}

.featured-article:hover .featured-article__media img {
  transform: scale(1.04);
}

.featured-article__content {
  padding: var(--wp--preset--spacing--40);
  margin-block-start: 0;
}


.featured-article__title {
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 14px;
}

.featured-article__title a,
.featured-article__title a:hover { color: inherit; }

.featured-article:hover .featured-article__title { color: var(--accent-d); }

.featured-article__excerpt,
.featured-article__excerpt p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

.featured-article__date {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.featured-article__more {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-d);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .18s;
}

.featured-article__more:hover { gap: 10px; }

/* ── CARTE RECETTE ────────────────────────────────────────── */

.rec-card {
  width: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform .22s, box-shadow .22s;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
  background: #222;
  display: block;
  margin-top: 5px;
}
.rec-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.rec-card .wp-block-post-featured-image,
.rec-card .wp-block-post-featured-image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.rec-card:hover .wp-block-post-featured-image img { transform: scale(1.06); transition: transform .5s; }

.rec-card .scrim {
  position: absolute; inset: 0;
  margin-block-start: 0;
  background: linear-gradient(to top, rgba(15,9,4,.85) 8%, rgba(15,9,4,.1) 55%, rgba(15,9,4,.15));
  z-index: 1;
}

.rec-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px;
  color: #FBF5EA;
  z-index: 2;
}
.rec-info .b-date { color: rgba(251,245,234,.7); }
.rec-info .t { font-weight: 800; font-size: 18px; line-height: 1.2; margin-top: 6px; }
.rec-info .t a { color: inherit; }

/* ── BRASSERIES ───────────────────────────────────────────── */

.brew-grid,
.wp-block-post-template.brew-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--20);
  list-style: none;
  margin: 0; padding: 0;
}

.brew-card {
  box-sizing: border-box;
  flex: 1;                  /* remplit le <li> pour égaliser les hauteurs */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 24px 26px;
  text-align: center;
  transition: transform .22s, box-shadow .22s;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.brew-card .brew-logo { margin-bottom: 8px; }
/* "Lire la suite" toujours en bas */
.brew-card > *:last-child { margin-top: auto; }
.brew-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* Taille fixée en CSS (pas dans le panneau "Dimensions" du bloc en FSE) :
   le wrapper doit être un carré pour que border-radius:50% forme un cercle
   - un wrapper en layout "flow"/"constrained" sans largeur explicite
   s'étire à 100% et donne une ellipse, pas un cercle.
   .brew-logo seul = 92px (cartes/archive). Ajouter --lg pour la fiche. */
.brew-logo {
  width: 92px; height: 92px;
  margin: 0 auto;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.brew-logo--lg {
  width: 150px; height: 150px;
}
/* !important : le bloc Image garde parfois un attribut scale:"cover" posé
   en style inline même quand on retire la largeur/hauteur dans l'éditeur
   (le réglage "Échelle" disparaît alors de l'interface, mais la valeur
   enregistrée continue de s'appliquer). On force "contain" pour ne jamais
   rogner le logo. */
.brew-logo .wp-block-post-featured-image img,
.brew-logo img {
  display: block !important;
  width: 78% !important;
  height: 78% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.brew-name { font-weight: 800; font-size: 16px; line-height: 1.25; margin: 0; }
.brew-name a { color: inherit; }

/* ── CTA BAND ─────────────────────────────────────────────── */

.cta-grid {
  /* display:grid et colonnes gérés par le layout natif WP (minimumColumnWidth: 220px) */
}

.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--dark-band);
  color: #F3EADB;
  padding: 34px 26px;
  min-height: 208px;
  display: flex;
  flex-direction: column;
  transition: transform .22s, box-shadow .22s;
}
.cta-card.accent  { background: var(--accent);  color: var(--accent-on); }
.cta-card.blue    { background: #3EA8C2; color: #0E2B33; }
.cta-card.magenta { background: #D60450; color: #FFF1F5; }
.cta-card:hover   { transform: translateY(-5px); box-shadow: var(--shadow); }
.cta-card p.cta-card__title { margin: 0 0 8px; font-size: 21px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; opacity: 1; }
.cta-card p       { margin: 0; font-size: 14.5px; opacity: .8; line-height: 1.5; }
.cta-card.accent p,
.cta-card.blue p,
.cta-card.magenta p { opacity: 1; }

.cta-ico {
  width: 46px; height: 46px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  margin-bottom: 14px;
}
.cta-ico svg { width: 24px; height: 24px; }

.cta-card .go {
  margin-top: auto;
  padding-top: 22px;
  font-weight: 700;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .18s;
}
.cta-card:hover .go { gap: 12px; }
.cta-card a { color: inherit; }

.cta-card .wp-block-buttons { margin-top: auto; padding-top: 22px; }
.cta-card .wp-block-button.is-style-link-all .wp-block-button__link,
.cta-card .wp-block-button.is-style-link-all .wp-element-button { color: inherit !important; }

/* ── À PROPOS ─────────────────────────────────────────────── */

.about-section { padding: 80px 0 8px; }

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
}

.intro { color: var(--ink-soft); font-size: 17px; margin: 22px 0 0; }
.kenavo { font-weight: 800; font-size: 18px; margin-top: 28px; }

.about-qas { display: flex; flex-direction: column; gap: 4px; }

.qa { border-top: 1px solid var(--line); padding: 24px 0; }
.qa:last-child { border-bottom: 1px solid var(--line); }
/* .qa-head : flex géré nativement par WP (layout flex + blockGap: 12px dans le template) */
.qa-head { margin-bottom: 10px; }
.qa h3 { font-size: 19px; margin: 0; }
.qa .ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--accent-d);
  flex: none;
}
.qa p { margin: 12px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.qa ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.qa li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: 15.5px; }
.qa li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.qa a.inl, .qa p a, .qa ul a { color: var(--accent-d); font-weight: 700; border-bottom: 1.5px solid currentColor; }

/* ── FOOTER ───────────────────────────────────────────────── */
/* background, margin-top, padding footer-top, border footer-bar,
   warning styles → gérés via attributs de blocs Gutenberg       */

.footer-brand { max-width: 340px; }

.f-col-title {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-weight: 500;
}
.f-col a {
  display: block;
  padding: 5px 0;
  transition: color .15s;
}

.footer-bar a { font-weight: 700; border-bottom: 1px solid currentColor; transition: color .15s, border-color .15s; }

/* ── SHORTCODE CAROUSEL ───────────────────────────────────── */

.bb-sc-carousel { margin: 24px 0; border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; background: var(--surface); }
.rail .b-card { width: 320px; }
.bb-sc-carousel .sec-head { margin-bottom: 18px; }

/* ── LAYOUT FILTRE + GRILLE ───────────────────────────────── */

.bb-filter-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin: 24px 0;
}

.bb-filter-panel {
  flex: 0 0 260px;
  position: sticky;
  top: 96px;
}

.bb-filter-content { flex: 1; min-width: 0; }

.bb-beer-grid,
.bb-brewery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--20);
}

/* les cartes dans une grille ignorent leur largeur fixe (prévue pour le rail) */
.bb-beer-grid .r-card,
.bb-brewery-grid .brew-card {
  width: 100%;
}

/* ── UI FILTRES ───────────────────────────────────────────── */

.filter-wrapper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.filters-title {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

fieldset.filter-group {
  border: none;
  padding: 0;
  margin: 0;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.filter-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--ink-soft); }
.filter-btn.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.filter-btn.reset-btn { background: transparent; border-color: var(--line); color: var(--accent-d); font-weight: 700; }
.filter-btn.reset-btn:hover { background: var(--accent); color: var(--ink); border-color: transparent; }
.filter-btn:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 3px; border-radius: 999px; }
.filter-btn.locked { opacity: .55; cursor: default; }
.filter-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }

.filter-select {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  width: 100%;
  cursor: pointer;
}
.filter-select:focus { outline: 2px solid var(--accent-d); outline-offset: 2px; }

.filter-search-input {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.filter-search-input:focus { outline: 2px solid var(--accent-d); outline-offset: 2px; }
.filter-search-input::placeholder { color: var(--ink-soft); }

.filter-actions { flex-direction: row; align-items: center; }

.filter-count { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.count-badge  { font-size: 12.5px; font-family: "Spline Sans Mono", monospace; }
.loading      { color: var(--ink-soft); }

/* ── PAGINATION AJAX ──────────────────────────────────────── */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
}
.pagination a,
.pagination span {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.pagination a:hover { background: var(--ink); color: var(--surface); border-color: transparent; }
.pagination span.current { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pagination a.prev,
.pagination a.next { color: var(--ink); }
.pagination a.prev:hover,
.pagination a.next:hover { color: var(--surface); }
.pagination a.prev svg,
.pagination a.next svg,
.wp-block-query-pagination-previous svg,
.wp-block-query-pagination-next svg { width: 13px; height: 13px; flex-shrink: 0; }

.pagination-ellipsis {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--ink-soft);
  font-weight: 700;
}

/* ── CARTES BRASSERIES (meta) ─────────────────────────────── */

.brew-meta { font-size: 13px; color: var(--ink-soft); text-align: center; }

/* ── NO RESULTS ───────────────────────────────────────────── */

.no-results {
  color: var(--ink-soft);
  font-size: 16px;
  padding: 40px 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* ── RESPONSIVE FILTRES ───────────────────────────────────── */

/* Replié par défaut sur mobile (bb_filter_panel_toggle()) : masqué sur
   desktop, où le panneau reste toujours visible comme avant. */
/* Spécificité supérieure à .bb-toc__toggle (display:flex, non conditionné à
   un breakpoint) dont ce bouton réutilise le style - sans quoi, à
   spécificité égale, la règle .bb-toc__toggle l'emporte car elle vient plus
   tard dans la feuille de style, et le bouton reste visible sur desktop. */
button.bb-filter-panel__toggle { display: none; }

@media (max-width: 1024px) {
  .bb-filter-layout   { flex-direction: column; }
  .bb-filter-panel    { flex: none; width: 100%; position: static; }
  .bb-beer-grid,
  .bb-brewery-grid    { grid-template-columns: 1fr 1fr; }

  button.bb-filter-panel__toggle {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
  }
  .bb-filter-panel__toggle[aria-expanded="false"] + .bb-filter-panel__body {
    display: none;
  }
}

@media (max-width: 560px) {
  .bb-beer-grid,
  .bb-brewery-grid    { grid-template-columns: 1fr; }
}

/* ── CARTE AUTEUR ─────────────────────────────────────────── */

.new-post-author {
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Harmoniser les espacements avec l'ancienne composition (.bb-author-card) */
.new-post-author p.wp-block-paragraph {
  margin-bottom: 3px;
}

.new-post-author .wp-block-post-author-name {
  margin: 0 0 8px;
}

.new-post-author [class*="post-author-biography"] {
  margin: 0;
}

/* Liens site web + réseaux sociaux - sous la bio */
.bb-author-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Icônes réseaux sociaux - carré arrondi */
.bb-author-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}

.bb-author-link svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Bouton site web - pill avec texte + flèche, poussé à droite */
.bb-author-link--site {
  border-radius: 999px;
  padding: 8px 14px;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.bb-author-link--site svg {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.bb-author-link.bb-author-link--site:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.bb-author-link:hover {
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
}

/* ── TEMPLATES INTÉRIEURES ────────────────────────────────── */

.entry-title  { line-height: 1.06; }
.entry-meta   { font-family: "Spline Sans Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 16px; }

/* Étiquettes (post_tag) sur la fiche article - pastilles discrètes,
   distinctes du kicker (catégorie) qui reste le repère principal. */
.wp-block-post-terms.taxonomy-post_tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 24px;
}
.wp-block-post-terms.taxonomy-post_tag a {
  display: inline-flex;
  align-items: center;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.wp-block-post-terms.taxonomy-post_tag a::before {
  content: "#";
  margin-right: 3px;
  opacity: .55;
}
.wp-block-post-terms.taxonomy-post_tag a:hover {
  color: var(--accent-d);
  border-color: var(--accent-d);
  background: var(--surface);
}
/* Vire la virgule entre les pastilles - l'attribut separator du bloc est
   ré-écrasé à chaque synchro Create Block Theme, ce CSS survit lui. Scopé
   aux étiquettes (post_tag), pas aux autres types de contenu. */
.wp-block-post-terms.taxonomy-post_tag .wp-block-post-terms__separator {
  display: none;
}

/* Bandeau de transparence - articles tagués "Article sponsorisé" (injecté par
   PHP en tête de .entry-content, cf. functions.php). Mention légale
   obligatoire (art. 20 LCEN, art. L121-1 Code conso, loi n°2023-451), doit
   rester visible avant la lecture, pas juste dans le tag lui-même - fond
   teinté + bordure pour bien ressortir. */
.bb-disclosure-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-left: 3px solid var(--ink-faint);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 24px 0;
}
.bb-disclosure-banner svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--ink-faint); }
.bb-disclosure-banner strong { color: var(--ink); }

/* Mention discrète - avis de bière avec échantillon offert (cf. functions.php).
   Pas une obligation légale : juste icône + texte, sans fond ni bordure, pour
   ne pas entrer en collision visuelle avec la bordure d'un blockquote juste
   au-dessus dans le contenu. */
.bb-sample-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 24px 0;
}
.bb-sample-note svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--ink-faint); }
.bb-sample-note strong { color: var(--ink); }

/* Code en ligne (ex. rel="sponsored" dans un article) : pastille discrète
   aux couleurs du thème plutôt que le rendu par défaut du navigateur. */
:not(pre) > code {
  font-family: "Spline Sans Mono", monospace;
  font-size: .88em;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

.entry-content p { margin: 0 0 1.4em; }
.entry-content h2, .entry-content h3 { margin: 1.8em 0 .6em; }
.entry-content a { color: var(--accent-d); text-decoration: underline; text-underline-offset: 2px; }

/* Écran d'édition classique d'une Page (Pages → Toutes les pages) : le
   contenu y est affiché hors du modèle complet, donc sans classe
   entry-content autour - on cible directement le conteneur de l'éditeur. */
.editor-styles-wrapper a { color: var(--accent-d); text-decoration: underline; text-underline-offset: 2px; }

/* Icône "lien externe" après tout lien qui s'ouvre dans un nouvel onglet -
   signale qu'on quitte le site (cf. footer de ara.numerique.gouv.fr).
   background-color: currentColor + mask-image reprend la couleur du lien
   sans dépendre d'une teinte fixe. Exclut les liens purement iconographiques
   (réseaux sociaux) et ceux qui ont déjà leur propre indicateur intégré
   (site web de l'auteur, flèche SVG déjà présente). */
a[target="_blank"]:not(.wp-block-social-link-anchor):not(.bb-coordonnees__social):not(.bb-author-link)::after {
  content: "";
  display: inline-block;
  width: .75em;
  height: .75em;
  margin-left: .25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  text-decoration: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}


/* ── COMPAT SMARTSTART ────────────────────────────────────── */

/* Colonnes */
.ss-row { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 24px; }
.ss-col { min-width: 0; }
.ss-1-2  { flex: 0 0 calc(50% - 12px); }
.ss-1-3  { flex: 0 0 calc(33.333% - 16px); }
.ss-2-3  { flex: 0 0 calc(66.666% - 8px); }
.ss-1-4  { flex: 0 0 calc(25% - 18px); }
.ss-3-4  { flex: 0 0 calc(75% - 6px); }

@media (max-width: 720px) {
  .ss-row { flex-direction: column; gap: 16px; }
  .ss-col { flex: 1 1 100% !important; }
}

/* Infobox */
.ss-infobox {
  background: var(--surface-2);
  border-left: 4px solid var(--ink-faint);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
}
.ss-infobox-title { font-weight: 700; margin: 0 0 8px; font-size: 15px; }
.ss-infobox-body > *:last-child { margin-bottom: 0; }
.ss-infobox--accent  { border-color: var(--accent);  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ss-infobox--blue    { border-color: var(--wp--preset--color--blue); background: color-mix(in srgb, var(--wp--preset--color--blue) 10%, var(--surface)); }
.ss-infobox--magenta { border-color: var(--wp--preset--color--magenta); background: color-mix(in srgb, var(--wp--preset--color--magenta) 10%, var(--surface)); }
.ss-infobox--dark    { border-color: var(--dark-band); background: var(--surface-2); }

/* Button */
.ss-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp--preset--font-family--hanken-grotesk);
  font-weight: 700;
  text-decoration: none;
  border-radius: 11px;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.ss-btn--small  { font-size: 13px; padding: 8px 14px; }
.ss-btn--medium { font-size: 14px; padding: 11px 18px; }
.ss-btn--large  { font-size: 16px; padding: 14px 24px; }
.ss-btn--accent { background: var(--accent); color: var(--accent-on); }
.ss-btn--accent:hover { background: #AEBE00; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ss-btn--ghost  { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ss-btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-soft); }

/* Notification */
.ss-notification {
  display: block;
  padding: 14px 18px;
  border-radius: var(--radius);
  border-left: 4px solid currentColor;
  font-size: 15px;
  margin: 20px 0;
}
.ss-notification > *:last-child { margin-bottom: 0; }
.ss-notification--info    { background: #EBF4FF; color: #1A6BB5; }
.ss-notification--success { background: #EDFAF2; color: #1A7A40; }
.ss-notification--warning { background: #FFF8E6; color: #9A6900; }
.ss-notification--error   { background: #FFF0F0; color: #B91C1C; }

/* Accordion */
.ss-accordion { margin: 24px 0; }
.ss-accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--surface);
}
.ss-accordion-item + .ss-accordion-item { margin-top: -1px; border-radius: 0; }
/* :first-of-type/:last-of-type (pas :first-child/:last-child) : un <details>
   utilisé seul (sans le wrapper [accordion]) est mélangé à d'autres
   paragraphes dans le contenu, donc jamais littéralement premier/dernier
   enfant de son parent - seulement premier/dernier <details>. */
.ss-accordion-item:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.ss-accordion-item:last-of-type  { border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 0; }
.ss-accordion-item:only-of-type  { border-radius: var(--radius); }

.ss-accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .18s;
}
.ss-accordion-title::-webkit-details-marker { display: none; }
.ss-accordion-title:hover { background: var(--surface-2); }
.ss-accordion-item[open] > .ss-accordion-title { background: var(--surface-2); border-bottom: 1px solid var(--line); }

.ss-accordion-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  position: relative;
  transition: transform .22s, border-color .18s;
}
.ss-accordion-icon::before,
.ss-accordion-icon::after {
  content: '';
  position: absolute;
  background: var(--ink-soft);
  border-radius: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.ss-accordion-icon::before { width: 8px; height: 1.5px; }
.ss-accordion-icon::after  { width: 1.5px; height: 8px; transition: transform .22s; }
.ss-accordion-item[open] .ss-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.ss-accordion-item[open] .ss-accordion-icon { border-color: var(--accent-d); }

.ss-accordion-body { padding: 18px 20px; font-size: 15px; line-height: 1.65; }
.ss-accordion-body > *:last-child { margin-bottom: 0; }

/* Divider */
.ss-divider { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

/* Spacer */
.ss-spacer { display: block; }

/* Blockquote - natif HTML + shortcode [blockquote] */
.entry-content blockquote,
.wp-block-post-content blockquote,
.ss-blockquote {
  margin: 32px 0;
  padding: 20px 24px 20px 28px;
  border-left: 4px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.entry-content blockquote p,
.wp-block-post-content blockquote p,
.ss-blockquote p { margin: 0; font-size: 17px; line-height: 1.65; font-style: italic; color: var(--ink); }
.ss-blockquote-author { margin-top: 12px; font-size: 14px; color: var(--ink-soft); font-style: normal; }
.ss-blockquote-author a { color: var(--accent-d); text-decoration: none; }
.ss-blockquote-author a:hover { text-decoration: underline; }

/* ── BLOG : HEADER ────────────────────────────────────────── */

.blog-header { padding-bottom: 24px; }

.blog-cats.wp-block-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.blog-cats.wp-block-categories-list li { margin: 0; }
.blog-cats.wp-block-categories-list a {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .18s, color .18s, border-color .18s;
}
.blog-cats.wp-block-categories-list a:hover {
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
}

/* ── BLOG : CARTES ────────────────────────────────────────── */

.b-cat.wp-block-post-terms,
.b-cat,
.featured-article__kicker {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-d);
  font-weight: 500;
}
.b-cat.wp-block-post-terms a,
.b-cat a { color: inherit; }

/* Pied de carte (date + "Lire →") pour les cartes rendues en PHP
   ([bb_search_results]) - en FSE, c'est un bloc Groupe flex natif qui gère
   déjà ça, mais bb_render_post_card() sort du HTML simple sans cette mise
   en page, donc on la reproduit ici via une classe dédiée. */
.b-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── BLOG : PAGINATION ────────────────────────────────────── */

.wp-block-query-pagination {
  margin-top: 48px;
  gap: 6px;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  box-sizing: border-box;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  transition: background .15s, color .15s;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
}

/* .main-content-area { padding: 0 0 80px; } */

.archive-grid,
.wp-block-post-template.archive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  list-style: none;
  padding: 0; margin: 0;
}

.page-404 { text-align: center; padding: 100px 0; }
.page-404 p  { color: var(--ink-soft); margin: 16px 0 32px; }

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .brew-grid,
  .wp-block-post-template.brew-grid { grid-template-columns: 1fr 1fr; }
  /* .cta-grid : géré automatiquement par minimumColumnWidth WP */
  .archive-grid,
  .wp-block-post-template.archive-grid { grid-template-columns: 1fr 1fr; }
  .footer-top.wp-block-group { flex-direction: column; gap: 32px; }
}

@media (max-width: 560px) {
  .brew-grid,
  .wp-block-post-template.brew-grid { grid-template-columns: 1fr; }
  /* .cta-grid : géré automatiquement par minimumColumnWidth WP */
  .archive-grid,
  .wp-block-post-template.archive-grid { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; }
}


/* ── CONTACT FORM 7 ───────────────────────────────────────── */

.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Supprimer le <br> parasite que CF7 insère avant chaque champ */
.wpcf7-form br { display: none; }

/* Honeypot anti-spam injecté par le plugin Drag & Drop Multiple File Upload
   sur TOUS les formulaires CF7 (wpcf7_form_elements, sans condition de page),
   sans balisage caché - son propre CSS qui le masque ne charge que sur les
   pages où le plugin est scopé (has_shortcode), pas ici (formulaire imbriqué
   via do_shortcode dans [bb_coordonnees]). Le champ reste fonctionnel
   (toujours soumis, toujours vérifié côté plugin), juste masqué visuellement
   partout, quelle que soit la page. */
.wpcf7-form .wpcf7_hp_field { display: none !important; }

/* Paragraphes wrappers CF7 */
.wpcf7-form p,
.wpcf7-form .input-block,
.wpcf7-form .textarea-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labels */
.wpcf7-form label,
.wpcf7-form label strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

/* Le span wrapper CF7 est inline par défaut - le passer en block pour que width:100% fonctionne */
.wpcf7-form-control-wrap { display: block; }

/* Uniformiser le box-model sur tous les contrôles pour que width:100% soit cohérent */
.wpcf7-form-control { box-sizing: border-box; }

/* Champs texte, email, tel, url, number, textarea */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  box-shadow: 0 1px 2px rgba(37,25,15,.04);
  appearance: none;
}

.wpcf7-form-control.wpcf7-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

/* Chevron sur les selects (appearance:none supprime la flèche native) */
.wpcf7-form-control.wpcf7-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A5A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 38px;
}

/* Masquer les flèches native du champ number */
.wpcf7-form-control.wpcf7-number::-webkit-outer-spin-button,
.wpcf7-form-control.wpcf7-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpcf7-form-control.wpcf7-number { -moz-appearance: textfield; }

.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-url:focus,
.wpcf7-form-control.wpcf7-number:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus {
  border-color: var(--accent-d);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Champ invalide */
.wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--wp--preset--color--magenta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--magenta) 12%, transparent);
}

/* Message d'erreur par champ */
.wpcf7-not-valid-tip {
  font-size: 12.5px;
  color: var(--wp--preset--color--magenta);
  margin-top: 4px;
}

/* Champ fichier */
.wpcf7-form-control.wpcf7-file {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}

.wpcf7-form-control.wpcf7-file:hover {
  border-color: var(--accent-d);
  background: var(--surface-2);
}

.wpcf7-form-control.wpcf7-file::file-selector-button {
  padding: 6px 14px;
  margin-right: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s;
}

.wpcf7-form-control.wpcf7-file::file-selector-button:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
}

/* Acceptance / RGPD */
.wpcf7-acceptance {
  margin-top: 4px;
}

.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}

.wpcf7-acceptance input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--accent-d);
  cursor: pointer;
}

/* Bouton d'envoi */
.wpcf7-form-control.wpcf7-submit {
  align-self: flex-start;
  padding: 12px 28px;
  background: var(--accent);
  color: var(--accent-on);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .18s, transform .15s;
  position: relative;
}

.wpcf7-form-control.wpcf7-submit:hover { background: var(--accent-d); color: #fff; }
.wpcf7-form-control.wpcf7-submit:active { transform: translateY(1px); }

/* Spinner CF7 */
.wpcf7-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(37,25,15,.2);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: cf7-spin .7s linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}

@keyframes cf7-spin { to { transform: rotate(360deg); } }

/* Message de réponse globale - sélecteur aligné sur celui de CF7
   (.wpcf7 form .wpcf7-response-output) : plus spécifique que .wpcf7-response-output
   seul, sans quoi le margin par défaut de CF7 (2em en haut) l'emportait. */
.wpcf7 form .wpcf7-response-output {
  margin: 0em 0.5em 1em;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14.5px;
  border: none;
}

/* Chaque état reprend le sélecteur ".wpcf7 form.X" de CF7 (pas seulement
   ".wpcf7-form.X") : CF7 ne fixe que border-color, mais à spécificité égale
   sur cette propriété c'est lui qui gagnait, imposant ses couleurs pleines
   (vert/rouge/orange CF7) par-dessus les teintes color-mix() du thème. */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output {
  background: color-mix(in srgb, #4CAF50 12%, transparent);
  color: #1B5E20;
  border: 1.5px solid color-mix(in srgb, #4CAF50 30%, transparent);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  background: color-mix(in srgb, var(--wp--preset--color--magenta) 10%, transparent);
  color: var(--wp--preset--color--magenta);
  border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--magenta) 25%, transparent);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
  background: color-mix(in srgb, #FF6B00 10%, transparent);
  color: #7A3000;
  border: 1.5px solid color-mix(in srgb, #FF6B00 25%, transparent);
}


/* ── CAPTION (compat SmartStart) ──────────────────────────────────────────── */

.ss-caption { margin: 1.5em auto; text-align: center; }
.ss-caption img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.ss-caption-text { font-size: 13px; color: var(--ink-soft); margin-top: 6px; font-style: italic; }


/* ── ACF SHORTCODES ────────────────────────────────────────────────────────── */

.bb-avis {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: var(--wp--preset--spacing--40);
}
.bb-avis__title {
  font-family: var(--wp--preset--font-family--spline-sans-mono);
  font-size: var(--wp--preset--font-size--normal);
  font-weight: 400;
  color: var(--wp--preset--color--accent-dark);
  margin: 0;
}
/* Informations officielles (SIRENE) : [bb_infos_officielles] */
/* Même carte et même titre que « Nos avis sur les bières de cette brasserie » (.bb-sc-carousel). */
.bb-infos-officielles {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 32px;
  background: var(--surface);
}
.bb-infos-officielles__title {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.bb-infos-officielles__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 0;
}
.bb-infos-officielles__list dt {
  color: var(--ink-soft);
  font-size: var(--wp--preset--font-size--small);
}
.bb-infos-officielles__list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bb-infos-officielles__list a { color: var(--ink); }
.bb-infos-officielles__source {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
@media (max-width: 600px) {
  .bb-infos-officielles__list { grid-template-columns: 1fr; gap: 2px; }
  .bb-infos-officielles__list dd { margin-bottom: 10px; }
}
.bb-free-space {
  background: #fff;
  border-top-left-radius: var(--wp--preset--border-radius--sm);
  border-top-right-radius: var(--wp--preset--border-radius--sm);
  border-bottom-left-radius: var(--wp--preset--border-radius--sm);
  border-bottom-right-radius: var(--wp--preset--border-radius--sm);
  padding: var(--wp--preset--spacing--40);
}
.bb-free-space__title {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.bb-avis__content,
.bb-avis__content p {
  font-size: 24px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.bb-avis__badge {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
}
.bb-avis__badge-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 4px;
}
.bb-avis__badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bb-avis__badge-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.bb-alcool,
.bb-contenant {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 800;
}
p:has(.bb-contenant) {
  text-align: center;
}

.bb-etat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
}

.bb-etat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.bb-etat--ouvert { color: #6E7A00; }
.bb-etat--ouvert .bb-etat__dot { background: #6E7A00; }

.bb-etat--ferme { color: var(--wp--preset--color--magenta); }
.bb-etat--ferme .bb-etat__dot { background: var(--wp--preset--color--magenta); }

.bb-production--nc,
.bb-label-aucun {
  color: var(--ink-soft);
}

.bb-galerie-photos-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  margin-top: 24px;
}

.bb-galerie-photos-card__kicker {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-d);
  font-weight: 500;
  margin: 0 0 16px;
}

.bb-galerie-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  width: 100%;
}

.bb-galerie-photos__item {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin: 0;
  cursor: pointer;
}

.bb-galerie-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.bb-galerie-photos__item:hover img {
  transform: scale(1.05);
}

/* Bouton "loupe" natif de la lightbox Gutenberg.
   !important nécessaire : le script natif pose un style inline
   (top/right) calculé en supposant un object-fit:contain avec
   lettrboxing, ce qui ne correspond pas à nos vignettes en cover. */
.bb-galerie-photos__item .lightbox-trigger {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(37,25,15,.6);
  border: none;
  opacity: 0;
  transition: opacity .2s;
}

.bb-galerie-photos__item:hover .lightbox-trigger {
  opacity: 1;
}

.bb-coordonnees-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 720px) {
  .bb-coordonnees-layout {
    grid-template-columns: 1fr;
  }
}

.bb-carte {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  z-index: 0;
}

/* Adoucit le rendu des tuiles OpenStreetMap, sans changer de fournisseur
   (garde les labels en français). */
.bb-carte .leaflet-tile-pane {
  filter: saturate(0.45) brightness(1.08) contrast(0.95);
}

.bb-coordonnees {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 32px;
}

.bb-coordonnees__title {
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 800;
}

.bb-coordonnees__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-soft);
}

.bb-coordonnees__item svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--ink-soft);
}

.bb-coordonnees__item a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.bb-coordonnees__item a:hover {
  text-decoration: underline;
}

/* Téléphone affiché au clic (cf. assets/php/tel-reveal.php) : numéro masqué
   suivi d'une pastille « Afficher le numéro ». Dans la colonne étroite, les
   deux passent à la ligne : l'icône reste alignée sur la première. */
.bb-coordonnees__item--tel { align-items: flex-start; }
.bb-coordonnees__item--tel svg { margin-top: 2px; }
.bb-tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.bb-tel-reveal {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.bb-tel-reveal__cta {
  padding: 3px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-d);
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color .15s;
}
.bb-tel-reveal:hover .bb-tel-reveal__cta { border-color: var(--accent-d); }
.bb-tel-reveal[aria-busy="true"] { opacity: .6; cursor: progress; }
.bb-tel-reveal__status { flex-basis: 100%; font-size: 13px; color: #b32d2e; }
.bb-tel-reveal__status:empty { display: none; }

.bb-coordonnees__socials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.bb-coordonnees__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background .15s, color .15s, border-color .15s;
}

.bb-coordonnees__social svg {
  width: 17px;
  height: 17px;
}

.bb-coordonnees__social:hover {
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
}

/* Bouton « Contacter la brasserie » ; même bouton pour l'invitation à proposer un
   partenariat d'affiliation (partenaires.php), d'où le sélecteur a.… plus précis
   que le style des liens. */
.bb-coordonnees__map,
a.bb-partenariat-invitation__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}

.bb-coordonnees__map svg,
a.bb-partenariat-invitation__btn svg {
  width: 14px;
  height: 14px;
}

.bb-coordonnees__map:hover,
a.bb-partenariat-invitation__btn:hover {
  background: var(--ink-soft);
}


/* ── Popup "Contacter la brasserie" (<dialog> natif) ─────────────────────── */

.bb-contact-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  max-width: 480px;
  width: calc(100% - 40px);
  max-height: calc(100vh - 40px);
  overflow: auto;
}
.bb-contact-dialog::backdrop {
  background: rgba(37, 25, 15, .55);
}
.bb-contact-dialog__inner {
  position: relative;
  padding: var(--wp--preset--spacing--40);
}
.bb-contact-dialog__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 16px;
  padding-right: 32px;
}
.bb-contact-dialog__close {
  position: absolute;
  top: var(--wp--preset--spacing--40);
  right: var(--wp--preset--spacing--40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.bb-contact-dialog__close svg { width: 18px; height: 18px; }
.bb-contact-dialog__close:hover { background: var(--surface-2); color: var(--ink); }

.bb-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
}

.bb-labels {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bb-label-logo {
  height: 50px;
  width: auto;
}

.bb-brasserie-carte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: var(--wp--preset--spacing--40);
}
.bb-brasserie-carte__header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bb-brasserie-carte__header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bb-brasserie-carte__logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--line);
}
.bb-brasserie-carte__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin: 0;
}
.bb-brasserie-carte__nom {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.bb-brasserie-carte__desc {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}
.bb-brasserie-carte__lieu {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 0;
}
.bb-brasserie-carte__lieu svg {
  flex-shrink: 0;
  color: var(--accent-d);
}
.bb-brasserie-carte__btn {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-d);
  text-decoration: none;
  margin-top: 6px;
  transition: opacity .18s;
}
.bb-brasserie-carte__btn:hover { opacity: .7; }


/* ── AFFILIATION (revendeurs, ateliers, partenaires) ──────────────────────── */

.bb-ateliers {
  --bb-ateliers-media: 300px;
  --bb-ateliers-gap: 20px;
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--bb-ateliers-gap);
  min-height: 280px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* L'image occupe toute la hauteur de l'encart (hauteur mini : 280px, sinon celle du
   texte) sans l'étirer : elle est hors du flux, donc ses proportions (le verre de bière
   est en portrait, 400px de haut à 300px de large) ne fixent pas la hauteur de l'encart. */
.bb-ateliers__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--bb-ateliers-media);
  height: 100%;
  object-fit: cover;
  display: block;
}
.bb-ateliers__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin-left: calc(var(--bb-ateliers-media) + var(--bb-ateliers-gap));
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
}

.bb-ateliers__title {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.bb-revendeurs__disclosure {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: -6px 0 0;
}

.bb-ateliers__desc {
  color: var(--ink-soft);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
  margin: 0;
}

.bb-revendeurs__list,
.bb-ateliers__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Invitation à proposer un partenariat d'affiliation, sous les boutons des
   partenaires publiés (partenaires.php) : une ligne discrète, lien texte + flèche. */
.bb-ateliers__invitation {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.bb-ateliers__invitation a {
  font-weight: 700;
  color: var(--accent-d);
  text-decoration: none;
}
.bb-ateliers__invitation a:hover {
  text-decoration: underline;
}

/* Ateliers Wecandoo (repli statique ou libellés spécifiques saisis à la
   main, souvent longs - ex. titre d'annonce Wecandoo copié tel quel) :
   on autorise le retour à la ligne et on limite la largeur, sinon un
   texte long déborde du pill (white-space: nowrap sur .filter-btn). */
.bb-ateliers__list .filter-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
  white-space: normal;
  text-align: left;
  max-width: 320px;
  border-radius: var(--radius);
}
.bb-ateliers__list .filter-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.bb-ateliers__logo {
  width: 100px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Carte partenaire : logo, nom, appel à l'action en dessous */
.bb-partenaire-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.bb-partenaire-card:hover {
  border-color: var(--accent-d);
  transform: translateY(-2px);
}
/* Dans un contenu libre, `.entry-content a` (souligné + couleur d'accent)
   l'emporte sur la règle de base : on la neutralise pour la carte entière. */
.entry-content a.bb-partenaire-card,
.entry-content a.bb-partenaire-card:hover {
  color: var(--ink);
  text-decoration: none;
}
.bb-partenaire-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-soft);
  overflow: hidden;
}
.bb-partenaire-card__logo svg { width: 24px; height: 24px; }
.bb-partenaire-card__logo-img { max-width: 48px; max-height: 48px; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.bb-partenaire-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.bb-partenaire-card__name {
  font-weight: 700;
  color: var(--ink);
}
.bb-partenaire-card__cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-d);
}

/* Grande carte : [bb_partenaire slug="..." size="large"] - logo plus grand,
   description sous le nom, pleine largeur du conteneur (plafonnée). */
.bb-partenaire-card--large {
  align-items: flex-start;
  gap: 20px;
  max-width: 640px;
  padding: 22px 24px;
}
.bb-partenaire-card--large .bb-partenaire-card__logo {
  width: 88px;
  height: 88px;
  border-radius: 12px;
}
.bb-partenaire-card--large .bb-partenaire-card__logo svg { width: 36px; height: 36px; }
.bb-partenaire-card--large .bb-partenaire-card__logo-img { max-width: 88px; max-height: 88px; }
.bb-partenaire-card--large .bb-partenaire-card__body { gap: 8px; }
.bb-partenaire-card--large .bb-partenaire-card__name { font-size: 18px; line-height: 1.25; }
.bb-partenaire-card--large .bb-partenaire-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.bb-partenaire-card--large .bb-partenaire-card__cta { font-size: 13px; margin-top: 2px; }

@media (max-width: 480px) {
  .bb-partenaire-card--large { flex-direction: column; }
}

/* Interrupteur général affiliation : décommenter la règle ci-dessous pour
   masquer d'un coup tous les éléments de revenu affilié (boutons/cartes
   partenaires, [bb_revendeurs], [bb_ateliers], [bb_partenaires_biere]) sans
   toucher au PHP - utile au lancement du nouveau site ou en cas de souci
   avec un partenaire. Les liens sponsorisés posés à la main dans le contenu
   libre n'ont pas cette classe et restent actifs. */
/*
.bb-affiliation {
  display: none;
}
*/

/* Mention automatique sur les liens sponsorisés posés à la main dans le
   contenu libre (articles, widgets...) - exclut les boutons partenaires
   (.filter-btn), qui ont déjà leur propre disclosure au-dessus de la liste.
   Limite connue : le contenu ::after n'est pas annoncé de façon fiable par
   tous les lecteurs d'écran, mais l'info reste aussi sur la page /go/. */
a[rel~="sponsored"]:not(.filter-btn):not(.bb-partenaire-card):not(.bb-go__btn)::after {
  content: "(lien affilié)";
  font-size: .85em;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-block;
  margin-left: .35em;
}


/* ── PAGE /GO/ (interstitiel avant lien affilié) ──────────────────────────── */

.bb-go-page {
  box-sizing: border-box;
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
}

.bb-go {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--ink);
}

.bb-go__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.bb-go__mark {
  width: 180px;
  height: auto;
  flex-shrink: 0;
}

.bb-go__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

.bb-go__card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 40px 40px 34px;
  max-width: 460px;
  width: 100%;
  box-sizing: border-box;
}

.bb-go__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.bb-go__icon svg { width: 24px; height: 24px; color: var(--accent-d); }

.bb-go__title {
  font-weight: 800;
  letter-spacing: -.015em;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}

.bb-go__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.bb-go__url {
  display: block;
  font-family: var(--wp--preset--font-family--spline-sans-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 20px;
  word-break: break-all;
}

.bb-go__disclosure {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 2px solid var(--accent-d);
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
  margin: 0 0 26px;
}
.bb-go__disclosure svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--accent-d); }
.bb-go__disclosure strong { color: var(--ink); }

.bb-go__actions { display: flex; gap: 10px; }

.bb-go__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  padding: 12px 16px;
  transition: transform .15s, background .15s;
}
.bb-go__btn--ghost { color: var(--ink-soft); background: transparent; border: 1px solid var(--line); }
.bb-go__btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.bb-go__btn--primary { color: var(--accent-on); background: var(--accent); border: 1px solid transparent; }
.bb-go__btn--primary:hover { transform: translateY(-1px); }
.bb-go__btn--primary svg { width: 14px; height: 14px; }
.bb-go__btn:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 2px; }

.bb-go__footer {
  text-align: center;
  padding: 20px;
  background: var(--paper);
}
.bb-go__footer p {
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink-faint);
  margin: 0 0 6px;
}
.bb-go__footer p:last-child { margin-bottom: 0; }
.bb-go__footer a { color: var(--ink-faint); }
.bb-go__footer-warning { font-weight: 800; }


/* ── RESPONSIVE MOBILE (≤ 600px) ──────────────────────────────────────────── */

.bb-sc-carousel--empty { display: flex; flex-direction: column; gap: 8px; }
.bb-autres-bieres__empty { font-size: var(--wp--preset--font-size--small); color: var(--ink-soft); margin: 0; }

.bb-autres-bieres__title {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 600px) {
  .bb-label-logo { height: 40px; }

  .bb-ateliers {
    flex-direction: column;
    min-height: 0;
  }
  .bb-ateliers__media {
    position: static;
    width: 100%;
    height: 160px;
  }
  .bb-ateliers__content {
    margin-left: 0;
    padding: var(--wp--preset--spacing--40);
  }
}

/* ── FORMULAIRE MAILPOET ─────────────────────────────────── */

#mailpoet_form_1 form.mailpoet_form {
  padding: 0 !important;
}

#mailpoet_form_1 .mailpoet_text,
#mailpoet_form_1 .mailpoet_textarea {
  width: 100% !important;
}

.mailpoet_form_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Email, checkbox, submit - pleine largeur */
.mailpoet_form .mailpoet_paragraph:nth-of-type(n+3),
.mailpoet_form input.mailpoet_submit {
  grid-column: 1 / -1;
}

/* Honeypot : forcer le masquage */
.mailpoet_hp_email_label {
  display: none !important;
}

/* Champs - wrapper */
.mailpoet_form .mailpoet_paragraph {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labels */
.mailpoet_form label.mailpoet_text_label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.mailpoet_form_html label,
.mailpoet_form_iframe label {
  margin-bottom: 5px !important;
}

/* Inputs texte / email */
.mailpoet_form input.mailpoet_text {
  width: 100%;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(37,25,15,.04);
  transition: border-color .18s, box-shadow .18s;
}

.mailpoet_form input.mailpoet_text:focus {
  border-color: var(--accent-d) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Fieldset checkbox - supprimer les styles navigateur */
.mailpoet_form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Legend "Politique de confidentialité" - traiter comme un label */
.mailpoet_form fieldset legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0;
  float: left;
  width: 100%;
}

/* Checkbox + texte sur une ligne */
.mailpoet_form label.mailpoet_checkbox_label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.4;
}

.mailpoet_form input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--accent-d);
  cursor: pointer;
}

/* Bouton submit */
.mailpoet_form input.mailpoet_submit {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-on);
  border: none;
  border-radius: var(--radius);
  padding: 12px 28px !important;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, transform .15s;
}

.mailpoet_form input.mailpoet_submit:hover {
  background: var(--accent-d);
  color: #fff;
}

.mailpoet_form input.mailpoet_submit:active {
  transform: translateY(1px);
}

.mailpoet_paragraph legend {
  font-size: 14px;
  padding: 5px;
}

/* Messages d'état : erreur / succès */
.mailpoet_message p {
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 10px 0 0;
}
.mailpoet_error_notice,
.mailpoet_message p.mailpoet_error {
  background: #FFF0F3;
  color: var(--wp--preset--color--magenta);
}
.mailpoet_message p.mailpoet_success {
  background: #F3FAE0;
  color: var(--accent-d);
}

/* Erreurs de validation inline (Parsley) */
.parsley-required,
.parsley-custom-error-message,
.mailpoet_validate_error {
  color: var(--wp--preset--color--magenta);
  font-size: 12px !important;
}
.parsley-errors-list,
[class*="mailpoet_error_"] {
  font-size: 12px;
  color: var(--wp--preset--color--magenta);
  margin-top: 0;
  list-style: none;
  padding: 0;
}
.mailpoet_form input.parsley-error,
.mailpoet_form select.parsley-error,
.mailpoet_form textarea.parsley-error {
  border-color: var(--wp--preset--color--magenta) !important;
}
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  border-color: var(--accent-d) !important;
}

/* ── TABLEAUX (bloc Table natif) ─────────────────────────── */

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
  margin-bottom: 32px;
}

.wp-block-table thead {
  background: var(--ink);
}

.wp-block-table thead th {
  color: var(--surface);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: left;
  padding: 12px 16px;
  border: none;
}

.wp-block-table tbody tr {
  border-bottom: 1px solid var(--line);
}

.wp-block-table tbody tr:last-child {
  border-bottom: none;
}

.wp-block-table tbody tr:nth-child(even) {
  background: var(--surface-2);
}

.wp-block-table td,
.wp-block-table th {
  padding: 12px 16px;
  color: var(--ink-soft);
  border: none;
  vertical-align: middle;
}

.wp-block-table tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
}

/* Variante "stripes" - si la classe est activée dans le bloc */
.wp-block-table.is-style-stripes table {
  border: none;
}

/* ── Styles propres au breakpoint mobile ── */

@media (max-width: 600px) {
  .wp-block-table table {
    font-size: 13px;
  }

  .wp-block-table td,
  .wp-block-table th {
    padding: 9px 10px;
  }
  .site-nav .nav-cta { display: none; }

  .nav-inner { height: 60px; gap: 0; }

  .site-nav .wp-block-site-logo img { height: 48px; }
}

.site-nav .wp-block-navigation__responsive-container-open svg,
.site-nav .wp-block-navigation__responsive-container-close svg {
  width: 32px;
  height: 32px;
}

/* ── Hero : image empilée sous le texte ──
   Seuil = point d'empilement des colonnes WordPress (781px), PAS le
   breakpoint tablette du thème (1024px) : au-dessus, l'image est à droite du
   texte et garde les arrondis natifs du bloc Cover (haut droit + bas droit). */

@media (max-width: 781px) {
  .hero-media .wp-block-cover {
    border-radius: 0 0 28px 28px !important;
  }
}

/* Forcer le menu burger sur tablette : WP core masque le bouton burger
   dès 600px et affiche le menu inline, qui wrap faute de place entre
   600 et 1024px. On force le mode overlay sur toute cette plage. */
@media (min-width: 600px) and (max-width: 1024px) {
  .site-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* ── UTILITAIRES DE VISIBILITÉ RESPONSIVE ────────────────────
   Mobile  : ≤ 600px
   Tablette: 601–1024px
   Desktop : > 1024px                                          */

@media (max-width: 600px) {
  .hide-on-mobile { display: none !important; }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .hide-on-tablet { display: none !important; }
}

@media (min-width: 1025px) {
  .hide-on-desktop { display: none !important; }
}

/* ── SIDEBAR BLOG ─────────────────────────────────────────────────── */

/* WordPress génère align-items:flex-start sur les colonnes flex :
   les widgets enfants doivent prendre toute la largeur manuellement. */
.wp-block-group.is-position-sticky.is-layout-flex > .wp-block-group {
  width: 100%;
}

/* ── BLOC RECHERCHE NATIF (sidebar blog, etc.) ───────────────────── */

.wp-block-search,
.wp-block-search__inside-wrapper {
  width: 100%;
}

.wp-block-search__inside-wrapper {
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  background: var(--surface);
  transition: border-color .18s, box-shadow .18s;
}

.wp-block-search__inside-wrapper:focus-within {
  border-color: var(--accent-d) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.wp-block-search__input {
  border: none !important;
  background: transparent !important;
  padding: 8px !important;
  font-size: 14px;
  color: var(--ink);
  outline: none !important;
  box-shadow: none !important;
}

.wp-block-search__button {
  background: transparent !important;
  color: var(--ink) !important;
  fill: var(--ink) !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: none !important;
  transition: background .18s, color .18s, border-radius .18s;
}

.wp-block-search__button:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  fill: var(--ink) !important;
  border-radius: var(--wp--preset--border-radius--xs);
}

.wp-block-search__button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── RÉSULTATS DE RECHERCHE ([bb_search_results]) ────────────────── */

.bb-search-section {
  margin-bottom: 56px;
}

.bb-search-section__title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bb-search-section__count {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

.bb-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* Neutralise les contraintes de largeur pensées pour d'autres contextes
   (carrousel .rail pour .r-card, grille FSE pour .b-card) afin que
   chaque carte remplisse sa cellule de cette grille générique. */
.bb-search-grid .r-card {
  width: 100%;
}

.bb-search-grid .brew-card {
  width: 100%;
}

.bb-search-no-results {
  font-size: 16px;
  color: var(--ink-soft);
  padding: 40px 0;
}

/* ── BLOC "RÉSUMÉ DE L'ARTICLE" + BOUTONS IA ─────────────────────────── */

.bb-resume-ia {
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  padding: 24px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.bb-resume-ia__label {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.bb-resume-ia__content {
  position: relative;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.bb-resume-ia__content p { margin: 0; }

.bb-resume-ia__ai { position: relative; margin-top: 18px; }
.bb-resume-ia__ai-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.bb-resume-ia__ai-title span { color: var(--accent-d); }

.bb-resume-ia__ai-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.bb-resume-ia__ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, color .2s, box-shadow .2s;
}
.bb-resume-ia__ai-btn:hover {
  transform: translateY(-2px);
  color: var(--accent-d);
  box-shadow: var(--shadow);
}

/* ── SOMMAIRE EN ACCORDÉON (habillage du bloc TOC SEOPress) ────────────── */

.wp-block-group.seopress-toc {
  margin-bottom: 40px;
}
.bb-toc {
  margin-bottom: 40px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.bb-toc__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
}
.bb-toc__icon { display: flex; color: var(--ink); }
.bb-toc__icon svg { width: 18px; height: 18px; }
.bb-toc__title { font-weight: 800; font-size: 15px; }
.bb-toc__count { font-size: 13.5px; color: var(--ink-soft); }
.bb-toc__chevron {
  margin-left: auto;
  display: flex;
  color: var(--ink-soft);
  transition: transform .25s;
}
.bb-toc__chevron svg { width: 18px; height: 18px; }
.bb-toc__toggle[aria-expanded="false"] .bb-toc__chevron { transform: rotate(180deg); }

.bb-toc__body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--line);
}
.bb-toc__toggle[aria-expanded="false"] + .bb-toc__body { display: none; }

.bb-toc__body nav { padding-top: 16px; }
.bb-toc__body nav > h2,
.bb-toc__body nav > h3,
.bb-toc__body nav > h4 { display: none; } /* titre "Sommaire" déjà dans le bouton */

.bb-toc__body nav > ul,
.bb-toc__body nav > ol {
  columns: 2;
  column-gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-toc__body nav > ul > li,
.bb-toc__body nav > ol > li { margin: 0; break-inside: avoid; }
.bb-toc__body nav li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.9;
}
.bb-toc__body nav li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-d);
}
.bb-toc__body nav > ul > li,
.bb-toc__body nav > ol > li { font-weight: 700; }
.bb-toc__body nav li li { font-weight: 500; padding-left: 14px; }
.bb-toc__body nav li li::before { background: var(--ink-faint); width: 4px; height: 4px; }
.bb-toc__body nav ul ul,
.bb-toc__body nav ol ol { list-style: none; margin: 0; padding: 0 0 0 4px; }
.bb-toc__body nav a { color: var(--ink-soft); text-decoration: none; }
.bb-toc__body nav a:hover { color: var(--accent-d); text-decoration: underline; }

@media (max-width: 600px) {
  .bb-toc__body nav > ul,
  .bb-toc__body nav > ol { grid-template-columns: 1fr; }
}


/* ── BLOC DÉTAILS (accordéon natif Gutenberg) ────────────────────────── */
/* Style de base pour tout wp:details isolé (FAQ, "Signaler une erreur"...).
   Même apparence que l'ancien [accordion_content] (.ss-accordion-*). */

.wp-block-details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.wp-block-details summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .18s;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary:hover { background: var(--surface-2); }
.wp-block-details[open] > summary { background: var(--surface-2); border-bottom: 1px solid var(--line); }

/* Mêmes barres dessinées en CSS (pas de glyphe texte "+"/"−") que
   .ss-accordion-icon, pour un rendu identique. Un seul pseudo-élément
   dessine les deux barres via deux background-image - la barre verticale
   est simplement masquée à l'ouverture (background-size 0 0), ce qui donne
   exactement le même résultat visuel que la rotation 90° de l'original
   (les deux barres, à 90°, se superposent parfaitement). */
.wp-block-details summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  background-image:
    linear-gradient(var(--ink-soft), var(--ink-soft)),
    linear-gradient(var(--ink-soft), var(--ink-soft));
  background-size: 8px 2px, 2px 8px;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  transition: border-color .18s, background-size .22s ease;
}
.wp-block-details[open] > summary::after {
  border-color: var(--accent-d);
  background-size: 8px 2px, 0 0;
}

.wp-block-details > :not(summary) {
  padding: 18px 20px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

/* Icône avant le texte du résumé - uniquement sur le bloc marqué de la
   classe "bb-report" (panneau Avancé > Classe CSS additionnelle), pas sur
   tous les wp:details (la FAQ n'en a pas besoin). Le SVG sert de pochoir
   (mask) : sa propre couleur n'a aucune importance, seul son alpha compte -
   c'est background-color qui peint, donc var(--ink-soft) reste vivante et
   suit le thème si la couleur change un jour. */
.bb-report summary::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: var(--ink-soft);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
}

/* ── FAQ SEOPRESS ─────────────────────────────────────────────────────── */
/* Empile plusieurs wp:details les uns sur les autres (bordures jointes) -
   uniquement nécessaire quand il y en a plusieurs à la suite, comme la FAQ. */

.wp-block-wpseopress-faq-block-v2 { margin: 24px 0; }

.wp-block-wpseopress-faq-block-v2 .wp-block-details { margin-bottom: 8px; }
.wp-block-wpseopress-faq-block-v2 .wp-block-details + .wp-block-details { margin-top: -1px; border-radius: 0; }
.wp-block-wpseopress-faq-block-v2 .wp-block-details:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.wp-block-wpseopress-faq-block-v2 .wp-block-details:last-of-type  { border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 0; }
.wp-block-wpseopress-faq-block-v2 .wp-block-details:only-of-type  { border-radius: var(--radius); }

/* ── HOWTO SEOPRESS ───────────────────────────────────────────────────── */
/* Timeline verticale avec badges numérotés (générés en CSS via un compteur,
   le texte "étape N" du bloc reste affiché tel quel en dessous - pas de
   bidouille pour masquer/extraire une partie du texte saisi par l'utilisateur). */

.wp-block-wpseopress-how-to { margin: 24px 0; }

.wpseopress-how-to-description p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 16px;
}

p.wpseopress-how-to-estimated-cost,
p.wpseopress-how-to-total-time {
  /* "p." devant : .entry-content p (tag+class) a une spécificité plus
     élevée qu'un simple .wpseopress-how-to-estimated-cost (classe seule)
     et écrasait ce margin, collant les deux pastilles l'une à l'autre. */
  display: inline-flex;
  align-items: center;
  margin: 0 8px 16px 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.wpseopress-how-to-steps {
  position: relative;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  counter-reset: howto-step;
}
/* Petit point discret en bout de timeline, pour clôturer le trait
   proprement plutôt que de le laisser s'arrêter net après le dernier badge. */
.wpseopress-how-to-steps::after {
  content: '';
  position: absolute;
  left: 17px;
  bottom: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  transform: translateX(-50%);
}

.wp-block-wpseopress-how-to-step {
  position: relative;
  counter-increment: howto-step;
  margin-left: 17px;
  padding: 0 0 28px 35px;
}
/* Le dernier item a un padding plus court : le point de fin (ancré au bas
   du <ol>, donc juste après ce padding) se rapproche ainsi du texte au
   lieu de flotter loin en dessous. */
.wp-block-wpseopress-how-to-step:last-child { padding-bottom: 14px; }
/* Trait de liaison en ::after (plutôt que border-left) pour pouvoir lui
   donner des bouts arrondis (border-radius sur une barre de la largeur du
   trait = extrémités en demi-cercle, au lieu d'une coupe nette). Le dernier
   item garde aussi son trait, pour rejoindre le point de fin ci-dessus. */
.wp-block-wpseopress-how-to-step::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 34px;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}
.wp-block-wpseopress-how-to-step::before {
  content: counter(howto-step);
  position: absolute;
  left: -17px;
  top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--surface);
  font-weight: 800;
  font-size: 14px;
}

.wpseopress-how-to-step-title {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}

.wpseopress-how-to-step-description p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}


/* ── GAITCHA (anti-spam des formulaires) ───────────────────────────────────────
   Le plugin injecte son propre <style> via JS, avec ses couleurs dans des
   variables --g-* (non !important) scopées à .gaitcha-widget : on les
   redéfinit ici avec la palette du thème (style "Minimal", thème "Clair").
   Sélecteur à 2 classes pour passer devant le style injecté (1 classe) ;
   police et rayon portés par !important comme dans le plugin. */
.gaitcha-widget.gaitcha-widget--minimal {
  --g-bg: var(--wp--preset--color--surface);
  --g-checkbox-bg: var(--wp--preset--color--white);
  --g-border: var(--wp--preset--color--line-mid);
  --g-border-hover: var(--wp--preset--color--ink-faint);
  --g-accent: var(--wp--preset--color--ink);
  --g-text: var(--wp--preset--color--ink);
  --g-sub: var(--wp--preset--color--ink-soft);
  --g-success: var(--wp--preset--color--accent);
  --g-success-light: var(--wp--preset--color--surface-2);
  --g-success-border: var(--wp--preset--color--accent);
  --g-success-text: var(--wp--preset--color--accent-dark);
  --g-checkmark: var(--wp--preset--color--ink);
  --g-radius: var(--wp--preset--border-radius--sm);
  --g-radius-inner: var(--wp--preset--border-radius--xs);
}

.gaitcha-widget.gaitcha-widget {
  font-family: var(--wp--preset--font-family--hanken-grotesk) !important;
}

.gaitcha-widget .gaitcha-widget__brand,
.gaitcha-widget .gaitcha-widget__brand-initial {
  font-family: var(--wp--preset--font-family--spline-sans-mono) !important;
}

.gaitcha-widget.gaitcha-widget--error,
.gaitcha-widget.gaitcha-widget--error .gaitcha-widget__checkbox {
  border-color: var(--wp--preset--color--magenta) !important;
}