/* =========================================================
   Libre Lecture · La Libre · v0.2 couleur
   Charte La Libre (magenta, marine, graphite) + rubrique Culture.
   Méthode Refactoring UI : la hiérarchie tenait déjà en gris,
   la couleur ne fait que la souligner.
   ========================================================= */

@font-face {
  font-family: "Manuale";
  src: url("./fonts/manuale-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manuale";
  src: url("./fonts/manuale-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("./fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* gris de la charte La Libre */
  --g-50: #F7F7F7; --g-100: #F2F2F2; --g-200: #E0E0E0; --g-300: #C6C6C6; --g-400: #BDBDBD;
  --g-500: #999999; --g-600: #686868; --g-700: #4B5568; --g-800: #262729; --g-900: #111111;

  /* marque La Libre */
  --magenta: #AC115D; --magenta-700: #930A4D; --marine: #061E4D; --marine-900: #03132B;
  /* rubrique Culture : version app, qui passe l'AA avec du blanc (4,6:1) ;
     le foncé #BF2424 colore le bandeau, comme sur lalibre.be/culture */
  --culture: #D53C3C; --culture-dark: #BF2424; --culture-50: #FDF2F2; --culture-100: #FADDDD;

  /* rôles */
  --ink: var(--g-800);
  --ink-soft: var(--g-600);
  --line: var(--g-200);
  --surface: var(--g-100);
  --accent: var(--g-800);      /* bouton primaire = graphite, comme sur le site */
  --accent-ink: #fff;
  --head: var(--culture-dark);

  /* une couleur de la charte par genre (dos, couvertures provisoires) */
  --t-roman: #752863; --t-polar: var(--marine); --t-sf: #08619B; --t-bd: #C55205;
  --t-manga: var(--magenta); --t-rg: #757575; --t-comics: #137BBE; --t-essai: #00846E; --t-jeunesse: #927035;

  --f-title: "Manuale", Georgia, serif;
  --f-base: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  /* espacements Refactoring UI */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --r: .25rem;
  --e1: 0 1px 1px rgba(0,0,0,.15), 0 2px 3px hsla(0,0%,40%,.12);
  --e3: 0 3px 10px rgba(0,0,0,.18);
  --e5: 0 1px 15px rgba(0,0,0,.3);
  --ease: cubic-bezier(.4,0,.2,1);
  --focus: 0 0 0 3px rgba(172,17,93,.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--f-base); font-size: 16px; line-height: 1.5; font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r); }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: var(--s2) var(--s3); z-index: 100; }
.skip:focus { left: var(--s4); }

.maquette-banner {
  background: repeating-linear-gradient(135deg, var(--g-100) 0 12px, var(--g-50) 12px 24px);
  color: var(--g-700); font-size: 12px; font-weight: 600; text-align: center;
  letter-spacing: .06em; text-transform: uppercase; padding: var(--s1) var(--s4);
}

/* ---------- header ---------- */
.site-head { background: var(--head); border-radius: 0 0 10px 10px; min-height: 59px; position: relative; z-index: 20; }
.site-head__in { display: flex; align-items: center; justify-content: space-between; min-height: 59px; }
.site-head__logo img { display: block; height: 28px; width: auto; }
.site-head__rub { color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; opacity: .85; }
.site-head__rub:hover { opacity: 1; }

/* ---------- hero ---------- */
.hero { padding: var(--s8) 0 var(--s7); }
.crumb { font-size: 13px; color: var(--ink-soft); margin-bottom: var(--s5); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb i { font-size: 9px; margin: 0 var(--s1); }
.hero__sur {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--culture); margin: 0 0 var(--s3);
}
.hero__titre {
  font-family: var(--f-title); font-weight: 800; font-size: 36px; line-height: 1.1;
  letter-spacing: -.01em; margin: 0 0 var(--s5); text-wrap: balance;
}
.hero__chapo { font-size: 18px; line-height: 1.55; color: var(--ink); max-width: 52ch; margin: 0 0 var(--s4); }
.hero__byline { font-size: 14px; color: var(--ink-soft); margin: 0 0 var(--s6); }
.hero__byline strong { color: var(--ink); font-weight: 600; }

