/*
 * La Popote — Skin « Livre de recettes »
 * book.css — repris de lapopote-livre-maquette.html (v4)
 *
 * Fonts :
 *   - EB Garamond  → Google Fonts, chargé dans book.php (corps du livre + éléments décoratifs)
 *   - Amatic SC    → auto-hébergée dans themes/triminik/fonts/, @font-face inline dans book.php
 *   - Dancing Script → idem (preload uniquement, non utilisée directement dans ce CSS)
 *   - corps UI     → var(--lp-body-font) = "Noto Sans" (fallback si jamais)
 */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    --cover:         #5E2A33;
    --paper:         #F6EEDF;
    --ink:           #3B3129;
    --ink-soft:      #6E6154;
    --gold:          #F2C766;
    --tab-1:         #8A9B6E;
    --tab-2:         #BE6E4B;
    --tab-3:         #C99F3C;
    --tab-4:         #6E8CA0;
    --page-w:        506px;   /* +10% vs maquette (460px) */
    --page-h:        744px;   /* +20% vs maquette (620px) */
    /* fallback si lp_rctte.css n'est pas chargé (page standalone) */
    --lp-body-font:  "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lp-book-serif:   "EB Garamond", Georgia, serif;
    --lp-book-cursive: "EB Garamond", Georgia, serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
/* Reset global — OK car book.php est une page standalone (pas de wp_head) */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Hauteur plein écran indispensable : tout est en position:absolute */
html, body { height: 100%; }

/* Corps du livre : Georgia remplace EB Garamond (maquette : body { font-family:'EB Garamond'... }) */
#lp-book-root { font-family: var(--lp-book-serif); color: var(--ink); }

/* La page entière en mode livre */
body.lp-skin-book {
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255,220,160,.10), transparent 60%),
        repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 170px),
        repeating-linear-gradient(0deg,  rgba(255,255,255,.015) 0 3px, transparent 3px 7px),
        linear-gradient(160deg, #332822, #241C17 55%, #1C1512);
}

/* ============================================================
   SCÈNE & LIVRE
   ============================================================ */
#lp-stage {
    position: absolute;
    left: 50%; top: 50%;
    width: 1100px; height: 820px;   /* marge resserrée autour du livre (plus grand à l'écran) */
    transform-origin: center center;
}

.lp-book {
    position: absolute;
    left: 50%;
    top: 34px;
    width:  calc(var(--page-w) * 2);
    height: var(--page-h);
    /* fermé : couverture (page droite) centrée dans le stage */
    transform: translateX(-50%);
    transition: transform 1.1s cubic-bezier(.55,.06,.25,1);
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.55));
}
.lp-book.open { transform: translateX(-50%); } /* livre ouvert : les 2 pages centrées dans le stage */

/* Gouttière centrale (reliure) — desktop */
.lp-book::after {
    content: "";
    position: absolute; top: 2px; bottom: 2px;
    left: calc(50% - 22px); width: 44px;
    background: linear-gradient(90deg,
        transparent,
        rgba(70,45,25,.16) 36%,
        rgba(45,28,14,.40) 50%,
        rgba(70,45,25,.16) 64%,
        transparent);
    z-index: 8; pointer-events: none;
    opacity: 0; transition: opacity .4s 1.15s;
}
.lp-book.open::after { opacity: 1; }

/* Plat de couverture sous la page de droite */
#lp-boardRight {
    position: absolute;
    left: var(--page-w); top: -8px;
    width:  calc(var(--page-w) + 10px);
    height: calc(var(--page-h) + 16px);
    background: linear-gradient(160deg, #8A4450, #6B323C 55%, #5E2A33) !important;
    box-shadow:
        inset 0  10px 8px -5px rgba(0,0,0,.5),
        inset 0 -10px 8px -5px rgba(0,0,0,.5),
        0 4px 14px rgba(0,0,0,.5);
    border-radius: 4px 14px 14px 4px;
    z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 2px 3px 8px rgba(0,0,0,.2);
}

/* ============================================================
   PAGES STATIQUES
   ============================================================ */
.lp-static {
    position: absolute; top: 0;
    width:  var(--page-w);
    height: var(--page-h);
    z-index: 4;
}
#lp-staticLeft { left: 0; opacity: 0; transition: opacity .3s; }
.lp-book.open #lp-staticLeft { opacity: 1; transition-delay: 1.15s; }
#lp-staticRight { left: var(--page-w); }

/* Tranche droite du livre */
#lp-staticRight::before {
    content: "";
    position: absolute; right: -7px; top: 0; bottom: 0; width: 7px;
    /* bords de feuilles empilées : lignes verticales */
    background: repeating-linear-gradient(90deg, #EFE6D2 0 2px, #D9CBAE 2px 3px);
    border-radius: 0 3px 3px 0;
}
/* Tranche gauche */
#lp-staticLeft::before {
    content: "";
    position: absolute; left: -7px; top: 0; bottom: 0; width: 7px;
    background: repeating-linear-gradient(90deg, #EFE6D2 0 2px, #D9CBAE 2px 3px);
    border-radius: 3px 0 0 3px;
    opacity: 0; transition: opacity .3s;
}
.lp-book.turned #lp-staticLeft::before { opacity: 1; }

/* ============================================================
   FEUILLE ANIMÉE UNIQUE (flipper)
   ============================================================ */
#lp-flipper {
    position: absolute; left: var(--page-w); top: 0;
    width:  var(--page-w);
    height: var(--page-h);
    transform-origin: left center;
    transform-style: preserve-3d;
    display: none;
    z-index: 30;
}
#lp-flipper.on { display: block; }
#lp-flipper .lp-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
#lp-flipper .lp-face.back { transform: rotateY(180deg); }

/* ============================================================
   ZONES DE TOUCHER (tourner les pages)
   ============================================================ */
.lp-tapzone {
    position: absolute; top: 60px; bottom: 80px; width: 9%;
    z-index: 20; cursor: pointer;
    opacity: 0; transition: opacity .25s;
    pointer-events: none;
}
.lp-book.open .lp-tapzone { pointer-events: auto; }
.lp-tapzone.left { left: 0;  background: linear-gradient(90deg,  rgba(59,49,41,.14), transparent 70%); }
.lp-tapzone.right { right: 0; background: linear-gradient(-90deg, rgba(59,49,41,.14), transparent 70%); }
.lp-tapzone:hover { opacity: 1; }
.lp-tapzone::after {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 26px; color: var(--ink-soft);
}
.lp-tapzone.left::after { content: "‹"; left:  12px; }
.lp-tapzone.right::after { content: "›"; right: 12px; }

/* ============================================================
   PAGES
   ============================================================ */
.lp-page { position: absolute; inset: 0; overflow: hidden; }
#lp-pageStore { display: none; }

.lp-paper {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
        repeating-linear-gradient(0deg, rgba(120,95,60,.028) 0 1px, transparent 1px 4px),
        var(--paper);
}
.lp-paper::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 46px; pointer-events: none;
}
.lp-paper.recto::after { left: 0;  background: linear-gradient(90deg,  rgba(60,40,20,.22), transparent); }
.lp-paper.verso::after { right: 0; background: linear-gradient(-90deg, rgba(60,40,20,.22), transparent); }

/* ============================================================
   COUVERTURE
   ============================================================ */
.lp-cover {
    position: absolute; left: var(--page-w); top: -8px;
    width:  calc(var(--page-w) + 10px);
    height: calc(var(--page-h) + 16px);
    transform-style: preserve-3d;
    transform-origin: left center;
    transform: perspective(2600px) rotateY(0deg);
    transition: transform 1.3s cubic-bezier(.5,.05,.28,1);
    z-index: 40;
    cursor: pointer;
}
.lp-book.open .lp-cover {
    transform: perspective(2600px) rotateY(-180deg);
    cursor: default; z-index: 2;
}

