/* ============================================================================
   INVILISIBLE · site vitrine
   DA des couvertures : crème #EDE5D2, encre #121212, aplats purs.
   Bricolage Grotesque 800 condensée (affiche), IBM Plex Mono (méta),
   EB Garamond (récit). Geste de marque : l'effacement.
   Mobile d'abord. Aucune ressource externe (polices auto-hébergées).
   ========================================================================= */

/* Bricolage Grotesque normal 400 800 — latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-normal-400-800-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque normal 400 800 — latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-normal-400-800-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* EB Garamond italic 400 — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-italic-400-latin-ext.woff2") format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* EB Garamond italic 400 — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-italic-400-latin.woff2") format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* EB Garamond normal 400 — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* EB Garamond normal 400 — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* EB Garamond normal 500 — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond-normal-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* EB Garamond normal 500 — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond-normal-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono normal 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono normal 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono normal 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-normal-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono normal 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-normal-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --papier: #EDE5D2;
  --papier-clair: #F4EEE1;
  --encre: #121212;
  --carmin: #8F141B;
  --ligne: rgba(18, 18, 18, 0.16);
  --ligne-claire: rgba(237, 229, 210, 0.22);
  --doux: rgba(18, 18, 18, 0.68);
  --doux-clair: rgba(237, 229, 210, 0.72);
  --largeur: 1220px;
  --gouttiere: clamp(16px, 4.5vw, 48px);
  --rayon-livre: 2px 5px 5px 2px;
  --ombre-livre: 0 1px 2px rgba(18,18,18,.18), 0 12px 28px -6px rgba(18,18,18,.38);
  --entete: 60px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--papier);
  color: var(--encre);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--carmin); color: var(--papier); }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--encre); color: var(--papier); padding: 10px 14px;
  font-family: "IBM Plex Mono", monospace; font-size: .8rem; text-decoration: none;
}
.lien-evitement:focus { top: 12px; }

/* ---- Rôles typographiques ------------------------------------------------ */

.affiche {
  font-family: "Bricolage Grotesque", "Arial Narrow", Impact, sans-serif;
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 76;
  font-stretch: 76%;
  letter-spacing: -0.015em;
  line-height: 0.92;
  text-transform: uppercase;
}

.meta {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
}

.efface { opacity: .26; }
.efface-haut {
  -webkit-mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.08) 98%);
          mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.08) 98%);
}

/* ---- Structure ------------------------------------------------------------ */

.cadre { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: clamp(64px, 10vw, 128px); }
.sur-encre { background: var(--encre); color: var(--papier); }

.surtitre { display: block; color: var(--carmin); margin-bottom: 1.2em; }
.sur-encre .surtitre { color: var(--doux-clair); }

.titre-section { font-size: clamp(2.4rem, 7.4vw, 4.6rem); margin-bottom: .32em; }
.chapeau { font-size: clamp(1.15rem, 2.2vw, 1.35rem); max-width: 34em; color: var(--doux); }
.sur-encre .chapeau { color: var(--doux-clair); }

/* ---- Boutons --------------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 14px 24px;
  border: 1px solid var(--encre); background: var(--encre); color: var(--papier);
  font-family: "IBM Plex Mono", monospace; font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.bouton:hover { background: var(--carmin); border-color: var(--carmin); color: var(--papier); }
.bouton:active { transform: scale(.97); }
.bouton--contour { background: transparent; color: var(--encre); }
.bouton--contour:hover { background: var(--encre); border-color: var(--encre); }
.sur-encre .bouton { background: var(--papier); border-color: var(--papier); color: var(--encre); }
.sur-encre .bouton:hover { background: var(--carmin); border-color: var(--carmin); color: var(--papier); }
.sur-encre .bouton--contour { background: transparent; color: var(--papier); border-color: var(--doux-clair); }

.bouton-encre { background: var(--encre-livre); border-color: var(--encre-livre); color: var(--texte-livre); }
.bouton-encre:hover { background: var(--encre); border-color: var(--encre); color: var(--papier); }

.fleche { font-family: system-ui, sans-serif; letter-spacing: 0; }

/* ---- En-tête ---------------------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(237, 229, 210, .82);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--ligne);
}
@media (prefers-reduced-transparency: reduce) {
  .entete { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.entete-cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--entete); }
.marque { font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.marque .efface { opacity: .24; }
.nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); }
.nav a { text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--carmin); }
.nav .nav-secondaire { display: none; }
@media (min-width: 720px) { .nav .nav-secondaire { display: inline; } }

/* ---- Héros (accueil) ------------------------------------------------------- */

