/* ============================================================
   CookQuick - site.css (Livraison 3 : Premium)
   Palette : charbon #0a0a0a + cuivre #d97706
   Typo    : Playfair Display (display) + Inter (UI)
   ============================================================ */

/* Google Fonts (Inter + Playfair Display) sont maintenant chargés via le Layout
   en <link rel="preconnect"> + <link rel="stylesheet"> — ça améliore le FCP. */

/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */
:root {
    /* Palette finale */
    --bg: #0a0a0a;
    --bg-elev: #111111;
    --surface: #161616;
    --surface-2: #1d1d1d;
    --border: #232323;
    --border-soft: #1a1a1a;
    --text: #f5f1ea;
    --text-muted: #a8a39a;
    --text-dim: #6b6660;

    /* Cuivre */
    --accent: #d97706;
    --accent-hover: #b86205;
    --accent-soft: rgba(217, 119, 6, 0.12);
    --accent-glow: rgba(217, 119, 6, 0.35);

    /* Sémantique */
    --danger: #b8483b;
    --ok: #4a7a3a;

    /* Typo */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --header-h: 68px;
    --container: 1240px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 12px 40px var(--accent-glow);

    /* Anim */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent); color: #fff; }

/* Skip link a11y */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--accent); color: #fff;
    padding: 12px 20px; z-index: 10000; font-weight: 600;
    border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; color: #fff; outline: 2px solid #fff; outline-offset: 2px; }

/* Focus visible global */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ============================================================
   2. HEADER (sticky + backdrop-blur)
   ============================================================ */
