/*
Theme Name: Couquebouque
Author: Alex Dias
Version: 0.1.0
*/

/* =========================
   Variables
========================= */

:root{
  /* Colors */
  --color-black: #000;
  --color-bg-page: #fff;
  --color-bg-card: #fff;
  --color-bg-elevated: rgba(255, 255, 255, 0.94);
  --color-bg-soft: rgba(0, 0, 0, 0.04);

  --color-title: rgba(0, 0, 0, 0.96);
  --color-section: rgba(0, 0, 0, 0.84);
  --color-text-primary: rgba(0, 0, 0, 0.92);
  --color-text-strong: rgba(0, 0, 0, 0.72);
  --color-text-muted: rgba(0, 0, 0, 0.64);
  --color-badge-text: rgba(0, 0, 0, 0.84);
  --color-border: rgba(0, 0, 0, 0.14);
  --color-border-strong: rgba(0, 0, 0, 0.2);
  --color-focus: rgba(0, 0, 0, 0.55);

  /* Aliases */
  --border: rgba(0, 0, 0, 0.08);
  --text: var(--color-text-primary);
  --muted: var(--color-text-muted);

  /* Typography foundations */
  --font-family-display: "Bricolage Grotesque", sans-serif;
  --font-family-text: "Bricolage Grotesque", sans-serif;
  --font-serif: var(--font-family-display);
  --font-sans: var(--font-family-text);

  /* Type tokens - LG */
  --type-display-lg-size: 56px;
  --type-display-lg-line-height: 1.05;
  --type-display-lg-weight: 700;
  --type-display-lg-letter-spacing: -0.01em;

  --type-h1-lg-size: 44px;
  --type-h1-lg-line-height: 1.1;
  --type-h1-lg-weight: 700;
  --type-h1-lg-letter-spacing: -0.01em;

  --type-h2-lg-size: 35px;
  --type-h2-lg-line-height: 1.15;
  --type-h2-lg-weight: 650;
  --type-h2-lg-letter-spacing: -0.01em;

  --type-h3-lg-size: 28px;
  --type-h3-lg-line-height: 1.2;
  --type-h3-lg-weight: 600;
  --type-h3-lg-letter-spacing: -0.01em;

  --type-lead-lg-size: 22px;
  --type-lead-lg-line-height: 1.45;
  --type-lead-lg-weight: 500;

  --type-body-lg-size: 18px;
  --type-body-lg-line-height: 1.65;
  --type-body-lg-weight: 400;
  --type-body-lg-letter-spacing: var(--type-body-letter-spacing);

  --type-small-lg-size: 14px;
  --type-small-lg-line-height: 1.5;
  --type-small-lg-weight: 500;

  --type-meta-lg-size: 16px;
  --type-meta-lg-line-height: 1.2;
  --type-meta-lg-weight: 700;
  --type-meta-lg-letter-spacing: 0.01em;
  --type-meta-lg-transform: uppercase;

  /* Type tokens - MD */
  --type-display-md-size: 48px;
  --type-display-md-line-height: 1.1;
  --type-display-md-weight: 700;
  --type-display-md-letter-spacing: -0.01em;

  --type-h1-md-size: 40px;
  --type-h1-md-line-height: 1.15;
  --type-h1-md-weight: 700;
  --type-h1-md-letter-spacing: -0.01em;

  --type-h2-md-size: 32px;
  --type-h2-md-line-height: 1.2;
  --type-h2-md-weight: 650;
  --type-h2-md-letter-spacing: -0.01em;

  --type-h3-md-size: 26px;
  --type-h3-md-line-height: 1.25;
  --type-h3-md-weight: 600;
  --type-h3-md-letter-spacing: -0.01em;

  --type-lead-md-size: 21px;
  --type-lead-md-line-height: 1.5;
  --type-lead-md-weight: 500;

  --type-body-md-size: 19px;
  --type-body-md-line-height: 1.65;
  --type-body-md-weight: 400;
  --type-body-md-letter-spacing: var(--type-body-letter-spacing);

  --type-small-md-size: 15px;
  --type-small-md-line-height: 1.55;
  --type-small-md-weight: 500;

  --type-meta-md-size: 15px;
  --type-meta-md-line-height: 1.2;
  --type-meta-md-weight: 700;
  --type-meta-md-letter-spacing: 0.01em;
  --type-meta-md-transform: uppercase;

  /* Type tokens - SM */
  --type-display-sm-size: 40px;
  --type-display-sm-line-height: 1.1;
  --type-display-sm-weight: 700;
  --type-display-sm-letter-spacing: -0.01em;

  --type-h1-sm-size: 34px;
  --type-h1-sm-line-height: 1.15;
  --type-h1-sm-weight: 700;
  --type-h1-sm-letter-spacing: -0.01em;

  --type-h2-sm-size: 28px;
  --type-h2-sm-line-height: 1.2;
  --type-h2-sm-weight: 650;
  --type-h2-sm-letter-spacing: -0.01em;

  --type-h3-sm-size: 24px;
  --type-h3-sm-line-height: 1.25;
  --type-h3-sm-weight: 600;
  --type-h3-sm-letter-spacing: -0.01em;

  --type-lead-sm-size: 20px;
  --type-lead-sm-line-height: 1.5;
  --type-lead-sm-weight: 500;

  --type-body-sm-size: 17px;
  --type-body-sm-line-height: 1.65;
  --type-body-sm-weight: 400;
  --type-body-sm-letter-spacing: var(--type-body-letter-spacing);

  --type-small-sm-size: 14px;
  --type-small-sm-line-height: 1.5;
  --type-small-sm-weight: 500;

  --type-meta-sm-size: 14px;
  --type-meta-sm-line-height: 1.2;
  --type-meta-sm-weight: 700;
  --type-meta-sm-letter-spacing: 0.01em;
  --type-meta-sm-transform: uppercase;

  /* Active type aliases (default LG) */
  --type-display-size: var(--type-display-lg-size);
  --type-display-line-height: var(--type-display-lg-line-height);
  --type-display-weight: var(--type-display-lg-weight);
  --type-display-letter-spacing: var(--type-display-lg-letter-spacing);

  --type-h1-size: var(--type-h1-lg-size);
  --type-h1-line-height: var(--type-h1-lg-line-height);
  --type-h1-weight: var(--type-h1-lg-weight);
  --type-h1-letter-spacing: var(--type-h1-lg-letter-spacing);

  --type-h2-size: var(--type-h2-lg-size);
  --type-h2-line-height: var(--type-h2-lg-line-height);
  --type-h2-weight: var(--type-h2-lg-weight);
  --type-h2-letter-spacing: var(--type-h2-lg-letter-spacing);

  --type-h3-size: var(--type-h3-lg-size);
  --type-h3-line-height: var(--type-h3-lg-line-height);
  --type-h3-weight: var(--type-h3-lg-weight);
  --type-h3-letter-spacing: var(--type-h3-lg-letter-spacing);

  --type-lead-size: var(--type-lead-lg-size);
  --type-lead-line-height: var(--type-lead-lg-line-height);
  --type-lead-weight: var(--type-lead-lg-weight);

  --type-body-size: var(--type-body-lg-size);
  --type-body-line-height: var(--type-body-lg-line-height);
  --type-body-weight: var(--type-body-lg-weight);
  --type-body-letter-spacing: var(--type-body-lg-letter-spacing);

  --type-small-size: var(--type-small-lg-size);
  --type-small-line-height: var(--type-small-lg-line-height);
  --type-small-weight: var(--type-small-lg-weight);

  --type-meta-size: var(--type-meta-lg-size);
  --type-meta-line-height: var(--type-meta-lg-line-height);
  --type-meta-weight: var(--type-meta-lg-weight);
  --type-meta-letter-spacing: var(--type-meta-lg-letter-spacing);
  --type-meta-transform: var(--type-meta-lg-transform);

  /* Legacy aliases used by current styles */
  --font-title-size: var(--type-h1-size);
  --font-title-line-height: var(--type-h1-line-height);
  --font-title-letter-spacing: var(--type-h1-letter-spacing);

  --font-section-size: var(--type-h2-size);
  --font-section-letter-spacing: var(--type-h2-letter-spacing);

  --font-body-size: var(--type-body-size);
  --font-body-line-height: var(--type-body-line-height);
  --font-body-letter-spacing: var(--type-body-letter-spacing);

  --font-intro-size: var(--type-lead-size);
  --font-intro-letter-spacing: var(--type-body-letter-spacing);

  --font-badge-size: var(--type-meta-size);
  --font-badge-letter-spacing: var(--type-meta-letter-spacing);

  /* Spacing scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Spacing aliases used by current styles */
  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: var(--space-8);
  --space-lg: var(--space-12);

  /* Layout */
  --radius-card: 16px;
  --radius-badge: 4px;
  --max-width: 1100px;

  /* ✅ Editorial content width (≈ ancienne colonne gauche) */
  --max-width-content: 620px;
}