.heros { padding-block: clamp(36px, 7vw, 96px) clamp(48px, 8vw, 104px); overflow: hidden; }
.heros-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 72px); align-items: center; }
.heros h1 { font-size: clamp(3rem, 12.5vw, 5.6rem); margin-block: .1em .3em; }
.heros h1 .efface-haut { display: block; }
.heros-texte .chapeau { margin-bottom: 1.6em; }
.heros-texte .chapeau em { font-style: italic; color: var(--encre); }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.heros-actions .bouton { flex: 1 1 200px; }
.reassurance {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: var(--doux);
  list-style: none;
}
.reassurance li { display: inline-flex; align-items: center; gap: 8px; }
.reassurance li::before { content: ""; width: 6px; height: 6px; background: var(--carmin); border-radius: 50%; }

.heros-visuel { position: relative; }
.heros-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 24px 60px -24px rgba(18,18,18,.5); }
.heros-legende { margin-top: 10px; color: var(--doux); }

@media (min-width: 960px) {
  .heros-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .heros-actions .bouton { flex: 0 0 auto; }
}

/* ---- Couverture traitée en objet ------------------------------------------- */

.livre {
  position: relative; display: block;
  border-radius: var(--rayon-livre);
  box-shadow: var(--ombre-livre);
  overflow: hidden;
  background: var(--encre-livre, #ccc);
}
.livre img { width: 100%; aspect-ratio: 5 / 8; object-fit: cover; }
/* Pli du dos et reflet mat : l'aplat devient un livre relié */
.livre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22) 0, rgba(255,255,255,.12) 2.2%, rgba(0,0,0,.10) 3.6%, transparent 7%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%, transparent 75%, rgba(0,0,0,.06));
}

/* ---- Grille des livres ------------------------------------------------------ */

.grille-livres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 16px;
  margin-top: clamp(36px, 6vw, 72px);
  list-style: none;
}
@media (min-width: 720px) { .grille-livres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; } }
@media (min-width: 1080px) { .grille-livres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 32px; } }

