/* Entre Deux Livres — feuille de style unique.
   Direction artistique « veillée » : une ruelle miniature éclairée la nuit entre deux livres.
   Bleu nuit d'encre, lumière de lampe ambrée, papier crème, reliure bordeaux. Titres IM Fell English
   (caractère de livre ancien), texte Work Sans. Vitrines en arche (fenêtres de boutique miniature),
   catégories en tranches de livres sur une étagère. Mobile d'abord. */
@font-face { font-family: 'IM Fell English'; src: url('/assets/fonts/fell.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('/assets/fonts/fell-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/worksans.woff2') format('woff2'); font-weight: 300 600; font-display: swap; }

:root {
  --paper: #F5EEDF; --paper-2: #EDE3CF; --blanc: #FBF7EE; --creme: #EADFC8;
  --ink: #221C17; --ink-2: #3D342B; --muted: #6E6253; --line: #DDD1BA; --line-2: #C7B89D;
  --nuit: #121628; --nuit-2: #1B2140; --nuit-3: #2A3159;
  --accent: #7E2B26; --accent-2: #9C3A33; --accent-clair: #EBD3C8;
  --lampe: #E9A548; --lampe-clair: #FFD892; --lueur: rgba(255, 196, 102, .38);
  --serif: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --sans: 'Work Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --rayon: 6px; --rayon-petit: 4px; --arche: 999px 999px var(--rayon) var(--rayon);
  --page: 1320px; --gouttiere: 16px; --rythme: 64px;
  --etoiles: radial-gradient(1px 1px at 12% 22%, rgba(255,230,180,.7) 50%, transparent 52%), radial-gradient(1px 1px at 68% 14%, rgba(255,230,180,.55) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 84% 62%, rgba(255,230,180,.5) 50%, transparent 52%), radial-gradient(1px 1px at 32% 78%, rgba(255,230,180,.45) 50%, transparent 52%), radial-gradient(1px 1px at 52% 42%, rgba(255,230,180,.35) 50%, transparent 52%);
  color-scheme: light;
}
@media (min-width: 750px) { :root { --gouttiere: 32px; --rythme: 96px; } }
@media (min-width: 1100px) { :root { --gouttiere: 48px; --rythme: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.65 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: 0; margin: 0 0 .55em; text-wrap: balance; }
h1 { font-size: clamp(32px, 5.6vw, 58px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 22px); }
h1 em, h2 em { font-style: italic; color: var(--accent); }
.section--encre h1 em, .section--encre h2 em, .hero h1 em { color: var(--lampe-clair); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.visually-hidden:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.page-width { max-width: var(--page); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: var(--rythme) 0; }
.section--alt { background: var(--paper-2); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 100%; }
.section--encre { background: var(--etoiles), radial-gradient(60% 80% at 80% 0%, var(--nuit-3), transparent 70%), var(--nuit); color: var(--paper); }
.section--encre .caption { color: var(--lampe); }
.section--encre .caption::before { background: var(--lampe); }
.caption { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.caption::before { content: ''; width: 18px; height: 1px; background: var(--lampe); }
.caption--nu::before { display: none; }
.link { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-clair); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: var(--accent); }
.muted { color: var(--muted); }

/* Boutons : pilules */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 1px solid var(--accent); border-radius: var(--rayon); background: var(--accent); color: #FFF6E6; font: 500 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.button:hover { background: var(--nuit); border-color: var(--nuit); }
.button:active { transform: translateY(1px); }
.button--secondaire { background: transparent; color: var(--accent); }
.button--secondaire:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.button--clair { background: var(--lampe); color: var(--nuit); border-color: var(--lampe); box-shadow: 0 0 28px -4px var(--lueur); }
.button--clair:hover { background: var(--lampe-clair); border-color: var(--lampe-clair); color: var(--nuit); }
.button--petit { min-height: 38px; padding: 0 16px; font-size: 13px; }
.button--full-width { width: 100%; }
.button[disabled], .button[aria-busy="true"] { opacity: .6; cursor: progress; }
.fleche { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--sans); color: var(--accent); padding: 8px 0; }
.fleche::after { content: '→'; transition: transform .2s; }
.fleche:hover::after { transform: translateX(4px); }

/* Bandeau et en-tête */
.announcement-bar { background: var(--nuit); color: var(--lampe-clair); border-bottom: 1px solid rgba(233,165,72,.25); letter-spacing: .04em; font: 400 13px/1.4 var(--sans); text-align: center; padding: 9px var(--gouttiere); }
.header-wrapper { position: sticky; top: 0; z-index: 30; background: rgba(245, 238, 223, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--paper), 0 2px 0 var(--line); }
.header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 66px; }
.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo span { font: 400 25px/1 var(--serif); white-space: nowrap; color: var(--ink); }
.logo span i { font-style: italic; color: var(--accent); }
.logo small { font: 500 9px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.header__nav { display: none; }
.header__nav ul { list-style: none; display: flex; justify-content: center; gap: 28px; margin: 0; padding: 0; }
.header__item { position: static; }
.header__menu-item { display: inline-block; padding: 23px 0; font-size: 15px; position: relative; }
.header__menu-item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 16px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s; }
.header__menu-item:hover::after, .header__menu-item[aria-current="true"]::after { transform: scaleX(1); }
.header__icons { display: flex; align-items: center; gap: 2px; }
.header__icon { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 42px; height: 42px; border-radius: 50%; font-size: 12px; transition: background .2s; }
.header__icon:hover { background: var(--paper-2); }
.header__icon svg { width: 21px; height: 21px; }
[data-cart-count]:not(:empty), [data-wish-count]:not(:empty) { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -36px rgba(18, 22, 40, .45); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.header__item:hover .mega, .header__item:focus-within .mega { visibility: visible; opacity: 1; transform: none; }
.mega__in { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 32px; padding-top: 34px; padding-bottom: 40px; }
.mega__title { display: block; font: 400 21px/1.2 var(--serif); margin-bottom: 12px; }
.mega ul { list-style: none; display: block; padding: 0; margin: 0; }
.mega li a { display: block; padding: 4px 0; color: var(--muted); font-size: 15px; }
.mega li a:hover { color: var(--accent); }
.mega__visuel img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--rayon); }
.mega__visuel span { display: block; margin-top: 10px; font: 400 17px/1.3 var(--serif); }
.menu-drawer-container > summary { list-style: none; cursor: pointer; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; }
.menu-drawer-container > summary::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 1.6px; border-radius: 2px; background: var(--ink); position: relative; content: ''; }
.menu-icon::before { position: absolute; top: -6px; } .menu-icon::after { position: absolute; top: 6px; }
.menu-drawer { position: fixed; inset: 0 auto 0 0; width: min(88vw, 380px); background: var(--paper); z-index: 50; overflow-y: auto; padding: 72px 24px 40px; }
.menu-drawer-container[open] > summary { position: fixed; top: 12px; left: min(calc(88vw - 54px), 326px); z-index: 51; }
.menu-drawer-container[open] .menu-icon { background: transparent; }
.menu-drawer-container[open] .menu-icon::before { top: 0; transform: rotate(45deg); } .menu-drawer-container[open] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.menu-drawer-container[open]::before { content: ''; position: fixed; inset: 0; background: rgba(18, 22, 40, .4); z-index: 49; }
.menu-drawer a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.menu-drawer__group > summary { list-style: none; cursor: pointer; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 22px/1.3 var(--serif); display: flex; justify-content: space-between; }
.menu-drawer__group > summary::after { content: '+'; font-family: var(--sans); color: var(--accent); }
.menu-drawer__group[open] > summary::after { content: '−'; }
.menu-drawer__sub { padding: 4px 0 14px 12px; }
.menu-drawer__sub a { border: 0; padding: 7px 0; color: var(--ink-2); }
@media (min-width: 1100px) {
  .header { gap: 32px; }
  .header__nav { display: block; }
  .menu-drawer-container { display: none; }
}
@media (max-width: 1099px) {
  .header { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; }
  .logo { justify-self: center; align-items: center; min-width: 0; }
  .logo span { font-size: 20px; }
}
@media (max-width: 480px) {
  .header__icons { gap: 0; }
  .header__icon { min-width: 36px; }
  .logo span { font-size: 17px; }
  .logo small { font-size: 8px; letter-spacing: .2em; }
  .announcement-bar { font-size: 12px; }
}
@media (max-width: 340px) { .logo small { display: none; } .logo span { font-size: 15px; } }