@media (max-width: 1024px){
  :root{
    --type-display-size: var(--type-display-md-size);
    --type-display-line-height: var(--type-display-md-line-height);
    --type-display-weight: var(--type-display-md-weight);
    --type-display-letter-spacing: var(--type-display-md-letter-spacing);

    --type-h1-size: var(--type-h1-md-size);
    --type-h1-line-height: var(--type-h1-md-line-height);
    --type-h1-weight: var(--type-h1-md-weight);
    --type-h1-letter-spacing: var(--type-h1-md-letter-spacing);

    --type-h2-size: var(--type-h2-md-size);
    --type-h2-line-height: var(--type-h2-md-line-height);
    --type-h2-weight: var(--type-h2-md-weight);
    --type-h2-letter-spacing: var(--type-h2-md-letter-spacing);

    --type-h3-size: var(--type-h3-md-size);
    --type-h3-line-height: var(--type-h3-md-line-height);
    --type-h3-weight: var(--type-h3-md-weight);
    --type-h3-letter-spacing: var(--type-h3-md-letter-spacing);

    --type-lead-size: var(--type-lead-md-size);
    --type-lead-line-height: var(--type-lead-md-line-height);
    --type-lead-weight: var(--type-lead-md-weight);

    --type-body-size: var(--type-body-md-size);
    --type-body-line-height: var(--type-body-md-line-height);
    --type-body-weight: var(--type-body-md-weight);
    --type-body-letter-spacing: var(--type-body-md-letter-spacing);

    --type-small-size: var(--type-small-md-size);
    --type-small-line-height: var(--type-small-md-line-height);
    --type-small-weight: var(--type-small-md-weight);

    --type-meta-size: var(--type-meta-md-size);
    --type-meta-line-height: var(--type-meta-md-line-height);
    --type-meta-weight: var(--type-meta-md-weight);
    --type-meta-letter-spacing: var(--type-meta-md-letter-spacing);
    --type-meta-transform: var(--type-meta-md-transform);
  }
}