.btn-quiz {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 600 16px/1 var(--f-base); color: #fff; background: var(--culture);
  border: 0; border-radius: var(--r); padding: 14px var(--s5); min-height: 48px; cursor: pointer;
  box-shadow: var(--e1); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-quiz:hover { transform: translateY(-1px); box-shadow: var(--e3); background: var(--culture-dark); }
.btn-quiz:active { transform: none; box-shadow: inset 0 2px 3px rgba(0,0,0,.5); }

/* ---------- la bibliothèque (hero) ---------- */
.library {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 520px; height: min(68vh, 660px);
  background: #160E09; color: #fff; margin-top: -10px; /* passe sous les coins arrondis du bandeau */
  display: flex; align-items: flex-end;
}
.library__scene { position: absolute; inset: 0; z-index: 0; }
.library__shelves { position: absolute; inset: -8px 0 0; display: flex; flex-direction: column; }
.library__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; mix-blend-mode: screen; }
.library__glow { /* une lampe chaude quelque part en haut à droite, qui vacille */
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 72% 22%, rgba(255,190,110,.30), transparent 70%),
    radial-gradient(ellipse 35% 40% at 88% 70%, rgba(255,160,80,.12), transparent 70%);
  mix-blend-mode: screen; animation: vacille 5s ease-in-out infinite alternate;
}
@keyframes vacille { 0% { opacity: .85; } 35% { opacity: 1; } 60% { opacity: .9; } 100% { opacity: .97; } }
.library__shade { /* la zone de lecture du titre, et le vignettage des coins */
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,7,4,.92) 0%, rgba(12,7,4,.78) 32%, rgba(12,7,4,.25) 58%, rgba(12,7,4,0) 75%),
    linear-gradient(0deg, rgba(12,7,4,.85) 0%, rgba(12,7,4,0) 38%),
    radial-gradient(ellipse at 70% 40%, transparent 50%, rgba(0,0,0,.45) 100%);
}
.library__fly { position: absolute; inset: 0; z-index: 5; pointer-events: none; perspective: 1400px; }
.library__content { position: relative; z-index: 10; padding-top: var(--s8); padding-bottom: var(--s7); pointer-events: none; }
.library__content a, .library__content button { pointer-events: auto; }