.lp-cover .cface {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
.lp-cover .cface.back { transform: rotateY(180deg); }

.lp-cover .cface.front {
    border-radius: 4px 14px 14px 4px;
    background:
        radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.12), transparent 55%),
        repeating-linear-gradient( 35deg, rgba(0,0,0,.06) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-35deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px),
        linear-gradient(150deg, #6B323C 0%, #5E2A33 45%, #451E26 100%);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.35),
        inset -6px 0 12px rgba(0,0,0,.35),
        inset  8px 0 10px rgba(255,255,255,.05);
    display: flex; align-items: center; justify-content: center;
}
.lp-cover-frame {
    width: 82%; height: 86%;
    border: 3px double rgba(242,199,102,.95);
    border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 0 rgba(255,255,255,.12);
    position: relative;
}
/* Marque "La Popote" : en haut de la couverture, plus petite que le titre */
.lp-cover-brand {
    position: absolute; top: 26px; left: 0; right: 0;
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 30px; letter-spacing: 3px; text-align: center;
    color: #F6D488;
    text-shadow: 0 -1px 1px rgba(0,0,0,.35), 0 0 12px rgba(255,215,130,.3);
}
.lp-cover-title {
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 48px; letter-spacing: 3px;
    color: var(--gold);
    text-shadow: 0 -1px 1px rgba(0,0,0,.4), 0 1px 0 rgba(255,246,215,.5), 0 0 18px rgba(255,215,130,.35);
}
.lp-cover-sub { font-style: italic; font-size: 19px; letter-spacing: 2px; color: #F6D488; }
.lp-cover-orn { color: #F0C875; font-size: 22px; letter-spacing: 8px; }
.lp-cover-flags {
    position: absolute; bottom: 26px; left: 0; right: 0;
    text-align: center; font-size: 15px; letter-spacing: 10px;
    color: #F6D488;
}

/* Marbrure */
.lp-marbled {
    background:
        radial-gradient(circle at 15% 20%, rgba(94,42,51,.32)   0  8%, transparent  9%),
        radial-gradient(circle at 70% 12%, rgba(110,140,160,.30) 0 10%, transparent 11%),
        radial-gradient(circle at 40% 55%, rgba(242,199,102,.34) 0 12%, transparent 13%),
        radial-gradient(circle at 85% 70%, rgba(94,42,51,.28)    0  9%, transparent 10%),
        radial-gradient(circle at 20% 85%, rgba(110,140,160,.26) 0 11%, transparent 12%),
        radial-gradient(circle at 60% 90%, rgba(138,90,115,.28)  0  8%, transparent  9%),
        radial-gradient(circle at 90% 35%, rgba(138,155,110,.28) 0 10%, transparent 11%),
        #EEE2C8;
}

/* ============================================================
   PAGE DE GARDE : EX-LIBRIS
   ============================================================ */
.lp-exlibris-wrap { display: flex; align-items: center; justify-content: center; height: 100%; }
.lp-exlibris {
    width: 70%;
    background: var(--paper);
    border: 1px solid #C9B98F;
    box-shadow: 2px 3px 8px rgba(0,0,0,.18);
    padding: 26px 28px 24px;
    text-align: center;
    transform: rotate(-1.2deg);
}
.lp-exlibris h3 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 34px; letter-spacing: 3px; }
.lp-exlibris p { font-style: italic; color: var(--ink-soft); font-size: 16px; margin-top: 6px; }

.lp-username { font-family: 'Amatic SC', cursive; font-size: 22px; color: var(--ink); display: inline; }
.lp-choices { display: flex; gap: 18px; justify-content: center; margin-top: 12px; }
.lp-choice {
    font-family: var(--lp-book-serif); font-style: italic; font-size: 14px;
    background: none; border: none; padding: 0;
    color: var(--ink-soft); cursor: pointer;
    transition: color .2s;
}
.lp-choice::before { content: "○ "; font-style: normal; }
.lp-choice:hover { color: var(--ink); }
.lp-choice.active { color: var(--ink); }
.lp-choice.active::before { content: "● "; color: var(--cover); }
.lp-loginbtn {
    margin-top: 2px;
    font-family: var(--lp-book-serif); font-size: 14px; letter-spacing: 1px;
    background: none; border: 1px solid var(--ink-soft); border-radius: 3px;
    color: var(--ink-soft); padding: 5px 14px; cursor: pointer;
}
.lp-loginbtn:hover { background: rgba(59,49,41,.06); }
.lp-printrow {
    margin-top: 14px; display: none;
    justify-content: center;
}
.lp-exlibris.mine .lp-printrow { display: flex; }
.lp-printbtn {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--lp-book-cursive); font-style: italic; font-size: 15px;
    background: none; border: none; color: #8C5A20; cursor: pointer;
    border-bottom: 1px dotted #8C5A20; padding-bottom: 2px;
}
.lp-printbtn:hover { color: #5E3A10; }
.lp-printbtn svg { width: 18px; height: 18px; fill: currentColor; }

/* ============================================================
   SOMMAIRES
   ============================================================ */
.lp-toc { padding: 50px 56px 34px 62px; display: flex; flex-direction: column; }
.lp-toc-eyebrow {
    font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--ink-soft); text-align: center;
}
.lp-toc h2 {
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 56px; letter-spacing: 3px; text-align: center; margin: 4px 0 6px;
}
.lp-toc-orn { text-align: center; color: var(--gold); letter-spacing: 6px; margin-bottom: 24px; }
.lp-toc ul { list-style: none; flex: 1; }
.lp-toc li { margin-bottom: 19px; }
.lp-toc a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); font-size: 21px; }
.lp-toc a:hover .lp-chap { color: #000; text-decoration: underline; text-decoration-color: var(--gold); }
.lp-toc a.soon { opacity: .45; cursor: default; }
.lp-toc .lp-dot { width: 11px; height: 11px; border-radius: 50%; align-self: center; flex-shrink: 0; }
.lp-toc .lp-chap { white-space: nowrap; }
.lp-toc .lp-leader { flex: 1; border-bottom: 2px dotted rgba(110,97,84,.5); transform: translateY(-4px); }
.lp-toc .lp-pg { font-variant-numeric: oldstyle-nums; color: var(--ink-soft); }

.lp-toc-foot .lp-navlink { font-size: 15.5px; }

/* Page image d'un type de plat */
.lp-chap-title {
    padding: 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    text-align: center;
}
.lp-chap-title .lp-eyebrow { font-size: 13px; letter-spacing: 5px; text-transform: uppercase; color: var(--ink-soft); }
.lp-chap-title h2 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 64px; letter-spacing: 3px; line-height: 1; }
.lp-chap-title .lp-orn { color: var(--gold); font-size: 26px; letter-spacing: 10px; }
.lp-chap-title p { font-style: italic; color: var(--ink-soft); font-size: 17px; }

/* ============================================================
   PAGES PHOTO (placeholder polaroïd)
   ============================================================ */