@media (max-width: 640px){
  :root{
    --type-display-size: var(--type-display-sm-size);
    --type-display-line-height: var(--type-display-sm-line-height);
    --type-display-weight: var(--type-display-sm-weight);
    --type-display-letter-spacing: var(--type-display-sm-letter-spacing);

    --type-h1-size: var(--type-h1-sm-size);
    --type-h1-line-height: var(--type-h1-sm-line-height);
    --type-h1-weight: var(--type-h1-sm-weight);
    --type-h1-letter-spacing: var(--type-h1-sm-letter-spacing);

    --type-h2-size: var(--type-h2-sm-size);
    --type-h2-line-height: var(--type-h2-sm-line-height);
    --type-h2-weight: var(--type-h2-sm-weight);
    --type-h2-letter-spacing: var(--type-h2-sm-letter-spacing);

    --type-h3-size: var(--type-h3-sm-size);
    --type-h3-line-height: var(--type-h3-sm-line-height);
    --type-h3-weight: var(--type-h3-sm-weight);
    --type-h3-letter-spacing: var(--type-h3-sm-letter-spacing);

    --type-lead-size: var(--type-lead-sm-size);
    --type-lead-line-height: var(--type-lead-sm-line-height);
    --type-lead-weight: var(--type-lead-sm-weight);

    --type-body-size: var(--type-body-sm-size);
    --type-body-line-height: var(--type-body-sm-line-height);
    --type-body-weight: var(--type-body-sm-weight);
    --type-body-letter-spacing: var(--type-body-sm-letter-spacing);

    --type-small-size: var(--type-small-sm-size);
    --type-small-line-height: var(--type-small-sm-line-height);
    --type-small-weight: var(--type-small-sm-weight);

    --type-meta-size: var(--type-meta-sm-size);
    --type-meta-line-height: var(--type-meta-sm-line-height);
    --type-meta-weight: var(--type-meta-sm-weight);
    --type-meta-letter-spacing: var(--type-meta-sm-letter-spacing);
    --type-meta-transform: var(--type-meta-sm-transform);
  }
}