.site-header {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
}
.brand {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.brand:hover { color: var(--text); }
.brand-mark::first-letter { color: var(--accent); }

.main-nav { display: flex; gap: 4px; flex: 1; align-items: center; }
.main-nav a {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14.5px;
    padding: 8px 14px;
    border-radius: 6px;
    transition: all .18s var(--ease);
    position: relative;
}
.main-nav a:hover { color: var(--text); background: var(--surface); }
.main-nav a.active { color: var(--accent); }
.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 14px; right: 14px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.header-search { display: flex; gap: 0; }
.header-search input {
    padding: 9px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px 0 0 6px;
    min-width: 240px;
    font-family: inherit;
    font-size: 14px;
    transition: all .18s var(--ease);
}
.header-search input:focus { outline: none; border-color: var(--accent); }
.header-search button {
    padding: 9px 18px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-left: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all .18s var(--ease);
}
.header-search button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Hamburger (mobile) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    position: relative;
    transition: all .25s var(--ease);
}
.nav-toggle span::before { position: absolute; top: -6px; left: 0; right: 0; }
.nav-toggle span::after  { position: absolute; top:  6px; left: 0; right: 0; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   3. HERO (immersif avec illustrations culinaires en watermark)
   ============================================================ */
.hero {
    position: relative;
    padding: 120px 0 110px;
    text-align: center;
    overflow: hidden;
    background:
        /* Halo cuivre central */
        radial-gradient(ellipse 70% 50% at 50% 30%, rgba(217, 119, 6, 0.22) 0%, transparent 65%),
        /* Halo cuivre bas-droite */
        radial-gradient(ellipse 50% 60% at 90% 100%, rgba(217, 119, 6, 0.14) 0%, transparent 60%),
        /* Halo cuivre haut-gauche */
        radial-gradient(ellipse 45% 55% at 8% 18%, rgba(217, 119, 6, 0.10) 0%, transparent 55%),
        /* Fond charbon avec chaleur très subtile en bas */
        linear-gradient(180deg, #0a0a0a 0%, #0c0907 60%, #0e0a05 100%);
    border-bottom: 1px solid var(--border);
}

/* Couche 1 : illustrations culinaires dispersées en watermark cuivre (SVG inline) */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700'%3E%3Cg fill='none' stroke='%23d97706' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.20'%3E%3Cg transform='translate(140 130) rotate(-20)'%3E%3Cpath d='M0,-30 L0,8'/%3E%3Cellipse cx='0' cy='18' rx='9' ry='13'/%3E%3C/g%3E%3Cg transform='translate(480 110) rotate(10)'%3E%3Cline x1='-9' y1='-25' x2='-9' y2='-5'/%3E%3Cline x1='-3' y1='-25' x2='-3' y2='-5'/%3E%3Cline x1='3' y1='-25' x2='3' y2='-5'/%3E%3Cline x1='9' y1='-25' x2='9' y2='-5'/%3E%3Cpath d='M-11,-5 Q-11,0 -8,2 L8,2 Q11,0 11,-5 Z'/%3E%3Cline x1='0' y1='2' x2='0' y2='30'/%3E%3C/g%3E%3Cg transform='translate(820 130) rotate(-8)'%3E%3Cpath d='M-28,-6 L18,-6 L24,0 L18,6 L-28,6 Z'/%3E%3Cpath d='M-28,-6 L-40,-6 L-40,6 L-28,6'/%3E%3Cline x1='-36' y1='-6' x2='-36' y2='6'/%3E%3C/g%3E%3Cg transform='translate(1060 220) rotate(15)'%3E%3Cpath d='M-22,-8 Q-26,-18 -16,-20 Q-8,-25 0,-22 Q8,-28 18,-22 Q28,-15 25,-5 Q28,8 18,15 Q10,22 0,18 Q-8,22 -18,15 Q-28,8 -22,-8 Z'/%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3C/g%3E%3Cg transform='translate(200 560) rotate(-10)'%3E%3Ccircle cx='0' cy='3' r='20'/%3E%3Cpath d='M0,-18 L-4,-13 L-10,-15 L-7,-10 L-12,-7 L-6,-7 L-4,-10 L0,-7 L4,-10 L6,-7 L12,-7 L7,-10 L10,-15 L4,-13 Z'/%3E%3Cline x1='0' y1='-18' x2='0' y2='-12'/%3E%3C/g%3E%3Cg transform='translate(560 600) rotate(8)'%3E%3Cpath d='M-2,-19 Q-12,-20 -17,-13 Q-22,-5 -20,5 Q-18,15 -10,21 Q-3,25 0,21 Q3,25 10,21 Q18,15 20,5 Q22,-5 17,-13 Q12,-20 2,-19 Q1,-21 0,-22 Q-1,-21 -2,-19 Z'/%3E%3Cline x1='0' y1='-22' x2='0' y2='-26'/%3E%3Cpath d='M0,-25 Q5,-27 8,-23 Q5,-21 0,-22'/%3E%3C/g%3E%3Cg transform='translate(880 540) rotate(-12)'%3E%3Cpath d='M-12,-22 L12,-22 Q12,-8 0,3 Q-12,-8 -12,-22 Z'/%3E%3Cpath d='M-10,-15 Q0,-13 10,-15'/%3E%3Cline x1='0' y1='3' x2='0' y2='22'/%3E%3Cline x1='-10' y1='23' x2='10' y2='23'/%3E%3C/g%3E%3Cg transform='translate(340 320) rotate(5)'%3E%3Cpath d='M-22,-4 L22,-4 L22,22 Q22,24 20,24 L-20,24 Q-22,24 -22,22 Z'/%3E%3Cline x1='-24' y1='-4' x2='24' y2='-4'/%3E%3Cpath d='M-22,-2 Q-30,-2 -30,4 Q-30,8 -22,8'/%3E%3Cpath d='M22,-2 Q30,-2 30,4 Q30,8 22,8'/%3E%3Cpath d='M-24,-9 L24,-9 Q24,-11 22,-11 L-22,-11 Q-24,-11 -24,-9 Z'/%3E%3Cline x1='0' y1='-11' x2='0' y2='-17'/%3E%3Ccircle cx='0' cy='-18' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    pointer-events: none;
    z-index: 0;
}

/* Couche 2 : grille technique fine, atténuée vers les bords */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 65% at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at center, #000 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.hero > .container {
    position: relative;
    z-index: 1;
}
.hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
    padding: 6px 14px;
    border: 1px solid var(--accent-soft);
    border-radius: 999px;
    background: var(--accent-soft);
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
}
.hero-title em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}
.hero-tagline {
    font-size: clamp(17px, 1.6vw, 21px);
    color: var(--text-muted);
    margin: 0 auto 40px;
    max-width: 620px;
    line-height: 1.6;
}
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 56px;
    margin-top: 64px;
    flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}
.hero-stat-label {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ============================================================
   4. BOUTONS
   ============================================================ */
.btn-cta, .btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .2s var(--ease);
    line-height: 1;
    min-height: 44px;
}
.btn-cta, .btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
}
.btn-cta:hover, .btn-primary:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}
.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all .18s var(--ease);
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   5. SECTIONS / TITRES
   ============================================================ */