.lp-photo-frame {
    position: relative;
    background: #FCF6E8;
    padding: 14px 14px 40px;
    box-shadow: 3px 5px 14px rgba(0,0,0,.25);
    transform: rotate(-1.6deg);
}
.lp-photo-frame svg, .lp-photo-frame img { display: block; width: 300px; height: 230px; background: linear-gradient(170deg, #D8C6A2, #B99F72); }
.lp-photo-frame.small svg, .lp-photo-frame.small img { width: 230px; height: 150px; }
.lp-photo-frame.small { padding: 10px 10px 28px; }
.lp-tape { position: absolute; width: 74px; height: 24px; background: rgba(214,199,160,.7); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.lp-tape.tl { top: -10px; left: -22px; transform: rotate(-38deg); }
.lp-tape.br { bottom: -10px; right: -22px; transform: rotate(-38deg); }
.lp-photo-cap { font-family: 'Amatic SC', cursive; font-size: 30px; letter-spacing: 2px; }
.lp-photo-note { font-style: italic; color: var(--ink-soft); text-align: center; font-size: 15.5px; max-width: 300px; }

/* ============================================================
   PAGES RECETTE
   ============================================================ */
.lp-recipe { padding: 36px 48px 24px 58px; display: flex; flex-direction: column; }
.lp-recipe.on-left { padding: 36px 58px 24px 48px; }

.lp-recipe h2 .suite {
    font-family: var(--lp-book-cursive); font-style: italic; font-weight: 400;
    font-size: 22px; color: var(--ink-soft); letter-spacing: 0;
}
.lp-recipe .lp-region { font-style: italic; color: var(--ink-soft); font-size: 15.5px; }
.lp-times {
    display: flex; gap: 10px; align-items: baseline;
    margin: 12px 0 2px;
    font-size: 15px;
    border-top:    1px solid rgba(110,97,84,.35);
    border-bottom: 1px solid rgba(110,97,84,.35);
    padding: 7px 0;
}
.lp-times b { font-weight: 600; }
.lp-times .lp-sep { color: var(--gold); }
/* Bloc méta + « Préparation » : un peu d'air quand il suit les ingrédients
   sur une même page (flux continu). */
.lp-prep-head { margin-top: 16px; }
h3.lp-rub {
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 28px; letter-spacing: 2px;
    margin: 12px 0 5px;
}
.lp-ing { list-style: none; column-count: 2; column-gap: 34px; font-size: 15.5px; line-height: 1.5; }
.lp-ing li { break-inside: avoid; padding-left: 14px; text-indent: -14px; }
.lp-ing li::before { content: "— "; color: #C8A15A; }
/* Ligne de section : sous-titre sans tiret ni retrait suspendu */
.lp-ing li.lp-ing-section::before { content: none; }
.lp-ing li.lp-ing-section { text-indent: 0; padding-left: 0; margin-top: 6px; }
.lp-steps { list-style: none; font-size: 15px; line-height: 1.45; flex: 1; }
.lp-steps li { display: flex; gap: 12px; margin-bottom: 8px; }
.lp-steps li::before {
    content: attr(data-n);
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 26px; line-height: 1; color: var(--tab-2);
    min-width: 22px; text-align: right;
}
/* Palier 1 : compact */
.lp-compact .lp-steps { font-size: 14px; line-height: 1.42; }
.lp-compact .lp-steps li { margin-bottom: 7px; }
.lp-compact .lp-steps li::before { font-size: 23px; }
.lp-compact .lp-ing { font-size: 14.5px; line-height: 1.45; }
.lp-compact h3.lp-rub { font-size: 27px; margin: 12px 0 5px; }
.lp-compact .lp-times { font-size: 14.5px; margin: 12px 0 2px; }

.lp-house-note {
    font-style: italic; color: var(--ink-soft); font-size: 14.5px;
    border-left: 3px solid var(--gold);
    padding: 6px 0 6px 14px;
    margin-top: 8px;
}

.lp-recipe-foot .lp-folio, .lp-privacy .lp-foot .lp-folio, .lp-priv-foot .lp-folio {
    position: absolute; left: 50%; transform: translateX(-50%);
}
.lp-navlink {
    font-style: italic; color: var(--ink-soft); text-decoration: none;
    font-size: 15px; background: none; border: none; cursor: pointer;
    font-family: var(--lp-book-cursive);
}
.lp-navlink:hover { color: var(--ink); }
.lp-folio { font-variant-numeric: oldstyle-nums; }

/* Palier 2 : combo */
.lp-combo { padding: 40px 48px 24px 58px; display: flex; flex-direction: column; }
.lp-combo .lp-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 6px; }
.lp-combo .lp-photo-cap { font-size: 32px; }   /* titre page gauche (swap) */
.lp-combo .lp-recipe-foot { margin-top: auto; }

/* ============================================================
   FAVORI : COIN DE PAGE CORNÉ
   ============================================================ */
/* Favori = coin de page corné. Carré dans l'angle haut-droit, diagonale « \ »
   = pliure. Triangle SUPÉRIEUR (haut-droit) = le coin de la page ; triangle
   INFÉRIEUR (bas-gauche) = le rabat replié, avec le cœur. */
.lp-dogear {
    position: absolute; top: 0; right: 0;
    width: 46px; height: 46px;
    border: none; padding: 0; cursor: pointer;
    background: transparent; z-index: 6;
}
/* Triangle SUPÉRIEUR (coin de page). Repos : transparent. Hover (pas favori) :
   mis en évidence. Favori : laisse voir le coin de la page suivante (dessous). */
.lp-dogear::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: transparent;
    transition: background .2s;
    pointer-events: none;
}
.lp-dogear:not(.on):hover::before { background: rgba(60,40,20,.13); }
.lp-dogear.on::before { background: linear-gradient(135deg, #E1D1AC, #CDBB92); }
/* Triangle INFÉRIEUR = le rabat replié (dos de la page), visible si favori. */
.lp-dogear::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    background: linear-gradient(135deg, #E9DCBD 0%, #F6EEDF 72%);
    opacity: 0; transition: opacity .2s;
    filter: drop-shadow(-1.5px 1.5px 1.5px rgba(0,0,0,.28));
    pointer-events: none;
}
.lp-dogear.on::after { opacity: 1; }
/* Le cœur, posé sur le triangle inférieur (le rabat) */
.lp-dogear-heart {
    position: absolute; left: 10px; top: 24px; z-index: 2;
    font-size: 13px; line-height: 1; color: #A93B32;
    opacity: 0; transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.lp-dogear.on .lp-dogear-heart { opacity: 1; }
.lp-dogear:not(.on):hover .lp-dogear-heart { opacity: .35; }

/* ============================================================
   ICÔNES D'ACTION
   ============================================================ */
.lp-actions {
    position: absolute; top: 11px; right: 54px;   /* dégage le coin corné (46px) */
    display: flex; gap: 8px; z-index: 6;
    opacity: .9; transition: opacity .2s;   /* plus visibles au repos */
}
.lp-recipe:hover .lp-actions { opacity: 1; }
/* Boutons d'action — style simple : icône seule, fond transparent,
   hover = ombre circulaire. */
.lp-abtn {
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    background: transparent; border: none;
    opacity: .8;
    transition: opacity .18s, box-shadow .18s;
}
.lp-abtn svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lp-abtn:hover {
    opacity: 1;
    box-shadow: 0 0 8px 2px rgba(59,49,41,.28);   /* ombre circulaire */
}

/* ============================================================
   PAGE DE TYPE DE PLAT
   ============================================================ */
.lp-typepage {
    padding: 50px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    text-align: center;
}
.lp-typepage h2 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 62px; letter-spacing: 3px; line-height: 1; }
.lp-typepage .lp-orn { color: var(--gold); font-size: 24px; letter-spacing: 10px; }
.lp-typepage p { font-style: italic; color: var(--ink-soft); font-size: 16px; }

/* ============================================================
   ANNEXES / CONFIDENTIALITÉ
   ============================================================ */
.lp-privacy { padding: 46px 52px 28px 60px; display: flex; flex-direction: column; }
.lp-privacy h2 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 42px; letter-spacing: 2px; margin-bottom: 12px; }
.lp-privacy h4 { font-size: 16.5px; font-weight: 600; margin: 12px 0 3px; }
.lp-privacy p { font-size: 14px; line-height: 1.5; color: var(--ink); }
.lp-privacy .lp-foot {
    margin-top: auto; display: flex; justify-content: space-between; align-items: baseline;
    color: var(--ink-soft); font-size: 14px; position: relative;
}

/* Liens sous l'ex-libris — mobile uniquement */
.lp-garde-foot {
    display: none;
    position: absolute; bottom: 24px; left: 0; right: 0;
    justify-content: center; gap: 30px;
}


/* ============================================================
   BULLES D'AIDE (première visite)
   ============================================================ */
#lp-coach {
    position: absolute; inset: 0; z-index: 90;
    display: none;
    background: rgba(26,19,15,.35);
    cursor: pointer;
}
#lp-coach.show { display: block; }
#lp-coach .lp-bubble {
    position: absolute; transform: translate(-50%, -50%);
    width: 230px;
    background: #FDF8EC; color: var(--ink);
    border-radius: 6px; padding: 14px 18px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    font-size: 15px; line-height: 1.4; text-align: center;
}
#lp-coach .lp-bubble b {
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 24px; letter-spacing: 1px;
    display: block; margin-bottom: 4px;
}
#lp-coach .lp-bubble .lp-cstep {
    display: block; margin-top: 8px;
    font-style: italic; color: var(--ink-soft); font-size: 13px;
}