/* =========================
   Base
========================= */

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
}

body{
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
}

a{ color: inherit; }

/* =========================
   Top Navigation
========================= */

.cbq-topbar{
  position: sticky;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  backdrop-filter: blur(6px);
  transition: transform 220ms ease;
}

.cbq-topbar.is-hidden{
  transform: translateY(calc(-100% - 1px));
}

.cbq-live-mode-active .cbq-topbar{
  transform: translateY(calc(-100% - 1px)) !important;
  pointer-events: none;
}

.cbq-topbar-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px var(--space-md);
}

.cbq-topbar-brand{
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
  color: var(--color-title);
  font-family: var(--font-serif);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h3-line-height);
  letter-spacing: var(--type-h3-letter-spacing);
  transition: opacity 180ms ease;
}

.cbq-topbar-brand:hover,
.cbq-topbar-brand:focus-visible{
  opacity: 0.76;
}

.cbq-topbar-brand:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

body.admin-bar .cbq-topbar{
  top: 32px;
}

/* =========================
   Layout
========================= */

.cbq-wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.cbq-content{
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.cbq-card{
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* =========================
   Hero
========================= */

.cbq-hero{
  margin-bottom: 18px;
}

.cbq-title{
  font-family: var(--font-serif);
  font-weight: var(--type-h1-weight);
  font-size: var(--font-title-size);
  line-height: var(--font-title-line-height);
  letter-spacing: var(--font-title-letter-spacing);
  color: var(--color-title);
  margin: 0 0 var(--space-sm);
}

.cbq-hero img{
  width:100%;
  height:auto;
  border-radius: 18px;
  display:block;
  border: 1px solid var(--border);
}

/* =========================
   Headings & Meta
========================= */

.cbq-h2{
  font-family: var(--font-serif);
  font-weight: var(--type-h2-weight);
  font-size: var(--font-section-size);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--font-section-letter-spacing);
  color: var(--color-section);
  margin: 0 0 var(--space-sm);
}

.cbq-meta{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-xs) var(--space-sm);
}

.cbq-meta b{
  color: var(--text);
  font-weight: var(--type-h3-weight);
}

/* =========================
   Badges
========================= */

.cbq-badge{
  font-family: var(--font-sans);
  font-weight: var(--type-meta-weight);
  font-size: var(--font-badge-size);
  line-height: var(--type-meta-line-height);
  letter-spacing: var(--font-badge-letter-spacing);
  text-transform: var(--type-meta-transform);
  color: var(--color-badge-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-badge);
  padding: var(--space-1) var(--space-2);
  background: transparent;
}

.cbq-badge--duration{
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: var(--type-h3-weight);
}

/* =========================
   Body typography consistency
========================= */

/* Uniformise l’interlettrage (mise en place + ingrédients + texte) */
.cbq-list li,
.cbq-kv,
.cbq-kv > div,
.cbq-chef-note{
  letter-spacing: var(--font-body-letter-spacing);
}

/* =========================
   Lists
========================= */

.cbq-list{
  margin: 0;
  padding-left: 18px;
}

/* =========================
   Ingredients (inline section)
========================= */

.cbq-ingredients{
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.cbq-kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
}

.cbq-kv > div{
  margin-bottom: var(--space-xs);
}

.cbq-ingredient-cell{
  cursor: pointer;
  transition: color 160ms ease, opacity 160ms ease, text-decoration-color 160ms ease;
}

.cbq-ingredient-cell:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.cbq-ingredient-cell.is-checked{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.55;
}

.cbq-kv-right{
  color: var(--text);
  text-align: right;
}

.cbq-ingredient-note{
  margin-left: 0.3em;
  color: var(--muted);
  font-style: italic;
}