.section { padding: 80px 0; }
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    gap: 24px;
    flex-wrap: wrap;
}
.section-title, .page-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 44px);
    margin: 0;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.page-title { font-size: clamp(36px, 5vw, 56px); }
.section-sub {
    color: var(--text-muted);
    margin: 8px 0 0;
    font-size: 16px;
}
.page-intro {
    font-size: 18px;
    color: var(--text-muted);
    margin: 0 0 40px;
    max-width: 680px;
}
.breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ============================================================
   6. CATEGORIES GRID
   ============================================================ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.cat-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    transition: all .25s var(--ease);
    position: relative;
    overflow: hidden;
}
.cat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}
.cat-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    color: var(--text);
    box-shadow: var(--shadow-md);
}
.cat-card:hover::before { transform: scaleX(1); }
.cat-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.cat-desc { font-size: 14px; color: var(--text-muted); margin-top: 8px; line-height: 1.55; }

/* ============================================================
   7. RECIPES GRID + CARD (animée)
   ============================================================ */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 28px;
}
.recipe-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    color: var(--text);
    transition: all .3s var(--ease);
    position: relative;
}
.recipe-card:hover {
    transform: translateY(-6px);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}
.recipe-card-img-wrap {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bg-elev);
    position: relative;
}
.recipe-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .6s var(--ease);
}
.recipe-card:hover .recipe-card-img { transform: scale(1.07); }
.recipe-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.recipe-card:hover .recipe-card-img-wrap::after { opacity: 1; }
.recipe-card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.recipe-card-cat {
    display: inline-block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 10px;
    font-weight: 600;
}
.recipe-card-title {
    font-family: var(--font-display);
    font-size: 21px;
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.recipe-card-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.5;
    flex: 1;
}
.recipe-card-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.recipe-card-meta .sep { color: var(--text-dim); }

/* ============================================================
   8. PAGE RECETTE
   ============================================================ */
.recipe-page { padding-bottom: 80px; }

/* ============================================================
   HERO MAGAZINE — titre/sous-titre + image côte à côte (desktop),
   empilés (mobile). Pas d'overlay sombre, photo en pleine vie.
   ============================================================ */
.recipe-hero-mag {
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--border);
}

.recipe-hero-mag-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
    align-items: center;
}

.recipe-hero-mag-text {
    min-width: 0;
}

.recipe-hero-mag-text .breadcrumb {
    color: var(--text-muted);
    margin-bottom: 18px;
}
.recipe-hero-mag-text .breadcrumb a { color: var(--text-muted); }
.recipe-hero-mag-text .breadcrumb a:hover { color: var(--accent); }

.recipe-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 16px;
}

.recipe-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 900;
    margin: 0 0 16px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text);
}

.recipe-subtitle {
    font-size: clamp(17px, 1.4vw, 22px);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
    font-family: var(--font-display);
    font-weight: 400;
}

.recipe-hero-mag-image {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-elev);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 3;
}

.recipe-hero-mag-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   Meta-card : on retire la marge négative (plus de chevauchement),
   elle vient maintenant naturellement sous le hero.
   ============================================================ */
.recipe-meta-card {
    max-width: var(--container);
    margin: 32px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}
.recipe-meta-card-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 24px;
    flex: 1;
    min-width: 0;
}
.meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 16px;
    border-right: 1px solid var(--border-soft);
}
.meta-item:last-child { border-right: none; }
.meta-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-muted);
    font-weight: 600;
}
.meta-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

.meta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.meta-actions .btn-icon[title] { position: relative; }

/* Corps recette : sidebar sticky + étapes */
.recipe-body {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 64px;
    align-items: start;
}
.recipe-body h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    margin: 0 0 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ----- Sidebar ingrédients (sticky) ----- */
.recipe-ingredients {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 28px 24px;
}
.ingredients-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
    flex-wrap: wrap;
}
.ingredients-head h2 { margin: 0; }

/* Calculateur de portions */
.servings-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 20px;
    padding: 12px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.servings-label-static {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-right: auto;
    font-weight: 600;
}
.servings-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .18s var(--ease);
    line-height: 1;
    padding: 0;
}
.servings-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.servings-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.servings-value {
    min-width: 28px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.ingredient-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ingredient-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: all .18s var(--ease);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
    user-select: none;
}
.ingredient-list li:last-child { border-bottom: none; }