/* Fil d'Ariane */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 22px 0 0; font-size: 13px; color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { color: var(--line-2); }

/* Accueil */
.hero { display: grid; gap: 28px; padding: 28px 0 var(--rythme); }
.hero__texte { align-self: center; }
.hero__texte h1 { font-size: clamp(38px, 7vw, 76px); line-height: 1.02; margin-bottom: 22px; }
.hero__texte p { color: var(--ink-2); max-width: 44ch; font-size: 18px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.hero__media { position: relative; display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.hero__media img { width: 100%; object-fit: cover; border-radius: var(--rayon); }
.hero__media .hero__grand { grid-row: span 2; height: 100%; aspect-ratio: 4 / 5; }
.hero__media .hero__petit { aspect-ratio: 1; height: auto; align-self: center; border-radius: 50%; box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--lampe-clair); }
.hero__legende { position: absolute; left: 14px; bottom: 14px; background: var(--paper); border-radius: 999px; padding: 9px 16px; font: 400 15px/1.2 var(--serif); box-shadow: 0 8px 24px -14px rgba(18, 22, 40, .5); }
.hero__legende small { font: 400 13px/1 var(--sans); color: var(--accent); margin-left: 8px; }
.hero__or { display: block; width: 72px; height: 2px; background: var(--lampe); border-radius: 2px; margin-bottom: 26px; }
@media (min-width: 900px) { .hero { grid-template-columns: 5fr 6fr; gap: 64px; padding-top: 48px; } }
.ronds { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.ronds::-webkit-scrollbar { display: none; }
.ronds a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.ronds img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: var(--blanc); box-shadow: 0 0 0 1px var(--line), 0 0 0 5px var(--paper), 0 0 0 6px transparent; transition: box-shadow .25s; }
.ronds a:hover img { box-shadow: 0 0 0 1px var(--line), 0 0 0 5px var(--paper), 0 0 0 6px var(--lampe); }
.ronds strong { font: 400 16px/1.2 var(--serif); }
.ronds small { font-size: 12px; color: var(--muted); margin-top: -6px; }
@media (min-width: 900px) { .ronds { grid-auto-flow: row; grid-template-columns: repeat(8, 1fr); grid-auto-columns: auto; gap: 24px; } .ronds img { width: 100%; height: auto; aspect-ratio: 1; } }
.univers { display: grid; gap: 14px; }
.univers a { position: relative; display: block; overflow: hidden; border-radius: var(--rayon); min-height: 340px; background: var(--ink); color: #fff; }
.univers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.univers a:hover img { transform: scale(1.04); }
.univers a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 22, 40, 0) 35%, rgba(18, 22, 40, .82)); }
.univers div { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; }
.univers h3 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 6px; color: #fff; }
.univers p { margin: 0; color: #E3E8F1; font-size: 15px; max-width: 40ch; }
.univers .fleche { color: var(--lampe-clair); margin-top: 10px; }
@media (min-width: 750px) { .univers { grid-template-columns: 1fr 1fr; } .univers a { min-height: 460px; } }
.entete-section { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 36px; }
.entete-section h2 { margin: 0; }
.entete-section p { margin: 8px 0 0; color: var(--muted); max-width: 52ch; }
.pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pieces a { display: flex; flex-direction: column; height: 100%; padding: 14px 14px 18px; background: var(--blanc); border-radius: var(--rayon); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.pieces a:hover { border-color: var(--accent-clair); transform: translateY(-2px); }
.pieces img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 14px; border-radius: 50%; }
.pieces strong { font: 400 19px/1.25 var(--serif); text-align: center; }
.pieces small { color: var(--muted); font-size: 12px; margin-top: 4px; text-align: center; }
@media (min-width: 750px) { .pieces { grid-template-columns: repeat(3, 1fr); gap: 20px; } .pieces a { padding: 22px; } }
@media (min-width: 1100px) { .pieces { grid-template-columns: repeat(4, 1fr); } }
.principe { display: grid; gap: 36px; align-items: center; }
.principe__kanji { font: 300 clamp(120px, 18vw, 230px)/1 var(--serif); color: var(--lampe-clair); }
.principe__texte { max-width: 62ch; }
.principe__texte p { color: #E6DCC8; font-size: 17px; }
.principe ul { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.principe li { border-top: 1px solid rgba(233, 165, 72, .35); padding-top: 16px; }
.principe li strong { display: block; font: 400 21px/1.3 var(--serif); color: #fff; margin-bottom: 4px; }
.principe li span { color: #CFC6B4; font-size: 14px; }
@media (min-width: 900px) { .principe { grid-template-columns: 1fr 2fr; gap: 72px; } .principe ul { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.rail { scroll-padding-inline: var(--gouttiere); display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gouttiere) 12px; list-style: none; margin: 0; scrollbar-width: thin; }
.rail > li { scroll-snap-align: start; }
@media (min-width: 750px) { .rail { grid-auto-columns: 34%; } }
@media (min-width: 1100px) { .rail { grid-auto-columns: calc((var(--page) - 2 * var(--gouttiere) - 48px) / 4); padding-left: max(var(--gouttiere), calc((100vw - var(--page)) / 2 + var(--gouttiere))); scroll-padding-inline: max(var(--gouttiere), calc((100vw - var(--page)) / 2 + var(--gouttiere))); } }
.atouts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.atouts div { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--blanc); border: 1px solid var(--line); border-radius: var(--rayon); }
.atouts div::before { content: ''; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent); box-shadow: inset 0 0 0 5px var(--blanc), inset 0 0 0 20px var(--accent-clair); margin-bottom: 8px; }
.atouts strong { font: 400 19px/1.25 var(--serif); }
.atouts span { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) { .atouts { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* Cartes produit et grilles */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
@media (min-width: 750px) { .grid--3-col, .grid--4-col, .grid--4 { grid-template-columns: repeat(3, 1fr); gap: 44px 22px; } }
@media (min-width: 1100px) { .grid--4-col, .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.grid > li, .rail > li { position: relative; }
.card-wrapper { display: block; }
.card__media { position: relative; aspect-ratio: 4 / 5; background: var(--nuit); overflow: hidden; margin-bottom: 14px; border-radius: var(--arche); box-shadow: 0 0 0 1px var(--line-2), 0 0 0 5px var(--blanc), 0 0 0 6px var(--line); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .4s; }
.card__media img + img { position: absolute; inset: 0; opacity: 0; }
.card-wrapper:hover .card__media img { transform: scale(1.03); }
.card-wrapper:hover .card__media img + img { opacity: 1; }
.card__matiere { display: block; font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; text-align: center; }
.card__heading { font: 400 18px/1.25 var(--serif); margin: 0 0 6px; text-align: center; }
@media (min-width: 750px) { .card__heading { font-size: 20px; } }
.card-wrapper .price { text-align: center; }
.price { font-size: 15px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.price s { color: var(--muted); margin-left: 6px; font-weight: 400; }
.wish { position: absolute; top: 18%; right: 8px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.wish svg { width: 18px; height: 18px; }
.wish[aria-pressed="true"] svg path { fill: var(--accent); stroke: var(--accent); }
.product__title .wish { position: static; background: var(--blanc); border: 1px solid var(--line); flex: none; }

/* Collections */
.collection-hero { padding: 26px 0 30px; max-width: 780px; }
.collection-hero h1 { margin-bottom: 14px; }
.collection-hero__description { color: var(--ink-2); font-size: 17px; margin: 0; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; background: var(--blanc); transition: border-color .2s, background .2s, color .2s; }
.chips a:hover, .chips a[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.facets { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.tri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 0 0 26px; }
.tri__filtres { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.tri__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tri__groupe > span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.tri__groupe button { border: 1px solid var(--line-2); border-radius: 999px; background: var(--blanc); padding: 7px 14px; font-size: 13px; cursor: pointer; }
.tri__groupe button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.tri__ordre { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.tri__ordre select { border: 1px solid var(--line-2); border-radius: 999px; background: var(--blanc); padding: 8px 14px; color: var(--ink); }
.tri__vide, .tri__plus { text-align: center; margin-top: 32px; }
.pagination { display: flex; justify-content: center; gap: 6px; margin: 56px 0 0; }
.pagination a, .pagination span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; font-size: 14px; background: var(--blanc); }
.pagination span[aria-current] { background: var(--accent); color: #fff; border-color: var(--accent); }
.essentiel { border: 1px solid var(--line); border-radius: var(--rayon); background: var(--blanc); padding: 24px; margin-bottom: 48px; }
.essentiel dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.essentiel dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.essentiel dl div:last-child { border-bottom: 0; }
.essentiel dt { color: var(--muted); } .essentiel dd { margin: 0; text-align: right; }
.colonnes { display: grid; gap: 48px; }
@media (min-width: 1000px) { .colonnes { grid-template-columns: 1fr 340px; gap: 80px; align-items: start; } .colonnes > aside { position: sticky; top: 96px; } }

/* Texte riche */
.rte { max-width: 72ch; }
.rte h2 { margin-top: 1.8em; font-size: clamp(24px, 3vw, 32px); }
.rte h2:first-child { margin-top: 0; }
.rte h3 { margin-top: 1.6em; }
.rte ul, .rte ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.rte li { margin-bottom: .45em; }
.rte li::marker { color: var(--lampe); }
.rte a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-clair); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rte a:hover { text-decoration-color: var(--accent); }
.rte table { width: 100%; border-collapse: collapse; margin: 1.4em 0 2em; font-size: 14px; display: block; overflow-x: auto; }
.rte th, .rte td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rte thead th { font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border-bottom: 2px solid var(--accent); }
.rte strong { font-weight: 500; }
.rte blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--lampe); font-family: var(--serif); font-size: 21px; font-style: italic; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.accordion { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 400 19px/1.35 var(--serif); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-grid; place-items: center; font: 400 16px/1 var(--sans); color: var(--accent); }
.accordion[open] summary::after { content: '−'; background: var(--accent); color: #fff; border-color: var(--accent); }
.accordion__content { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; }

/* Fiche produit */
.product { display: grid; gap: 28px; padding: 18px 0 var(--rythme); }
@media (min-width: 1000px) { .product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.galerie { position: relative; min-width: 0; }
.product__media-list { list-style: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.product__media-list::-webkit-scrollbar { display: none; }
.product__media-item { scroll-snap-align: center; background: var(--blanc); }
.product__media-item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--nuit); }
.galerie__points { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.galerie__points i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.galerie__points i.is-active { background: var(--accent); }
@media (min-width: 1000px) {
  .product__media-list { margin: 0; grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; }
  .product__media-item { border-radius: var(--rayon); overflow: hidden; }
  .product__media-item:first-child { grid-column: 1 / -1; }
  .galerie__points { display: none; }
}
.product__info-container { min-width: 0; }
@media (min-width: 1000px) { .product__info-container { position: sticky; top: 96px; } }
.product__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.product__title h1 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 12px; }
.product .price { font-size: 24px; font-weight: 500; }
.product__tax { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.product-form { margin: 24px 0 0; display: grid; gap: 18px; }
.product-form__input { border: 0; margin: 0; padding: 0; }
.product-form__input legend { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 10px; }
.product-form__input input { position: absolute; opacity: 0; pointer-events: none; }
.product-form__input label { display: inline-block; margin: 0 6px 8px 0; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; cursor: pointer; background: var(--blanc); }
.product-form__input input:checked + label { border-color: var(--accent); background: var(--accent); color: #fff; }
.product-form__input input:focus-visible + label { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; height: 50px; width: max-content; background: var(--blanc); }
.quantity button { width: 44px; height: 100%; border: 0; background: transparent; cursor: pointer; font-size: 17px; color: var(--accent); }
.quantity input { width: 40px; text-align: center; border: 0; background: transparent; -moz-appearance: textfield; }
.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; }
.product-form__ligne { display: flex; gap: 10px; }
.product-form__ligne .button { flex: 1; }
.product__eta { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.product__quote { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent-clair); }
.product__reassurance { list-style: none; margin: 26px 0 0; padding: 18px 20px; display: grid; gap: 10px; background: var(--paper-2); border-radius: var(--rayon); }
.product__reassurance li { display: flex; gap: 12px; font-size: 14px; }
.product__reassurance li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--lampe); }
.product__facts { margin: 26px 0 0; }
.product__facts div { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.product__facts dt { color: var(--muted); } .product__facts dd { margin: 0; }
.produit-texte { display: grid; gap: 48px; }
@media (min-width: 1000px) { .produit-texte { grid-template-columns: 7fr 5fr; gap: 72px; } }
.pierre-note { border-radius: var(--rayon); padding: 24px; background: var(--blanc); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.pierre-note h2 { font-size: 22px; }
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gouttiere); background: var(--paper); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s; }
.sticky-atc.is-visible { transform: none; }
.sticky-atc .button { min-height: 44px; }
@media (min-width: 1000px) { .sticky-atc { display: none; } }
body.sticky-atc-on .chat { bottom: 74px; }
.at-stories { display: none; }

/* Panier et tiroir */
.cart-drawer { position: fixed; inset: 0; z-index: 60; }
.cart-drawer[hidden] { display: none; }
.cart-drawer__overlay { position: absolute; inset: 0; background: rgba(18, 22, 40, .42); }
.cart-drawer__inner { position: absolute; top: 0; right: 0; bottom: 0; width: min(100vw, 440px); background: var(--paper); display: flex; flex-direction: column; overflow-y: auto; }
.cart-drawer__header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.cart-drawer__header h2 { margin: 0; font-size: 26px; }
.cart-drawer__close { border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; }
.cart-drawer__items { padding: 0 24px; flex: 1; }
.cart-drawer__footer { padding: 20px 24px 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-reco-zone { padding: 16px 24px; background: var(--paper-2); }
.drawer-reco { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.drawer-reco li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.drawer-reco img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--rayon-petit); }
.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-item { display: grid; grid-template-columns: 84px 1fr; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cart-item > a img { width: 84px; height: 84px; object-fit: cover; background: var(--blanc); border-radius: var(--rayon-petit); }
.cart-item > div:first-of-type > a { font: 400 18px/1.3 var(--serif); }
.cart-item .quantity { grid-column: 2; height: 40px; }
.cart-item__remove { border: 0; background: transparent; color: var(--muted); font-size: 12px; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cart-item__props { color: var(--muted); font-size: 12px; }
.cart-note { color: var(--muted); font-size: 13px; margin-top: 18px; }
.commande { display: grid; gap: 40px; padding: 32px 0 var(--rythme); }
@media (min-width: 1000px) { .commande { grid-template-columns: 1fr 380px; gap: 72px; } }
.commande__recap { background: var(--blanc); border: 1px solid var(--line); border-radius: var(--rayon); padding: 26px; align-self: start; display: grid; gap: 10px; }
.commande__total { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.commande__total--grand { font: 400 22px/1.3 var(--serif); padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; }
body.drawer-open { overflow: hidden; }

/* Recherche */
.search-form { display: flex; gap: 10px; margin: 24px 0 32px; }
.search-form input { flex: 1; min-width: 0; height: 52px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--blanc); padding: 0 20px; }
.search-vide { color: var(--muted); }

/* Formulaires génériques */
.champ { display: grid; gap: 6px; margin-bottom: 16px; }
.champ label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.champ input, .champ textarea, .champ select { width: 100%; border: 1px solid var(--line-2); border-radius: var(--rayon-petit); background: var(--blanc); padding: 13px 14px; }
.champ textarea { min-height: 140px; resize: vertical; }
.invalid { border-color: #B3261E !important; }

/* Lettre */
.newsletter { text-align: center; background: var(--paper-2); }
.newsletter .page-width { max-width: 640px; }
.newsletter form { display: flex; gap: 8px; margin: 24px 0 10px; }
.newsletter input { flex: 1; min-width: 0; height: 50px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--blanc); padding: 0 20px; }
.newsletter small { color: var(--muted); }
.newsletter .caption { justify-content: center; }

/* Pages d'information */
.page-entete { display: grid; gap: 32px; padding: 24px 0 56px; }
.page-entete__texte { align-self: center; }
.page-entete__texte p { color: var(--ink-2); font-size: 18px; max-width: 52ch; }
.page-entete img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
@media (min-width: 900px) { .page-entete { grid-template-columns: 1fr 1fr; gap: 72px; padding-bottom: 80px; } }
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 14px; }
.etapes li { counter-increment: etape; background: var(--blanc); border: 1px solid var(--line); border-radius: var(--rayon); padding: 24px; }
.etapes li::before { content: counter(etape); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font: 500 14px/1 var(--sans); margin-bottom: 14px; }
.etapes strong { display: block; font: 400 21px/1.3 var(--serif); margin-bottom: 6px; }
.etapes span { color: var(--muted); font-size: 14px; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(4, 1fr); } }

/* Articles */
.article-entete { max-width: 820px; padding: 24px 0 40px; }
.article-entete p.chapo { font-size: 19px; color: var(--ink-2); }
.article-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }
.article-visuel { margin: 0 0 56px; }
.article-visuel img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--rayon); }
.sommaire { border: 1px solid var(--line); border-radius: var(--rayon); padding: 22px; font-size: 14px; background: var(--blanc); }
.sommaire ol { margin: 10px 0 0; padding-left: 1.2em; }
.sommaire li { margin: 6px 0; }
.sommaire li::marker { color: var(--lampe); }
.sommaire a:hover { color: var(--accent); }
.carte-guide { display: block; }
.carte-guide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; background: var(--nuit); border-radius: var(--rayon); }
.carte-guide h3 { font-size: 22px; margin-bottom: 8px; }
.carte-guide p { color: var(--muted); font-size: 14px; margin: 0; }

/* Pied de page */
.footer { background: var(--etoiles), var(--nuit); color: #CFC6B4; padding: 0 0 32px; font-size: 14px; }
.footer::before { content: ''; display: block; height: 64px; margin-bottom: 64px; background: repeating-linear-gradient(90deg, #6B2722 0 22px, #2F4A3A 22px 40px, #C08A3E 40px 54px, #28305A 54px 80px, #5A3A55 80px 96px, #8C5A2B 96px 118px, #1E1E2E 118px 124px); box-shadow: inset 0 -8px 0 #3A2A1E, inset 0 6px 10px rgba(0,0,0,.35); }
.footer a:hover { color: #fff; }
.footer__haut { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer__marque p { max-width: 36ch; color: #A99F8C; }
.footer__marque .logo span { color: #FFF3DC; }
.footer__marque .logo small { color: var(--lampe); }
.footer__marque .logo span i { color: var(--lampe-clair); }
.footer-block__heading { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--lampe-clair); margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
@media (min-width: 750px) { .footer__haut { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__frequent { padding: 32px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer__frequent .chips a { border-color: rgba(255, 255, 255, .2); background: transparent; color: #CFC6B4; font-size: 13px; }
.footer__frequent .chips a:hover { border-color: var(--lampe-clair); color: #fff; }
.footer__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; color: #8C8270; font-size: 12px; }

/* Bulle de discussion */
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 40; }
.chat__bubble { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--nuit); color: var(--lampe-clair); box-shadow: 0 0 0 2px var(--lampe), 0 10px 24px -10px rgba(18,22,40,.7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(18, 22, 40, .7); }
.chat__panel { position: absolute; right: 0; bottom: 66px; width: min(92vw, 360px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--rayon); overflow: hidden; box-shadow: 0 24px 50px -20px rgba(18, 22, 40, .5); display: flex; flex-direction: column; max-height: 70vh; }
.chat__panel[hidden] { display: none; }
.chat__header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--nuit); color: #FFF3DC; }
.chat__header span { display: block; font-size: 12px; color: var(--lampe-clair); }
.chat__header button { border: 0; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }
.chat__fil { padding: 16px; overflow-y: auto; display: grid; gap: 10px; font-size: 14px; }
.chat__msg { background: var(--blanc); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 10px 12px; margin: 0; }
.chat__msg--moi { background: var(--accent-clair); border-radius: 12px 12px 4px 12px; justify-self: end; }
.chat__rapides { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__rapides button { border: 1px solid var(--line-2); border-radius: 999px; background: var(--blanc); padding: 6px 12px; font-size: 12px; cursor: pointer; text-align: left; }
.chat__form { display: flex; border-top: 1px solid var(--line); }
.chat__form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 16px; }
.chat__form button { border: 0; background: var(--accent); color: #fff; width: 52px; cursor: pointer; }

/* Bandeau de consentement et fenêtre lettre */
.consentement { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; background: var(--paper); border: 1px solid var(--line); border-radius: var(--rayon); box-shadow: 0 20px 40px -24px rgba(18, 22, 40, .5); padding: 18px; display: grid; gap: 12px; max-width: 520px; font-size: 14px; }
.consentement div { display: flex; gap: 8px; }
.popup-lettre { position: fixed; inset: 0; z-index: 80; background: rgba(18, 22, 40, .45); display: grid; place-items: center; padding: 16px; }
.popup-lettre__boite { background: var(--paper); border-radius: var(--rayon); max-width: 520px; padding: 32px; position: relative; }
.popup-lettre__fermer { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; font-size: 26px; cursor: pointer; }

/* Divers */
[data-wishlist-empty] { color: var(--muted); }
.tableau-prix { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau-prix th, .tableau-prix td { text-align: left; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); }

/* ---------- Veillée : composants propres à Entre Deux Livres */
.hero-nuit { position: relative; background: var(--etoiles), radial-gradient(42% 60% at 70% 60%, rgba(233,165,72,.30), transparent 70%), radial-gradient(70% 90% at 20% 0%, var(--nuit-3), transparent 70%), var(--nuit); color: #F3EAD6; overflow: hidden; }
.hero-nuit .hero { padding-bottom: 0; }
.hero-nuit .hero__texte h1 { color: #FFF3DC; }
.hero-nuit .hero__texte p { color: #D9CEB8; }
.hero-nuit .caption { color: var(--lampe); } .hero-nuit .caption::before { background: var(--lampe); }
.hero-nuit .fleche { color: var(--lampe-clair); }
.nook { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 18px 0 0; }
.nook::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 22px; background: linear-gradient(#5A3F2A, #3A281B); box-shadow: 0 -2px 0 #7A5638 inset, 0 12px 30px rgba(0,0,0,.45); }
.livre { position: relative; z-index: 1; width: 13%; max-width: 64px; border-radius: 3px 3px 0 0; background: var(--c, #6B2722); box-shadow: inset 6px 0 0 rgba(255,255,255,.08), inset -8px 0 0 rgba(0,0,0,.18); align-self: flex-end; margin-bottom: 22px; }
.livre::before, .livre::after { content: ''; position: absolute; left: 12%; right: 12%; height: 3px; background: rgba(233,190,110,.65); }
.livre::before { top: 14%; } .livre::after { bottom: 14%; }
.livre span { position: absolute; inset: 22% 0; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: italic 400 clamp(11px, 1.4vw, 15px)/1 var(--serif); color: rgba(255,232,190,.85); white-space: nowrap; overflow: hidden; }
.nook__scene { position: relative; z-index: 1; width: 62%; max-width: 420px; margin: 0 6px 22px; aspect-ratio: 4 / 5; border-radius: 999px 999px 4px 4px; overflow: hidden; box-shadow: 0 0 0 6px #2A2018, 0 0 0 7px rgba(233,165,72,.4), 0 0 80px 10px var(--lueur); background: var(--nuit-2); }
.nook__scene img { width: 100%; height: 100%; object-fit: cover; }
.hero-nuit .hero__legende { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 2; background: rgba(18,22,40,.86); color: #FFF3DC; border: 1px solid rgba(233,165,72,.45); border-radius: var(--rayon); white-space: nowrap; }
.hero-nuit .hero__legende small { color: var(--lampe-clair); }
@media (min-width: 900px) { .hero-nuit .hero { padding-top: 56px; } .nook { padding-top: 40px; } }

.etagere { list-style: none; margin: 0; padding: 0 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 10px; overflow-x: auto; scrollbar-width: none; align-items: end; position: relative; border-bottom: 14px solid #5A3F2A; box-shadow: 0 10px 18px -12px rgba(0,0,0,.5); }
.etagere::-webkit-scrollbar { display: none; }
.etagere a { position: relative; display: flex; flex-direction: column; height: var(--h, 300px); padding: 10px 10px 16px; border-radius: 4px 4px 0 0; background: var(--c, #6B2722); color: #FFF0D6; box-shadow: inset 7px 0 0 rgba(255,255,255,.07), inset -9px 0 0 rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.etagere a:hover { transform: translateY(-10px); }
.etagere img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 999px 999px 3px 3px; box-shadow: 0 0 0 2px rgba(233,190,110,.6); }
.etagere strong { margin-top: 14px; font: 400 21px/1.1 var(--serif); }
.etagere small { margin-top: auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,226,170,.8); border-top: 1px solid rgba(233,190,110,.4); padding-top: 8px; }
@media (min-width: 1000px) { .etagere { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-columns: auto; gap: 12px; overflow: visible; } }

.univers a { border-radius: var(--rayon); }
.univers a::after { background: linear-gradient(180deg, rgba(18,22,40,0) 30%, rgba(18,22,40,.9)); }
.univers .fleche { color: var(--lampe-clair); }
.univers .caption { color: var(--lampe) !important; }

.atouts div { background: var(--blanc); border-color: var(--line); }
.atouts div::before { width: 30px; height: 30px; border: 0; border-radius: 999px 999px 3px 3px; background: radial-gradient(circle at 50% 60%, var(--lampe-clair), var(--lampe) 45%, transparent 46%), var(--nuit); box-shadow: 0 0 14px -2px var(--lueur); }

.montage { list-style: none; counter-reset: m; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; }
.montage li { counter-increment: m; position: relative; padding: 22px 22px 22px 70px; border: 1px solid rgba(233,165,72,.3); border-radius: var(--rayon); background: rgba(255,255,255,.03); }
.montage li::before { content: counter(m); position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--lampe); color: var(--lampe-clair); font: italic 400 19px/1 var(--serif); }
.montage strong { display: block; font: 400 22px/1.2 var(--serif); color: #FFF3DC; margin-bottom: 4px; }
.montage span { color: #CFC6B4; font-size: 14px; }
@media (min-width: 900px) { .montage { grid-template-columns: repeat(3, 1fr); } }

.newsletter { background: var(--paper-2); }
.newsletter h2 em { color: var(--accent); }
.collection-hero h1 { font-size: clamp(34px, 5vw, 56px); }
.product__title h1 { font-size: clamp(30px, 3.6vw, 44px); }
.product__reassurance { background: var(--nuit); color: #E6DCC8; }
.product__reassurance li::before { background: var(--lampe); box-shadow: 0 0 8px var(--lueur); }
.rte h2 { font-size: clamp(26px, 3.2vw, 34px); }
.accordion summary { font-size: 20px; }
.chips a:hover, .chips a[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
::selection { background: var(--lampe-clair); color: var(--nuit); }
@media (max-width: 480px) { .logo small { font-size: 7.5px; letter-spacing: .18em; white-space: nowrap; } }

/* Blocs produits des articles */
.bloc-produit { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; margin: 1.6em 0; padding: 16px; background: var(--blanc); border: 1px solid var(--line); border-radius: var(--rayon); }
.bloc-produit img { width: 120px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arche); background: var(--nuit); }
.bloc-produit h3 { margin: 0 0 6px; font-size: 21px; } .bloc-produit h3 a { text-decoration: none; color: inherit; }
.bloc-produit p { margin: 0 0 8px; font-size: 14px; } .bloc-produit .caption { margin-bottom: 4px; }
.bloc-produit .button { color: #FFF6E6; text-decoration: none; }
@media (min-width: 750px) { .bloc-produit { grid-template-columns: 160px 1fr; } .bloc-produit img { width: 160px; } }
.bloc-produits { margin: 1.6em 0 2em; max-width: none; } .bloc-produits .grid { gap: 24px 14px; }
.rte .comparatif { display: table; width: 100%; } .rte .comparatif th[scope="row"] { color: var(--muted); font-weight: 500; white-space: nowrap; }
@media (max-width: 749px) { .rte .comparatif { display: block; overflow-x: auto; } }

/* Stories de la fiche produit (22/10/2026) : trois pastilles « fenêtres éclairées », vidéo verticale dans une fenêtre bleu nuit */
.stories { margin: 22px 0 4px; }
.stories__track { display: flex; gap: 18px; align-items: flex-start; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.stories__track::-webkit-scrollbar { display: none; }
.story { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: center; flex: 0 0 auto; width: 88px; color: var(--ink); font: inherit; }
.story__thumb { display: block; width: 76px; height: 76px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; padding: 3px; background: conic-gradient(from 200deg, var(--lampe), var(--accent), var(--lampe-clair), var(--lampe)); box-shadow: 0 0 14px var(--lueur); transition: transform .2s; }
.story__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid var(--paper); display: block; }
.story:hover .story__thumb, .story:focus-visible .story__thumb { transform: scale(1.05); }
.story__label { display: block; font: 400 15px/1.15 var(--serif); white-space: nowrap; }
.story-dialog { border: 0; padding: 0; width: min(420px, 92vw); max-height: 92vh; border-radius: 14px; overflow: hidden; background: var(--etoiles), var(--nuit); color: #FFF3DC; }
.story-dialog::backdrop { background: rgba(12, 14, 26, .72); }
.story-dialog__inner { position: relative; padding: 14px 14px 16px; }
.story-dialog__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 216, 146, .5); background: var(--nuit-2); color: var(--lampe-clair); cursor: pointer; font-size: 22px; line-height: 1; display: grid; place-items: center; z-index: 1; }
.story-dialog__title { margin: 4px 50px 12px 4px; font-size: 22px; color: var(--lampe-clair); }
.story-dialog__media video { width: 100%; height: auto; max-height: 78vh; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 10px; background: var(--nuit-2); }

/* Nos garanties, sous les stories */
.garanties { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); color: var(--ink); }
.garanties__titre { margin: 0 0 10px; font-weight: 600; font-size: 15px; }
.garanties ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.garanties li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.garanties__icone { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ink); }

/* Photos, maillage et sources dans les articles */
.rte .article-photo { margin: 2em 0 2.2em; }
.rte .article-photo img { width: 100%; height: auto; max-height: 620px; object-fit: cover; border-radius: var(--rayon); background: var(--nuit); }
.rte .article-photo figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.rte .article-photo figcaption a { color: var(--accent); }
.rte .cocon { margin: 2.6em 0 1em; padding: 24px 26px; border-radius: var(--rayon); background: var(--paper-2); border-left: 3px solid var(--lampe); }
.rte .cocon h2 { margin-top: 0; }
.rte .cocon ul { margin-bottom: 0; }
.rte .sources { margin-top: 2.4em; font-size: 14px; color: var(--ink-2); }
.rte .sources h2 { font-size: 22px; }

/* En-tête mobile : logo exactement au centre de la page, quelles que soient les largeurs du menu et des icônes */
@media (max-width: 1099px) {
  .header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .menu-drawer-container { justify-self: start; }
  .header__icons { justify-self: end; }
}
@media (max-width: 420px) { .header { gap: 4px; } .header__icon { min-width: 32px; } }

/* Référence extérieure (fiches, collections), 25/10/2026 */
.reference { margin-top: 1.4em; font-size: 14px; color: var(--ink-2); }
.reference a { text-decoration: underline; }
.popup-lettre__code { font-size: 18px; letter-spacing: .12em; }

/* Pastille d'offre (pop-up fermée sans inscription) : en bas à gauche, la bulle de discussion étant à droite */
@keyframes badge-offre-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.badge-offre { position: fixed; left: 20px; bottom: 20px; z-index: 39; animation: badge-offre-in .25s ease-out; }
.badge-offre__ouvrir { width: 104px; height: 104px; border-radius: 50%; border: 0; background: var(--blanc); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 600 15px/1.15 var(--sans); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: transform .15s ease; }
.badge-offre__ouvrir span:first-child { font-size: 21px; color: var(--accent); letter-spacing: 0; }
.badge-offre__ouvrir:hover { transform: scale(1.04); }
.badge-offre__ouvrir:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.badge-offre__fermer { position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.badge-offre__fermer:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body.drawer-open .badge-offre { display: none; }
@media (max-width: 749px) { .badge-offre { left: 12px; bottom: 12px; } .badge-offre__ouvrir { width: 84px; height: 84px; font-size: 12px; } .badge-offre__ouvrir span:first-child { font-size: 17px; } body.sticky-atc-on .badge-offre { bottom: 82px; } }
@media (prefers-reduced-motion: reduce) { .badge-offre { animation: none; } .badge-offre__ouvrir { transition: none; } .badge-offre__ouvrir:hover { transform: none; } }

/* 25/10/2026 – affichage mobile */
.pagination { flex-wrap: wrap; }
.article-visuel img { aspect-ratio: var(--r, 16 / 7); }
.rte .article-photo img { display: block; max-width: var(--mw, 100%); margin-inline: auto; }
@media (max-width: 749px) {
  .article-visuel img { aspect-ratio: auto; height: auto; max-height: 480px; }
}
@media (hover: none) { .card__media img + img { display: none; } }
@media (max-width: 999px) { body.has-sticky-atc { padding-bottom: 66px; } .chat { transition: bottom .25s; } }

/* 26/10/2026 – menu tiroir : le flou de l'en-tête sur un calque à part. Un backdrop-filter sur l'en-tête en faisait le bloc
   conteneur du tiroir (position: fixed), qui ne couvrait alors que la hauteur de l'en-tête au lieu de tout l'écran. */
.header-wrapper { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.header-wrapper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Pop-up d'inscription : champ e-mail pleine largeur (27/10/2026, il gardait le style par défaut du navigateur) */
.popup-lettre form { display: grid; gap: 10px; margin-top: 16px; }
.popup-lettre input[type="email"] { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px; border: 1px solid var(--line-2, var(--line)); border-radius: var(--rayon-petit, 4px); background: #fff; color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.popup-lettre input[type="email"]::placeholder { color: var(--ink); opacity: .5; }
.popup-lettre input[type="email"]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.popup-lettre form .button { width: 100%; margin: 0; }

/* Pastilles de coloris (01/11/2026) : rondes, couleur réelle ou photo de la matière, anneau à la couleur d'accent du site.
   Généré par ~/Sites/_pastilles/installer.js ; les autres options (pointure, taille…) gardent leurs boutons. */
.product-form__input.pastilles { --pastille-anneau: var(--accent); --pastille-fond: var(--paper); --pastille-bord: rgba(0, 0, 0, .2); }
.product-form__input.pastilles legend .pastilles__choix { font-weight: 400; text-transform: none; letter-spacing: 0; }
.product-form__input.pastilles label.pastille { position: relative; display: inline-block; box-sizing: border-box; width: 34px; height: 34px; min-width: 0; min-height: 0; margin: 4px 12px 10px 4px !important; padding: 0 !important; border: 1px solid var(--pastille-bord) !important; border-radius: 50% !important; background: var(--pastille, #D8D4CC) !important; color: transparent !important; font-size: 0 !important; line-height: 0; vertical-align: middle; cursor: pointer; box-shadow: none; transition: box-shadow .15s ease; }
.product-form__input.pastilles label.pastille:hover { box-shadow: 0 0 0 3px var(--pastille-fond), 0 0 0 4px var(--pastille-bord) !important; }
.product-form__input.pastilles input:checked + label.pastille { background: var(--pastille, #D8D4CC) !important; border-color: var(--pastille-bord) !important; color: transparent !important; box-shadow: 0 0 0 3px var(--pastille-fond), 0 0 0 5px var(--pastille-anneau) !important; }
.product-form__input.pastilles input:focus-visible + label.pastille { outline: 2px solid var(--pastille-anneau) !important; outline-offset: 6px !important; }
.product-form__input.pastilles .pastille__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.product-form__input.pastilles .pastille--initiale::after { content: attr(data-initiale); display: block; font: 600 13px/32px system-ui, sans-serif; text-align: center; color: #555; }
/* fin pastilles */