/* ============================================================
   ONGLETS (marque-pages)
   ============================================================ */

/* Dock = zone de survol persistante dans la marge droite du livre.
   Les onglets ne sont interactifs / révélables que livre ouvert. */
.lp-tabdock {
    position: absolute;
    top: 44px;
    left: 100%;                 /* démarre au bord droit du livre */
    width: 210px;               /* zone de survol dans la marge droite */
    height: calc(var(--page-h) - 88px);
    z-index: 2;                 /* au-dessus du plat (1), sous la page (4) */
    pointer-events: none;
}
.lp-book.open .lp-tabdock { pointer-events: auto; }

/* Rétractés par défaut : glissés derrière le livre. Révélés au survol du dock
   (ou au focus clavier d'un onglet). */
.lp-book.open .lp-tabdock:hover .lp-tabs,
.lp-book.open .lp-tabdock:focus-within .lp-tabs {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* hover/actif : jeu de couleurs uniquement — aucune variation de taille */
.lp-tab:hover { filter: brightness(1.28) saturate(1.35); box-shadow: 3px 2px 8px rgba(0,0,0,.4); }
.lp-tab.is-current { filter: brightness(1.35) saturate(1.4);  box-shadow: 3px 2px 8px rgba(0,0,0,.45); }

/* ============================================================
   LOUPE / RECHERCHE / TOAST
   ============================================================ */
.lp-loupe {
    position: absolute; top: 18px; right: 20px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(110,97,84,.45);
    background: rgba(246,238,223,.6);
    cursor: pointer; font-size: 16px; color: var(--ink-soft);
    z-index: 5;
}
.lp-loupe:hover { background: #fff; }
#lp-search {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(26,19,15,.55);
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
#lp-search.show { display: flex; }
.lp-index-card {
    width: min(420px, 88vw);
    background:
        repeating-linear-gradient(0deg, transparent 0 30px, rgba(110,140,160,.35) 30px 31px),
        linear-gradient(#FDF8EC, #FDF8EC);
    border-top: 10px solid #C46A6A;
    border-radius: 4px;
    padding: 26px 30px 30px;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    transform: rotate(-.8deg);
}
.lp-index-card h3 { font-family: 'Amatic SC', cursive; font-size: 34px; letter-spacing: 2px; margin-bottom: 8px; }
.lp-index-card input {
    width: 100%; font-family: var(--lp-book-serif); font-size: 19px;
    background: transparent; border: none; outline: none;
    border-bottom: 2px dotted var(--ink-soft);
    padding: 6px 2px; color: var(--ink);
}
.lp-index-card p { margin-top: 12px; font-style: italic; color: var(--ink-soft); font-size: 14.5px; }
.lp-search-results { margin-top: 14px; list-style: none; }
.lp-search-results li { padding: 6px 0; border-bottom: 1px dotted rgba(110,97,84,.3); font-size: 15px; }

.lp-search-results a:hover { color: var(--cover); }

#lp-toast {
    position: fixed; left: 50%; bottom: 40px;
    transform: translateX(-50%) translateY(20px);
    background: #3B3129; color: var(--paper);
    font-size: 16px; padding: 10px 22px; border-radius: 4px;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 200;
    max-width: 88vw; text-align: center;
}
#lp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   MODE MOBILE : simple page, glissement
   ============================================================ */



/* Tranche de la page de gauche : petit morceau de papier toujours visible
   sur le bord gauche (celui que l'on entrevoit en tournant la page).
   On réutilise #lp-staticLeft (vide et inutilisé en mobile) comme bandeau. */












/* ============================================================
   ALIASES BEM POUR LES CLASSES GÉNÉRÉES PAR book.js (Lot 2)
   ============================================================ */

/* photo-frame variantes BEM */
.lp-photo-frame--small { padding: 10px 10px 28px; }
.lp-photo-frame--small img, .lp-photo-frame--small svg { width: 230px; height: 150px; }
/* Cadre sans photo : le SVG placeholder donne sa taille au cadre —
   surtout pas de hauteur figée ici (le SVG débordait sur le titre) */
.lp-photo-frame--empty { background: linear-gradient(170deg, #D8C6A2, #B99F72); }

/* tapes adhésives (aliases BEM) */
.lp-tape--tl { top: -10px; left: -22px; transform: rotate(-38deg); }
.lp-tape--br { bottom: -10px; right: -22px; transform: rotate(-38deg); }

/* page gauche recette (photo + ingrédients) : image occupe ~50% de la hauteur */
.lp-combo .lp-photo-frame--small img, .lp-combo .lp-photo-frame--small svg {
    width:  100%;
    height: calc(var(--page-h) * 0.414);   /* -10 % (était 0.46) */
    object-fit: cover;
    display: block;
}
.lp-combo .lp-photo-frame--small {
    width: 100%;
    padding: 10px 10px 32px;
}
.lp-combo .lp-photo-wrap {
    width: 100%;
}

/* mention "— suite" dans les titres de pages de continuation */
.lp-suite {
    font-family: var(--lp-book-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--ink-soft);
    letter-spacing: 0;
}

/* page de droite (suite) : padding miroir */
.lp-on-left { padding: 36px 58px 24px 48px !important; }

/* page blanche */
.lp-blank { background: var(--paper); }

/* séparateur · dans les temps */
.lp-sep { color: var(--gold); }

/* i18n clés supplémentaires exposées dans lpBookConfig */
/* (pas de CSS nécessaire — documenté ici pour référence) */

/* ============================================================
   TOC — layout flex pour ancrer le pied de page
   ============================================================ */
.lp-toc--main, .lp-toc--subtoc {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 48px 52px 36px;
    box-sizing: border-box;
}
.lp-toc-rows--grow {
    flex: 1;
    overflow: hidden;
}
.lp-toc-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 0;
}
.lp-toc-row--sep {
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid rgba(59, 49, 41, .18);
}
.lp-toc-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.lp-toc-dots {
    flex: 1;
    border-bottom: 1px dotted var(--ink-soft);
    margin: 0 6px 4px;
    min-width: 12px;
}
.lp-toc-page {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}


/* ============================================================
   PAGE IMAGE DE CHAPITRE (avec image)
   ============================================================ */
.lp-chap-imgpage {
    position: relative;
    overflow: hidden;
    width: var(--page-w);
    height: var(--page-h);
}

/* ============================================================
   PAGE SANS IMAGE (SVG décoratif) — alias pour .lp-chap-title
   ============================================================ */
.lp-chap-title {
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}
.lp-eyebrow {
    font-size: 13px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ============================================================
   LOT 3 — corrections
   ============================================================ */
/* Étape "mise en garde" (commençant par ! dans la saisie) :
   gras, sans numéro, alignée sur le texte des étapes numérotées */
.lp-steps li.lp-step-bang { font-weight: 600; }

/* Folio centré sur les pages blanches d'appoint */
.lp-blank-foot {
    position: absolute; bottom: 24px; left: 48px; right: 48px;
    text-align: center;
    border-top: 1px solid rgba(110,97,84,.25);
    padding-top: 12px;
}
.lp-blank-foot .lp-folio { font-size: 14px; color: var(--ink-soft); }

/* ============================================================
   LOT 4bis — loupe sur pages de droite, overlay classique,
   page recette plein écran + impression
   ============================================================ */
/* Loupe en haut à droite des pages de droite sans .lp-actions */
.lp-searchbtn {
    position: absolute; top: 12px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink); opacity: .8;
    background: transparent; border: none;
    transition: opacity .18s, box-shadow .18s;
}
.lp-searchbtn:hover {
    opacity: 1;
    box-shadow: 0 0 8px 2px rgba(59,49,41,.28);   /* ombre circulaire */
}

/* Overlay iframe : édition / ajout via la vue classique, sans habillage */
#lp-classic-overlay {
    position: fixed; inset: 0; z-index: 900;
    display: none; align-items: center; justify-content: center;
    background: rgba(20,14,10,.78);
}
#lp-classic-overlay.show { display: flex; }
#lp-classic-overlay iframe {
    width: min(1080px, 94vw); height: 92vh;
    border: none;
    /* transparente : la carte-formulaire à l'intérieur porte le papier,
       l'ombre et les arrondis */
    background: transparent;
}
#lp-full-close {
    position: absolute; top: 14px; right: 18px;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: rgba(246,238,223,.92); color: var(--ink);
    font-size: 19px; cursor: pointer; z-index: 5;
}