/* Checkbox stylée — case + coche SVG en background pour centrage parfait */
.ingredient-list li::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 5px;
    border: 2px solid var(--text-muted);
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px 12px;
    transition: all .18s var(--ease);
    box-sizing: border-box;
}

.ingredient-list li:hover { color: var(--text); }
.ingredient-list li:hover::before {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

.ingredient-list li.is-checked {
    color: var(--text-dim);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.ingredient-list li.is-checked::before {
    background-color: var(--accent);
    border-color: var(--accent);
    /* SVG inline d'une coche blanche, parfaitement centrée par background-position: center */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,8.5 6.5,12 13,4.5'/></svg>");
}

.ingredient-list li:focus-visible {
    outline: none;
}
.ingredient-list li:focus-visible::before {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sidebar-actions {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar-actions .btn-ghost { width: 100%; justify-content: center; }

.ingredients-figure { margin: 24px 0 0; }
.ingredients-figure img { width: 100%; border-radius: 10px; }

/* ----- Steps (gros format) ----- */
.recipe-steps { min-width: 0; }
.step-list { padding-left: 0; counter-reset: step; list-style: none; margin: 0; }
.step-list li {
    counter-increment: step;
    padding: 28px 0 28px 88px;
    position: relative;
    border-bottom: 1px solid var(--border-soft);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text);
}
.step-list li:last-child { border-bottom: none; }
.step-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 22px;
    width: 60px;
    height: 60px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
}

.recipe-tip {
    margin-top: 40px;
    padding: 28px 32px;
    background: var(--surface);
    border-left: 4px solid var(--accent);
    border-radius: 0 10px 10px 0;
}
.recipe-tip h3 {
    font-family: var(--font-display);
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 22px;
    font-weight: 700;
}
.recipe-tip p { margin: 0; line-height: 1.6; color: var(--text); }

/* ============================================================
   9. REVIEWS
   ============================================================ */
.recipe-reviews { margin-top: 80px; }
.recipe-reviews h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 36px);
    margin-bottom: 32px;
    letter-spacing: -0.01em;
}
.review-list { list-style: none; padding: 0; margin: 0 0 40px; display: flex; flex-direction: column; gap: 14px; }
.review-item {
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .18s var(--ease);
}
.review-item:hover { border-color: var(--border); }
.review-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.review-head strong { font-size: 15px; }
.review-rating { color: var(--accent); letter-spacing: 1px; }
.review-date { color: var(--text-muted); font-size: 13px; margin-left: auto; }
.review-comment { margin: 0; line-height: 1.6; color: var(--text); }

.review-form {
    margin-top: 40px;
    padding: 36px;
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
}
.review-form h3 {
    font-family: var(--font-display);
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
}
.hint { font-size: 13px; color: var(--text-muted); margin: 4px 0 24px; }

/* ============================================================
   10. FORMS
   ============================================================ */
.form-row { margin-bottom: 18px; display: flex; flex-direction: column; }
.form-row label {
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}
.form-row input,
.form-row select,
.form-row textarea {
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    transition: all .18s var(--ease);
    min-height: 44px;
}
.form-row textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row-check { flex-direction: row; align-items: center; gap: 10px; }
.form-row-check label { margin: 0; }
.form-row-check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--accent);
    min-height: auto;
}

.field-validation-error, .validation-summary {
    color: var(--danger);
    font-size: 13.5px;
    margin-top: 6px;
}
.validation-summary ul { margin: 0; padding-left: 18px; }

