/* ==========================================================================
   L'Arbre vengeur 2026 — feuille de styles principale
   D'après les maquettes Figma « Arbre-vengeur-2026 » (bureau 1183 px, mobile 414 px)
   ========================================================================== */

/* ---------- Polices ---------- */
@font-face { font-family: "Novecento"; src: url(../fonts/novecento-wide-book.woff) format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Novecento"; src: url(../fonts/novecento-wide-normal.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Novecento"; src: url(../fonts/novecento-wide-medium.woff) format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Novecento"; src: url(../fonts/novecento-wide-demibold.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Novecento"; src: url(../fonts/novecento-wide-bold.woff) format("woff"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url(../fonts/merriweather-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url(../fonts/merriweather-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url(../fonts/merriweather-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url(../fonts/merriweather-latin-700-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Typewriter"; src: url(../fonts/1913typewritercarbonnormal-webfont.woff2) format("woff2"), url(../fonts/1913typewritercarbonnormal-webfont.woff) format("woff"); font-weight: 400; font-display: swap; }

/* ---------- Jetons ---------- */
:root {
    --noir: #000;
    --blanc: #fff;
    --gris-60: #878787;
    --gris-50: #9d9d9c;
    --gris-30: #d0d0d0;
    --gris-15: #e3e3e3;
    --gris-7: #f2f2f2;
    --orange: #ff4d00;
    --orange-actif: #ff8c00;
    --orange-pale: #ffe6d9;
    --jaune: #fac300;
    --jaune-pale: #fef6d9;
    --creme: #ffeed9;
    --focus: #ff0064;

    --f-titre: "Novecento", "Josefin Sans", "Century Gothic", sans-serif;
    --f-texte: "Merriweather", Georgia, serif;
    --f-machine: "Typewriter", "Courier New", monospace;

    --largeur: 928px;
    --gouttiere: 24px;
    --relief: 3px 3px 0 var(--noir);
}
@media (max-width: 759px) {
    :root { --gouttiere: 16px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--gris-7);
    color: var(--noir);
    font: 400 16px/28px var(--f-texte);
    font-feature-settings: "lnum" 1, "pnum" 1;
    -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
p { margin: 0 0 12px; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--f-titre); font-weight: 600; line-height: 1.2; text-transform: uppercase; }
button { font: inherit; color: inherit; cursor: pointer; }
.icon { display: block; flex: none; }
.screen-reader-text, .lien-evitement:not(:focus) {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.lien-evitement:focus { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 8px 12px; background: var(--blanc); font: 600 14px var(--f-titre); }

/* Typo Novecento : capitales, interlettrage des maquettes */
.t-titre, .menu-principal a, .choix a, .mm-titre, .bouton, .bouton-l, .tag, .li-fleche, .champ-label, .devise, .menu-bas, .credits,
.statut-livre, .pagination, .tuile-titre, .nom-auteur, .titre-livre, .edition, .encart-presse figcaption, .bandeau {
    font-family: var(--f-titre);
    text-transform: uppercase;
}

.conteneur, .site-header, .site-main, .footer-haut, .menu-bas, .credits {
    width: min(var(--largeur), 100% - 2 * var(--gouttiere));
    margin-left: auto;
    margin-right: auto;
}
.site-main { padding: 24px 0 64px; }

/* ==========================================================================
   En-tête
   ========================================================================== */
.site-header { padding-top: 40px; position: relative; z-index: 20; }
.header-haut { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.logo img { width: 368px; height: auto; }
.header-outils { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.rs { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rs a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--noir); border-radius: 0; transition: color .15s; }
.rs a:hover { color: var(--orange); }
.rs a:active { color: var(--orange-actif); }
.rs .icon { width: 30px; height: 30px; }

/* Recherche : la loupe ouvre le champ */
.recherche { display: flex; align-items: center; gap: 8px; }
.recherche input {
    width: 0; padding: 0; border: 0; opacity: 0; height: 32px;
    font: 600 14px var(--f-titre); letter-spacing: 1px; text-transform: uppercase;
    border-radius: 6px; background: var(--blanc); transition: width .2s, opacity .2s;
}
.recherche.is-ouvert input, .recherche input:focus, .recherche input:not(:placeholder-shown) { width: 260px; padding: 0 8px; border: 2px solid var(--orange); opacity: 1; }
.recherche-bouton { padding: 0 3px 0 0; border: 0; background: none; line-height: 0; }
.recherche-bouton img { width: 32px; height: 32px; }
.recherche-bouton:hover img { filter: brightness(1.15); }
input::placeholder { color: var(--gris-60); opacity: 1; }

/* ---------- Menu bureau ---------- */
.menu-principal { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--noir); border-bottom: 2px solid var(--noir); }
.menu-principal > li { position: relative; }
.menu-principal > li > a {
    display: flex; align-items: center; height: 48px; padding: 0 20px; margin: 0;
    font-size: 24px; font-weight: 700; letter-spacing: 2px; text-decoration: none; line-height: 1;
}
.menu-principal > li > a:hover { color: var(--orange); }
.menu-principal > li > a:active { background: var(--orange-actif); color: var(--noir); }
.menu-principal > li.is-actif > a { background: var(--orange); color: var(--blanc); }

.sous-menu {
    position: absolute; top: 100%; left: 0; width: 314px; margin: 0; padding: 0; list-style: none;
    box-shadow: 6px 6px 0 var(--noir); background: var(--blanc);
    visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.has-sous-menu:hover .sous-menu, .has-sous-menu:focus-within .sous-menu, .has-sous-menu.is-ouvert .sous-menu { visibility: visible; opacity: 1; transform: none; }

/* Choix des menus « livres » (bureau et mobile) */
.choix a {
    display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px;
    border-bottom: 2px solid var(--noir); background: var(--blanc);
    font-size: 14px; font-weight: 500; letter-spacing: 2px; line-height: 1.1; text-decoration: none;
}
.sous-menu .choix a::before { content: ""; width: 28px; height: 28px; margin: -7px 0 -7px -38px; flex: none; background: url(../img/main.svg) center / contain no-repeat; visibility: hidden; }
.choix a:hover { background: var(--orange-pale); color: var(--orange); }
.sous-menu .choix a:hover::before { visibility: visible; margin-left: 0; }
.choix a:active { background: var(--orange-actif); color: var(--noir); }
.choix-catalogue a { background: var(--orange); color: var(--blanc); font-weight: 800; }
.choix-a-paraitre a, .choix-offres a { background: var(--jaune); font-weight: 600; }
.choix-a-paraitre a:hover, .choix-offres a:hover { background: var(--jaune-pale); }
.choix-collection a { border-bottom-style: dashed; }
.choix-arbuste a { min-height: 40px; font-family: var(--f-machine); font-size: 20px; text-transform: none; letter-spacing: 2px; }
.choix.is-actif a { background: var(--orange); color: var(--blanc); }

/* ---------- Menu mobile ---------- */
.menu-mobile-barre { display: none; }
.burger, .croix { width: 48px; height: 48px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--noir); }
.burger .icon, .croix .icon { width: 40px; height: 40px; }
.burger:hover { color: var(--orange); }
.croix:hover { color: var(--blanc); }

.menu-mobile { position: fixed; inset: 0; z-index: 100; background: var(--orange); overflow-y: auto; overscroll-behavior: contain; }
.menu-mobile[hidden] { display: none; }
.menu-mobile-panneau { width: min(414px, 100%); margin: 0 auto; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.menu-mobile .croix { margin-top: 4px; }
.mm-liste { margin: 0; padding: 0; list-style: none; }
.mm-titre { display: flex; align-items: center; min-height: 80px; padding: 0 8px; font-size: 24px; font-weight: 700; letter-spacing: 2px; text-decoration: none; }
.mm-rubrique + .mm-rubrique { border-top: 2px solid var(--noir); }
.mm-rubrique:last-child { border-bottom: 2px solid var(--noir); }
a.mm-titre:hover { color: var(--blanc); }
.mm-rubrique.is-actif .mm-titre { color: var(--blanc); }
.mm-sous-liste { margin: 0 0 24px; padding: 0; list-style: none; border: 2px solid var(--noir); border-bottom: 0; }
.mm-sous-liste .choix a { min-height: 56px; padding: 0 8px 0 24px; font-size: 20px; font-weight: 600; letter-spacing: 1px; }
.mm-sous-liste .choix-catalogue a { background: var(--blanc); color: var(--noir); font-weight: 800; }
.mm-sous-liste .choix-collection a { background: transparent; }
.mm-sous-liste .choix-arbuste a { min-height: 64px; background: transparent; font-size: 24px; font-weight: 400; }
.mm-sous-liste .choix-collection a:hover, .mm-sous-liste .choix-arbuste a:hover { background: var(--orange-pale); }
.mm-sous-liste .choix.is-actif a { background: var(--noir); color: var(--blanc); }
.mm-recherche { display: flex; gap: 8px; padding-top: 24px; }
.mm-recherche button { width: 40px; height: 40px; padding: 8px; border: 0; border-radius: 4px; background: var(--blanc); flex: none; }
.mm-recherche button img { filter: brightness(0); }
.mm-recherche input { flex: 1; min-width: 0; height: 40px; padding: 0 8px; border: 0; border-radius: 4px; font: 600 16px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.rs-menu-mobile { justify-content: space-between; padding: 24px 32px 0; }
.rs-menu-mobile a { width: 56px; height: 56px; }
.rs-menu-mobile a:hover { color: var(--blanc); }
.rs-menu-mobile .icon { width: 42px; height: 42px; }
body.menu-ouvert { overflow: hidden; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer { background: var(--gris-15); padding: 40px 0 72px; display: flex; flex-direction: column; gap: 64px; }
.footer-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.footer-logo { width: 288px; display: flex; flex-direction: column; gap: 12px; }
.footer-logo img { width: 288px; }
.devise { margin: 0; padding-left: 6px; font-size: 15px; font-weight: 400; line-height: 18px; letter-spacing: .6px; white-space: nowrap; }
.footer-droite { width: 448px; display: flex; flex-direction: column; gap: 20px; }
.menu-bas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
.menu-bas a { font-size: 20px; font-weight: 600; letter-spacing: 1px; line-height: 24px; text-decoration: none; }
.menu-bas a:hover { color: var(--orange); }
.menu-bas abbr { text-decoration: none; }
.menu-bas-sep { font: 600 20px/24px var(--f-titre); }
.credits { margin: 0 auto; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: 1px; }

/* Champs de formulaire (contour orange) */
.champ-label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; letter-spacing: 1px; line-height: 19px; }
.champ, .champ-texte {
    display: flex; align-items: center; gap: 16px; min-height: 32px; padding: 0 8px;
    background: var(--blanc); border: 2px solid var(--orange); border-radius: 6px;
}
.champ:focus-within, .champ-texte:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.champ input { flex: 1; min-width: 0; height: 28px; padding: 0; border: 0; background: none; font: 600 14px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; outline: 0; }
.champ input[type="email"] { text-transform: none; }
.champ input[type="email"]::placeholder { text-transform: uppercase; }
.bouton-ok { height: 18px; padding: 0 5px; border: 0; border-radius: 4px; background: var(--orange); color: var(--blanc); font: 700 13px/18px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.bouton-ok:hover { background: var(--gris-30); }
.bouton-ok:active { background: var(--orange-actif); }

/* Bouton « haut de page » */
.bouton-up { position: fixed; right: max(16px, calc(50% - 560px)); bottom: 32px; z-index: 30; width: 61px; height: 61px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, transform .15s; }
.bouton-up img { width: 100%; height: 100%; }
.bouton-up.is-visible { opacity: 1; visibility: visible; }
.bouton-up:hover { transform: translateY(-3px); }

/* ==========================================================================
   Éléments communs
   ========================================================================== */

/* Boutons */
.bouton {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 0; border-radius: 6px;
    font-size: 16px; font-weight: 600; letter-spacing: 1px; line-height: 23px; text-decoration: none;
}
.bouton .icon { width: 23px; height: 23px; margin-right: -4px; }
.bouton-orange { background: var(--orange); color: var(--blanc); }
.bouton-orange:hover { background: var(--orange-pale); color: var(--orange); }
.bouton-jaune { background: var(--jaune); }
.bouton-jaune:hover { background: var(--jaune-pale); }
.bouton-blanc { background: var(--blanc); }
.bouton-blanc:hover { color: var(--orange); }
.bouton:active { background: var(--orange-actif); }

.bouton-l {
    display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 16px 8px;
    border: 0; border-radius: 8px; font-size: 20px; font-weight: 600; letter-spacing: 1px; line-height: 24px; text-align: center; text-decoration: none;
}
.bouton-l.bouton-jaune:hover { background: var(--jaune-pale); }
.bouton-l.bouton-orange:hover { background: var(--orange-pale); color: var(--orange); }
.bouton-l:active { background: var(--orange-actif); }
.bouton-l.bouton-blanc { background: var(--blanc); }

/* Boutons ronds à main */
.bouton-rond { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; flex: none; text-decoration: none; transition: background .15s; }
.bouton-rond .icon { width: 32px; height: 32px; }
.bouton-rond.is-flip .icon { transform: scaleX(-1); }
.bouton-rond-orange { background: var(--orange); }
.bouton-rond-orange:hover { background: var(--orange-pale); }
.bouton-rond-blanc { background: var(--blanc); }
.bouton-rond-blanc:hover { background: var(--orange-pale); }
.bouton-rond:active { background: var(--orange-actif); }
.bouton-rond.is-disabled { opacity: .35; }

/* Étiquettes (date, collection…) */
.tag {
    display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 4px;
    font-size: 12px; font-weight: 600; letter-spacing: 1px; line-height: 14px; text-decoration: none; vertical-align: middle;
}
.tag span { padding: 0 4px 1px; }
.tag .icon { width: 14px; height: 15px; }
.tag-orange { background: var(--orange); color: var(--blanc); }
.tag-gris { background: var(--gris-15); }
.tag-blanc { background: var(--blanc); }
a.tag:hover { background: var(--orange-pale); color: var(--orange); }

/* Listes à flèche */
.liste-fleches { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.li-fleche { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; font-weight: 600; letter-spacing: 1px; line-height: 19px; }
.li-fleche .icon { width: 13px; height: 13px; margin-top: 1px; }
.li-fleche a { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.li-fleche a:hover { color: var(--orange); }
.li-fleche.is-orange { color: var(--orange); }

/* Séparateurs à motif */
.separateur { display: flex; align-items: center; gap: 30px; padding: 0 128px; }
.separateur::before, .separateur::after { content: ""; flex: 1; border-top: 2px solid var(--orange); }
.separateur img { width: 48px; height: 48px; }

/* Texte riche (contenu des fiches et des pages) */
.texte > :last-child { margin-bottom: 0; }
.texte p { margin: 0 0 12px; }
.texte a { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.texte a:hover { color: var(--orange); }
.texte h2 { margin: 32px 0 16px; font-size: 24px; font-weight: 400; letter-spacing: 1px; }
.texte h3 { margin: 24px 0 12px; font-size: 20px; letter-spacing: 1px; }
.texte ul, .texte ol { padding-left: 1.2em; }
.texte blockquote, .hors-texte {
    margin: 24px 0; padding: 0 10px 0 32px; border-left: 4px solid var(--orange);
    font: italic 700 24px/28px var(--f-texte);
}
.texte blockquote p { margin: 0; }
.texte blockquote cite, .texte blockquote footer { display: block; margin-top: 8px; font: 600 12px var(--f-titre); font-style: normal; letter-spacing: 1px; text-align: right; text-transform: uppercase; }
.texte img { border-radius: 0; }
.texte .wp-block-embed, .texte iframe { width: 100%; border: 0; border-radius: 0; }
.texte iframe { aspect-ratio: 16 / 9; height: auto; }
.texte figure { margin: 24px 0; }
.texte figcaption { font-size: 13px; line-height: 20px; color: var(--gris-60); }

/* Carte blanche arrondie */
.carte { background: var(--blanc); border-radius: 16px; padding: 32px 40px; }

/* Titres de page */
.entete-page { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 16px auto 32px; text-align: center; max-width: 608px; }
.entete-page h1 { font-size: 16px; font-weight: 600; letter-spacing: 1px; }
.entete-page .entete-logo { max-width: 240px; max-height: 96px; width: auto; height: auto; }
.entete-page .entete-icone { width: 48px; height: 48px; }
.entete-page .entete-texte { margin: 0; font-style: italic; font-size: 14px; line-height: 24px; }
.entete-page .entete-texte p { margin: 0; }
.titre-page { margin: 16px 0 32px; font-size: 32px; font-weight: 600; letter-spacing: 2px; line-height: 38px; }

/* ==========================================================================
   Étagères de couvertures
   ========================================================================== */
.etagere { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.vignette { position: relative; display: block; height: 260px; overflow: hidden; flex: none; transition: opacity .15s; }
.vignette img, .vignette .couv-vide { height: 260px; width: auto; max-width: none; }
.vignette:hover { opacity: .69; }
.vignette:focus-visible { outline: 4px solid var(--focus); outline-offset: 0; }
.couv-vide {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 105 / 155; padding: 16px;
    background: var(--noir); color: var(--blanc); text-align: center; font: 600 13px/1.3 var(--f-titre); text-transform: uppercase; letter-spacing: 1px;
}
.bandeau {
    position: absolute; left: -40%; right: -40%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: rotate(-5.3deg); color: var(--blanc); font-weight: 700; letter-spacing: 1px; text-align: center; pointer-events: none;
}
.bandeau-out { top: 62%; padding: 4px 0; background: var(--gris-60); font-size: 24px; line-height: 1.2; }
.bandeau-promo { top: 47%; padding: 8px 0; background: var(--orange); font-size: 18px; line-height: 1; }
.bandeau-promo b { font-size: 40px; line-height: 1; font-weight: 700; }

.patience { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px 0 0; }
.patience img { width: 128px; height: auto; animation: vibre 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
.patience[hidden] { display: none; }
@keyframes vibre { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .patience img { animation: none; } }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 40px; padding: 64px 0 40px; }
.pagination-fleches { display: flex; gap: 40px; }
.pagination-saut { display: flex; align-items: center; gap: 21px; font: 600 20px/24px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.pagination-saut input {
    width: 64px; height: 48px; padding: 4px; border: 0; border-radius: 64px; background: var(--blanc); text-align: center;
    font: 600 20px var(--f-titre); letter-spacing: 1px; -moz-appearance: textfield; appearance: textfield;
}
.pagination-saut input::-webkit-inner-spin-button, .pagination-saut input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   Accueil : carrousel des brèves
   ========================================================================== */
.carrousel { display: flex; align-items: center; gap: 24px; padding: 16px 0; margin-bottom: 32px; }
.carrousel-piste { flex: 1; min-width: 0; overflow: hidden; border-radius: 16px; }
.carrousel-rail { display: flex; transition: transform .7s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.carrousel-rail.sans-transition { transition: none; }
.carrousel-diapo { flex: 0 0 100%; display: flex; gap: 24px; padding: 16px; background: var(--blanc); border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .carrousel-rail { transition: none; } }
.carrousel-image { width: 216px; height: 176px; flex: none; border-radius: 16px; overflow: hidden; background: var(--creme); }
.carrousel-image img { width: 100%; height: 100%; object-fit: cover; }
.carrousel-image .visuel-vide { display: grid; place-items: center; height: 100%; }
.carrousel-image .visuel-vide img { width: 60%; height: auto; object-fit: contain; }
.carrousel-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.carrousel-texte h2 { font-size: 24px; font-weight: 700; letter-spacing: 2px; line-height: 29px; }
.carrousel-texte h2 a { text-decoration: none; }
.carrousel-texte h2 a:hover { color: var(--orange); }
.carrousel-texte p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carrousel-texte .bouton { align-self: flex-end; margin-top: auto; }
.carrousel-nav { display: contents; }
.carrousel.is-seul .bouton-rond { visibility: hidden; }

/* ==========================================================================
   Fiche livre
   ========================================================================== */
.livre { display: flex; justify-content: flex-start; gap: 33px; align-items: flex-start; padding-top: 16px; }
.livre-couv { width: 286px; flex: none; display: flex; flex-direction: column; gap: 24px; }
.livre-couv-image img, .livre-couv-image .couv-vide { width: 100%; height: auto; }
.livre-galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.livre-galerie a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--blanc); }
.livre-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.livre-galerie a:hover img { transform: scale(1.04); }
.statut-livre { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 17px; text-align: center; }
.livre-actions { display: flex; flex-direction: column; gap: 24px; }
.livre-actions .av-shopify { width: 100%; }
.livre-actions .petit-lien { font: 600 13px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.livre-actions .petit-lien a:hover { color: var(--orange); }

.livre-texte { width: 368px; flex: none; display: flex; flex-direction: column; gap: 40px; }
.livre-entete { display: flex; flex-direction: column; gap: 24px; }
.nom-auteur { font-size: 32px; font-weight: 600; letter-spacing: 2px; line-height: 38px; }
.nom-auteur a { text-decoration: none; }
.nom-auteur a:hover { color: var(--orange); }
.titre-livre { font-size: 48px; font-weight: 400; letter-spacing: 1px; line-height: 52px; overflow-wrap: break-word; }
.titre-livre.is-long { font-size: 40px; line-height: 44px; }
.titre-livre.is-tres-long { font-size: 32px; line-height: 38px; }
.titre-livre.is-hors-norme { font-size: 26px; line-height: 32px; }
.edition { margin-top: 16px; font-size: 24px; font-weight: 700; letter-spacing: 2px; line-height: 29px; }
.livre-mentions { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.livre-caract { display: flex; flex-direction: column; gap: 24px; }
.prix-barre { text-decoration: line-through; color: var(--gris-60); }
.livre-audio audio { width: 100%; }
.livre-audio .champ-label { margin-bottom: 4px; }

/* Bulle presse */
.bulle-presse { width: 208px; flex: none; position: relative; padding-bottom: 46px; }
.bulle-presse-corps { display: flex; flex-direction: column; gap: 32px; padding: 24px 12px; background: var(--blanc); border-radius: 24px; }
.bulle-presse-titre { width: 128px; height: auto; margin-left: 12px; }
.bulle-presse-queue { position: absolute; bottom: 0; right: 40px; width: 88px; height: 46px; margin-top: -1px; }
.encart-presse { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.encart-presse blockquote { display: flex; gap: 8px; margin: 0; }
.encart-presse .icon-guillemet { width: 16px; height: 13px; margin-top: 0; flex: none; color: var(--orange); }
.encart-presse blockquote p { margin: 0; font: italic 700 14px/18px var(--f-texte); }
.encart-presse figcaption { display: flex; flex-direction: column; gap: 2px; padding-left: 24px; font-size: 16px; font-weight: 600; letter-spacing: 1px; line-height: 19px; }
.encart-presse figcaption a { font-size: 11px; color: var(--orange); }

/* Souscription : bloc jaune sur les 12 colonnes, drapeau, cadeau, trame penchée */
.livre-souscription {
    --jaune-h: 900px; --pente: 110px; --angle: 6.8deg;
    position: relative; overflow: hidden; gap: 32px; margin-top: 40px; padding: 36px 36px 64px; isolation: isolate;
}
/* Bande jaune : du haut du bloc jusqu'au niveau de l'encart cadeau (calculé par le script), bord bas penché vers la droite */
.livre-souscription::before {
    content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: 0; height: calc(var(--jaune-h) + var(--pente));
    background: var(--jaune); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--pente)));
}
/* Trame de points (assets/img/trame-souscription.svg) qui prolonge le bord penché */
.livre-souscription::after {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--jaune-h) - 1px); height: 120px;
    transform-origin: 0 0; transform: skewY(var(--angle));
    background: url(../img/trame-souscription.svg?v=ffd335) 0 0 / 20px 120px repeat-x;
}
.livre-souscription .livre-couv { width: 376px; gap: 24px; }
.livre-souscription .livre-couv-image img, .livre-souscription .livre-couv-image .couv-vide { border-radius: 24px; }
.livre-souscription .livre-galerie a { border-radius: 24px; aspect-ratio: 176 / 147; }
.livre-souscription .statut-livre { font-size: 16px; line-height: 19px; }
.livre-souscription .livre-actions { padding: 32px 0; gap: 16px; }
.livre-souscription .livre-texte { width: 448px; padding: 24px; position: relative; }
.livre-souscription .livre-entete { padding-top: 132px; }
.drapeau-souscription { position: absolute; left: -43px; top: 0; margin: 0; width: 394px; pointer-events: none; }
.drapeau-souscription img { width: 394px; height: auto; }
.presse-souscription { display: flex; justify-content: flex-end; margin-top: 32px; }
.cadeau {
    position: relative; width: 222px; display: flex; flex-direction: column; gap: 16px; padding: 24px;
    background: var(--creme); border: 4px solid var(--noir); border-radius: 24px; box-shadow: 6px 6px 0 var(--noir);
}
.cadeau-titre { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--orange); font: 600 16px/19px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.cadeau-titre img { width: 35px; height: 57px; flex: none; }
.cadeau-image { position: relative; min-height: 165px; border-radius: 16px; background: #f6f6f6; }
.cadeau-image > img:first-child:not(.cadeau-pastille) { width: 100%; height: 165px; object-fit: cover; border-radius: 16px; }
.cadeau-pastille { position: absolute; left: 118px; top: 112px; width: 192px; height: auto; max-width: none; pointer-events: none; }
.cadeau h3 { font-size: 20px; font-weight: 600; letter-spacing: 1px; line-height: 24px; }
.cadeau p { margin: 0; font-size: 16px; line-height: 28px; }

/* Visionneuse « Feuilleter » */
.visionneuse { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(0, 0, 0, .85); padding: 16px; }
.visionneuse[hidden] { display: none; }
.visionneuse-barre { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; color: var(--blanc); font: 600 16px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.visionneuse-barre a { color: var(--blanc); font-size: 13px; }
.visionneuse-barre .croix { color: var(--blanc); }
.visionneuse-barre .croix:hover { color: var(--orange); }
.visionneuse iframe { flex: 1; width: 100%; border: 0; border-radius: 8px; background: var(--blanc); }

/* ==========================================================================
   Actus
   ========================================================================== */
.grille-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tuile { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--blanc); border-radius: 16px; align-items: flex-start; }
.tuile-image { display: block; width: 100%; aspect-ratio: 256 / 208; border-radius: 8px; overflow: hidden; background: var(--creme); }
.tuile-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.tuile:hover .tuile-image img { transform: scale(1.03); }
.visuel-vide { display: grid; place-items: center; width: 100%; height: 100%; background: var(--creme); }
.visuel-vide img { width: 50% !important; height: auto !important; object-fit: contain !important; opacity: .8; }
.tuile-titre { font-size: 24px; font-weight: 700; letter-spacing: 2px; line-height: 29px; }
.tuile-titre a { text-decoration: none; }
.tuile-titre a:hover { color: var(--orange); }
.tuile-texte { margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

.actu { max-width: 736px; margin: 16px auto 0; padding: 40px; display: flex; flex-direction: column; gap: 40px; }
.actu-haut { display: grid; grid-template-columns: 288px 1fr; gap: 40px; align-items: start; }
.actu-image { border-radius: 8px; overflow: hidden; aspect-ratio: 288 / 250; background: var(--creme); }
.actu-image img { width: 100%; height: 100%; object-fit: cover; }
.actu-entete { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.actu-entete h1 { font-size: 32px; font-weight: 600; letter-spacing: 2px; line-height: 38px; }
.actu .tag-gris { font-size: 11px; }
.ouvrages-associes h2 { margin-bottom: 16px; font-size: 20px; letter-spacing: 1px; }
.ouvrages-associes .etagere { gap: 16px; }
.ouvrages-associes .vignette, .ouvrages-associes .vignette img, .ouvrages-associes .vignette .couv-vide { height: 120px; }
.nav-actus { display: flex; justify-content: space-between; max-width: 608px; margin: 48px auto 0; gap: 24px; }
.nav-actus a { display: flex; align-items: center; gap: 24px; font: 600 14px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
.nav-actus a:hover { color: var(--orange); }
.nav-actus a:hover .bouton-rond { background: var(--orange-pale); }

/* ==========================================================================
   Auteurs
   ========================================================================== */
.fiche-auteur { max-width: 736px; margin: 16px auto 48px; display: flex; flex-direction: column; gap: 40px; }
.fiche-auteur-haut { display: flex; justify-content: space-between; gap: 40px; }
.fiche-auteur-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fiche-auteur h1 { font-size: 28px; font-weight: 600; letter-spacing: 2px; line-height: 34px; }
.roles-auteur { margin: 0 0 8px; font: 400 20px/24px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.roles-auteur .symbole { font-family: var(--f-texte); text-transform: none; }
.fiche-auteur .texte { font-size: 14px; line-height: 24px; }
.fiche-auteur-photo { position: relative; width: 208px; flex: none; align-self: stretch; min-height: 208px; overflow: hidden; background: var(--creme); }
.fiche-auteur-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fiche-auteur .etagere { gap: 16px; }
.fiche-auteur .vignette, .fiche-auteur .vignette img, .fiche-auteur .vignette .couv-vide { height: 120px; }

.index-auteurs { display: flex; flex-direction: column; gap: 32px; }
.index-filtres { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.index-filtres a { font: 600 14px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; padding: 2px 8px; border-radius: 6px; }
.index-filtres a:hover { color: var(--orange); }
.index-filtres .is-actif a { background: var(--orange); color: var(--blanc); }
.index-lettres { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font: 600 16px var(--f-titre); }
.index-lettres a { text-decoration: none; }
.index-lettres a:hover { color: var(--orange); }
.index-lettres span { color: var(--gris-30); }
.index-colonnes { columns: 3; column-gap: 32px; }
.index-groupe { break-inside: avoid-column; margin-bottom: 24px; }
.index-groupe h2 { margin-bottom: 16px; font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.index-groupe ul { margin: 0; padding: 0; list-style: none; }
.index-groupe li { font: 400 14px/18px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; padding: 3px 0; }
.index-groupe a { text-decoration: none; }
.index-groupe a:hover { color: var(--orange); }
.index-groupe li.is-actif > a { color: var(--orange); }
.index-symbole { font-family: var(--f-texte); text-transform: none; }

/* ==========================================================================
   Offres du moment (lots et soldes)
   ========================================================================== */
.offres { background: var(--jaune); margin: 16px 0 0; padding: 0 40px 24px; }
.offres-banniere { margin: 0 -40px 32px; }
.offres-banniere img { width: 100%; }
.offres-titre { padding: 40px 0 24px; text-align: center; }
.offres-titre p { margin: 0; font: 400 40px/1.1 var(--f-machine); }
.offres-titre h1 { margin-top: 8px; font-size: 40px; font-weight: 400; letter-spacing: 2px; }
.lots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 40px; }
.carte-lot { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; background: var(--blanc); border-radius: 12px; }
.carte-lot-image { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--creme); display: block; }
.carte-lot-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-lot h2 { font-size: 20px; font-weight: 700; letter-spacing: 1px; line-height: 24px; }
.carte-lot h2 a { text-decoration: none; }
.carte-lot h2 a:hover { color: var(--orange); }
.carte-lot .bouton-l { margin-top: auto; min-height: 44px; padding: 8px; font-size: 24px; font-weight: 700; }
.offres .etagere { justify-content: flex-start; }
.offres .pagination-saut input { background: var(--blanc); }

/* Lot */
.lot { display: flex; gap: 48px; align-items: flex-start; padding-top: 16px; }
.lot-visuel { width: 288px; flex: none; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.lot-visuel > img, .lot-visuel .visuel-vide { width: 100%; border-radius: 8px; }
.lot-texte { flex: 1; max-width: 368px; display: flex; flex-direction: column; gap: 24px; }
.lot-texte h1 { font-size: 24px; font-weight: 700; letter-spacing: 2px; }
.lot-texte .titre-livre { font-size: 32px; line-height: 38px; }
.lot-prix { align-self: flex-start; padding: 4px 16px; border-radius: 8px; background: var(--jaune); font: 700 24px/1.2 var(--f-titre); letter-spacing: 2px; text-transform: uppercase; }
.lot-origine { margin: -16px 0 0; font: 600 12px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.lot-livres { padding: 16px; background: var(--blanc); border-radius: 8px; }
.lot-livres h2 { display: flex; gap: 8px; margin-bottom: 16px; font-size: 13px; letter-spacing: 1px; }
.lot-livres .etagere { gap: 16px; }
.lot-livres .vignette, .lot-livres .vignette img, .lot-livres .vignette .couv-vide { height: 120px; }

/* ==========================================================================
   Recherche
   ========================================================================== */
.resultats { display: flex; flex-direction: column; gap: 24px; max-width: 736px; margin: 0 auto; }
.resultat { display: flex; gap: 16px; padding: 16px; background: var(--blanc); border-radius: 16px; }
.resultat-image { width: 120px; height: 120px; flex: none; border-radius: 8px; overflow: hidden; background: var(--creme); display: block; }
.resultat-image img { width: 100%; height: 100%; object-fit: cover; }
.resultat.is-livre .resultat-image { width: 82px; height: 120px; border-radius: 0; background: none; }
.resultat.is-livre .resultat-image img { object-fit: contain; }
.resultat-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.resultat h2 { font-size: 20px; font-weight: 700; letter-spacing: 1px; line-height: 24px; }
.resultat h2 a { text-decoration: none; }
.resultat h2 a:hover { color: var(--orange); }
.resultat p { margin: 0; font-size: 14px; line-height: 22px; }
.resultat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.recherche-vide { max-width: 608px; margin: 0 auto; text-align: center; }
.recherche-page { display: flex; gap: 8px; max-width: 448px; margin: 0 auto 40px; }
.recherche-page .champ { flex: 1; }

/* ==========================================================================
   Pages (la maison, CGV…)
   ========================================================================== */
.page-carte { display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; max-width: 736px; margin: 16px auto 0; padding: 40px; }
.page-carte-texte { flex: 1; min-width: 0; max-width: 448px; }
.page-carte-texte h1 { margin-bottom: 24px; font-size: 28px; font-weight: 600; letter-spacing: 2px; line-height: 34px; }
.page-carte-texte .page-visuel { margin-bottom: 32px; border-radius: 4px; overflow: hidden; background: var(--creme); }
.page-carte .bulle-presse { margin-top: 0; }
.page-simple { max-width: 736px; margin: 16px auto 0; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: flex; flex-direction: column; gap: 40px; padding-top: 40px; }
.contact h1, .contact h2 { font-size: 32px; font-weight: 600; letter-spacing: 2px; line-height: 38px; }
.form-contact { display: flex; flex-direction: column; gap: 32px; position: relative; }
.form-contact .champ input { text-transform: none; font-family: var(--f-texte); font-weight: 400; font-size: 15px; }
.champ-texte { display: block; width: 100%; min-height: 202px; padding: 8px; font: 400 15px/24px var(--f-texte); resize: vertical; }
.form-ligne-profils { display: flex; gap: 0; position: relative; }
.profils { border: 0; margin: 0; padding: 0; min-width: 0; }
.profils legend { padding: 0 0 8px; font: 600 16px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.case { display: flex; align-items: center; gap: 16px; min-height: 40px; font: 600 16px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.case input { appearance: none; -webkit-appearance: none; width: 40px; height: 40px; margin: 0; flex: none; border: 2px solid var(--orange); border-radius: 6px; background: var(--blanc); display: grid; place-items: center; cursor: pointer; }
.case input::after { content: ""; width: 14px; height: 24px; border: solid var(--orange); border-width: 0 5px 5px 0; transform: rotate(45deg) translate(-2px, -2px); opacity: 0; }
.case input:checked::after { opacity: 1; }
.case:hover input { background: var(--orange-pale); }
.profils .aide { margin: 8px 0 0; color: var(--orange); font: 600 14px/17px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; max-width: 528px; }
.pastille-sp {
    position: absolute; right: -80px; top: 72px; width: 368px; display: flex; gap: 8px; align-items: center; padding: 12px 16px 12px 8px;
    background: var(--blanc); border: 2px solid var(--orange); border-radius: 40px; transform: rotate(-4deg);
    color: var(--orange); font: 600 16px/19px var(--f-titre); letter-spacing: 1px; text-transform: uppercase;
}
.pastille-sp img { width: 69px; height: 69px; flex: none; }
.question-robot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.question-robot .champ { width: 96px; }
.piege { position: absolute; left: -9999px; }
.erreur { color: #c00; font: 600 13px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; margin: 4px 0 0; }
.message-ok { padding: 16px 24px; border-radius: 16px; background: var(--blanc); border: 2px solid var(--orange); }
.contact .texte h2 { margin-top: 0; }
.contact-section { display: flex; flex-direction: column; gap: 40px; }
.contact .texte ul { list-style: none; padding: 0; }
.contact .texte ul li { position: relative; padding-left: 36px; margin-bottom: 8px; }
.contact .texte ul li::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: url(../img/fleche-main.svg) center / contain no-repeat; }

/* ==========================================================================
   404
   ========================================================================== */
.erreur-404 { max-width: 608px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.erreur-404 img { width: 160px; }

/* ==========================================================================
   Tablette : le menu passe en burger sous 960 px
   ========================================================================== */
@media (max-width: 959px) {
    .logo img { width: 300px; }
    .menu-principal > li > a { padding: 0 12px; font-size: 20px; }
    .livre { flex-wrap: wrap; }
    .livre-texte { width: auto; flex: 1; min-width: 320px; }
    .bulle-presse { width: 100%; }
    .grille-tuiles, .lots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Mobile (maquettes 414 px)
   ========================================================================== */
@media (max-width: 759px) {
    body { font-size: 20px; line-height: 32px; }

    .site-header { width: 100%; padding-top: 40px; }
    .header-haut { margin: 0 0 16px; justify-content: center; padding: 0 var(--gouttiere); }
    .logo img { width: 100%; max-width: 382px; }
    .header-outils, .menu-desktop { display: none; }
    .menu-mobile-barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--gouttiere); }
    .rs-mobile { gap: 14px; }
    .rs-mobile a { width: 56px; height: 56px; }
    .rs-mobile .icon { width: 42px; height: 42px; }

    .site-main { padding: 40px 0; }

    .site-footer { padding: 40px var(--gouttiere) 72px; }
    .footer-haut { flex-direction: column; align-items: stretch; gap: 40px; width: 100%; }
    .footer-logo { width: 100%; align-items: center; }
    .footer-logo img { width: 302px; }
    .devise { text-align: center; }
    .footer-droite { width: 100%; gap: 28px; }
    .rs-footer { justify-content: space-between; padding: 0 48px; }
    .rs-footer a { width: 48px; height: 48px; }
    .rs-footer .icon { width: 36px; height: 36px; }
    .menu-bas, .credits { width: 100%; }
    .menu-bas ul { gap: 16px 24px; }

    .bouton-up { right: 16px; bottom: 16px; }

    /* Étagères : couvertures pleine largeur */
    .etagere { gap: 32px; }
    .site-main > .etagere .vignette, .etagere-principale .vignette, .offres .etagere .vignette { width: 100%; height: auto; }
    .site-main > .etagere .vignette img, .etagere-principale .vignette img, .offres .etagere .vignette img,
    .site-main > .etagere .vignette .couv-vide, .etagere-principale .vignette .couv-vide { width: 100%; height: auto; }
    .bandeau-out { font-size: 40px; padding: 8px 0; }
    .bandeau-promo { font-size: 32px; }
    .bandeau-promo b { font-size: 72px; }

    .pagination { gap: 12px; flex-wrap: wrap; padding: 48px 0 16px; }
    .pagination-fleches { gap: 12px; }
    .pagination-saut { order: -1; width: 100%; justify-content: center; font-size: 16px; gap: 12px; }

    /* Carrousel */
    .carrousel { flex-wrap: wrap; justify-content: center; gap: 24px 64px; padding: 0; }
    .carrousel-piste { flex-basis: 100%; order: -1; }
    .carrousel-diapo { flex-direction: column; }
    .carrousel-image { width: 100%; height: auto; aspect-ratio: 309 / 208; }
    .carrousel-texte p { display: none; }
    .carrousel-texte .bouton { align-self: flex-start; }

    /* Fiche livre */
    .livre { flex-direction: column; gap: 64px; padding-top: 0; }
    .livre-couv, .livre-texte, .bulle-presse { width: 100%; min-width: 0; }
    .livre-couv { gap: 32px; }
    .statut-livre { font-size: 20px; line-height: 24px; }
    .livre-texte { gap: 64px; }
    .li-fleche { font-size: 20px; line-height: 24px; gap: 12px; }
    .li-fleche .icon { width: 20px; height: 20px; }
    .texte blockquote, .hors-texte { font-size: 32px; line-height: 40px; max-width: 250px; }
    .bulle-presse-corps { padding: 24px; }
    .bulle-presse-titre { width: 270px; max-width: 100%; margin: 0; }
    .encart-presse blockquote { gap: 16px; }
    .encart-presse .icon-guillemet { width: 48px; height: 35px; margin-top: 2px; }
    .encart-presse blockquote p { font: italic 400 20px/32px var(--f-texte); }
    .encart-presse figcaption { padding-left: 64px; font-size: 20px; line-height: 24px; }
    .livre-souscription { padding: 24px 16px 200px; }
    .livre-souscription .livre-couv, .livre-souscription .livre-texte { width: 100%; }
    .drapeau-souscription { left: -24px; width: 320px; } .drapeau-souscription img { width: 320px; }

    /* Actus */
    .grille-tuiles, .lots { grid-template-columns: 1fr; }
    .tuile-texte { font-size: 16px; line-height: 28px; }
    .actu, .carte, .page-carte { padding: 24px 16px; }
    .actu-haut { grid-template-columns: 1fr; gap: 24px; }
    .nav-actus a .nav-actus-texte { display: none; }

    /* Auteurs */
    .fiche-auteur-haut { flex-direction: column-reverse; gap: 24px; }
    .fiche-auteur-photo { width: 100%; max-width: none; align-self: auto; aspect-ratio: 1; min-height: 0; }
    .index-colonnes { columns: 1; }
    .index-groupe li { font-size: 20px; line-height: 28px; }

    /* Lot */
    .lot { flex-direction: column; gap: 32px; }
    .lot-visuel, .lot-texte { width: 100%; max-width: none; }

    /* Recherche */
    .resultat { flex-direction: column; }
    .resultat-image, .resultat.is-livre .resultat-image { width: 100%; height: auto; aspect-ratio: 16 / 10; }
    .resultat.is-livre .resultat-image { aspect-ratio: auto; }
    .resultat.is-livre .resultat-image img { width: auto; max-height: 260px; }

    /* Pages, contact */
    .page-carte { flex-direction: column; }
    .page-carte-texte { max-width: none; }
    .contact { padding-top: 0; }
    .pastille-sp { position: static; width: auto; transform: rotate(-2deg); margin-top: 16px; }
    .form-ligne-profils { flex-direction: column; }
    .separateur { padding: 0 48px; }
    .entete-page .entete-texte { font-size: 16px; line-height: 28px; }
}

/* Séparateurs décorés dans le texte (ligne horizontale de l'éditeur) */
.texte hr { height: 48px; margin: 40px 0; border: 0; background: url(../img/etoile.svg) center / 48px no-repeat; position: relative; }
.texte hr:nth-of-type(3n+2) { background-image: url(../img/trefle.svg); }
.texte hr:nth-of-type(3n) { background-image: url(../img/losange.svg); }
.texte hr::before, .texte hr::after { content: ""; position: absolute; top: 50%; width: calc(50% - 160px); border-top: 2px solid var(--orange); }
.texte hr::before { left: 128px; }
.texte hr::after { right: 128px; }
.texte-contact h2 { margin: 0 0 40px; font-size: 32px; font-weight: 600; letter-spacing: 2px; line-height: 38px; }
.texte-contact h3 { font-size: 20px; }
.visionneuse-corps iframe { width: 100%; height: 100%; }

/* Bouton Shopify (généré par le script Shopify, sans iframe) aux couleurs du site */
.av-shopify .shopify-buy__product { max-width: none !important; margin: 0 !important; }
.av-shopify .shopify-buy__btn-wrapper { margin: 0 !important; }
.av-shopify .shopify-buy__btn {
    display: flex !important; justify-content: center; align-items: center; width: 100% !important; min-height: 56px; padding: 16px 8px !important;
    border: 0 !important; border-radius: 8px !important; background: var(--orange) !important; color: var(--blanc) !important;
    font: 600 20px/24px var(--f-titre) !important; letter-spacing: 1px; text-transform: uppercase;
}
.av-shopify .shopify-buy__btn:hover { background: var(--orange-pale) !important; color: var(--orange) !important; }
.av-shopify .shopify-buy__btn:active { background: var(--orange-actif) !important; }
.av-shopify .shopify-buy__btn.shopify-buy__btn-disabled { background: var(--gris-15) !important; color: var(--blanc) !important; }
@media (max-width: 759px) {
    .texte hr::before { left: 0; } .texte hr::after { right: 0; }
    .texte hr::before, .texte hr::after { width: calc(50% - 40px); }
}
.carte-lot .tag { align-self: flex-start; }
.vignette .couv-vide { width: 176px; }
.ouvrages-associes .vignette .couv-vide, .fiche-auteur .vignette .couv-vide, .lot-livres .vignette .couv-vide { width: 81px; font-size: 8px; padding: 4px; }
.contact > * { max-width: 608px; width: 100%; }
.lot-texte h1.titre-livre { font-size: 32px; font-weight: 400; letter-spacing: 1px; line-height: 38px; }

/* ==========================================================================
   Retours du 4 octobre : survol orange, états « actif », mains, focus
   ========================================================================== */
/* Survol : fond orange #ff4d00, texte blanc ; les éléments déjà orange s'inversent (fond blanc, texte orange) */
.choix a:hover { background: var(--orange); color: var(--blanc); }
.choix-catalogue a:hover, .choix.is-actif a:hover { background: var(--blanc); color: var(--orange); }
.bouton-orange:hover, .bouton-l.bouton-orange:hover { background: var(--blanc); color: var(--orange); }
.bouton-blanc:hover, .bouton-l.bouton-blanc:hover { background: var(--orange); color: var(--blanc); }
.bouton-rond-orange:hover { background: var(--blanc); }
.bouton-rond-blanc:hover, .nav-actus a:hover .bouton-rond { background: var(--orange); }
a.tag:hover { background: var(--orange); color: var(--blanc); }
.case:hover input { background: var(--blanc); border-color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); }
.av-shopify .shopify-buy__btn:hover { background: var(--blanc) !important; color: var(--orange) !important; }
.bouton-ok:hover { background: var(--noir); }

/* État « actif » (pendant le clic) : #ff8c00, prioritaire sur le survol */
.bouton.bouton:active, .bouton-l.bouton-l:active, .choix.choix a:active, .bouton-rond.bouton-rond:active,
.bouton-ok.bouton-ok:active, a.tag.tag:active, .menu-principal > li > a:active, .nav-actus a:active .bouton-rond { background: var(--orange-actif); color: var(--noir); }
.rs a:active, .menu-bas a:active { color: var(--orange-actif); }
.vignette:active { opacity: 1; outline: 4px solid var(--orange-actif); outline-offset: -4px; }
.tuile:active, .carte-lot:active, .resultat:active { box-shadow: 0 0 0 4px var(--orange-actif); }
.carrousel-diapo:active { box-shadow: inset 0 0 0 4px var(--orange-actif); }

/* Les mains : la main dessinée pointe vers la gauche ; on la retourne pour « suivant » et dans les menus */
.bouton-rond .icon { transform: scaleX(-1); }
.bouton-rond.is-flip .icon { transform: none; }
.sous-menu .choix a::before { transform: scaleX(-1); }

/* Champs : un seul filet au focus (le cadre devient rose, sans contour supplémentaire) */
.champ input:focus, .champ input:focus-visible, .champ-texte:focus-visible, .recherche input:focus-visible, .pagination-saut input:focus-visible { outline: none; }
.champ:focus-within { outline: none; border-color: var(--focus); }
.champ-texte:focus { outline: none; border-color: var(--focus); }
.recherche input:focus { border-color: var(--focus); }

/* Tuiles entièrement cliquables : le lien du titre couvre toute la tuile */
.tuile, .carte-lot, .resultat, .carrousel-diapo { position: relative; transition: box-shadow .15s, transform .15s; }
.lien-tuile::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tuile:hover, .carte-lot:hover, .resultat:hover { box-shadow: 0 0 0 4px var(--orange); }
.carrousel-diapo:hover { box-shadow: inset 0 0 0 4px var(--orange); }
.tuile:hover .tuile-titre a, .resultat:hover h2 a, .carte-lot:hover h2 a, .carrousel-diapo:hover h2 a { color: var(--orange); }
.tuile:focus-within, .carte-lot:focus-within, .resultat:focus-within { box-shadow: 0 0 0 4px var(--focus); }
.carrousel-diapo:focus-within { box-shadow: inset 0 0 0 4px var(--focus); }
.resultat-tags a, .carte-lot .bouton-l { position: relative; z-index: 2; }

/* Bouton « haut de page » : la main seule, plus discrète */
.bouton-up { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.bouton-up .icon { width: 32px; height: 32px; transform: rotate(90deg); }
.bouton-up:hover { background: var(--orange); }
.bouton-up:active { background: var(--orange-actif); }

/* Couverture de la fiche : bandeau promo/épuisé et agrandissement */
.livre-couv-image { position: relative; overflow: hidden; }
.livre-couv-image .bandeau-out { font-size: 40px; padding: 8px 0; }
.livre-couv-image .bandeau-promo { font-size: 28px; }
.livre-couv-image .bandeau-promo b { font-size: 64px; }
.couv-agrandir { display: block; cursor: zoom-in; }
.couv-agrandir:hover img { opacity: .85; }
.patience-mot { font: 400 20px/1 var(--f-machine); width: 10ch; overflow: hidden; white-space: nowrap; animation: ecrit 2.4s steps(10) infinite; }
@keyframes ecrit { 0% { width: 0; } 70%, 100% { width: 10ch; } }
.patience img[src$=".gif"] { animation: none; }

/* Logo animé au survol (fichier assets/img/logo-anime.gif) */
.logo { position: relative; display: block; }
.logo-anime { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.logo:hover .logo-anime, .logo:focus-visible .logo-anime { opacity: 1; }
.logo:has(.logo-anime):hover > img:first-child { opacity: 0; }

/* La maison (maquette « us ») : carte de 832 px, texte 496 px, bulle 208 px */
.maison { display: flex; gap: 64px; align-items: flex-start; max-width: 832px; margin: 40px auto 0; padding: 32px; }
.maison-texte { width: 496px; flex: none; display: flex; flex-direction: column; gap: 24px; }
.maison-texte h1 { font-size: 32px; font-weight: 600; letter-spacing: 2px; line-height: 38px; }
.maison .page-visuel { height: 208px; padding: 24px; border-radius: 4px; overflow: hidden; background: var(--creme); }
.maison .page-visuel img { width: 100%; height: 100%; object-fit: contain; }
.maison .page-visuel .visuel-vide { background: none; }
.texte-maison h2 { margin: 24px 0 24px; font-size: 24px; font-weight: 400; letter-spacing: 2px; line-height: 29px; }
.texte-maison blockquote p { margin: 0; }
.texte-maison blockquote cite { margin-top: 12px; font: 400 16px/19px var(--f-titre); letter-spacing: 1px; text-align: right; }
.encart-point blockquote p { font-weight: 700; }
.encart-point a { text-decoration: none; }
.encart-point a:hover { color: var(--orange); }

/* Actus en maçonnerie : les tuiles prennent la hauteur de leur contenu */
.grille-tuiles { display: block; columns: 3; column-gap: 32px; }
.grille-tuiles .tuile { break-inside: avoid; margin-bottom: 32px; width: 100%; display: inline-flex; }
.tuile-texte { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Index des auteurs : lettres 24 px gras, noms 20 px (maquette) */
.index-groupe h2 { margin-bottom: 16px; font-size: 24px; font-weight: 700; letter-spacing: 2px; }
.index-groupe li { font: 400 20px/24px var(--f-titre); letter-spacing: 1px; padding: 4px 0; }
.index-colonnes { column-gap: 40px; }

/* Contact : cases 24 px dans une zone de 40 px, erreurs en étiquette rouge, plus d'air */
.case { gap: 6px; }
.case input { width: 24px; height: 24px; margin: 8px; border: 2px solid var(--orange); border-radius: 4px; transition: box-shadow .15s; }
.case input::after { content: ""; width: 12px; height: 12px; border: 0; background: var(--orange); transform: none; opacity: 0; }
.case input:checked::after { opacity: 1; }
.case:hover input { background: var(--blanc); box-shadow: 0 0 0 8px var(--creme); }
.case input:focus-visible { outline: none; box-shadow: 0 0 0 8px #ffd9e8, 0 0 0 10px var(--focus); }
.case input:active { box-shadow: 0 0 0 8px var(--orange); }
.erreur {
    display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 3px 10px 3px 4px; border-radius: 4px;
    background: #c80000; color: var(--blanc); font: 600 12px/16px var(--f-titre); letter-spacing: 1px; text-transform: uppercase;
}
.erreur .icon { width: 20px; height: 20px; color: var(--blanc); }
.champ.is-erreur, .champ-texte.is-erreur { border-color: #c80000; }
.form-contact { gap: 40px; }
.contact-section { gap: 48px; }
.texte-contact .newsletter { margin-top: 32px; }
.texte-contact h2 { margin-bottom: 32px; }
.texte-contact p + h3, .texte-contact ul + h3 { margin-top: 40px; }
@media (max-width: 959px) { .grille-tuiles { columns: 2; } .maison { flex-wrap: wrap; } .maison-texte { width: 100%; } }
@media (max-width: 759px) { .grille-tuiles { columns: 1; } .maison { padding: 24px 16px; gap: 40px; } .maison .bulle-presse { width: 100%; } }
.maison .page-visuel .visuel-vide img { height: 100% !important; width: auto !important; }
.offres .etagere { gap: 32px 40px; }
@media (max-width: 759px) { .offres { padding: 0 16px 16px; } .offres-banniere { margin: 0 -16px 24px; } }
/* États des tuiles (maquette « tuile simple » / « tuile lot ») : survol crème, focus rose, actif orange */
.tuile:hover, .carte-lot:hover, .resultat:hover, .carrousel-diapo:hover { box-shadow: none; background: var(--creme); }
.tuile:hover .tuile-titre a, .resultat:hover h2 a, .carte-lot:hover h2 a, .carrousel-diapo:hover h2 a { color: inherit; }
.tuile:focus-within, .carte-lot:focus-within, .resultat:focus-within { box-shadow: 0 0 0 4px var(--focus); }
.carrousel-diapo:focus-within { box-shadow: inset 0 0 0 4px var(--focus); }
.tuile:active, .carte-lot:active, .resultat:active, .carrousel-diapo:active { box-shadow: none; background: var(--orange); color: var(--blanc); }
.tuile:active a, .resultat:active a, .carte-lot:active h2 a, .carrousel-diapo:active h2 a { color: var(--blanc); }
.tuile:active .tag-orange { background: var(--noir); }
.erreur { align-self: flex-start; }
.question-robot .erreur { flex-basis: auto; margin-top: 0; }


/* ==========================================================================
   Retours du 4 octobre (2)
   ========================================================================== */
/* Pas de cadre au clic : le cadre rose n'apparaît qu'à la navigation au clavier */
.vignette:active { outline: none; }
.tuile:focus-within, .carte-lot:focus-within, .resultat:focus-within, .carrousel-diapo:focus-within { box-shadow: none; }
.tuile:has(:focus-visible), .carte-lot:has(:focus-visible), .resultat:has(:focus-visible) { box-shadow: 0 0 0 4px var(--focus); }
.carrousel-diapo:has(:focus-visible) { box-shadow: inset 0 0 0 4px var(--focus); }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Boutons en largeur « hug » (selon leur contenu) */
.bouton { width: fit-content; max-width: 100%; }
.livre-mentions .bouton, .livre-texte .bouton { align-self: flex-start; }

/* Sous-menu « Livres » : assez large pour que rien ne passe à la ligne, même avec la main au survol */
.sous-menu { width: max-content; min-width: 314px; }
.sous-menu .choix a { white-space: nowrap; padding-right: 16px; }

/* Recherche de l'en-tête : la loupe ouvre/ferme, « ok » au bout du champ */
.recherche { gap: 8px; }
.recherche-champ { display: flex; align-items: center; gap: 8px; width: 0; height: 32px; overflow: hidden; opacity: 0; border: 2px solid transparent; border-radius: 6px; background: var(--blanc); transition: width .2s, opacity .2s; }
.recherche.is-ouvert .recherche-champ { width: 280px; opacity: 1; padding: 0 4px 0 8px; border-color: var(--orange); }
.recherche.is-ouvert .recherche-champ:focus-within { border-color: var(--focus); }
.recherche .recherche-champ input, .recherche.is-ouvert input, .recherche input:focus, .recherche input:not(:placeholder-shown) { flex: 1; min-width: 0; width: auto; height: 28px; padding: 0; border: 0; opacity: 1; background: none; outline: none; }
.recherche-champ .bouton-ok { flex: none; }

/* Bouton d'envoi du formulaire de contact */
.form-contact .bouton-envoyer { width: fit-content; padding: 16px 40px; }

/* Pictos des rôles (auteurs) */
.picto-role { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.picto-role .icon { width: 24px; height: 24px; }
.picto-texte { font-family: var(--f-texte); text-transform: none; }
.roles-auteur { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.roles-pictos { display: inline-flex; gap: 2px; margin-left: 4px; white-space: nowrap; }
.roles-pictos .icon { width: 32px; height: 32px; }
.index-groupe li { font-weight: 400; }
.index-groupe li.is-auteur > a { font-weight: 700; }
.index-groupe .picto-role .icon { width: 22px; height: 22px; margin-top: -3px; }
.index-filtres a { display: inline-flex; align-items: center; gap: 2px; }
.index-filtres .picto-role .icon { width: 20px; height: 20px; }

/* Bouton Shopify : lien de secours tant que le script n'a pas affiché le bouton */
.av-shopify.is-pret .av-shopify-repli { display: none; }
.av-shopify-repli.is-indisponible { background: var(--gris-15); color: var(--blanc); cursor: default; }

/* Patience (gif) */
.patience img[src$=".gif"] { width: 150px; }

/* Bandeau cookies */
.toast-cookies {
    position: fixed; z-index: 150; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(720px, calc(100% - 32px));
    display: flex; align-items: center; gap: 24px; padding: 16px 24px; background: var(--noir); color: var(--blanc); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.toast-cookies[hidden] { display: none; }
.toast-cookies p { margin: 0; font-size: 14px; line-height: 22px; }
.toast-cookies a { color: var(--jaune); }
.toast-cookies .bouton { flex: none; }

/* Invitation à la lettre d'information */
.popup-lettre { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.popup-lettre[hidden] { display: none; }
.popup-lettre-boite {
    position: relative; width: min(480px, 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 32px 24px;
    background: var(--jaune); border: 4px solid var(--noir); border-radius: 24px; box-shadow: 6px 6px 0 var(--noir); text-align: center;
}
.popup-lettre-fermer { position: absolute; top: 8px; right: 8px; }
.popup-lettre-fermer:hover { color: var(--orange); }
.popup-lettre-arbre { width: 96px; }
.popup-lettre h2 { font-size: 24px; font-weight: 700; letter-spacing: 2px; line-height: 29px; }
.popup-lettre p { margin: 0; font-size: 15px; line-height: 24px; }
.popup-lettre .newsletter { width: 100%; text-align: left; }
.popup-lettre-non { border: 0; background: none; font: 600 12px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.popup-lettre-non:hover { color: var(--orange); }

/* Images d'actu agrandissables */
.actu-image a { display: block; height: 100%; cursor: zoom-in; }

@media (max-width: 759px) {
    .toast-cookies { flex-direction: column; align-items: flex-start; gap: 12px; }
    .titre-livre { font-size: 56px; line-height: 56px; }
    .titre-livre.is-long { font-size: 44px; line-height: 48px; }
    .titre-livre.is-tres-long { font-size: 34px; line-height: 40px; }
    .titre-livre.is-hors-norme { font-size: 28px; line-height: 34px; }
    .livre-souscription { margin-top: 24px; }
    .livre-souscription .livre-entete { padding-top: 110px; }
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Photo de l'auteur : 100 % de la largeur de la colonne, hauteur selon l'image */
.fiche-auteur-photo { position: static; align-self: flex-start; min-height: 0; height: auto; aspect-ratio: auto; background: none; }
.fiche-auteur-photo img { position: static; width: 100%; height: auto; object-fit: initial; }
@media (max-width: 759px) { .fiche-auteur-photo { aspect-ratio: auto; } }

/* Sous-menu : la place de la main est réservée à droite, la largeur ne bouge plus au survol */
.sous-menu .choix a { padding-right: 46px; }
.sous-menu .choix a:hover { padding-right: 8px; }
/* Titre de la fiche : pas de coupure dans les mots, le script ajuste le corps si un mot dépasse */
.titre-livre { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Souscription : bloc jaune collé au menu principal */
.is-souscription .site-main { padding-top: 0; }
.livre-souscription { margin-top: 0; }
@media (max-width: 759px) { .livre-souscription { margin-top: 0; } }

/* Bandeaux « promo » / « épuisé » : tailles proportionnelles à la couverture (font-size de base par contexte) */
.vignette { font-size: 10px; }
.ouvrages-associes .vignette, .fiche-auteur .vignette, .lot-livres .vignette { font-size: 5px; }
.livre-couv-image { font-size: 14px; }
.bandeau { left: -30%; right: -30%; }
.bandeau-promo, .livre-couv-image .bandeau-promo { top: 64%; padding: .45em 0 .5em; font-size: 1em; letter-spacing: .1em; line-height: 1; }
.bandeau-promo b, .livre-couv-image .bandeau-promo b { font-size: 2.1em; line-height: 1; letter-spacing: .03em; }
.bandeau-out, .livre-couv-image .bandeau-out { top: 66%; padding: .35em 0; font-size: 1.7em; line-height: 1.1; }
@media (max-width: 759px) {
    .site-main > .etagere .vignette, .etagere-principale .vignette, .offres .etagere .vignette { font-size: 18px; }
    .bandeau-out, .bandeau-promo, .bandeau-promo b { }
}

/* ==========================================================================
   Retours du 6 octobre
   ========================================================================== */
/* Extraits de presse : la citation ouvre l'article découpé (visionneuse) */
.presse-agrandir { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.presse-agrandir:hover blockquote p { color: var(--orange); }
.presse-agrandir:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }

/* Braderie : têtière collée au menu, aplat jaune jusqu'au pied de page, bandeaux deux fois plus grands */
.site-main:has(> .offres) { padding-top: 0; padding-bottom: 0; }
.offres { margin: 0; padding-bottom: 64px; }
.offres-banniere { margin: 0 -40px 40px; }
.offres-banniere img { width: 100%; height: auto; }
.offres .etagere .vignette { font-size: 20px; }

/* Fiche auteur : vignettes des livres plus grandes, biographie au corps du texte courant */
.fiche-auteur .vignette, .fiche-auteur .vignette img, .fiche-auteur .vignette .couv-vide { height: 160px; }
.fiche-auteur .vignette .couv-vide { width: 108px; }
.fiche-auteur .vignette { font-size: 6.5px; }
.fiche-auteur .texte { font-size: 16px; line-height: 28px; }

/* En-têtes des listes (collections, auteurs) : texte de présentation plus grand */
.entete-page .entete-texte { font-size: 18px; line-height: 30px; }
.entete-page .entete-icone { width: 64px; height: 64px; }
.entete-page .entete-icone.entete-logo { width: auto; height: auto; max-width: 240px; max-height: 96px; }

/* Index des auteurs : noms des auteurs en demi-gras dans « Tous », en normal quand la liste ne montre que les auteurs */
.index-groupe li.is-auteur > a { font-weight: 600; }
.index-auteurs.is-filtre .index-groupe li > a { font-weight: 400; }
/* Pictos des rôles légèrement graissés */
.picto-role .icon path { stroke: currentColor; stroke-width: .8; stroke-linejoin: round; paint-order: stroke; }

/* Formulaire de contact : bouton d'envoi calé à droite */
.form-contact .bouton-envoyer { margin-left: auto; }
.form-contact > div:has(> .bouton-envoyer) { display: flex; justify-content: flex-end; }

/* Lot : visuel + bouton | texte + prix | ouvrages du lot (encart blanc) */
.lot { display: grid; grid-template-columns: 256px minmax(0, 1fr) 272px; gap: 40px; align-items: start; }
.lot-visuel { width: auto; }
.lot-texte { max-width: none; }
.lot-visuel .av-shopify { width: 100%; }
.lot-livres .vignette, .lot-livres .vignette img, .lot-livres .vignette .couv-vide { height: 104px; }
.lot-livres .etagere { gap: 12px; }
@media (max-width: 959px) {
    .lot { grid-template-columns: 240px minmax(0, 1fr); }
    .lot-livres { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 759px) {
    /* Plus d'air sous le contenu, avant le pied de page */
    .site-main { padding-bottom: 80px; }
    .site-main:has(> .offres) { padding-bottom: 0; }
    .offres { padding-bottom: 48px; }
    .offres-banniere { margin: 0 -16px 24px; }
    .offres .etagere .vignette { font-size: 18px; }

    /* Champs de formulaire plus hauts (16 px minimum : pas de zoom automatique sur iPhone) */
    .champ { min-height: 48px; }
    .champ input { height: 44px; font-size: 16px; }
    .form-contact .champ input { font-size: 16px; }
    .champ-texte { font-size: 16px; }

    .lot { grid-template-columns: 1fr; gap: 32px; }
    .lot-livres { grid-column: auto; }

    /* Menu : tiroir orange qui glisse depuis la gauche et prend la place de la barre du burger */
    .menu-mobile, .menu-mobile[hidden] { display: block; }
    .menu-mobile {
        position: absolute; left: 0; right: auto; bottom: auto; inset-inline-start: 0; z-index: 100;
        width: min(414px, 100%); height: auto; overflow: visible; background: var(--orange); border-radius: 0 16px 16px 0;
        box-shadow: 6px 8px 24px rgba(0, 0, 0, .18);
        transform: translateX(-105%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s;
    }
    .menu-mobile[hidden] { visibility: hidden; }
    .menu-mobile.is-ouvert { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
    .menu-mobile-panneau { width: 100%; margin: 0; padding: 16px var(--gouttiere, 16px) 24px; gap: 16px; }
    .menu-mobile .croix { margin-top: 4px; width: 48px; height: 48px; }
    .menu-mobile .croix .icon { width: 40px; height: 40px; }

    /* Rubriques principales : 80 px, filet noir dessous */
    .mm-liste { margin: 0; }
    .mm-rubrique + .mm-rubrique { border-top: 0; }
    .mm-rubrique:last-child { border-bottom: 0; }
    .mm-rubrique:not(.mm-livres) { border-bottom: 2px solid var(--noir); }
    .mm-titre { min-height: 80px; padding: 0 8px; font-size: 24px; font-weight: 700; letter-spacing: 2px; line-height: 29px; }
    a.mm-titre:hover, a.mm-titre:active { background: var(--orange-actif); color: var(--noir); }
    .mm-rubrique.is-actif .mm-titre { background: var(--blanc); color: var(--orange); }

    /* Sous-liste « Livres et collections » (maquette : choix menu mobile) */
    .mm-sous-liste { margin: 0; border: 0; border-top: 2px solid var(--noir); border-bottom: 2px solid var(--noir); }
    .mm-sous-liste .choix a {
        display: flex; align-items: center; min-height: 56px; padding: 0 8px 0 24px; border: 0;
        background: transparent; color: var(--noir); font: 600 20px/24px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
        box-shadow: inset 0 -2px 0 var(--noir);
    }
    .mm-sous-liste .choix:last-child a { box-shadow: none; }
    .mm-sous-liste .choix-catalogue a { background: var(--blanc); font-weight: 800; }
    .mm-sous-liste .choix-a-paraitre a, .mm-sous-liste .choix-offres a { background: var(--jaune); }
    .mm-sous-liste .choix-collection a {
        box-shadow: none;
        background: linear-gradient(to right, var(--noir) 50%, transparent 0) left bottom / 4px 2px repeat-x;
    }
    .mm-sous-liste .choix-arbuste a { min-height: 64px; font: 400 24px/26px var(--f-machine); letter-spacing: 2px; text-transform: none; }
    .mm-sous-liste .choix a::before, .mm-sous-liste .choix a::after { content: none; display: none; }
    /* survol et appui : orange actif ; page en cours : fond blanc, texte orange */
    .mm-sous-liste .choix a:hover, .mm-sous-liste .choix a:active,
    .mm-sous-liste .choix-collection a:hover, .mm-sous-liste .choix-collection a:active { background-color: var(--orange-actif); color: var(--noir); }
    .mm-sous-liste .choix-collection a:hover, .mm-sous-liste .choix-collection a:active { background: linear-gradient(to right, var(--noir) 50%, transparent 0) left bottom / 4px 2px repeat-x, var(--orange-actif); }
    .mm-sous-liste .choix-collection.is-actif a, .mm-sous-liste .choix-arbuste.is-actif a { background: linear-gradient(to right, var(--noir) 50%, transparent 0) left bottom / 4px 2px repeat-x, var(--blanc); }
    .mm-sous-liste .choix-arbuste.is-actif a { background: var(--blanc); }
    .mm-sous-liste .choix-arbuste a:hover, .mm-sous-liste .choix-arbuste a:active { background: var(--orange-actif); }
    .mm-sous-liste .choix.is-actif a { background-color: var(--blanc); color: var(--orange); }
    .mm-sous-liste .choix-catalogue.is-actif a { color: var(--noir); }

    /* Recherche : carré blanc et loupe orange, champ blanc */
    .mm-recherche { padding-top: 24px; gap: 8px; }
    .mm-recherche button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; background: var(--blanc); color: var(--orange); cursor: pointer; }
    .mm-recherche button .icon { width: 30px; height: 30px; }
    .mm-recherche button:hover { background: var(--orange-actif); color: var(--blanc); }
    .mm-recherche input { height: 40px; padding: 0 8px; font: 600 16px var(--f-titre); letter-spacing: 1px; }
    .mm-recherche input::placeholder { color: var(--noir); opacity: 1; }
    .rs-menu-mobile { padding: 24px 32px 0; justify-content: space-between; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
    .menu-mobile, .menu-mobile.is-ouvert { transition: none; }
}
.encart-presse figcaption a.presse-voir { display: inline; cursor: zoom-in; }

/* Bandeaux « promo » / « épuisé » deux fois plus grands partout (6 octobre) */
.vignette { font-size: 20px; }
.ouvrages-associes .vignette, .lot-livres .vignette { font-size: 7.5px; }
.fiche-auteur .vignette { font-size: 10px; }
.livre-couv-image { font-size: 28px; }
.entete-page .entete-icone { width: 66px; height: 66px; }
@media (max-width: 759px) {
    .site-main > .etagere .vignette, .etagere-principale .vignette, .offres .etagere .vignette { font-size: 21px; }
    .livre-couv-image { font-size: 30px; }
}

/* ==========================================================================
   Retours du 6 octobre (2)
   ========================================================================== */
/* Sous-menu « Livres » : occurrences de 40 px */
.sous-menu .choix a { min-height: 40px; }

/* Boutons taille S : le texte remonte (moins d'air au-dessus des capitales), les pictos restent centrés dans le bouton */
.bouton { padding-top: 0; padding-bottom: 4px; }
.bouton .icon { position: relative; top: 2px; }

/* Réglages typographiques (guide des styles) */
.texte p { letter-spacing: .2px; }
.texte blockquote, .hors-texte { letter-spacing: .1px; font-weight: 400; }
.li-fleche { letter-spacing: .5px; }
.edition, .titre-page, .tuile-titre { letter-spacing: 1.2px; }
.nom-auteur { letter-spacing: 1.2px; }
@media (min-width: 760px) {
    .texte blockquote, .hors-texte { line-height: 30px; }
    .titre-livre { font-size: 44px; line-height: 48px; }
    .nom-auteur { font-size: 28px; line-height: 34px; }
}

/* Fiche livre : moins d'espace au-dessus du titre et sous le titre / sous-titre */
.livre-entete { gap: 12px; }
.edition { margin-top: 8px; }
.livre-texte > .livre-entete { margin-bottom: -16px; }

/* Souscription en mobile : pas de flèche « Souscription », une pastille posée sur la couverture */
.pastille-souscription { display: none; }
@media (max-width: 759px) {
    .livre-souscription .drapeau-souscription { display: none; }
    .livre-souscription .livre-entete { padding-top: 0; }
    .livre-souscription .livre-couv-image { overflow: visible; }
    .livre-souscription .pastille-souscription { display: block; position: absolute; z-index: 2; top: -20px; right: -12px; width: 140px; height: auto; pointer-events: none; transform: rotate(8deg); }
}

/* Visionneuse : flèches et compteur quand il y a plusieurs images */
.visionneuse-prec, .visionneuse-suiv { position: fixed; top: 50%; z-index: 2; transform: translateY(-50%); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.visionneuse-prec { left: 16px; }
.visionneuse-suiv { right: 16px; }
.visionneuse-compteur { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 12px; background: rgba(0, 0, 0, .6); color: var(--blanc); font: 600 14px var(--f-titre); letter-spacing: 1px; }

/* Fiche livre : rangée « Dans la même veine » */
.titres-associes { margin: 64px 0 0; }
.titres-associes h2 { margin-bottom: 16px; font-size: 20px; letter-spacing: 1px; }
.titres-associes .etagere { flex-wrap: nowrap; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.titres-associes .vignette, .titres-associes .vignette img, .titres-associes .vignette .couv-vide { height: 160px; }
.titres-associes .vignette .couv-vide { width: 108px; font-size: 8px; padding: 4px; }
.titres-associes .vignette { font-size: 10px; }

/* Conditions générales de vente : deux colonnes */
.page-carte.cgv { max-width: 928px; }
.cgv-titre { font-weight: 400 !important; font-size: 20px !important; letter-spacing: 6px !important; line-height: 24px !important; margin-bottom: 32px !important; }
.texte-cgv { columns: 2; column-gap: 48px; }
.texte-cgv p { margin: 0 0 24px; break-inside: avoid-column; }
.texte-cgv p:not(:has(.cgv-lettre)) { break-inside: auto; }
.cgv-lettre { font: 700 16px var(--f-titre); letter-spacing: 1px; }
.texte-cgv a { font-weight: 700; }

/* Couvertures en maçonnerie : même largeur, hauteur selon l'image (le script règle la hauteur de chaque case) */
.etagere.is-maconnerie { --mac-gap: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: var(--mac-gap); row-gap: 0; align-items: start; }
.is-maconnerie .vignette { width: 100%; height: auto; }
.is-maconnerie .vignette img, .is-maconnerie .vignette .couv-vide { width: 100%; height: auto; }
.is-maconnerie .vignette .couv-vide { aspect-ratio: 1 / 1.45; }
@media (max-width: 759px) {
    .texte-cgv { columns: 1; }
    .etagere.is-maconnerie { --mac-gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Retours du 6 octobre (3) */
/* « À paraître » : date de parution sous chaque couverture */
.vignette-bloc { display: flex; flex-direction: column; gap: 8px; }
.vignette-legende { margin: 0; font: 600 13px/16px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; color: var(--orange); }
.etagere:not(.is-maconnerie) .vignette-bloc { width: min-content; }
.is-maconnerie .vignette-bloc { width: 100%; }
/* « Dans la même veine » : plus d'air sous le titre */
.titres-associes h2 { margin-bottom: 32px; }
/* Pastille « souscription » (mobile) : plus grande, en bas de la couverture */
@media (max-width: 759px) {
    .livre-souscription .pastille-souscription { top: auto; bottom: -28px; right: -16px; width: 180px; }
}

/* En-têtes des collections, comme le composant Figma « bloc titre collection » */
.entete-page h1 { font-size: 20px; font-weight: 600; letter-spacing: 1px; line-height: 24px; }
.entete-page .entete-texte { margin-top: 8px; }
.entete-page .entete-texte strong, .entete-page .entete-texte b { font-weight: 700; }
.entete-collection .entete-logo { max-width: 100%; max-height: none; height: auto; }
.entete-nom { margin: 0; font: 700 32px/38px var(--f-titre); letter-spacing: 2px; text-transform: uppercase; }
.entete-page.entete-collection { max-width: 936px; }

/* ==========================================================================
   Retours du 7 octobre
   ========================================================================== */
/* Sous-menu « Livres » : rubrique en cours sur fond de fines hachures orange */
.sous-menu .choix.is-actif a, .sous-menu .choix-catalogue.is-actif a {
    background: repeating-linear-gradient(-45deg, var(--orange) 0 1.5px, var(--blanc) 1.5px 6px); color: var(--noir);
}
.sous-menu .choix.is-actif a:hover { background: var(--orange); color: var(--blanc); }
@media (max-width: 759px) {
    .mm-sous-liste .choix.is-actif a, .mm-sous-liste .choix-catalogue.is-actif a,
    .mm-sous-liste .choix-collection.is-actif a, .mm-sous-liste .choix-arbuste.is-actif a {
        background: repeating-linear-gradient(-45deg, var(--blanc) 0 1.5px, transparent 1.5px 6px); color: var(--noir);
    }
}

/* Plus d'air : sous les paragraphes, entre l'intitulé d'un champ et le champ */
.texte p { margin-bottom: 20px; }
.champ-label { margin-bottom: 12px; }

/* Actus : tuiles rangées de gauche à droite (maçonnerie, comme les couvertures) */
.grille-tuiles.is-maconnerie { --mac-gap: 32px; display: grid; columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: var(--mac-gap); row-gap: 0; align-items: start; }
.grille-tuiles.is-maconnerie .tuile { margin-bottom: 0; }
@media (max-width: 959px) { .grille-tuiles.is-maconnerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .grille-tuiles.is-maconnerie { --mac-gap: 24px; grid-template-columns: minmax(0, 1fr); } }

/* Retour aux actus, au-dessus de chaque brève */
.retour-actus { margin: 0 0 16px; font: 600 14px/17px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.retour-actus a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.retour-actus a:hover { color: var(--orange); }
.retour-actus .icon { width: 13px; height: 13px; transform: scaleX(-1); }

/* Pictos des rôles : plus petits sous le nom de l'auteur et dans la liste */
.roles-pictos .icon { width: 22px; height: 22px; }
.index-groupe .picto-role .icon { width: 18px; height: 18px; margin-top: -2px; }

/* « On en parle ! » : citations moins grasses, vidéo à la largeur de la bulle */
.encart-presse blockquote p { font-weight: 400; }
.presse-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--noir); }
.presse-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Pied de page : champ d'inscription un tiers plus long */
.footer-droite { width: 600px; }

/* Bouton « haut de page » plus visible : orange, blanc au survol */
.bouton-up { background: var(--orange); color: var(--noir); }
.bouton-up:hover { background: rgba(255, 255, 255, .95); color: var(--noir); }

/* Réseaux ajoutés dans Personnaliser : icône dessinée dans la couleur du texte */
.icon-rs-perso { display: inline-block; background: currentColor; }
.presse-audio iframe { display: block; width: 100%; border: 0; border-radius: 8px; }

/* Retours du 7 octobre (2) */
/* « Retour aux actus » calé sur le bord gauche du bloc de la brève, flèche un peu remontée */
.retour-actus { max-width: 736px; margin: 16px auto 16px; }
.retour-actus + .actu { margin-top: 0; }
.retour-actus .icon { position: relative; top: -2px; }
/* Pictos des rôles dans la liste des auteurs : un peu plus bas, en face des noms */
.index-groupe .picto-role .icon { margin-top: 0; position: relative; top: 2px; }
/* Pied de page : champ d'inscription de 448 px, icônes des réseaux calées à droite */
.footer-droite { width: 448px; }
.rs-footer { justify-content: flex-end; }
/* Contact : bloc central centré dans la page */
.contact { align-items: center; }
/* Sous-menu : rubrique en cours en gras, lisible sur les hachures */
.sous-menu .choix.is-actif a, .mm-sous-liste .choix.is-actif a { font-weight: 800; }
/* Pictos de la liste des auteurs : centrés sur la hauteur des noms */
.index-groupe .picto-role .icon { top: 0; }
/* Collections : plus d'air entre la présentation et les couvertures */
.entete-page.entete-collection { margin-bottom: 56px; }

/* ---- Retours du 7 octobre (3) : réglages faits dans le guide des styles ---- */
.champ-label { line-height: 20px; }
.credits { line-height: 20px; }
.index-groupe h2 { letter-spacing: 1px; line-height: 30px; }
.entete-page .entete-texte { letter-spacing: .2px; font-size: 16px; line-height: 28px; }
.edition { letter-spacing: 1px; line-height: 31px; }
.nom-auteur { letter-spacing: 1px; }
.tuile-titre { letter-spacing: 1px; }
.titre-page { letter-spacing: 1px; }
/* Ces styles ont une version mobile différente : réglage pour ordinateur seulement */
@media (min-width: 760px) {
    .texte blockquote, .hors-texte { letter-spacing: .5px; font-size: 20px; line-height: 28px; }
    .statut-livre { line-height: 16px; }
    .encart-presse figcaption { line-height: 18px; }
    .li-fleche { line-height: 20px; }
    .titre-livre { line-height: 54px; }
    .titre-livre.is-long { line-height: 48px; }
    .titre-livre.is-tres-long { line-height: 41px; }
    .titre-livre.is-hors-norme { line-height: 34px; }
    .encart-presse blockquote p { line-height: 20px; }
}
/* Contact : bouton « Envoyer le message » centré */
.form-contact > div:has(> .bouton-envoyer) { justify-content: center; }
.form-contact .bouton-envoyer { margin-left: auto; margin-right: auto; }

/* Titre « Le petit cadeau souscriptif… » : la règle « .cadeau p » (texte du cadeau, 28 px) l'emportait sur son interlignage */
.cadeau .cadeau-titre { line-height: 19px; }

/* Lecteurs audio : petite tuile à coins arrondis (blanche sur la fiche livre, gris clair dans les bulles de presse blanches) */
.livre-audio .champ-label { margin-bottom: 12px; }
.lecteur-audio audio { display: block; width: 100%; height: 40px; border-radius: 6px; background: var(--blanc); }
.lecteur-audio audio::-webkit-media-controls-enclosure { border-radius: 6px; background: var(--blanc); }
.lecteur-audio audio::-webkit-media-controls-panel { background: var(--blanc); }
.presse-audio { padding: 8px; background: var(--gris-7); border-radius: 6px; }
.presse-audio iframe { border-radius: 4px; }

/* ---- Retours du 9 octobre : encart prix sous le bouton, infos du livre en colonne de gauche ---- */
.livre-souscription .livre-actions { padding: 12px 0 0; }
.encart-prix { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.encart-prix p { margin: 0; }
.prix-actuel { width: 100%; color: var(--orange); font: 600 40px/48px var(--f-titre); letter-spacing: 2px; text-transform: uppercase; font-feature-settings: "lnum" 1, "pnum" 1; }
.prix-brade { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.encart-prix .statut-livre { font: 600 20px/24px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.prix-brade p, .prix-mention { font: 600 16px/19px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; font-feature-settings: "lnum" 1, "pnum" 1; }
.prix-brade s { text-decoration-thickness: from-font; }
/* souscription : pastille blanche inclinée */
.encart-prix.is-souscription { gap: 13px; padding-top: 14px; }
.prix-pastille { padding: 6px 16px 8px; border-radius: 12px; background: var(--blanc); color: var(--orange); font: 600 40px/48px var(--f-titre); letter-spacing: 2px; text-transform: uppercase; transform: rotate(-6.65deg); font-feature-settings: "lnum" 1, "pnum" 1; }
.livre-couv .livre-caract { gap: 24px; }
.livre-couv .livre-caract .liste-fleches { gap: 12px; }
.livre-caract:empty { display: none; }
@media (max-width: 759px) {
    .prix-actuel, .prix-pastille { font-size: 48px; line-height: 58px; }
    .prix-brade p, .prix-mention, .encart-prix .statut-livre { font-size: 20px; line-height: 24px; }
    .livre-couv .livre-caract .liste-fleches { gap: 16px; }
}

/* ---- Feuilleteur (premières pages en PDF) : double page qui se tourne, mains pour avancer ---- */
.feuilleteur { position: relative; flex: 1; align-self: stretch; display: flex; flex-direction: column; min-height: 0; padding: 0 96px; }
.feuil-scene { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; perspective: 2400px; }
.feuil-livre { position: relative; display: flex; transition: transform .25s ease, opacity .25s ease; }
.feuil-page { position: relative; flex: 1; height: 100%; background: var(--blanc); cursor: pointer; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.feuil-page canvas, .feuil-face canvas { display: block; width: 100%; height: 100%; }
.feuil-page.is-vide { background: none; box-shadow: none; cursor: default; }
.feuil-livre:not(.is-double) .feuil-d { display: none; }
.feuil-livre:not(.is-double) .feuil-g { border-radius: 4px; overflow: hidden; }
/* reliure : ombre au creux de la double page */
.feuil-livre.is-double .feuil-g:not(.is-vide) { border-radius: 4px 0 0 4px; overflow: hidden; }
.feuil-livre.is-double .feuil-d:not(.is-vide) { border-radius: 0 4px 4px 0; overflow: hidden; }
.feuil-livre.is-double .feuil-g::after, .feuil-livre.is-double .feuil-d::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; }
.feuil-livre.is-double .feuil-g::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
.feuil-livre.is-double .feuil-d::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
.feuil-page.is-vide::after { display: none; }
/* feuille qui tourne */
.feuil-feuille { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.45, .05, .25, 1); z-index: 3; pointer-events: none; }
.feuil-feuille.vers-gauche { left: 50%; transform-origin: left center; }
.feuil-feuille.vers-droite { left: 0; transform-origin: right center; }
.feuil-feuille.vers-gauche.is-tourne { transform: rotateY(-180deg); }
.feuil-feuille.vers-droite.is-tourne { transform: rotateY(180deg); }
.feuil-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--blanc); overflow: hidden; }
.feuil-face.is-vide { background: none; }
.feuil-arriere { transform: rotateY(180deg); }
.feuil-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s; }
.vers-gauche .feuil-avant::after { background: linear-gradient(to left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%); }
.vers-droite .feuil-avant::after { background: linear-gradient(to right, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%); }
.is-tourne .feuil-avant::after { opacity: 1; }
/* une page à la fois (mobile) : glissement */
.feuil-livre.glisse-gauche { transform: translateX(-40px); opacity: 0; }
.feuil-livre.glisse-droite { transform: translateX(40px); opacity: 0; }
.feuil-livre.arrive-droite { transition: none; transform: translateX(40px); opacity: 0; }
.feuil-livre.arrive-gauche { transition: none; transform: translateX(-40px); opacity: 0; }
/* mains pour tourner les pages */
.feuil-prec, .feuil-suiv { position: absolute; top: calc(50% - 32px); width: 64px; height: 64px; z-index: 4; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: transform .15s, opacity .2s, background .15s; }
.feuil-prec { left: 8px; }
.feuil-suiv { right: 8px; }
.feuil-prec .icon, .feuil-suiv .icon { width: 40px; height: 40px; }
.feuil-prec:hover:not(:disabled) { transform: translateX(-3px); }
.feuil-suiv:hover:not(:disabled) { transform: translateX(3px); }
.feuil-prec:disabled, .feuil-suiv:disabled { opacity: .25; cursor: default; }
/* pied : numéro de page et curseur */
.feuil-pied { display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 16px; color: var(--blanc); }
.feuil-compteur { min-width: 190px; font: 600 16px/20px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; text-align: right; font-feature-settings: "lnum" 1, "pnum" 1; }
.feuil-curseur { width: min(320px, 40vw); accent-color: var(--orange); cursor: pointer; }
.feuil-attente { position: absolute; inset: 0; display: none; place-items: center; margin: 0; color: var(--blanc); font: 600 16px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.feuilleteur.is-chargement .feuil-attente { display: grid; }
.feuilleteur.is-chargement .feuil-pied, .feuilleteur.is-chargement .feuil-prec, .feuilleteur.is-chargement .feuil-suiv { visibility: hidden; }
@media (max-width: 759px) {
    .feuilleteur { padding: 0; }
    .feuil-prec, .feuil-suiv { top: auto; bottom: 0; width: 56px; height: 56px; }
    .feuil-prec { left: 0; }
    .feuil-suiv { right: 0; }
    .feuil-pied { flex-direction: column; gap: 8px; padding: 12px 64px 4px; min-height: 56px; }
    .feuil-compteur { min-width: 0; text-align: center; }
    .feuil-curseur { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .feuil-feuille, .feuil-livre { transition: none; } }
.visionneuse:has(.feuilleteur) { background: rgba(24, 24, 24, .97); }

/* ---- Retours du 11 octobre (mobile) ---- */
/* Fiche livre : sur mobile, les caractéristiques passent après le texte */
.livre-caract.is-mobile { display: none; }
@media (max-width: 759px) {
    .livre-couv .livre-caract { display: none; }
    .livre-texte .livre-caract.is-mobile { display: flex; flex-direction: column; gap: 24px; }
    .livre-texte .livre-caract.is-mobile .liste-fleches { gap: 16px; }
}
/* Pied de page : la colonne de droite reprend toute la largeur, réseaux centrés comme sur la maquette */
@media (max-width: 759px) {
    .footer-droite { width: 100%; max-width: 100%; }
    .rs-footer { justify-content: space-between; padding: 0 48px; }
    .footer-droite .newsletter, .footer-droite .champ { width: 100%; max-width: 100%; min-width: 0; }
}
/* Menu mobile : « Livres » est un tiroir qui se déplie */
@media (max-width: 759px) {
    .mm-rubrique.mm-livres { border-bottom: 2px solid var(--noir); }
    .mm-deplier { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0; background: none; color: var(--noir); font-family: var(--f-titre); text-transform: uppercase; text-align: left; cursor: pointer; }
    .mm-deplier:hover, .mm-deplier:active { background: var(--orange-actif); }
    .mm-main { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--blanc); color: var(--noir); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); transition: transform .3s cubic-bezier(.2, .8, .2, 1); transform: rotate(-90deg); }
    .mm-main .icon { width: 32px; height: 32px; }
    /* sous-choix sans retrait : le tiroir suffit à les rattacher à « Livres » */
    .mm-sous-liste .choix a { padding-left: 8px; }
    .mm-livres.is-deplie .mm-main { transform: rotate(90deg); }
    .mm-tiroir { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1); }
    .mm-tiroir > .mm-sous-liste { min-height: 0; overflow: hidden; border-bottom: 0; border-top-width: 0; }
    .mm-livres.is-deplie .mm-tiroir { grid-template-rows: 1fr; }
    .mm-livres.is-deplie .mm-tiroir > .mm-sous-liste { border-top-width: 2px; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) { .mm-tiroir, .mm-main { transition: none; } }
/* Sous-menu « Livres » (ordinateur et tiroir mobile) : toutes les mentions en gras */
.sous-menu .choix:not(.choix-arbuste) a, .mm-sous-liste .choix:not(.choix-arbuste) a { font-weight: 800; }

/* ---- Retours du 11 octobre (fiche livre) ---- */
.li-fleche.is-gris { color: var(--gris-60); }
/* bradé : pastille inclinée comme les lots ; « bradé » est un petit bouton vers la braderie */
.encart-prix.is-brade { gap: 10px; }
.encart-prix .tag-braderie { display: inline-flex; padding: 1px 6px 3px; margin: 0 1px; border-radius: 6px; background: var(--orange); color: var(--blanc); font: inherit; letter-spacing: inherit; text-decoration: none; vertical-align: baseline; transition: background .15s, color .15s; }
.encart-prix .tag-braderie:hover { background: var(--noir); color: var(--blanc); }
.encart-prix .tag-braderie:active { background: var(--orange-actif); }
/* paragraphes de l'ancien site restés en <div> */
.texte .block-text { margin: 0 0 20px; }
/* Souscription : fond crème #FFEED9 (bande et trame), cadeau élargi à 288 px sur ordinateur */
.livre-souscription::before { background: #ffeed9; }
@media (min-width: 760px) { .cadeau { width: 288px; } .cadeau-pastille { left: 170px; } }
/* Livres épuisés : couverture grisée + bandeau « épuisé », partout (vignettes, fiche, recherche) */
.is-epuise img, .is-epuise .couv-vide { filter: grayscale(1); opacity: .75; }
.is-epuise .bandeau { filter: none; opacity: 1; }
.resultat-image.is-epuise { position: relative; overflow: hidden; display: block; }
.resultat-image.is-epuise { font-size: 7px; }
/* « Page précédente » en haut des fiches */
.retour-page { max-width: 928px; margin: 0 auto 16px; font: 600 14px/17px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
/* (« Retour » : même colonne de 928 px sur toutes les pages, comme les fiches livres) */
.retour-page a { display: inline-flex; align-items: center; gap: 10px; color: var(--noir); text-decoration: none; }
.retour-page .bouton-rond { width: 36px; height: 36px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.retour-page .bouton-rond .icon { width: 24px; height: 24px; }
.retour-page a:hover { color: var(--orange); }
.retour-page a:hover .bouton-rond { background: var(--orange); color: var(--blanc); }
.retour-page + .livre-souscription { margin-top: 16px; }
@media (max-width: 759px) { .retour-page { padding: 0 var(--gouttiere, 16px); margin-bottom: 12px; } }
/* Feuilleteur : zoom */
.feuil-scene.is-zoom { overflow: auto; align-items: flex-start; justify-content: flex-start; cursor: grab; overscroll-behavior: contain; }
.feuil-scene.is-zoom .feuil-livre { margin: auto; }
.feuil-scene.is-zoom .feuil-page { cursor: grab; }
.feuil-scene.is-saisi, .feuil-scene.is-saisi .feuil-page { cursor: grabbing; }
.feuil-zoom { display: flex; gap: 8px; }
.feuil-zoom .bouton-rond { width: 36px; height: 36px; font: 700 22px/1 var(--f-titre); color: var(--noir); }
.feuil-zoom .bouton-rond:disabled { opacity: .3; cursor: default; }
@media (max-width: 759px) { .feuil-pied { flex-wrap: wrap; } .feuil-zoom { order: 3; } }
/* En-tête (ordinateur) : le rond du logo s'aligne sur le bord gauche de la page, la tronçonneuse en déborde */
@media (min-width: 960px) { .site-header .logo { margin-left: -14px; } }
@media (max-width: 759px) {
    /* sous-choix du tiroir : sur une ligne jusqu'aux petits téléphones (375 px) */
    .mm-sous-liste .choix:not(.choix-arbuste) a { font-size: 18px; letter-spacing: .6px; }
}
.feuilleteur, .feuil-scene, .visionneuse-corps { min-width: 0; } .feuilleteur { max-width: 100%; }
/* Pastilles de prix penchées : plus d'air avant les mentions dessous (frais de port, au lieu de, bradé) */
.encart-prix.is-souscription, .encart-prix.is-brade { gap: 6px; }
.encart-prix .prix-pastille { margin-bottom: 20px; }
/* Couverture introuvable sur le serveur : un carton au titre du livre au lieu du texte de remplacement */
.vignette .couv-vide.is-repli { display: flex; }

/* ---- Retours du 11 octobre (2) ---- */
/* Tiroir mobile : sous-choix sur fond blanc comme le sous-menu ordinateur ; la main reste noire sur rond blanc */
@media (max-width: 759px) {
    .mm-sous-liste .choix-collection a, .mm-sous-liste .choix-arbuste a { background-color: var(--blanc); }
    .mm-sous-liste .choix-collection a { background: linear-gradient(to right, var(--noir) 50%, transparent 0) left bottom / 4px 2px repeat-x, var(--blanc); }
    .mm-main, .mm-deplier:hover .mm-main, .mm-rubrique.is-actif .mm-main { background: var(--blanc); color: var(--noir); }
}
/* « Page précédente » : au survol, la main reste dessinée (fond orange pâle) ; un peu d'air sous le menu quand le bloc est collé au menu (souscription) */
.retour-page a:hover .bouton-rond { background: var(--orange-pale); color: var(--noir); }
.is-souscription .retour-page { margin-top: 16px; }
/* Pastille penchée plus près du bouton « Ajouter au panier » */
.encart-prix.is-souscription { padding-top: 0; margin-top: -8px; }
/* « On en parle… » : plus grand, aligné à gauche sur le contenu de la bulle */
.bulle-presse-titre { width: 164px; margin-left: -2px; }
@media (max-width: 759px) { .bulle-presse-titre { width: 220px; margin-left: 0; } }

/* ---- Retours du 11 octobre (3) ---- */
/* « Retour » : petite flèche + mot, gris 70 ; orange au survol, noir au clic */
.retour-page a { gap: 8px; color: #4d4d4d; font: 600 14px/17px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.retour-page .icon { width: 13px; height: 13px; transform: scaleX(-1); position: relative; top: -1px; }
.retour-page a:hover { color: var(--orange); }
.retour-page a:active { color: var(--noir); }
.is-souscription .retour-page { margin-top: 0; }
/* souscription : la mention est dans le bloc crème, en haut à gauche */
.livre-souscription > .retour-page { position: absolute; top: 12px; left: 36px; margin: 0; z-index: 2; }
@media (max-width: 759px) { .livre-souscription > .retour-page { position: static; width: 100%; padding: 0 0 8px; } }
/* Souscription : bloc cadeau sur fond blanc */
.livre-souscription .cadeau { background: var(--blanc); }
/* Date de parution, sans flèche */
.livre-date { margin: 0; font: 600 16px/20px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; font-feature-settings: "lnum" 1, "pnum" 1; }
.livre-date.is-orange { color: var(--orange); }
@media (max-width: 759px) { .livre-date { font-size: 20px; line-height: 24px; } }
/* Tiroir mobile : « Les bonnes affaires » sur orange clair */
@media (max-width: 759px) { .mm-sous-liste .choix-catalogue a { background: var(--orange-pale); } }
/* Pastille penchée : même espace au-dessus (sous le bouton) qu'en dessous */
.encart-prix.is-souscription { margin-top: 2px; }
/* « On en parle… » : le début du dessin s'aligne sur le bord gauche des guillemets orange
   (le fichier a une marge transparente de 16/128 à gauche) */
.bulle-presse-titre { margin-left: -20px; }
@media (max-width: 759px) { .bulle-presse-titre { margin-left: -28px; } }

/* Bouton Shopify « Momentanément indisponible » (rupture de stock) : grisé, texte plus petit pour tenir dans le bouton, pas d'effet au survol */
.av-shopify .shopify-buy__btn.shopify-buy__btn-disabled,
.av-shopify .shopify-buy__btn.shopify-buy__btn-disabled:hover,
.av-shopify .shopify-buy__btn.shopify-buy__btn-disabled:active {
    background: var(--gris-15) !important; color: #4d4d4d !important; cursor: default;
    font-size: 16px !important; line-height: 20px !important; letter-spacing: 1px; white-space: normal; text-align: center;
}

/* ---- Retours du 11 octobre (4) ---- */
/* Page auteur : « Retour » aligné sur le bord du bloc blanc, comme les actus */

/* Souscription : autant d'air au-dessus qu'en dessous de « Retour » */
@media (min-width: 760px) {
    .livre-souscription:has(> .retour-page) { padding-top: 72px; }
    .livre-souscription > .retour-page { top: 28px; }
}
@media (max-width: 759px) { .livre-souscription > .retour-page { padding: 0; margin-bottom: -40px; } }
/* Lots : étiquette de prix aussi éloignée du bouton que pour un livre bradé (24 px d'écart, comme .livre-actions) */
.lot-visuel .av-shopify + .encart-prix { margin-top: 10px; }
/* Mobile : « Retour » à égale distance du bas du menu (burger) et du début du contenu (≈ 28 px) */
@media (max-width: 759px) {
    .site-main > .retour-page { margin-top: -32px; margin-bottom: 0; }
    .site-main > .retour-page + * { margin-top: 28px !important; }
}

/* ---- Retours du 11 octobre (5) ---- */
/* Fiche livre : sous le bouton, seulement la ligne de prix ; pages, format, ISBN et date dans la colonne de droite, après le texte */
.livre-texte .livre-caract { gap: 24px; }
.livre-texte .livre-caract .liste-fleches { gap: 16px; }
.livre-prix .liste-fleches { margin: 0; }
/* Feuilleteur : en zoom, la double page garde ses proportions (elle ne doit pas rétrécir pour tenir dans la fenêtre) */
.feuil-livre { flex: none; }
/* La maison (maquette 4045:12538) : photo verticale de 208 px en haut, photo de 288 px en bas, sans cadre, 24 px d'air au-dessus et en dessous */
.maison-photo { margin: 24px 0; line-height: 0; }
.maison-photo img { display: block; height: auto; }
.maison-photo-haut img { width: 368px; max-width: 100%; }
.maison-photo-bas img { width: 288px; max-width: 100%; }
.texte-maison img { max-width: 100%; height: auto; }
.texte-maison > p:last-child { margin-bottom: 0; }
/* La maison : signature de la citation (« un Suisse célèbre ») plus petite */
.texte.texte-maison blockquote cite { font-size: 12px; line-height: 15px; letter-spacing: 1px; }
.maison-photo-haut { margin: 24px 0 0; }
.maison-photo-bas { margin: 14px 0 0; }
.texte-maison > :first-child { margin-top: 24px; }
/* Fiche livre « normale » : prix seul, centré sous le bouton, un peu plus grand (orange si en vente, gris si épuisé) */
.livre-prix { margin: 0; text-align: center; font: 600 28px/34px var(--f-titre); letter-spacing: 2px; text-transform: uppercase; font-feature-settings: "lnum" 1, "pnum" 1; }
.livre-prix.is-orange { color: var(--orange); }
.livre-prix.is-gris { color: var(--gris-60); }
/* Couverture plus large que haute (cas rare) : le bandeau remonte au milieu pour ne pas être coupé */
.is-couv-basse .bandeau-promo, .is-couv-basse .bandeau-out { top: 50%; transform: translateY(-50%) rotate(-5.3deg); }
.texte.texte-maison blockquote .citation-signature, .texte.texte-maison :is(h2, h3, h4) .citation-signature { display: block; margin-top: 12px; font-size: 12px; line-height: 15px; letter-spacing: 1px; text-align: right; }

/* ---- Retours du 12 octobre ---- */
@media (max-width: 759px) {
    /* Fiche livre : un peu d'air entre le titre et le sous-titre */
    .livre-entete .edition { margin-top: 16px; }
    /* Listes à flèches : la flèche remonte sur le milieu des capitales */
    .li-fleche .icon { margin-top: -1px; }
}
/* Revue de presse : extrait sonore ([audio …] dans l'article) */
.presse-audio .lecteur-audio audio { height: 40px; }
/* « Retour » : la flèche remonte d’1 px, sur le milieu des capitales */
.retour-page .icon { top: -2px; }
/* Prix « normal » : sous le bouton d'achat, aligné à gauche, désigné par la main */
.livre-prix { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: -10px; }
.livre-prix .icon { width: 32px; height: 32px; flex: none; color: var(--noir); transform: scaleX(-1); position: relative; top: 3px; }
/* Livre plus en vente (épuisé, en réimpression, indisponible) : le bouton d'achat reste, grisé, comme le bouton Shopify en rupture */
.bouton-l.bouton-desactive, .bouton-l.bouton-desactive:hover, .bouton-l.bouton-desactive:active { width: 100%; border: 0; background: var(--gris-15); color: #4d4d4d; cursor: default; box-shadow: none; }

/* ==========================================================================
   Étiquettes de prix (Figma « etiquette prix » 4205:23410) — normal, MEA (souscription, lots), solde, off
   ========================================================================== */
.etiquette { --s: .75; --fond: #fac300; --trait: #000; --texte: #000; --trou: #f2f2f2; --ombre: #000;
    position: relative; display: inline-block; isolation: isolate; line-height: 0; transform: rotate(-10deg); }
/* orange : prix normal et mise en avant (souscription) ; jaune : soldes (livres bradés, lots) */
.etiquette-normal, .etiquette-mea { --fond: var(--orange); --texte: #fff; --trou: #ffe6d9; }
.etiquette-mea { --s: .9155; }
.etiquette-off, .et-ancien { --fond: #e3e3e3; --trait: #9d9d9c; --texte: #9d9d9c; --trou: #fff; --ombre: #d0d0d0; }
.et-corps { position: relative; display: inline-flex; }
.et-forme { display: inline-flex; filter: drop-shadow(calc(6px * var(--s)) calc(6px * var(--s)) 0 var(--ombre)); }
.et-cartouche { display: flex; align-items: center; height: calc(54.07px * var(--s)); box-sizing: border-box;
    padding: calc(2px * var(--s)) calc(12px * var(--s)) 0 calc(17.14px * var(--s)); /* texte un peu plus bas que sur la maquette */
    border: solid var(--trait); border-width: calc(3.4px * var(--s)) 0 calc(3.5px * var(--s)) calc(3.77px * var(--s));
    background: var(--fond); color: var(--texte); font: 700 calc(36px * var(--s))/1 var(--f-titre); letter-spacing: 0; white-space: nowrap;
    font-feature-settings: "lnum" 1, "pnum" 1; }
.etiquette-mea .et-cartouche { font-size: 36px; padding-left: calc(17.14px * var(--s) - 2px); padding-right: calc(12px * var(--s) + 2px); }
.et-bout { display: block; flex: none; width: calc(17.49px * var(--s)); height: calc(54.06px * var(--s)); overflow: visible; }
.et-ficelle { position: absolute; left: calc(100% + 2.49px * var(--s)); top: calc(6.57px * var(--s)); width: calc(73.73px * var(--s)); height: calc(29.04px * var(--s));
    transform-origin: 0 0; transform: rotate(10.02deg); overflow: visible; }
.etiquette .et-f { fill: var(--fond); } .etiquette .et-o { fill: var(--trou); } .etiquette .et-t { fill: var(--trait); }
/* solde : l'étiquette grise de l'ancien prix, derrière et un peu moins penchée */
.et-ancien { position: absolute; right: calc(5.64px * var(--s)); top: calc(-6.84px * var(--s)); transform-origin: 100% 0; transform: rotate(4.43deg); z-index: -1; }
.et-ancien .et-cartouche { text-decoration: none; }

/* Sous le bouton d'achat : étiquette calée à droite, mention(s) centrée(s) dessous */
.livre-prix-bloc { display: flex; flex-direction: column; align-items: stretch; }
.livre-prix-etiquette { display: flex; justify-content: flex-end; margin: 0; padding: 16px 54px 19px 0; }
.livre-prix-etiquette:has(.etiquette-solde) { padding-top: 28px; }
.livre-prix-etiquette:has(.etiquette-mea) { padding-right: 66px; }
.livre-prix-bloc .prix-mentions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; text-align: right; } /* mentions ferrées à droite, sous l'étiquette */
.livre-prix-bloc.is-sous .prix-mentions { margin-top: 24px; }
.livre-prix-bloc .prix-mention { margin: 0; font: 600 16px/19px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.livre-prix-bloc .prix-mention s { text-decoration-thickness: 2px; }
.livre-prix-bloc .prix-mention a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.livre-prix-bloc .prix-mention a:hover { color: var(--orange); }
.livre-prix-bloc .livre-prix-etiquette:has(.etiquette-solde) { padding-top: 19px; }
.livre-prix-bloc.is-sous .livre-prix-etiquette { padding-top: 8px; margin-top: -1px; }
.livre-prix-bloc.is-sous .prix-mentions { margin-top: 15px; }
.livre-prix-bloc.is-lot .livre-prix-etiquette { padding-top: 29px; }
.lot-visuel > .livre-prix-bloc { align-self: stretch; width: 100%; }
@media (max-width: 759px) { .livre-couv > .livre-prix-bloc:not(.is-sous) { margin-top: -8px; } }

/* ---- Retours du 14 octobre ---- */
/* Menu Livres : « Arbuste véhément » souligné en pointillés comme les collections */
.choix-arbuste a { border-bottom-style: dashed; }
@media (max-width: 759px) {
    .mm-sous-liste .choix-arbuste a { background: linear-gradient(to right, var(--noir) 50%, transparent 0) left bottom / 4px 2px repeat-x, var(--blanc); }
    .mm-sous-liste .choix-arbuste a:hover, .mm-sous-liste .choix-arbuste a:active { background: linear-gradient(to right, var(--noir) 50%, transparent 0) left bottom / 4px 2px repeat-x, var(--orange-actif); }
}
/* Braderie : les lots à part, sous les livres soldés, avec une tétière */
.lots-bloc { margin-top: 64px; padding-top: 40px; border-top: 3px solid var(--noir); }
.lots-tetiere { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; text-align: center; }
.lots-tetiere h2 { margin: 0; font: 600 32px/38px var(--f-titre); letter-spacing: 2px; text-transform: uppercase; }
.lots-tetiere p { margin: 0; font: 600 16px/19px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 759px) { .lots-bloc { margin-top: 48px; padding-top: 32px; } .lots-tetiere h2 { font-size: 24px; line-height: 29px; } }
/* Étiquette solde : l'étiquette grise de l'ancien prix reste calée derrière la jaune (même largeur), elle ne dépasse qu'en haut, comme sur la maquette */
.et-ancien { left: calc(12px * var(--s)); right: calc(5.64px * var(--s)); }
.et-ancien .et-forme { width: 100%; }
.et-ancien .et-cartouche { flex: 1; min-width: 0; overflow: hidden; }
.livre-prix-bloc .prix-mention .is-orange, .livre-prix-bloc .prix-mention .is-orange a { color: var(--orange); }
.livre-prix-bloc .prix-mention .is-orange a:hover { color: var(--noir); }
/* Souscription : fond jaune #FFD335, prolongé par la trame de points (assets/img/trame-souscription.svg, même jaune) */
.livre-souscription::before { background: #ffd335; }
/* Braderie : visuel « Et stères de papier… » au-dessus des lots (remplace la tétière texte) */
.lots-bloc { margin-top: 64px; padding-top: 0; border-top: 0; }
.lots-banniere img { display: block; width: 100%; height: auto; }
.lots-texte { max-width: 608px; margin: 24px auto 0; text-align: center; font: 400 16px/26px var(--f-texte, Georgia, serif); }
.lots-texte p { margin: 0 0 8px; }
.lots-bloc .lots { margin-top: 32px; }
@media (max-width: 759px) { .lots-bloc { margin-top: 48px; } }
.lots-banniere { margin: 0 -40px; }
@media (max-width: 759px) { .lots-banniere { margin: 0 -16px; } }
/* Étiquette solde (maquette 4210:19853) : l'étiquette grise dépasse en haut à gauche, un peu moins penchée, sans ficelle */
.et-ancien { left: calc(-15.92px * var(--s)); right: auto; top: calc(-28.42px * var(--s)); transform-origin: 0 0; transform: rotate(3.17deg); }
.et-ancien .et-forme { width: auto; }
.et-ancien .et-cartouche { flex: none; overflow: visible; }
.et-ancien .et-ficelle { display: none; }


/* ==========================================================================
   Brèves (maquette Figma 288:6032) : lien « Retour à la page actus » au-dessus de la fiche,
   flèches « précédente / suivante » sur toute la largeur de la fiche
   ========================================================================== */
.retour-breve { margin: 0 0 8px; }
.retour-breve a { display: inline-flex; align-items: center; gap: 16px; min-height: 64px; padding-right: 16px; color: var(--noir); text-decoration: none;
    font: 600 14px/19px var(--f-titre); letter-spacing: 1px; text-transform: uppercase; }
.bouton-rond-nu { background: transparent; width: 64px; height: 64px; }
.bouton-rond-nu .icon { width: 42px; height: 42px; }
.retour-breve a:hover { color: var(--orange); }
.retour-breve a:hover .bouton-rond-nu { background: var(--orange-pale); }
.retour-breve a:active .bouton-rond-nu { background: var(--orange-actif); }
.nav-actus { max-width: none; margin: 24px 0 0; gap: 32px; }
.nav-actus a { gap: 32px; }
.nav-actus .bouton-rond { width: 64px; height: 64px; }
.nav-actus .bouton-rond .icon { width: 42px; height: 42px; }
@media (max-width: 759px) {
    .retour-breve { margin-bottom: 0; }
    .retour-breve a { min-height: 56px; }
    .nav-actus { margin-top: 16px; }
    .nav-actus .bouton-rond { width: 56px; height: 56px; }
}

/* Crédits : mention plus discrète */
.credits { font-size: 12px; line-height: 16px; letter-spacing: .5px; }

/* Menu déroulant : décalé sous le filet noir du menu, et filet plein sous la dernière rubrique */
.sous-menu { top: calc(100% + 2px); }
.sous-menu .choix:last-child a { border-bottom-style: solid; }

/* Photos des actus : mêmes effets que les couvertures de livres (atténuées au survol, cadre orange au clic) */
.tuile-image, .actu-image a { transition: opacity .15s; }
.tuile:hover .tuile-image img { transform: none; }
.tuile-image:hover, .tuile:hover .tuile-image, .actu-image a:hover { opacity: .69; }
.actu-image a:active { opacity: 1; outline: 4px solid var(--orange-actif); outline-offset: -4px; }

/* Brèves : fiche, lien « retour » et flèches sur la même largeur (832 px, maquette Figma 288:6032) */
.retour-breve, .actu, .nav-actus { max-width: 832px; margin-left: auto; margin-right: auto; }
.actu { padding: 48px; margin-top: 0; }
.actu-haut { grid-template-columns: 368px 1fr; gap: 48px; }
.actu-image { aspect-ratio: 368 / 319; }
@media (max-width: 759px) {
    .actu { padding: 24px 16px; }
    .actu-haut { grid-template-columns: 1fr; gap: 24px; }
}

/* « indisponible » : mot plus long qu'« épuisé », le bandeau est réduit pour tenir sur la couverture */
.bandeau-out.bandeau-indispo { zoom: .58; letter-spacing: .5px; }
.texte.texte-maison :is(h2, h3, h4) .citation-signature { font-weight: 400; }


/* Citations « hors-texte » (maquette Figma 4089:43000) : filet orange de 4 px, Merriweather gras italique, 24/28 (mobile 32/40) */
.texte blockquote, .hors-texte {
    margin: 24px 0; padding: 0 10px 0 28px; border-left: 4px solid var(--orange); max-width: none;
    font: italic 700 24px/28px var(--f-texte); letter-spacing: 0; text-transform: none;
}
.texte blockquote p { margin: 0; font: inherit; letter-spacing: inherit; }
.texte blockquote p + p { margin-top: 12px; }
@media (max-width: 759px) {
    .texte blockquote, .hors-texte { font-size: 32px; line-height: 40px; max-width: none; }
}