.cbq-ingredient-group{
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.cbq-ingredient-group:first-child{
  border-top:none;
  padding-top:0;
  margin-top:0;
}

.cbq-ingredient-group:first-of-type{
  border-top:none;
  padding-top:0;
  margin-top:0;
}

.cbq-ingredient-group h3{
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  color: var(--color-section);
  font-weight: var(--type-lead-weight);
}

/* =========================
   Live cooking instructions
========================= */

.cbq-instructions-toolbar{
  margin-top: 44px;
  margin-bottom: 18px;
}

.cbq-live-toggle{
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  font-weight: var(--type-small-weight);
  line-height: var(--type-small-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.cbq-live-toggle:hover{
  background: var(--color-bg-soft);
}

.cbq-live-toggle:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cbq-live-toggle.is-live-active{
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.cbq-live-cooking{
  margin-top: 10px;
  padding-top: 4px;
  --cbq-live-height-px: 72svh;
}

.cbq-live-mode-active .cbq-live-cooking{
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  background: var(--color-bg-page);
  z-index: 124;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cbq-live-cooking__viewport{
  position: sticky;
  top: 72px;
  min-height: var(--cbq-live-height-px);
  padding-bottom: 56px;
  display: grid;
  place-items: center;
  text-align: center;
}

.cbq-live-mode-active .cbq-live-cooking__viewport{
  top: 0;
  min-height: 100dvh;
  padding: 22px 16px 110px;
}

.cbq-live-cooking__close{
  position: fixed;
  top: max(10px, calc(env(safe-area-inset-top) + 8px));
  right: 12px;
  z-index: 126;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-bg-page) 86%, transparent);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  letter-spacing: var(--type-small-letter-spacing);
  padding: 8px 12px;
  cursor: pointer;
}

.cbq-live-cooking__close:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cbq-live-cooking__stack{
  width: min(100%, 960px);
  display: grid;
  gap: clamp(28px, 6vh, 56px);
}

.cbq-live-cooking__step{
  margin: 0;
  letter-spacing: var(--type-h2-letter-spacing);
  text-wrap: balance;
  transition: opacity 220ms ease, transform 220ms ease, color 220ms ease;
}

.cbq-live-cooking__step--active{
  font-family: var(--font-sans);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-weight);
  color: var(--color-text-primary);
}

.cbq-live-cooking__step--prev,
.cbq-live-cooking__step--next{
  font-family: var(--font-sans);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  font-weight: var(--type-h2-weight);
  color: var(--color-text-muted);
}

.cbq-live-cooking__step--prev:not(.is-disabled),
.cbq-live-cooking__step--next:not(.is-disabled){
  cursor: pointer;
}

.cbq-live-cooking__step--prev:not(.is-disabled):hover,
.cbq-live-cooking__step--next:not(.is-disabled):hover{
  color: var(--color-text-strong);
}

.cbq-live-cooking__step--prev:focus-visible,
.cbq-live-cooking__step--next:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 8px;
}

.cbq-live-cooking__step.is-disabled{
  pointer-events: none;
  opacity: 0.3;
}

.cbq-live-cooking__step--prev{
  text-decoration: line-through;
  text-decoration-color: var(--color-border);
  text-decoration-thickness: 2px;
}

.cbq-live-cooking__timeline{
  margin-top: calc(-1 * var(--cbq-live-height-px));
}

.cbq-live-cooking__trigger{
  height: var(--cbq-live-height-px);
}

.cbq-live-cooking__progress{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px));
  width: min(calc(100vw - 20px), 820px);
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--color-bg-page) 82%, transparent);
  backdrop-filter: blur(6px);
  z-index: 125;
  pointer-events: auto;
}

.cbq-live-cooking__section-rail{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  pointer-events: auto;
}

.cbq-live-cooking__section-pill{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
  line-height: var(--type-small-line-height);
  border: 0;
  background: transparent;
  padding: 0;
}

.cbq-live-cooking__section-pill--prev,
.cbq-live-cooking__section-pill--next{
  font-size: var(--type-small-size);
  font-weight: var(--type-small-weight);
  letter-spacing: var(--type-small-letter-spacing);
  color: var(--color-text-muted);
  cursor: pointer;
}

.cbq-live-cooking__section-pill--prev{
  text-align: left;
  text-decoration: line-through;
  text-decoration-color: var(--color-border);
  text-decoration-thickness: 1px;
}

.cbq-live-cooking__section-pill--current{
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-line-height);
  font-weight: var(--type-meta-weight);
  letter-spacing: var(--type-meta-letter-spacing);
  text-transform: var(--type-meta-transform);
  color: var(--color-text-primary);
  text-align: center;
}

.cbq-live-cooking__section-pill--next{
  text-align: right;
}