.alert {
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14.5px;
}
.alert-success { background: rgba(74, 122, 58, 0.15); border: 1px solid var(--ok); color: #b3e09e; }
.alert-error   { background: rgba(184, 72, 59, 0.15); border: 1px solid var(--danger); color: #f0b3a8; }

/* ============================================================
   11. SEARCH / CATEGORY HEADER / EMPTY
   ============================================================ */
.search-form { display: flex; gap: 12px; margin-bottom: 32px; }
.search-form input {
    flex: 1;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-size: 16px;
    min-height: 48px;
}
.search-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-summary { color: var(--text-muted); margin-bottom: 28px; font-size: 15px; }
.search-summary strong { color: var(--text); }

.cat-header { margin-bottom: 40px; }
.cat-description { font-size: 17px; color: var(--text-muted); max-width: 720px; line-height: 1.6; margin: 8px 0 12px; }
.cat-count { color: var(--text-dim); font-size: 14px; margin: 0; }

.empty {
    color: var(--text-muted);
    padding: 48px 32px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 12px;
    font-size: 15px;
}

/* ============================================================
   12. CONTACT / LEGAL / LOGIN
   ============================================================ */
.contact-form { max-width: 640px; }
.legal-page { max-width: 820px; }
.legal-page h2 {
    font-family: var(--font-display);
    font-size: 26px;
    margin: 36px 0 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.legal-page p, .legal-page li { line-height: 1.7; color: var(--text); }
.legal-page ul { padding-left: 24px; }
.legal-page li { margin-bottom: 8px; }
.cookie-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.cookie-table th, .cookie-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.cookie-table th { color: var(--text-muted); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: 1px; }
.cookie-table code { background: var(--bg); padding: 2px 6px; border-radius: 3px; font-size: 13px; }

.login-page { max-width: 440px; margin: 0 auto; }
.login-form { margin-top: 24px; }

/* ============================================================
   13. FOOTER (4 colonnes)
   ============================================================ */
.site-footer {
    margin-top: 100px;
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    padding: 64px 0 28px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    gap: 56px;
    margin-bottom: 48px;
}
.footer-col h4 {
    font-family: var(--font-display);
    font-size: 18px;
    margin: 0 0 18px;
    font-weight: 700;
    color: var(--text);
}
.footer-brand-line {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}
.footer-brand-line span { color: var(--accent); }
.footer-tagline {
    color: var(--text-muted);
    font-size: 14.5px;
    margin: 12px 0 0;
    line-height: 1.6;
    max-width: 320px;
}
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-list a {
    color: var(--text-muted);
    font-size: 14.5px;
    transition: color .15s var(--ease);
}
.footer-list a:hover { color: var(--accent); }

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-copy { color: var(--text-dim); font-size: 13px; margin: 0; }
.footer-credits { color: var(--text-dim); font-size: 13px; margin: 0; }

/* ============================================================
   14. MODAL (liste de courses)
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .2s var(--ease);
}
.modal-backdrop.is-open { display: flex; opacity: 1; }

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateY(10px);
    transition: transform .2s var(--ease);
}
.modal-backdrop.is-open .modal { transform: translateY(0); }
.modal-head {
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.modal-head h3 {
    font-family: var(--font-display);
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}
.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    line-height: 1;
    transition: all .15s var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: 24px 28px; overflow-y: auto; flex: 1; }
.modal-body ul { list-style: none; padding: 0; margin: 0; }
.modal-body li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.modal-body li::before { content: "□"; color: var(--accent); flex-shrink: 0; font-size: 18px; line-height: 1.2; }
.modal-foot {
    padding: 20px 28px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ============================================================
   15. MODE CUISINE (plein écran)
   ============================================================ */
.cooking-mode {
    position: fixed;
    inset: 0;
    background: #050505;
    z-index: 2000;
    display: none;
    flex-direction: column;
    color: var(--text);
}
.cooking-mode.is-open { display: flex; }
.cooking-mode-head {
    padding: 20px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.cooking-mode-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.cooking-mode-progress {
    height: 3px;
    background: var(--border);
    overflow: hidden;
}
.cooking-mode-progress-bar {
    height: 100%;
    background: var(--accent);
    width: 0;
    transition: width .3s var(--ease);
}
.cooking-mode-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    overflow-y: auto;
}
.cooking-step {
    max-width: 900px;
    text-align: center;
}
.cooking-step-num {
    font-family: var(--font-display);
    font-size: clamp(80px, 14vw, 180px);
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 28px;
    letter-spacing: -0.04em;
}
.cooking-step-text {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
    color: var(--text);
}
.cooking-mode-foot {
    padding: 20px 28px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.cooking-nav-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 22px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    transition: all .18s var(--ease);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.cooking-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cooking-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cooking-nav-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cooking-nav-btn.primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}
.cooking-step-counter {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: center;
    flex: 1;
    min-width: 0;
}
.cooking-step-counter strong { color: var(--text); }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .recipe-body {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .recipe-ingredients {
        position: static;
    }
    /* Hero magazine bascule en stacked dès la tablette pour ne pas serrer */
    .recipe-hero-mag-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .recipe-hero-mag-text { order: 1; }
    .recipe-hero-mag-image { order: 2; max-width: 720px; margin: 0 auto; width: 100%; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }

    /* ====== HEADER MOBILE : 2 lignes (brand+toggle / search) ====== */
    .site-header {
        height: auto;
        padding: 10px 0;
    }
    .header-inner {
        flex-wrap: wrap;
        gap: 10px;
        row-gap: 10px;
    }
    .brand {
        font-size: 22px;
        flex: 1; /* prend la place restante à gauche du toggle */
    }
    .nav-toggle { display: inline-flex; order: 2; }
    /* Search prend toute la ligne en dessous */
    .header-search {
        order: 3;
        flex-basis: 100%;
        width: 100%;
    }
    .header-search input,
    .header-search .autocomplete > input[type="search"] {
        min-width: 0;
        width: 100%;
        font-size: 16px; /* >= 16px pour éviter le zoom auto iOS au focus */
    }

    /* Menu déroulant : se positionne sous le header (hauteur dynamique) */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--bg-elev);
        flex-direction: column;
        gap: 0;
        padding: 0 18px;
        border-bottom: 1px solid var(--border);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s var(--ease), padding .3s var(--ease);
        align-items: stretch;
        order: 4;
        flex-basis: 100%;
    }
    .main-nav.is-open { max-height: 400px; padding: 12px 18px 16px; }
    .main-nav a {
        padding: 14px 12px;
        font-size: 16px;
        border-radius: 6px;
    }
    .main-nav a.active::after { display: none; }
    .main-nav a.active { background: var(--surface); }

    /* Position du listbox autocomplete recalculée sous le full-width input */
    .autocomplete-list {
        max-height: 60vh;
    }

    /* ====== SECTIONS GÉNÉRALES : aérer les titres collés ====== */
    .hero { padding: 70px 0 60px; }
    .hero-stats { gap: 32px; margin-top: 44px; }
    .hero-stat-num { font-size: 30px; }

    /* En mobile, .section a maintenant un padding latéral garanti (en plus
       du padding du .container parent éventuel). Ça blinde les cas où une
       vue utiliserait .section sans .container, ou aurait un wrapper qui
       casse le padding parent. */
    .section { padding: 56px 22px; }
    .section > .container { padding: 0; }

    /* .section-head reste flex column en mobile, sans padding propre
       (il hérite du parent), mais on garantit la respiration via le parent. */
    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Garde-fou : si un titre est utilisé hors .container ET hors .section,
       on lui pose quand même un padding latéral pour qu'il ne soit jamais collé. */
    .page-title,
    .section-title,
    .cat-header,
    .section-sub,
    .page-intro,
    .breadcrumb {
        padding-left: 0;
        padding-right: 0;
    }

    /* Si jamais une vue utilise un wrapper sans padding, on rattrape côté body */
    main.site-main > .container,
    main.site-main > .section {
        padding-left: 22px;
        padding-right: 22px;
    }

    /* ====== PAGE RECETTE ====== */
    /* Hero magazine : stacked en mobile (titre au-dessus, image en dessous) */
    .recipe-hero-mag { padding: 32px 0 28px; }
    .recipe-hero-mag-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .recipe-hero-mag-text .breadcrumb { margin-bottom: 12px; }
    .recipe-eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: 2px; }
    .recipe-title { font-size: clamp(32px, 8vw, 48px); margin-bottom: 10px; }
    .recipe-subtitle { font-size: 15px; }
    .recipe-hero-mag-image { border-radius: 12px; }

    .recipe-meta-card { margin-top: 8px; padding: 0 18px; }
    .recipe-meta-card-inner { padding: 20px 22px; flex-direction: column; align-items: stretch; gap: 20px; }
    .meta-grid { gap: 18px; grid-template-columns: repeat(2, 1fr); }
    .meta-item { border-right: none; padding-right: 0; }
    .meta-actions { justify-content: stretch; }
    .meta-actions .btn-ghost { flex: 1; }

    .step-list li { padding: 22px 0 22px 64px; font-size: 16px; }
    .step-list li::before { width: 46px; height: 46px; font-size: 20px; top: 18px; }

    .recipe-body { margin-top: 48px; gap: 40px; }
    .recipe-ingredients { padding: 22px; }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 36px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 44px; }
    .hero-tagline { font-size: 16px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn-cta, .hero-ctas .btn-secondary { width: 100%; }

    .header-search input { min-width: 0; }
    .recipe-card-meta { gap: 8px; }

    .review-form { padding: 24px 20px; }
    .modal { max-height: 92vh; }
    .modal-head, .modal-body, .modal-foot { padding-left: 20px; padding-right: 20px; }
    .modal-foot { flex-direction: column; }
    .modal-foot button { width: 100%; }

    /* Mode cuisine très étroit : boutons + petit, padding réduit */
    .cooking-mode-foot {
        padding: 16px 14px;
        gap: 10px;
    }
    .cooking-nav-btn {
        padding: 12px 14px;
        font-size: 14px;
    }
    .cooking-step-counter {
        font-size: 15px;
    }
    .cooking-mode-head {
        padding: 16px 18px;
    }
    .cooking-mode-title { font-size: 17px; }
    .cooking-mode-body { padding: 28px 18px; }
}