/* Le conteneur épouse la taille de l'iframe : le bouton de fermeture reste
   au coin de la fenêtre au lieu de partir dans le coin de l'écran. */
#lp-classic-overlay .lp-classic-wrap {
    position: relative;
    display: flex;
    max-width: 100%;
    max-height: 100%;
}
#lp-classic-close {
    position: absolute; top: -13px; right: -13px;
    width: 34px; height: 34px; border: none; border-radius: 50%;
    background: rgba(246,238,223,.96); color: var(--ink);
    font-size: 17px; line-height: 1; cursor: pointer; z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
#lp-classic-close:hover { background: #fff; }

/* Sur petit écran l'iframe touche les bords : le bouton revient à l'intérieur */
@media (max-width: 620px) {
    #lp-classic-close { top: 6px; right: 6px; }
}

/* Page unique plein écran (recette complète, défilement vertical) */
#lp-fullpage {
    position: fixed; inset: 0; z-index: 900;
    display: none; align-items: center; justify-content: center;
    background: rgba(20,14,10,.78);
}
#lp-fullpage.show { display: flex; }
/* Conteneur à la taille de la feuille : le ✕ (son enfant) reste ancré au coin
   de la PAGE, pas de l'écran. */
#lp-fullpage .lp-fullwrap {
    position: relative;
    width: min(720px, 94vw); height: 94vh;
}
#lp-fullpage .lp-fullsheet {
    position: relative;
    width: 100%; height: 100%;
    overflow-y: auto; padding: 56px 60px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
        repeating-linear-gradient(0deg, rgba(120,95,60,.028) 0 1px, transparent 1px 4px),
        var(--paper);
    border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.6);
    font-family: var(--lp-book-serif); color: var(--ink);
}
#lp-fullpage .lp-fullsheet h2 {
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 40px; letter-spacing: 2px; margin-bottom: 4px;
}
#lp-fullpage .lp-fullsheet .lp-steps { margin-top: 6px; }
#lp-fullpage .lp-fullsheet .lp-steps li { margin-bottom: 10px; }

/* Impression : seule la page plein écran est imprimée */
@media print {
    body.lp-skin-book > * { display: none !important; }
    #lp-fullpage { display: block !important; position: static; background: none; }
    #lp-fullpage .lp-fullwrap { position: static; width: auto; height: auto; }
    #lp-fullpage .lp-fullsheet {
        width: auto; height: auto; overflow: visible;
        box-shadow: none; border-radius: 0; background: #fff;
    }
    #lp-full-close { display: none !important; }
}

/* ============================================================
   CORRECTIONS UX (retours préprod)
   ============================================================ */
/* Loupe des sommaires : même rendu que sur les recettes */
.lp-searchbtn { display: flex; align-items: center; justify-content: center; }
.lp-searchbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Espace entre les icônes d'action et le titre de recette */


/* SVG placeholder : contenu dans son cadre (ne recouvre plus les ingrédients) */
.lp-combo .lp-photo-frame--small svg {
    width: auto; max-width: 100%; height: 150px;
    display: block; margin: 0 auto; object-fit: unset;
}

/* Plein écran : étapes barrables au clic */
#lp-fullpage .lp-steps li { cursor: pointer; }
#lp-fullpage .lp-steps li.lp-done { text-decoration: line-through; opacity: .5; }

/* Ex-libris : nom en gras, sans ligne pointillée, remonté */

.lp-exlibris .lp-username { font-weight: 700; }
.lp-exlibris-links { margin-top: 14px; font-size: 14px; }
.lp-exlibris-links a { color: inherit; opacity: .75; text-decoration: none; margin: 0 8px; }
.lp-exlibris-links a:hover { opacity: 1; text-decoration: underline; }

/* Overlay recherche : champs + résultats */
.lp-index-card .lp-search-fields { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.lp-index-card .lp-search-fields select, .lp-index-card .lp-search-fields input[type=text] {
    font-family: var(--lp-book-serif); font-size: 14px;
    padding: 6px 8px; border: 1px solid rgba(110,97,84,.4);
    border-radius: 4px; background: #FCF6E8; color: var(--ink);
}
.lp-index-card .lp-search-fields label { font-size: 13.5px; display: flex; align-items: center; gap: 4px; }
.lp-index-card .lp-search-go {
    font-family: var(--lp-book-serif); font-size: 14.5px; cursor: pointer;
    padding: 6px 16px; border: none; border-radius: 4px;
    background: var(--cover); color: #F6EEDF;
}
.lp-search-results { max-height: 46vh; overflow-y: auto; }


/* ============================================================
   CHAPITRE RECHERCHE + EX-LIBRIS (retours préprod v2)
   ============================================================ */
/* Ex-libris : espace entre "Ce livre appartient à" et le nom */


/* Page formulaire de recherche */
/* padding gauche élargi : la zone de clic "page précédente" couvre
   ~165px du bord gauche, les champs doivent commencer après */
.lp-search-page { padding: 48px 40px 24px 175px; display: flex; flex-direction: column; }
.lp-search-title {
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 46px; letter-spacing: 3px; margin-bottom: 18px;
}
.lp-search-form { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.lp-search-form label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 14.5px; color: var(--ink-soft);
}
.lp-search-form label.lp-sf-check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.lp-search-form select, .lp-search-form input[type=text] {
    font-family: var(--lp-book-serif); font-size: 15px; color: var(--ink);
    padding: 8px 10px; border: 1px solid rgba(110,97,84,.4);
    border-radius: 4px; background: #FCF6E8;
}
.lp-search-form .lp-search-go {
    margin-top: 10px; align-self: flex-start;
    font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 24px;
    letter-spacing: 2px; cursor: pointer;
    padding: 8px 26px; border: none; border-radius: 6px;
    background: var(--cover); color: var(--gold);
    box-shadow: 2px 3px 8px rgba(0,0,0,.25);
}
.lp-search-form .lp-search-go:hover { filter: brightness(1.15); }
.lp-search-empty { font-style: italic; color: var(--ink-soft); }

/* Auteur dans les résultats de recherche */
.lp-res-author { font-style: normal; font-size: 13px; color: var(--ink-soft); }

/* Modale de confirmation (déconnexion, etc.) */
#lp-confirm {
    position: fixed; inset: 0; z-index: 950;
    display: none; align-items: center; justify-content: center;
    background: rgba(20,14,10,.7);
}
#lp-confirm.show { display: flex; }
#lp-confirm .lp-confirm-card {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
        var(--paper);
    color: var(--ink); font-family: var(--lp-book-serif);
    padding: 32px 40px; border-radius: 8px; max-width: 380px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55); text-align: center;
}
#lp-confirm p { font-size: 17px; margin-bottom: 22px; }
#lp-confirm .lp-confirm-btns { display: flex; gap: 14px; justify-content: center; }
#lp-confirm button {
    font-family: var(--lp-book-serif); font-size: 15px; cursor: pointer;
    padding: 8px 22px; border-radius: 5px; border: 1px solid rgba(110,97,84,.4);
    background: #FCF6E8; color: var(--ink);
}
#lp-confirm .lp-confirm-yes { background: var(--cover); color: var(--gold); border: none; }
#lp-confirm button:hover { filter: brightness(1.1); }