.crumb--light, .crumb--light a { color: rgba(255,255,255,.72); }
.hero__sur--light { color: #fff; display: inline-flex; align-items: center; gap: var(--s2); }
.hero__sur--light::before { content: ""; width: 24px; height: 3px; background: var(--culture); }
.hero__titre--light { color: #fff; max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero__chapo--light { color: rgba(255,255,255,.88); }
.hero__byline--light { color: rgba(255,255,255,.65); }
.hero__byline--light strong { color: #fff; }
.hero__relecture { display: flex; align-items: center; gap: var(--s2); margin: calc(var(--s3) * -1) 0 var(--s5); font-size: 13px; color: rgba(255,255,255,.75); }
.hero__relecture a { color: #fff; }

/* rayons et travées */
.lib-rang {
  position: relative; flex: 0 0 176px; display: flex; align-items: flex-end;
  padding: 18px 0 16px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 30%),
    repeating-linear-gradient(90deg, #24160D 0 3px, #20130B 3px 7px, #261810 7px 9px);
}
.lib-rang::after { /* la planche, son chant éclairé et son ombre portée */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 1;
  background: linear-gradient(180deg, #8A5F38 0 2px, #5E3D22 2px, #4A2F1A 70%, #2E1C0F);
  box-shadow: 0 10px 14px rgba(0,0,0,.55);
}
.lib-travee {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 1px; height: 100%;
  padding: 0 9px; position: relative;
  border-right: 14px solid #3A2414;
  box-shadow: inset -6px 0 10px -4px rgba(0,0,0,.6);
}
.lib-travee::before { /* le montant, avec sa moulure */
  content: ""; position: absolute; right: -14px; top: -18px; bottom: -16px; width: 14px;
  background: linear-gradient(90deg, #2A190D, #6E4A2B 30%, #4A2F1A 60%, #24150B);
}
.lib-vide { flex: 0 0 14px; }
.lib-dos {
  position: relative; flex: 0 0 var(--w); height: var(--h); border: 0; padding: 0; display: block;
  border-radius: 2px 2px 1px 1px; background: var(--c);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.10) 30%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.35)),
    linear-gradient(180deg, transparent 9%, rgba(201,164,92,.75) 9%, rgba(201,164,92,.75) calc(9% + 2px), transparent calc(9% + 2px), transparent calc(9% + 5px), rgba(201,164,92,.6) calc(9% + 5px), rgba(201,164,92,.6) calc(9% + 6px), transparent calc(9% + 6px)),
    linear-gradient(0deg, transparent 8%, rgba(201,164,92,.55) 8%, rgba(201,164,92,.55) calc(8% + 2px), transparent calc(8% + 2px));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 2px 0 3px rgba(0,0,0,.35);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  transform-origin: bottom center;
}
.lib-dos--clair { filter: brightness(1.18) saturate(.9); }
.lib-dos--penche { transform: rotate(-9deg); transform-origin: bottom left; margin-left: 6px; }
.lib-dos.is-sorti { opacity: 0; }
.lib-dos__t {
  position: absolute; left: 50%; top: 22%; bottom: 20%; transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl; font-family: var(--f-title); font-weight: 600; font-size: 10px; letter-spacing: .04em;
  color: #E3C88E; text-shadow: 0 1px 0 rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9;
}
.lib-dos--rouge {
  --c: #B3201E; cursor: pointer; pointer-events: auto; z-index: 7;
  transform: translateY(-10px) rotate(-1.5deg); transform-origin: bottom left;
  box-shadow: 0 0 0 1px rgba(242,201,61,.35), 0 0 18px rgba(255,120,80,.35);
}
.lib-dos--rouge:hover { transform: translateY(-18px) rotate(-1.5deg); }
.lib-dos--rouge.is-out { transform: translateY(-70px) rotate(-10deg); }

/* le livre qui s'ouvre (js/library.js) */
.flybook {
  position: absolute; left: 0; top: 0; width: 110px; height: 158px; opacity: 0;
  transform-style: preserve-3d; pointer-events: none;
  filter: drop-shadow(0 22px 22px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(255,190,110,.25));
}
.flybook > * { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; border-radius: 1px 4px 4px 1px; }
.flybook__back { background: var(--c); transform: translateZ(-6px); }
.flybook__block { inset: 3px 3px 3px 0; background: repeating-linear-gradient(90deg, #F4EEDF 0 1px, #E2D6BC 1px 2px); transform: translateZ(-3px); }
.flybook__page {
  inset: 3px 3px 3px 0; backface-visibility: visible;
  background:
    linear-gradient(90deg, rgba(0,0,0,.14), transparent 18%),
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(60,40,20,.16) 9px 10px) 14px 18px / calc(100% - 28px) calc(100% - 36px) no-repeat,
    #FBF6EA;
}
.flybook__cover { transform: translateZ(1px); }
.flybook__front, .flybook__inside { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; }
.flybook__front {
  background: var(--c);
  background-image: linear-gradient(90deg, rgba(0,0,0,.3) 0 6px, rgba(255,255,255,.14) 6px 8px, transparent 8px), linear-gradient(160deg, rgba(255,255,255,.18), transparent 60%);
}
.flybook__front::after {
  content: ""; position: absolute; left: 20px; right: 12px; top: 26px; height: 30px;
  border-top: 2px solid rgba(227,200,142,.85); border-bottom: 2px solid rgba(227,200,142,.85);
}
.flybook__inside { background: #EADFC5; transform: rotateY(180deg); }

/* secrets de la Terre du Milieu */
.anneau {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 4px solid #E3B94C; box-shadow: 0 0 6px rgba(255,210,120,.8), inset 0 0 3px rgba(120,80,10,.8); opacity: 0;
}
.anneau.is-glint { animation: brille 1.2s ease-in-out infinite alternate; }
@keyframes brille { from { box-shadow: 0 0 6px rgba(255,210,120,.6), inset 0 0 3px rgba(120,80,10,.8); } to { box-shadow: 0 0 22px 6px rgba(255,220,140,.9), inset 0 0 3px rgba(120,80,10,.8); } }
.ithildin {
  position: absolute; z-index: 8; pointer-events: none; right: 12%; bottom: 6%; width: min(300px, 42vw); opacity: 0;
  transition: opacity 1.2s var(--ease); filter: drop-shadow(0 0 6px rgba(200,225,255,.9)) drop-shadow(0 0 22px rgba(170,205,255,.6));
}
.ithildin.is-on { opacity: 1; }
.ithildin svg { width: 100%; height: auto; display: block; }
.ith-l { stroke: #E6F0FF; stroke-width: 2.4; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.ithildin.is-on .ith-l { animation: trace 2.6s ease-out forwards; }
.ithildin.is-on .ith-f { animation-delay: .8s; }
.ith-s circle { fill: #F2F7FF; opacity: 0; }
.ithildin.is-on .ith-s circle { animation: scintille 1.6s 1.4s ease-in-out infinite alternate; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes scintille { from { opacity: .2; } to { opacity: 1; } }
.quiz__note { font-size: 14px; font-style: italic; color: var(--ink-soft); margin: 0 0 var(--s4); }

/* le livre qui vole en battant des couvertures */
.wingbook { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; filter: drop-shadow(0 18px 14px rgba(0,0,0,.5)); }
.wingbook__body { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotateX(48deg); transform-style: preserve-3d; width: 10px; height: 92px; }
.wingbook__pages {
  position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #F4EEDF 0 1px, #E2D6BC 1px 2px); border-radius: 1px;
}
.wingbook__l, .wingbook__r { position: absolute; top: 0; width: 68px; height: 92px; background: var(--c); border-radius: 3px;
  background-image: linear-gradient(160deg, rgba(255,255,255,.18), transparent 60%); }
.wingbook__l { right: 50%; transform-origin: right center; animation: aile-g .34s ease-in-out infinite alternate; }
.wingbook__r { left: 50%; transform-origin: left center; animation: aile-d .34s ease-in-out infinite alternate; }
@keyframes aile-g { from { transform: rotateY(-18deg); } to { transform: rotateY(-78deg); } }
@keyframes aile-d { from { transform: rotateY(18deg); } to { transform: rotateY(78deg); } }

/* ---------- filtres ---------- */
.filters {
  position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: var(--s3) 0;
}
.filters__row { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.filters__row::-webkit-scrollbar { display: none; }
.filters__row--sub { align-items: center; gap: var(--s4); margin-top: var(--s2); }
.filters__chips { display: flex; gap: var(--s2); }
.filters__extra { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.filters__more { display: none; }
.pill, .chip {
  flex: 0 0 auto; font: 600 14px/1 var(--f-base); border-radius: 9999px; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.pill { padding: 10px var(--s4); min-height: 40px; border: 1px solid var(--g-400); background: #fff; color: var(--ink); }
.pill:hover { border-color: var(--ink); }
.pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip { padding: 8px var(--s3); min-height: 32px; font-size: 13px; border: 0; background: var(--surface); color: var(--ink-soft); }
.chip:hover { color: var(--ink); }
.chip.is-active { background: var(--culture-100); color: var(--culture-dark); }
.toggle { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--culture); }
.filters__count { margin: 0 0 0 auto; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.filters__count span { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }

/* ---------- sections genre ---------- */
.genre { padding: var(--s8) 0 var(--s4); }
.genre[hidden] { display: none; }
.genre__head { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: baseline; margin-bottom: var(--s6); border-top: 3px solid var(--ink); padding-top: var(--s4); }
.genre__num { font-family: var(--f-title); font-weight: 300; font-size: 48px; line-height: 1; margin: 0; color: var(--culture); font-variant-numeric: tabular-nums; }
.genre__titre { font-family: var(--f-title); font-weight: 800; font-size: 30px; line-height: 1.15; margin: 0 0 var(--s1); }
.genre__intro { margin: 0; color: var(--ink-soft); font-size: 16px; }

.genre__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); }

/* ---------- carte livre ---------- */
.livre { display: flex; flex-direction: column; }
.livre[hidden] { display: none; }
.livre__open { display: block; border: 0; padding: 0; background: none; cursor: pointer; margin-bottom: var(--s4); text-align: left; }
.livre__cover {
  display: block; aspect-ratio: 2 / 3; border-radius: 2px 4px 4px 2px; overflow: hidden;
  box-shadow: var(--e1), 0 10px 20px -12px rgba(0,0,0,.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
}
.livre__cover::before { /* pli de reliure */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent); z-index: 1;
}
.livre__open:hover .livre__cover { transform: translateY(-4px); box-shadow: var(--e1), 0 18px 28px -14px rgba(0,0,0,.45); }
.livre__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-ph {
  display: flex; flex-direction: column; justify-content: space-between; height: 100%;
  padding: var(--s4) var(--s3); background: var(--tone, var(--g-700)); color: #fff;
  background-image: linear-gradient(160deg, rgba(255,255,255,.12), transparent 55%);
}
[data-genre="roman"] { --tone: var(--t-roman); }
[data-genre="polar"] { --tone: var(--t-polar); }
[data-genre="sf-fantasy"] { --tone: var(--t-sf); }
[data-genre="bd"] { --tone: var(--t-bd); }
[data-genre="manga"] { --tone: var(--t-manga); }
[data-genre="romans-graphiques"] { --tone: var(--t-rg); }
[data-genre="comics"] { --tone: var(--t-comics); }
[data-genre="essai"] { --tone: var(--t-essai); }
[data-genre="jeunesse"] { --tone: var(--t-jeunesse); }
.cover-ph__t { font-family: var(--f-title); font-weight: 800; font-size: 18px; line-height: 1.15; }
.cover-ph__a { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }

.badge-be { /* posé sur la couverture pour ne pas décaler les titres */
  position: absolute; top: var(--s2); right: var(--s2); z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px var(--s2) 4px 6px; border-radius: 9999px; background: #fff; color: var(--ink); box-shadow: var(--e1);
  display: inline-flex; align-items: center; gap: 5px;
}
.badge-val {
  position: absolute; top: var(--s2); left: var(--s2); z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px var(--s2); border-radius: 9999px; background: #FFF3CD; color: #6B4500; box-shadow: var(--e1);
}
.badge-val--brouillon { background: #fff; color: var(--ink-soft); }
.bientot { padding: var(--s9) 0; max-width: 640px; }
.bientot p:last-child { font-size: 18px; color: var(--ink-soft); }
.badge-be::before { /* drapeau : la mention reste écrite, la couleur ne porte pas l'info seule */
  content: ""; width: 12px; height: 9px; border-radius: 1px;
  background: linear-gradient(90deg, #000 0 33.3%, #FDDA24 33.3% 66.6%, #EF3340 66.6%);
}
.livre__body { display: flex; flex-direction: column; }
.livre__titre { font-family: var(--f-title); font-weight: 600; font-size: 18px; line-height: 1.22; margin: 0 0 var(--s1); text-wrap: balance; transition: color .15s var(--ease); }
.livre:has(.livre__open:hover) .livre__titre { color: var(--magenta); }
.livre__auteur { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin: 0 0 var(--s3); }
.livre__accroche { font-size: 15px; line-height: 1.5; margin: 0 0 var(--s3); color: var(--ink); }
.livre__signe { font-size: 12px; color: var(--ink-soft); margin: auto 0 0; }
.livre__signe span { font-weight: 700; color: var(--ink); }

/* ---------- vide, FAQ ---------- */
.empty { padding: var(--s8) 0; text-align: center; color: var(--ink-soft); }
.empty button { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.faq { margin: var(--s9) 0 var(--s8); padding: var(--s7) 0 0; border-top: 3px solid var(--ink); max-width: 720px; }
.faq__titre { font-family: var(--f-title); font-weight: 800; font-size: 30px; line-height: 1.2; margin: 0 0 var(--s6); }
.faq__item + .faq__item { margin-top: var(--s5); }
.faq__item h3 { font-family: var(--f-base); font-weight: 700; font-size: 16px; margin: 0 0 var(--s1); }
.faq__item p { margin: 0; color: var(--ink-soft); }

/* ---------- footer ---------- */
.site-foot { background: var(--marine); color: #D7E1F4; padding: var(--s8) 0 var(--s7); font-size: 14px; }
.site-foot__logo { display: block; height: 24px; width: auto; margin-bottom: var(--s5); }
.site-foot__social { list-style: none; display: flex; gap: var(--s2); padding: 0; margin: 0 0 var(--s5); }
.site-foot__social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(255,255,255,.08); color: #fff; text-decoration: none; transition: background .3s var(--ease);
}
.site-foot__social a:hover { background: rgba(255,255,255,.18); }
.site-foot__sign { max-width: 60ch; margin: 0 0 var(--s2); }
.site-foot__sign a { color: #fff; font-weight: 600; }
.site-foot__copy { margin: 0; color: #9CC2E2; }
.site-foot__copy a { color: inherit; }

/* ---------- dialogues (fiche + quiz) ---------- */
dialog { border: 0; padding: 0; border-radius: 8px; box-shadow: var(--e5); color: var(--ink); }
dialog::backdrop { background: rgba(17,17,17,.6); backdrop-filter: blur(2px); }
dialog[open] { animation: pop .3s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fiche { width: min(880px, calc(100% - 32px)); }
.quiz { width: min(560px, calc(100% - 32px)); }
.fiche__close {
  position: absolute; top: var(--s3); right: var(--s3); width: 44px; height: 44px; border: 0;
  border-radius: 9999px; background: var(--surface); cursor: pointer; font-size: 18px; z-index: 2;
}
.fiche__in { display: grid; grid-template-columns: 1fr; gap: var(--s6); padding: var(--s7) var(--s5) var(--s6); }
.fiche__cover .livre__cover { max-width: 220px; margin: 0 auto; }
.fiche__genre { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--culture); margin: 0 0 var(--s2); }
.fiche h2 { font-family: var(--f-title); font-weight: 800; font-size: 27px; line-height: 1.2; margin: 0 0 var(--s1); }
.fiche .livre__auteur { font-size: 16px; }
.fiche .livre__meta { font-size: 13px; color: var(--ink-soft); margin: 0 0 var(--s5); }
.fiche .livre__critique { font-size: 18px; line-height: 1.6; margin: 0 0 var(--s5); max-width: 60ch; }
.livre__humeurs { list-style: none; padding: 0; margin: 0 0 var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }
.livre__humeurs li { font-size: 13px; font-weight: 600; background: var(--surface); padding: 6px var(--s3); border-radius: 9999px; }
.livre__journaliste { font-size: 14px; color: var(--ink-soft); padding-top: var(--s4); border-top: 1px solid var(--line); margin: 0 0 var(--s4); }
.livre__journaliste strong { color: var(--ink); }
.btn-link { display: inline-flex; gap: var(--s2); align-items: center; font-weight: 700; text-decoration: none; color: var(--magenta); }
.btn-link:hover { text-decoration: underline; }

.quiz__in { padding: var(--s7) var(--s5) var(--s6); }
.quiz__step { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s2); }
.quiz h2 { font-family: var(--f-title); font-weight: 800; font-size: 27px; line-height: 1.2; margin: 0 0 var(--s5); }
.quiz__opts { display: grid; gap: var(--s2); }
.quiz__opt {
  display: flex; align-items: center; gap: var(--s3); text-align: left; width: 100%;
  font: 600 16px/1.3 var(--f-base); padding: var(--s4); min-height: 56px; border-radius: 6px;
  background: #fff; border: 1px solid var(--g-300); cursor: pointer; color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.quiz__opt:hover { border-color: var(--ink); background: var(--g-50); }
.quiz__opt i { width: 20px; text-align: center; color: var(--ink-soft); }
.quiz__progress { display: flex; gap: var(--s1); margin-bottom: var(--s5); }
.quiz__progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--g-200); }
.quiz__progress span.is-on { background: var(--culture); }
.quiz__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-bottom: var(--s5); }
.quiz__results .livre__titre { font-size: 15px; }
.quiz__results .livre__accroche, .quiz__results .livre__signe, .quiz__results .badge-be { display: none; }
.quiz__again { font: 600 14px var(--f-base); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; color: var(--ink); }

/* ---------- toast ---------- */
.ll-toast {
  position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); z-index: 60;
  max-width: min(26rem, calc(100% - 32px)); background: var(--g-800); color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.45; padding: var(--s3) var(--s4); border-radius: 8px; box-shadow: var(--e5);
}

/* ---------- breakpoints (ajustés à la main) ---------- */
@media (min-width: 576px) {
  .genre__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .hero__titre { font-size: 48px; }
  .genre__titre, .faq__titre { font-size: 36px; }
  .fiche__in { grid-template-columns: 240px 1fr; padding: var(--s7); }
  .fiche__cover .livre__cover { max-width: none; }
}
@media (min-width: 992px) {
  .hero { padding: var(--s9) 0 var(--s8); }
  .hero__titre { font-size: 60px; }
  .genre__grid { grid-template-columns: repeat(6, 1fr); gap: var(--s6) var(--s5); }
}
@media (max-width: 767.98px) {
  .library { height: auto; min-height: 600px; }
  .lib-rang { flex-basis: 132px; padding-top: 14px; }
  .library__shade {
    background:
      linear-gradient(0deg, rgba(12,7,4,.95) 0%, rgba(12,7,4,.85) 45%, rgba(12,7,4,.2) 75%, rgba(12,7,4,.35) 100%);
  }
  .flybook { width: 84px; height: 120px; }
}
@media (max-width: 575.98px) {
  /* sur mobile, les humeurs et le filtre belge se replient derrière « Affiner » */
  .filters__row--sub { flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .filters__more {
    display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3);
    font: 600 13px/1 var(--f-base); color: var(--ink); background: var(--surface); border: 0; border-radius: 9999px; cursor: pointer;
  }
  .filters__more[aria-expanded="true"] { background: var(--g-800); color: #fff; }
  .filters__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px; background: var(--culture); color: #fff; font-size: 11px; }
  .filters__extra { display: none; order: 3; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s2) 0 var(--s1); }
  .filters__extra.is-open { display: flex; }
  .filters__chips { flex-wrap: wrap; }
  .filters__count { align-self: center; }
  .quiz__results { grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .flybook, .wingbook, .library__dust, .anneau { display: none; }
  .ith-l { stroke-dashoffset: 0; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}