.cbq-live-cooking__section-pill.is-empty{
  opacity: 0;
  pointer-events: none;
}

.cbq-live-cooking__section-pill--prev:focus-visible,
.cbq-live-cooking__section-pill--next:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.cbq-live-cooking__progress-meta{
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  letter-spacing: var(--type-small-letter-spacing);
  color: var(--color-text-primary);
}

.cbq-live-cooking__progress-track{
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--color-bg-soft);
  overflow: hidden;
}

.cbq-live-cooking__progress-nav{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.cbq-live-cooking__progress-btn{
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-bg-card) 85%, transparent);
  color: var(--color-text-primary);
  border-radius: 999px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  letter-spacing: var(--type-small-letter-spacing);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.cbq-live-cooking__progress-btn:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cbq-live-cooking__progress-track{
  max-width: 520px;
  margin: 0 auto;
}

.cbq-live-cooking__progress-btn.is-disabled{
  opacity: 0.4;
  pointer-events: none;
}

.cbq-live-cooking__progress-fill{
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-text-primary);
  transition: width 220ms ease;
}

/* Keep section list readable after the live block */
.cbq-live-cooking + .cbq-step-section{
  margin-top: 18px;
}

/* =========================
   Step sections
========================= */

.cbq-step-section{
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-strong); /* un poil plus visible */


  /* Step tuning (discret) */
  --step-size: 24px;
  --step-gap: 14px;
  --step-stroke: 2px;
  --step-top: 0.12em;
}

.cbq-step-section:first-child{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

/* Reset default list for steps */
.cbq-step-section .cbq-list{
  list-style: none;
  padding: 0;
  counter-reset: step;
}

/* Each step */
.cbq-step-section .cbq-list li{
  counter-increment: step;
  position: relative;
  
  padding-left: calc(var(--step-size) + var(--step-gap));
  margin: 0 0 18px;
  margin-bottom: 26px;
  font-family: var(--font-sans);
  font-weight: var(--type-lead-weight);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  color: var(--color-text-primary);
}

/* Circle number */
.cbq-step-section .cbq-list li::before{
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--step-top);

  width: var(--step-size);
  height: var(--step-size);

  border-radius: 999px;
  border: var(--step-stroke) solid var(--color-border);
  color: var(--color-section);
  background: transparent;

  display: grid;
  place-items: center;

  font-family: var(--font-sans);
  font-weight: var(--type-meta-weight);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
}

/* =========================
   Chef note
========================= */

.cbq-chef-note{
  font-family: var(--font-serif);
  font-weight: var(--type-lead-weight);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  color: var(--color-text-primary);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  margin-top: var(--space-lg);
  border-radius: 8px;
}

/* =========================
   Single recipe - editorial layout
========================= */

.single-recipe .cbq-content{
  max-width: min(100%, 860px);
}

.single-recipe{
  --single-recipe-column: 62ch;
}

.single-recipe .cbq-card{
  display: grid;
  gap: var(--space-10);
}

.single-recipe .cbq-hero{
  max-width: min(100%, 980px);
  margin: 0 auto var(--space-10);
  text-align: left;
  display: block;
  padding-top: 0;
}

.single-recipe .cbq-title{
  max-width: 24ch;
  width: 100%;
  padding-right: 0;
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-letter-spacing);
  text-wrap: pretty;
  margin: 0;
  position: relative;
  z-index: 2;
}

.single-recipe .cbq-editorial-illustration{
  width: min(100%, var(--single-recipe-column));
  margin: var(--space-8) auto var(--space-12);
  display: flex;
  justify-content: flex-end;
}