/* ============================================================
   LOT 5 — FINITIONS
   ============================================================ */
/* Mobile : ouverture de couverture en fondu 2D (les rotations 3D de
   couverture provoquent des bugs de tri en profondeur sur mobile) */



/* Accessibilité : focus clavier visible sur tous les contrôles du livre */
.lp-tab:focus-visible, .lp-navlink:focus-visible, .lp-abtn:focus-visible, .lp-searchbtn:focus-visible, .lp-dogear:focus-visible, .lp-choice:focus-visible, .lp-search-go:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Mouvement réduit : transitions quasi instantanées */
@media (prefers-reduced-motion: reduce) {
    .lp-book, .lp-cover, .lp-cover .cface,
    #lp-flipper, #lp-flipper .lp-face,
    .lp-tabs, .lp-tab, .lp-tapzone,
    #lp-staticLeft, .lp-book::after {
        transition-duration: .01s !important;
        animation-duration: .01s !important;
    }
}

/* Onglets : version compacte pour tenir dans la hauteur du livre
   (chapitres + Annexes + Recherche) */



/* Modes de lecture sous le sommaire principal : colonne centrée */
.lp-toc-modes {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; margin: 14px 0 4px;
}
.lp-toc-modes .lp-choice {
    font-family: var(--lp-book-serif); font-size: 15px; cursor: pointer;
    padding: 6px 20px; border-radius: 16px;
    border: 1px solid rgba(110,97,84,.35);
    background: transparent; color: var(--ink-soft);
    min-width: 220px;
}
.lp-toc-modes .lp-choice.active {
    background: var(--cover); color: var(--gold); border-color: var(--cover);
}
.lp-toc-modes .lp-choice:hover { filter: brightness(1.1); border-color: var(--ink-soft); }

/* Restauration de position après rechargement : aucune animation visible */
body.lp-instant .lp-book, body.lp-instant .lp-cover, body.lp-instant .lp-cover .cface, body.lp-instant #lp-flipper, body.lp-instant #lp-flipper .lp-face, body.lp-instant #lp-staticLeft, body.lp-instant .lp-book::after, body.lp-instant .lp-tabs {
    transition: none !important;
    animation: none !important;
}

/* Pages Confidentialité paginées */
.lp-privacy-pg {
    padding: 48px 48px 24px 58px;
    display: flex; flex-direction: column;
}
.lp-privacy-pg.lp-on-left { padding: 48px 58px 24px 48px; }
.lp-privacy-body { flex: 1; overflow: hidden; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.lp-privacy-body h1, .lp-privacy-body h2 {
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 28px; letter-spacing: 2px; color: var(--ink);
    margin: 10px 0 6px; line-height: 1.1;
}
.lp-privacy-body h3 { font-size: 17px; color: var(--ink); margin: 10px 0 4px; }
.lp-privacy-body h4 { font-size: 15px; color: var(--ink); margin: 8px 0 3px; }
.lp-privacy-body p { margin-bottom: 8px; }
.lp-privacy-body ul, .lp-privacy-body ol { margin: 0 0 8px 18px; }


/* Onglet Recherche : loupe */
.lp-tab--search svg {
    width: 15px; height: 15px; fill: none;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round;
    display: block; margin: 2px auto;
}
.lp-tab--search { writing-mode: horizontal-tb; align-items: center; justify-content: center; padding: 6px 10px; }

/* Ligne fine de séparation sur tous les pieds de page (comme les sommaires) */
.lp-recipe-foot, .lp-priv-foot {
    border-top: 1px solid rgba(110,97,84,.25) !important;
    padding-top: 12px;
    margin-top: auto;
}

/* Modes indisponibles : grisés */
.lp-toc-modes .lp-choice:disabled {
    opacity: .4; cursor: not-allowed; filter: none;
}

/* Ex-libris : nom utilisateur centré */


/* Bouton "Ajouter une recette" : sous la liste du sous-sommaire,
   même style que le mode sélectionné du sommaire principal */
.lp-addrow { text-align: center; margin-top: 18px; }
.lp-addbtn {
    font-family: var(--lp-book-serif); font-size: 15px; cursor: pointer;
    padding: 6px 20px; border-radius: 16px; border: none;
    background: var(--cover); color: var(--gold);
    min-width: 220px;
}
.lp-addbtn:hover { filter: brightness(1.15); }

/* Confidentialité : respiration avant la ligne du pied de page */
.lp-privacy-body { padding-bottom: 10px; }

/* Ex-libris — consolidation : nom centré, remonté ; menus écartés,
   hover marqué (les règles ci-dessus se contredisaient) */

.lp-exlibris-links { margin-top: 16px; }
.lp-exlibris-links .lp-sep { margin: 0 10px; }
.lp-exlibris-links .lp-navlink {
    margin: 0 6px; padding: 5px 14px;
    border-radius: 6px;
    transition: background .15s;
}
.lp-exlibris-links .lp-navlink:hover {
    background: rgba(59,49,41,.14);
    text-decoration: none;
}

/* Étoiles de notation sous le titre (page de gauche) */
.lp-stars {
    text-align: center; margin-top: 4px; cursor: pointer;
    font-size: 17px; color: #C8A15A; letter-spacing: 2px;
}
.lp-stars--empty { opacity: .45; }
.lp-stars:hover { filter: brightness(1.2); }
.lp-stars-n { font-family: var(--lp-book-serif); font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0; }

/* Overlay commentaires */
#lp-comments {
    position: fixed; inset: 0; z-index: 920;
    display: none; align-items: center; justify-content: center;
    background: rgba(20,14,10,.72);
}
#lp-comments.show { display: flex; }
#lp-comments .lp-comments-card {
    position: relative;
    width: min(560px, 92vw); max-height: 84vh;
    display: flex; flex-direction: column;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
        var(--paper);
    color: var(--ink); font-family: var(--lp-book-serif);
    padding: 28px 32px; border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
#lp-comments h3 {
    font-family: 'Amatic SC', cursive; font-weight: 700;
    font-size: 34px; letter-spacing: 2px; margin-bottom: 12px;
}
#lp-comments .lp-com-close {
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(59,49,41,.1); color: var(--ink);
    font-size: 15px; cursor: pointer;
}
#lp-comments .lp-com-list { flex: 1; overflow-y: auto; margin-bottom: 12px; }
.lp-com { padding: 8px 0; border-bottom: 1px dotted rgba(110,97,84,.3); }
.lp-com--reply { margin-left: 26px; }
.lp-com-head { font-size: 14px; }
.lp-com-stars { color: #C8A15A; }
.lp-com-date { color: var(--ink-soft); font-size: 12px; margin-left: 6px; }
.lp-com-body { font-size: 14.5px; margin-top: 3px; line-height: 1.5; }
.lp-com-none { font-style: italic; color: var(--ink-soft); }
.lp-com-form textarea {
    width: 100%; font-family: var(--lp-book-serif); font-size: 14.5px;
    padding: 8px 10px; border: 1px solid rgba(110,97,84,.4);
    border-radius: 4px; background: #FCF6E8; color: var(--ink);
    resize: vertical; margin: 8px 0;
}
.lp-com-rate { font-size: 22px; color: #C8A15A; cursor: pointer; letter-spacing: 4px; }
.lp-com-star:hover { filter: brightness(1.3); }

/* Overlay de génération / ouverture du PDF */
#lp-pdf-overlay {
    position: fixed; inset: 0; z-index: 940;
    display: none; align-items: center; justify-content: center;
    background: rgba(20,14,10,.78);
}
#lp-pdf-overlay.show { display: flex; }
#lp-pdf-overlay .lp-pdf-card {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
        var(--paper);
    color: var(--ink); font-family: var(--lp-book-serif);
    padding: 36px 48px; border-radius: 8px; max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55); text-align: center;
    font-size: 16.5px;
}
#lp-pdf-overlay .lp-pdf-spin { font-size: 38px; animation: lp-pdf-pulse 1.2s ease-in-out infinite; }
@keyframes lp-pdf-pulse { 50% { opacity: .35; } }
#lp-pdf-overlay .lp-pdf-open { text-decoration: none; display: inline-block; }
#lp-pdf-overlay .lp-pdf-cancel { font-size: 13.5px; opacity: .7; }