.carte { display: flex; flex-direction: column; min-width: 0; }
.carte-couv { display: block; text-decoration: none; transition: transform .22s ease; }
.carte-couv:hover { transform: translateY(-5px); }
.carte-couv:active { transform: scale(.98); }
.carte-couv .aveu-carte {
  position: absolute; inset: auto 0 0 0; padding: 14px 12px;
  background: linear-gradient(to top, rgba(18,18,18,.86), rgba(18,18,18,0));
  color: var(--papier); font-family: "EB Garamond", serif; font-size: 1rem; line-height: 1.25;
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.carte-couv:hover .aveu-carte, .carte-couv:focus-visible .aveu-carte { opacity: 1; transform: none; }

.carte-corps { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; flex: 1; }
.carte-meta { color: var(--doux); font-size: .66rem; letter-spacing: .14em; }
.carte-vrai { font-size: clamp(1.14rem, 3.4vw, 1.32rem); font-weight: 400; line-height: 1.22; }
.carte-vrai a { text-decoration: none; }
.carte-vrai a:hover em { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.carte-achat { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.carte-achat .bouton { width: 100%; padding-inline: 10px; font-size: .7rem; letter-spacing: .12em; }
.prix { font-family: "IBM Plex Mono", monospace; font-size: .86rem; font-weight: 500; letter-spacing: .04em; }
.etiquette {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  border: 1px dashed var(--ligne); color: var(--doux);
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
}
.carte--bientot .livre { filter: saturate(.75); }
.etiquette--large { padding-inline: 18px; }
.actions-404 { margin-top: 28px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

@media (min-width: 720px) {
  .carte-achat { flex-direction: row; align-items: center; justify-content: space-between; }
  .carte-achat .bouton { width: auto; }
  .carte-achat .etiquette { width: 100%; }
}

/* ---- Offrir (sélecteur de cadeau) ------------------------------------------ */

.offrir-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 960px) { .offrir-grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.offrir-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.question { display: block; margin-bottom: 14px; color: var(--doux-clair); }
.puces {
  display: flex; gap: 8px; margin: 0 calc(-1 * var(--gouttiere)) 26px; padding: 2px var(--gouttiere) 6px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
}
.puces::-webkit-scrollbar { display: none; }
.puce { flex: none; scroll-snap-align: start; white-space: nowrap; }
@media (min-width: 960px) {
  .puces { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .puce { white-space: normal; }
}
.puce {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--ligne-claire); color: var(--papier);
  font-family: "EB Garamond", serif; font-size: 1.06rem; line-height: 1.2; text-align: left;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.puce:hover { border-color: var(--papier); }
.puce[aria-pressed="true"] { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.reponse { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
.reponse + .reponse { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--ligne-claire); }
.js .reponse + .reponse { margin-top: 0; padding-top: 0; border-top: 0; }
.js .reponse[hidden] { display: none; }
.reponse-texte .affiche { font-size: 1.35rem; margin-bottom: .3em; }
.reponse-texte p { color: var(--doux-clair); margin-bottom: .6em; }
.reponse-texte p em { color: var(--papier); }
.reponse-texte .phrase { color: var(--papier); font-size: 1.2rem; font-style: italic; }
.reponse-achat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }

/* ---- Dans la vraie vie (rail photo) ---------------------------------------- */

.rail {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px var(--gouttiere) 18px;
  margin-top: clamp(28px, 4vw, 48px);
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: none; scroll-snap-align: start; scroll-margin-inline: var(--gouttiere); }
.rail-photo { width: min(78vw, 360px); text-decoration: none; }
.rail-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.rail-photo span { display: block; margin-top: 10px; }
.rail-photo .meta { color: var(--doux); }
.rail-photo .rail-vrai { font-size: 1.05rem; }
@media (min-width: 1280px) {
  .rail { padding-inline: calc((100vw - var(--largeur)) / 2 + var(--gouttiere)); }
  .rail > * { scroll-margin-inline: calc((100vw - var(--largeur)) / 2 + var(--gouttiere)); }
}

/* ---- Le concept ------------------------------------------------------------- */

.etapes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: clamp(36px, 5vw, 64px); list-style: none; counter-reset: etape; }
@media (min-width: 840px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.etapes li { border-top: 1px solid var(--ligne-claire); padding-top: 20px; counter-increment: etape; }
.etapes .meta { display: block; color: var(--doux-clair); margin-bottom: 10px; }
.etapes .meta::before { content: "0" counter(etape) " · "; }
.etapes p { color: rgba(237,229,210,.92); max-width: 30em; }

.aveu {
  display: block; width: 100%; text-align: left;
  margin-top: clamp(48px, 7vw, 88px);
  border: 1px solid var(--ligne-claire);
  padding: clamp(24px, 5vw, 56px);
  -webkit-tap-highlight-color: transparent;
}
.aveu .meta { display: block; color: var(--doux-clair); margin-bottom: 1.2em; }
.aveu-scene { display: grid; }
.aveu-scene > * { grid-area: 1 / 1; transition: opacity .6s ease; }
.aveu-faux { font-size: clamp(2.2rem, 8vw, 4.8rem); color: var(--papier); }
.aveu-vrai { opacity: 0; }
.aveu-vrai .affiche { font-size: clamp(2.2rem, 8vw, 4.8rem); color: #D9483F; }
.aveu-vrai .recit { display: block; margin-top: .6em; font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--papier); }
.aveu[aria-pressed="true"] .aveu-faux { opacity: 0; }
.aveu[aria-pressed="true"] .aveu-vrai { opacity: 1; transition-delay: .2s; }
@media (hover: hover) {
  .aveu:hover .aveu-faux { opacity: 0; }
  .aveu:hover .aveu-vrai { opacity: 1; transition-delay: .2s; }
}
.indice-tactile { display: inline; }
.indice-souris { display: none; }
@media (hover: hover) { .indice-tactile { display: none; } .indice-souris { display: inline; } }

/* ---- FAQ ------------------------------------------------------------------- */

.faq { max-width: 52em; margin-top: clamp(28px, 4vw, 48px); }
.faq details { border-top: 1px solid var(--ligne); }
.faq details:last-child { border-bottom: 1px solid var(--ligne); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-size: 1.22rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: "IBM Plex Mono", monospace; font-size: 1.2rem; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; max-width: 44em; color: var(--doux); }

/* ---- Bandeau final ------------------------------------------------------------ */

.bandeau { text-align: center; }
.bandeau .titre-section { margin-inline: auto; max-width: 14em; }
.bandeau .bouton { margin-top: 1.4em; }
.nuancier { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 2.2em; list-style: none; }
.nuancier li { width: 26px; height: 40px; border-radius: 1px 3px 3px 1px; background: var(--encre-livre); box-shadow: inset 0 0 0 1px rgba(237,229,210,.18); }

/* ---- Page livre ----------------------------------------------------------- */

.fil { padding-top: 18px; }
.fil a { text-decoration: none; color: var(--doux); }
.fil a:hover { color: var(--encre); }

.fiche { padding-block: clamp(20px, 4vw, 56px) clamp(48px, 7vw, 88px); }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.fiche-couv { width: min(230px, 56vw); margin-inline: auto; }
@media (min-width: 900px) {
  .fiche-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .fiche-couv { width: 100%; max-width: 440px; position: sticky; top: calc(var(--entete) + 32px); }
}
.fiche-infos .surtitre { color: var(--encre-titre, var(--carmin)); }
.fiche-infos h1 { font-size: clamp(2.5rem, 9vw, 4.2rem); }
.fiche-chute { font-size: clamp(1.3rem, 3vw, 1.7rem); font-style: italic; margin-top: .25em; }
.devoile {
  margin-block: 26px 22px; padding: 16px 18px;
  border-left: 4px solid var(--encre-titre, var(--carmin));
  background: var(--papier-clair);
  font-size: 1.18rem; line-height: 1.45;
}
.devoile strong { font-weight: 500; }
.fiche-resume { font-size: 1.2rem; font-style: italic; color: var(--doux); max-width: 32em; }
.achat { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.achat .prix { font-size: 1.3rem; }
.achat .bouton { flex: 1 1 240px; font-size: .82rem; }
@media (min-width: 900px) { .achat .bouton { flex: 0 0 auto; } }
.achat-note { width: 100%; color: var(--doux); }
.points { list-style: none; margin-top: 26px; border-top: 1px solid var(--ligne); }
.points li { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--ligne); }
.points li span:first-child { font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--doux); padding-top: 4px; }
.points li span:last-child { text-align: right; }
.offrir-a { margin-top: 22px; font-size: 1.1rem; }
.offrir-a .meta { color: var(--doux); margin-right: 8px; }

.scene { padding-bottom: clamp(48px, 7vw, 96px); }
.scene figure { max-width: 760px; margin-inline: auto; }
.scene img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.scene figcaption { margin-top: 10px; color: var(--doux); }

.vraie-histoire .blocs { margin-block: clamp(28px, 5vw, 56px); max-width: 48em; }
.vraie-histoire .bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; border-top: 1px solid var(--ligne-claire); padding-block: clamp(20px, 3vw, 32px); }
@media (min-width: 760px) { .vraie-histoire .bloc { grid-template-columns: 170px minmax(0, 1fr); } }
.vraie-histoire .bloc .meta { color: var(--doux-clair); padding-top: 5px; }
.vraie-histoire .bloc p { font-size: clamp(1.14rem, 1.6vw, 1.28rem); color: rgba(237,229,210,.94); }
.vraie-histoire .bloc strong { color: var(--papier); font-weight: 500; }
.vraie-histoire h2 .auteur {
  display: block; margin-top: .55em; font-size: .38em; letter-spacing: .02em; opacity: .7;
  font-variation-settings: "opsz" 40, "wdth" 86; font-weight: 500;
}

.meme-collection { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.rail-couv { width: clamp(132px, 34vw, 190px); text-decoration: none; }
.rail-couv span { display: block; margin-top: 10px; font-size: .98rem; line-height: 1.25; }
.rail-couv span em { display: block; color: var(--doux); }

/* Barre d'achat collante (mobile) */
.barre-achat {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
  background: rgba(237, 229, 210, .9);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid var(--ligne);
  transform: translateY(110%); transition: transform .28s ease;
}
.barre-achat.visible { transform: none; }
.barre-achat-infos { min-width: 0; display: flex; flex-direction: column; }
.barre-achat-infos .recit { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat .bouton { flex: none; min-height: 46px; }
@media (min-width: 900px) { .barre-achat { display: none; } }
@media (prefers-reduced-transparency: reduce) {
  .barre-achat { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- Pages simples (mentions, 404) -------------------------------------------- */

.page-simple { padding-block: clamp(40px, 7vw, 96px); }
.page-simple h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); margin-bottom: .5em; }
.page-simple h2 { font-family: "IBM Plex Mono", monospace; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin: 2.2em 0 .7em; }
.page-simple p, .page-simple li { max-width: 40em; }
.page-simple ul { padding-left: 1.2em; }

/* ---- Pied de page ------------------------------------------------------------- */

.pied { background: var(--encre); color: var(--papier); padding-block: clamp(48px, 7vw, 80px) 28px; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 40px; }
@media (min-width: 760px) { .pied-grille { grid-template-columns: 2fr 1fr 1fr; } }
.pied .marque { font-size: 1.5rem; color: var(--papier); }
.pied .marque .efface { opacity: .3; }
.pied p { color: var(--doux-clair); max-width: 26em; margin-top: 12px; }
.pied nav { display: flex; flex-direction: column; gap: 10px; }
.pied nav .meta { color: var(--doux-clair); margin-bottom: 4px; }
.pied nav a { text-decoration: none; }
.pied nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied-note {
  border-top: 1px solid var(--ligne-claire); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  color: rgba(237,229,210,.6); font-size: .98rem;
}
.pied-note a { color: inherit; }
.page-livre .pied { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .page-livre .pied { padding-bottom: 28px; } }

/* ---- Accessibilité, mouvement ------------------------------------------------- */

:focus-visible { outline: 2px solid var(--carmin); outline-offset: 3px; }
.sur-encre :focus-visible, .pied :focus-visible { outline-color: var(--papier); }

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 380px) {
  .grille-livres { gap: 32px 12px; }
  .carte-achat .bouton { font-size: .64rem; letter-spacing: .08em; }
  .nav { gap: 12px; }
}

/* ---- Encres des livres (générées par build.py) ---- */
.encre-01 { --encre-livre: #8F141B; --texte-livre: #EDE5D2; --encre-titre: #8F141B; }
.encre-02 { --encre-livre: #121212; --texte-livre: #EDE5D2; --encre-titre: #121212; }
.encre-03 { --encre-livre: #4F1626; --texte-livre: #EDE5D2; --encre-titre: #4F1626; }
.encre-04 { --encre-livre: #7A3015; --texte-livre: #EDE5D2; --encre-titre: #7A3015; }
.encre-05 { --encre-livre: #8A5C16; --texte-livre: #EDE5D2; --encre-titre: #8A5C16; }
.encre-06 { --encre-livre: #16352A; --texte-livre: #EDE5D2; --encre-titre: #16352A; }
.encre-07 { --encre-livre: #3A2049; --texte-livre: #EDE5D2; --encre-titre: #3A2049; }
.encre-08 { --encre-livre: #EDE5D2; --texte-livre: #121212; --encre-titre: #121212; }
.encre-08 .bouton-encre { background: #121212; border-color: #121212; color: #EDE5D2; }
.encre-09 { --encre-livre: #0E3A42; --texte-livre: #EDE5D2; --encre-titre: #0E3A42; }
.encre-10 { --encre-livre: #0F2FA8; --texte-livre: #EDE5D2; --encre-titre: #0F2FA8; }
.puces { display: none; } .js .puces { display: flex; }