.single-recipe .cbq-editorial-illustration .cbq-editorial-illustration-image{
  width: auto;
  max-width: min(64vw, 680px);
  max-height: min(64vh, 560px);
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.single-recipe .cbq-meta{
  gap: var(--space-2) var(--space-3);
  justify-content: flex-start;
  width: min(100%, var(--single-recipe-column));
  margin-inline: auto;
}

.single-recipe .cbq-badge{
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  letter-spacing: var(--type-body-letter-spacing);
  text-transform: none;
}

.single-recipe .cbq-badge b{
  color: var(--color-text-primary);
  font-weight: var(--type-meta-weight);
  letter-spacing: var(--type-meta-letter-spacing);
  text-transform: var(--type-meta-transform);
}

.single-recipe .cbq-badge:not(:last-child)::after{
  content: "·";
  margin-left: var(--space-3);
  color: var(--color-text-muted);
}

.single-recipe .cbq-chef-note{
  width: min(100%, var(--single-recipe-column));
  margin-inline: auto;
  margin-top: var(--space-2);
  position: relative;
}

.single-recipe .cbq-chef-note::after{
  content: "";
  display: block;
  width: min(20ch, 34%);
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.single-recipe .cbq-ingredients{
  width: min(100%, var(--single-recipe-column));
  margin-inline: auto;
  margin-top: var(--space-12);
  padding-top: 0;
  border-top: 0;
}

.single-recipe .cbq-kv{
  gap: var(--space-2) var(--space-5);
}

.single-recipe .cbq-ingredient-group{
  margin-top: var(--space-6);
  padding-top: var(--space-6);
}

.single-recipe .cbq-ingredient-group:first-of-type{
  border-top: 1px solid var(--border);
}

.single-recipe .cbq-instructions-toolbar{
  width: min(100%, var(--single-recipe-column));
  margin-inline: auto;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.single-recipe .cbq-instructions{
  width: min(100%, var(--single-recipe-column));
  margin-inline: auto;
}

.single-recipe .cbq-step-section{
  --step-top: 0.7em;
  margin-top: var(--space-16);
  padding-top: var(--space-8);
}

.single-recipe .cbq-step-section .cbq-h2{
  margin-bottom: var(--space-6);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  font-weight: var(--type-lead-weight);
  letter-spacing: var(--type-h2-letter-spacing);
}

.single-recipe .cbq-step-section .cbq-list{
  counter-reset: none;
}

.single-recipe .cbq-step-section .cbq-badge--duration{
  margin-left: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-text-muted);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  letter-spacing: var(--type-body-letter-spacing);
  text-transform: none;
}

.single-recipe .cbq-step-section .cbq-badge--duration::before{
  content: "— ";
}

.single-recipe .cbq-step-section .cbq-list li{
  padding-left: 0;
  margin-bottom: var(--space-8);
  max-width: 52ch;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-letter-spacing);
}

.single-recipe .cbq-step-section .cbq-list li::before{
  content: none;
}

.single-recipe .cbq-step-section .cbq-list li:last-child{
  margin-bottom: 0;
}

.cbq-inline-ingredient{
  appearance: none;
  border: 0;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.17em;
  text-decoration-color: color-mix(in oklab, var(--color-text-muted) 62%, transparent);
  cursor: pointer;
  transition: background-color 140ms ease, text-decoration-color 140ms ease;
}

.cbq-inline-ingredient:hover,
.cbq-inline-ingredient.is-active{
  background: color-mix(in oklab, var(--color-bg-soft) 72%, transparent);
  text-decoration-color: var(--color-text-primary);
}

.cbq-inline-ingredient:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cbq-ingredient-tooltip{
  position: absolute;
  z-index: 130;
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-bg-page) 96%, transparent);
  color: var(--color-text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  letter-spacing: var(--type-body-letter-spacing);
}

/* =========================
   Home page (editorial light)
========================= */

.cbq-home{
  max-width: 860px;
  margin: 0 auto;
}

.cbq-home-hero{
  text-align: center;
  padding: 20px 0 30px;
  border-bottom: 1px solid var(--border);
}

.cbq-home-eyebrow{
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
  letter-spacing: var(--type-meta-letter-spacing);
  text-transform: var(--type-meta-transform);
  color: var(--color-text-muted);
}

.cbq-home-title{
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-letter-spacing);
  color: var(--color-title);
}

.cbq-home-intro{
  margin: 20px auto 0;
  max-width: 58ch;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  font-weight: var(--type-lead-weight);
  letter-spacing: var(--type-body-letter-spacing);
  color: var(--color-text-primary);
}

.cbq-home-cta{
  display: inline-block;
  margin-top: 22px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  font-weight: var(--type-small-weight);
  line-height: var(--type-small-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  transition: background-color 180ms ease, transform 180ms ease;
}

.cbq-home-cta:hover,
.cbq-home-cta:focus-visible{
  background-color: var(--color-bg-soft);
  transform: translateY(-1px);
}

.cbq-home-section{
  margin-top: 34px;
}

.cbq-home-section-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}