/* Accessibilité : focus visible sur les lignes de sommaire */
.lp-toc-row:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Description courte sous le titre (page de gauche), en italique */
.lp-desc {
    font-style: italic; color: var(--ink-soft);
    text-align: center; font-size: 14px; line-height: 1.45;
    margin: 4px 18px 2px;
}
.lp-combo .lp-desc { margin: 2px 8px 0; font-size: 13.5px; }

/* Réduction de l'image quand la page combinée déborde */
.lp-combo.lp-combo--small .lp-photo-frame--small img { height: 230px; }
.lp-combo.lp-combo--small .lp-photo-frame--small svg { height: 118px; }
.lp-combo.lp-combo--tiny .lp-photo-frame--small img { height: 160px; }
.lp-combo.lp-combo--tiny .lp-photo-frame--small svg { height: 88px; }

/* Pieds de page alignés sur les deux pages du spread : même distance
   au bas de la page quel que soit le contenu (recette, combo, sommaire) */
.lp-combo, .lp-recipe, .lp-photo-page, .lp-privacy-pg, .lp-search-page {
    padding-bottom: 56px !important;
}
.lp-combo .lp-recipe-foot, .lp-recipe .lp-recipe-foot, .lp-photo-page .lp-recipe-foot, .lp-privacy-pg .lp-priv-foot, .lp-search-page .lp-recipe-foot {
    position: absolute;
    left: 48px; right: 48px; bottom: 24px;
    margin-top: 0;
}
/* pages posées à gauche du spread : marges miroir */
.lp-on-left .lp-recipe-foot { left: 58px; right: 48px; }

/* Desktop : pas de « Suite → » sur la page de GAUCHE (combo + pages posées à
   gauche) — la page de droite est déjà visible, le clic ferait tourner la
   page. Conservé en mobile (page unique) et sur les pages de droite. */
body:not(.lp-mobile) .lp-combo .lp-suite-btn,
body:not(.lp-mobile) .lp-on-left .lp-suite-btn { display: none; }

/* Page photo : le cadre ne doit jamais déborder sur le titre/description.
   Sélecteurs alignés sur ceux de la page combinée (même spécificité). */

.lp-photo-page .lp-photo-frame img, .lp-photo-page .lp-photo-frame svg {
    width: 100%; max-width: 300px; height: 230px;
    display: block; margin: 0 auto;
}
.lp-photo-page.lp-photo-page--small .lp-photo-frame img, .lp-photo-page.lp-photo-page--small .lp-photo-frame svg { height: 180px; max-width: 250px; }
.lp-photo-page.lp-photo-page--tiny .lp-photo-frame img, .lp-photo-page.lp-photo-page--tiny .lp-photo-frame svg { height: 130px; max-width: 200px; }
.lp-photo-page .lp-photo-cap { margin-top: 4px; }

/* Pages photo/combo : aucun enfant ne doit être écrasé par flex
   (le cadre polaroïd perdait son padding et l'image recouvrait le titre),
   et le débordement doit partir vers le bas pour être mesurable
   (scrollHeight ignore ce qui dépasse au-dessus du bord supérieur). */

.lp-photo-page > *, .lp-combo > *, .lp-combo .lp-photo-wrap > * {
    flex-shrink: 0;
}
.lp-photo-page .lp-photo-frame, .lp-combo .lp-photo-frame {
    flex: 0 0 auto;
    box-sizing: content-box;
}

/* ============================================================
   TITRES : majuscules dans les recettes, capitale initiale
   dans les sommaires
   ============================================================ */
.lp-recipe h2, .lp-photo-cap, .lp-combo .lp-photo-cap, #lp-fullpage .lp-fullsheet h2 {
    text-transform: uppercase;
}
/* sommaires : minuscules avec capitale initiale, quelle que soit la
   casse du titre en base */
.lp-toc-label, .lp-search-results a { text-transform: lowercase; }
.lp-toc-label::first-letter, .lp-search-results a::first-letter { text-transform: uppercase; }

/* ============================================================
   LANGUES DE LA RECETTE (même sémantique que le classique)
   ============================================================ */
.lp-langs {
    display: flex; gap: 6px; align-items: center;
    margin: 6px 0 2px;
}
.lp-lang-link {
    font-family: var(--lp-book-serif); font-size: 12.5px; font-weight: 600;
    letter-spacing: .5px; color: var(--ink);
    background: rgba(59,49,41,.08); border: none;
    padding: 3px 8px; border-radius: 4px; cursor: pointer;
    text-decoration: none; line-height: 1.4;
}
.lp-lang-link:hover { background: rgba(59,49,41,.18); }
.lp-lang-link.is-translatable { background: rgba(242,199,102,.28); color: var(--ink); }
.lp-lang-link.is-translatable:hover { background: rgba(242,199,102,.5); }
.lp-lang-link.is-disabled { opacity: .35; cursor: not-allowed; }
.lp-lang-plus { font-size: 10px; vertical-align: super; margin-left: 1px; }

/* ============================================================
   PIEDS DE PAGE : même hauteur sur les deux pages du spread
   (les sommaires étaient 12px plus bas que les recettes)
   ============================================================ */
.lp-toc--main, .lp-toc--subtoc { padding-bottom: 56px; position: relative; }
.lp-toc--main .lp-toc-foot, .lp-toc--subtoc .lp-toc-foot {
    position: absolute;
    left: 52px; right: 52px; bottom: 24px;
    margin-top: 0;
}

/* Pieds de page : hauteur identique partout, pour que le trait de
   séparation soit au même niveau sur les deux pages du spread
   (le folio est en position:absolute et ne compte pas dans la hauteur) */
.lp-recipe-foot, .lp-toc-foot, .lp-priv-foot, .lp-blank-foot {
    min-height: 34px;
    box-sizing: border-box;
}

/* Page plus haute en mobile : remplit mieux l'écran d'un téléphone
   (ratio ~1:1,8). La pagination par mesure lit cette variable, les
   recettes profitent donc de pages plus longues. */
body.lp-mobile { --page-h: 920px; }

/* ============================================================
   RÈGLES CONSOLIDÉES (fusion des correctifs successifs)
   ============================================================ */