/* ============================================================
   17. PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .recipe-card:hover { transform: none; }
    .recipe-card:hover .recipe-card-img { transform: none; }
    .cat-card:hover { transform: none; }
}

/* ============================================================
   18. PRINT
   ============================================================ */
@media print {
    /* Couleurs imprimables */
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
        line-height: 1.5;
    }
    a { color: #000 !important; text-decoration: none !important; }

    /* Masquer la chrome */
    .site-header,
    .site-footer,
    .recipe-hero-mag,
    .recipe-reviews,
    .meta-actions,
    .sidebar-actions,
    .servings-control,
    .nav-toggle,
    .modal-backdrop,
    .cooking-mode,
    .breadcrumb,
    .skip-link {
        display: none !important;
    }

    /* Page recette */
    .recipe-page { padding: 0 !important; }
    .recipe-meta-card { margin: 0 0 20px !important; padding: 0 !important; }
    .recipe-meta-card-inner {
        background: #fff !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        padding: 16px !important;
        border-radius: 4px !important;
    }
    .meta-label { color: #555 !important; font-size: 9pt !important; }
    .meta-value { color: #000 !important; font-size: 14pt !important; }
    .meta-item { border-right: 1px solid #ddd !important; }
    .meta-item:last-child { border-right: none !important; }

    /* Titre */
    .recipe-page::before {
        content: attr(data-print-title);
        display: block;
        font-family: var(--font-display);
        font-size: 24pt;
        font-weight: 700;
        margin-bottom: 14px;
        page-break-after: avoid;
    }

    /* Corps recette : 2 colonnes ingrédients/étapes */
    .recipe-body {
        display: grid !important;
        grid-template-columns: 38% 1fr !important;
        gap: 28px !important;
        margin-top: 0 !important;
    }
    .recipe-ingredients {
        background: #fff !important;
        border: 1px solid #ccc !important;
        position: static !important;
        padding: 16px !important;
        border-radius: 4px !important;
    }
    .recipe-ingredients h2,
    .recipe-steps h2 {
        font-size: 14pt !important;
        color: #000 !important;
        margin-bottom: 10px !important;
        page-break-after: avoid;
    }
    .ingredients-figure { display: none !important; }
    .ingredient-list li {
        color: #000 !important;
        border-bottom: 1px solid #eee !important;
        padding: 6px 0 !important;
    }
    .ingredient-list li::before { background: #000 !important; }
    .ingredient-list li.is-checked {
        color: #888 !important;
        text-decoration: line-through !important;
    }

    /* Steps : numéros plus petits, pas de page-break dans une étape */
    .step-list li {
        page-break-inside: avoid;
        padding: 10px 0 10px 50px !important;
        font-size: 11pt !important;
        border-bottom: 1px solid #eee !important;
        color: #000 !important;
    }
    .step-list li::before {
        width: 34px !important;
        height: 34px !important;
        font-size: 14pt !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        top: 8px !important;
        background: #fff !important;
    }

    /* Tip en filet noir */
    .recipe-tip {
        background: #fff !important;
        border: 1px solid #000 !important;
        border-left: 4px solid #000 !important;
        page-break-inside: avoid;
        margin-top: 20px !important;
        padding: 12px 16px !important;
    }
    .recipe-tip h3 { color: #000 !important; font-size: 13pt !important; }
    .recipe-tip p { color: #000 !important; font-size: 10pt !important; }

    /* Eviter coupures inopportunes */
    h1, h2, h3 { page-break-after: avoid; }
    img { page-break-inside: avoid; }

    .form-consent {
        font-size: 12.5px;
        color: var(--text-dim);
        margin: 12px 0;
        line-height: 1.5;
    }

        .form-consent a {
            color: var(--text-muted);
            text-decoration: underline;
        }

            .form-consent a:hover {
                color: var(--accent);
            }
}