.cbq-home-section-title{
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-letter-spacing);
  font-weight: var(--type-h2-weight);
  color: var(--color-section);
}

.cbq-home-section-link{
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.cbq-home-list{
  border-top: 1px solid var(--border);
}

.cbq-home-item{
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.cbq-home-item-title{
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-letter-spacing);
}

.cbq-home-item-title a{
  text-decoration: none;
}

.cbq-home-item-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 8px;
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  color: var(--color-text-primary);
}

.cbq-filter-tag{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.cbq-filter-tag:hover,
.cbq-filter-tag:focus-visible{
  border-bottom-color: var(--color-text-primary);
}

.cbq-filter-tag.is-active{
  border-bottom-color: var(--color-text-primary);
  font-weight: var(--type-meta-weight);
}

.cbq-active-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 2px 0 12px;
}

.cbq-filter-pill{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
}

.cbq-filter-reset{
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
}

.cbq-home-empty{
  margin: 0;
  padding: 16px 0;
  color: var(--color-text-primary);
}

@media (max-width: 640px){
  .cbq-wrap{
    padding: var(--space-8) var(--space-4);
  }

  .cbq-topbar-inner{
    padding: 8px var(--space-sm);
  }

  .single-recipe .cbq-hero{
    margin-bottom: var(--space-10);
    padding-top: 0;
  }

  .single-recipe .cbq-title{
    max-width: 16ch;
    padding-right: 0;
  }

  .single-recipe .cbq-editorial-illustration{
    justify-content: center;
    margin-top: var(--space-6);
    margin-bottom: var(--space-10);
  }

  .single-recipe .cbq-editorial-illustration .cbq-editorial-illustration-image{
    max-width: min(90vw, 420px);
    max-height: 38vh;
    margin: 0 auto;
  }

  .cbq-home-section-head{
    align-items: flex-end;
  }

  .cbq-instructions-toolbar{
    margin-top: 32px;
    margin-bottom: 12px;
  }

  .cbq-live-cooking{
    margin-top: 12px;
    padding-top: 0;
    --cbq-live-height-px: 58svh;
  }

  .cbq-live-cooking__viewport{
    top: 52px;
    padding-bottom: 46px;
  }

  .cbq-live-mode-active .cbq-live-cooking__viewport{
    top: 0;
    min-height: 100dvh;
    padding: 16px 12px 92px;
  }

  .cbq-live-cooking__close{
    right: 10px;
  }

  .cbq-live-cooking__progress{
    width: min(calc(100vw - 16px), 820px);
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px));
    padding: 8px 10px;
  }

  .cbq-live-cooking__progress-nav{
    gap: 12px;
  }

  .cbq-live-cooking__progress-btn{
    min-width: 40px;
    min-height: 40px;
    font-size: 18px;
  }
}

@media (max-width: 782px){
  body.admin-bar .cbq-topbar{
    top: 46px;
  }
}

/* =========================
   Archive page
========================= */

.cbq-archive{
  max-width: 860px;
  margin: 0 auto;
}

.cbq-archive-head{
  text-align: center;
  padding: 14px 0 28px;
  border-bottom: 1px solid var(--border);
}

.cbq-archive-eyebrow{
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
  letter-spacing: var(--type-meta-letter-spacing);
  text-transform: var(--type-meta-transform);
  color: var(--color-text-muted);
}

.cbq-archive-title{
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-letter-spacing);
  color: var(--color-title);
}

.cbq-archive-intro{
  margin: 18px auto 0;
  max-width: 56ch;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  font-weight: var(--type-lead-weight);
  letter-spacing: var(--type-body-letter-spacing);
  color: var(--color-text-primary);
}

.cbq-archive-list{
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

.cbq-archive-item{
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.cbq-archive-item-title{
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-letter-spacing);
}

.cbq-archive-item-title a{
  text-decoration: none;
}

.cbq-archive-item-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
  color: var(--color-text-primary);
}

.cbq-active-filters--archive{
  margin-top: 16px;
}

.cbq-archive-pagination{
  margin-top: 26px;
}

.cbq-archive-pagination .nav-links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cbq-archive-pagination .page-numbers{
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-weight);
}

.cbq-archive-pagination .page-numbers.current{
  background: var(--color-bg-soft);
}

.cbq-archive-empty{
  margin: 20px 0 0;
  color: var(--color-text-primary);
}