.lp-exlibris .lp-line {
    margin: 4px auto 0 !important;
    width: 80%;
    border-bottom: none !important;
    height: 16px;
    background: none !important;
    margin-top: -8px;
    text-align: center;
}
.lp-toc-foot {
    text-align: center;
    font-size: 15px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(110,97,84,.25);
}
.lp-photo-page {
    padding: 40px 44px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    overflow: hidden;
}
.lp-recipe h2 {
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: 26px;               /* titre page droite (swap) */
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 2px;
    padding-right: 60px;
    margin-top: 16px;
}
.lp-recipe-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--ink-soft);
    font-size: 14px;
    margin-top: auto;
    position: relative;
}
body.lp-mobile .lp-garde-foot {
    display: flex;
}
/* Onglets HORIZONTAUX le long du haut du livre (essai). */
.lp-tabs {
    position: absolute;
    top: 0;
    left: 0;                     /* dans le dock : base au bord droit du livre */
    right: auto;
    display: flex;
    flex-direction: column;      /* empilés verticalement sur le bord droit */
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);/* rétractés : glissés derrière le livre (sous la page, z4) */
    transition: opacity .3s ease, transform .38s ease;
}
.lp-tab {
    writing-mode: horizontal-tb; /* texte à l'horizontale */
    box-sizing: border-box;
    width: auto;                 /* étiré par le conteneur → tous à la largeur du plus large */
    min-height: 42px;            /* ~2 lignes de haut */
    display: flex;
    flex-direction: column;
    align-items: flex-start;     /* aligné à gauche */
    justify-content: center;     /* centré en hauteur */
    text-align: left;
    font-family: var(--lp-book-serif);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .5px;
    color: rgba(255,255,255,.95);
    padding: 6px 12px 6px 14px;  /* le texte démarre au-delà de la tranche (7px) */
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    border: none;
    /* Texture papier translucide POSÉE SUR la couleur (background-color en inline) :
       léger voile clair en haut + fibres horizontales + grain, la couleur reste visible. */
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.022) 2px 4px),
        repeating-linear-gradient(0deg,  rgba(0,0,0,.028) 0 1px, transparent 1px 3px);
    box-shadow:
        2px 2px 5px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 1px 1px rgba(255,255,255,.22),
        inset 0 -2px 3px rgba(0,0,0,.10);
    text-shadow: 0 1px 1px rgba(0,0,0,.22);
    transition: filter .2s;
    white-space: nowrap;         /* texte sur une ligne, l'onglet s'ajuste à sa largeur */
    overflow: hidden;
    flex-shrink: 0;
}
.lp-search-results a {
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}
body.lp-mobile #lp-stage {
    width: calc(var(--page-w) + 40px);
    height: calc(var(--page-h) + 50px);
}
body.lp-mobile .lp-book {
    left: calc(50% + 8px);
    top: 22px;
    width: var(--page-w);
    transform: translateX(-50%);
}
body.lp-mobile .lp-book.open {
    transform: translateX(-50%);
}
body.lp-mobile #lp-staticLeft {
    display: block;
    left: -120px; top: 0;
    width: 120px; height: var(--page-h);
    z-index: 3; overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
        repeating-linear-gradient(0deg, rgba(120,95,60,.028) 0 1px, transparent 1px 4px),
        var(--paper);
    /* opacité pilotée par les règles de base (0 fermé, 1 ouvert) */
}
body.lp-mobile #lp-staticLeft::before {
    display: none;
}
body.lp-mobile .lp-paper::after {
    display: none;
}
body.lp-mobile #lp-boardRight {
    /* la couverture se prolonge jusque contre le bord gauche de l'écran */ left: -12px;
    top: -16px;
    width: calc(var(--page-w) + 26px);
    height: calc(var(--page-h) + 32px);
    z-index: 1;
    /* angles arrondis côté droit uniquement (le gauche est coupé par l'écran) */ border-radius: 0 14px 14px 0 !important;
    /* couleur de la couverture, éclaircie: le lie-de-vin sombre se confondait avec le fond de scène brun */ background: linear-gradient(160deg, #8A4450, #6B323C 55%, #5E2A33) !important;
    /* pliure (ombre large) en haut et en bas */ box-shadow: inset 0 14px 10px -6px rgba(0,0,0,.5), inset 0 -14px 10px -6px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.6);
}
body.lp-mobile .lp-cover {
    left: -12px;
    width: calc(var(--page-w) + 26px);
    transition: opacity .5s ease, visibility .5s !important;
    transform: none !important;
    top: -16px;
    height: calc(var(--page-h) + 32px);
    border-radius: 10px 14px 14px 10px;
}
body.lp-mobile .lp-book::after {
    /* même gouttière que le desktop (dégradé hérité de la règle de base),
       centrée sur la jonction page gauche / page courante */
    left: -22px; width: 44px;
}
body.lp-mobile #lp-staticRight {
    left: 0;
}
body.lp-mobile #lp-flipper {
    left: 0;
}
body.lp-mobile .lp-tapzone {
    width: 8%;
}
body.lp-mobile .lp-tabdock,
body.lp-mobile .lp-tabs {
    display: none;
}
body.lp-mobile .lp-tab {
    display: none;
}
body.lp-mobile #lp-pg-exlibris {
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%), repeating-linear-gradient(0deg, rgba(120,95,60,.028) 0 1px, transparent 1px 4px), var(--paper);
}
body.lp-mobile .lp-book.open .lp-cover {
    opacity: 0;
    visibility: hidden;
    transform: none !important;
}
.lp-priv-foot {
    position: relative;   /* pour centrer le folio en absolu */
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 12px;
    border-top: 1px dotted var(--ink-soft);
}

/* Livre ouvert : le plat arrière s'étend jusqu'au bord gauche de l'écran */
body.lp-mobile .lp-book.open #lp-boardRight {
    left: -120px;
    width: calc(var(--page-w) + 134px);
    border-radius: 0 14px 14px 0 !important;
}

/* Mobile : pas de tranche hachurée à droite */
/* Moitié droite de la pliure : ombre sur le bord gauche de la page,
   mêmes teintes que la gouttière desktop */
/* tranche droite : héritée du desktop (hachures verticales) */

/* Ombre de pliure sur la feuille animée elle-même (desktop ET mobile) :
   l'ombre voyage avec la page au lieu d'apparaître à l'atterrissage.
   Côté reliure = bord gauche de la face avant, bord droit de la face
   arrière (retournée par rotateY(180deg)). */
#lp-flipper .lp-face::after {
    content: "";
    position: absolute; top: 0; bottom: 0; width: 22px;
    pointer-events: none;
    z-index: 5;
}
#lp-flipper .lp-face.front::after {
    left: 0;
    background: linear-gradient(90deg,
        rgba(45,28,14,.40),
        rgba(70,45,25,.16) 55%,
        transparent);
}
#lp-flipper .lp-face.back::after {
    right: 0;
    background: linear-gradient(270deg,
        rgba(45,28,14,.40),
        rgba(70,45,25,.16) 55%,
        transparent);
}

/* Lien "Dernières recettes" sous le bouton Rechercher */
.lp-latest-link { align-self: flex-start; margin-top: 6px; font-size: 15px; }

/* Couverture pendant le chargement : curseur d'attente + pulsation discrète */
.lp-cover.is-loading { cursor: progress; }
.lp-cover.is-loading .lp-cover-frame { animation: lp-cover-wait 1.1s ease-in-out infinite; }
@keyframes lp-cover-wait { 50% { opacity: .72; } }

/* Overlay contenant un formulaire nu : l'iframe se cale sur la carte
   (plus d'ascenseurs, plus de gabarit du thème à l'intérieur) */
/* Largeur FIXE — dressFrame() n'ajuste que la hauteur, sur la carte réelle.
   Mesurer la largeur ferait boucler le redimensionnement (voir book.js). */
#lp-classic-overlay.is-form iframe {
    width: min(500px, 94vw);
    height: min(680px, 94vh);
    max-height: 94vh;
}

/* Retour d'un overlay : scène masquée le temps de reconstruire et d'ouvrir
   le livre (évite de voir la couverture fermée pendant ~2 s) */
body.lp-restoring #lp-stage { visibility: hidden; }
body.lp-restoring #lp-book-loader { display: block !important; }

/* ----------------------------------------------------------------------
   Attribution d'auteur & marque « favori »
   Mode « Mes recettes » : la liste réunit mes recettes et mes favoris.
   Un favori appartenant à quelqu'un d'autre est signalé par un cœur dans
   le sous-sommaire, et par le nom de son auteur sous le titre.
   ---------------------------------------------------------------------- */
.lp-recipe-author {
    margin: 2px 0 6px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--ink-soft);
    text-align: center;
    letter-spacing: .2px;
}
.lp-fav-mark {
    color: var(--cover);
    font-style: normal;
    font-size: .92em;
    opacity: .8;
}