/* Éditions Chamade — feuille de style unique.

   Le style de la maison existe déjà : ce sont les modules A+ des deux livres.
   Fonds prune et nuit, dessins au trait en crème, capitales dorées espacées,
   titres en Didone, lignes en italique. Le site le reprend pour qu'un lecteur
   passé par Amazon retrouve le même univers.

   Deux registres, jamais mélangés (brief §4) :
   - le MOBILIER — en-tête, texte courant, pages légales — reste celui d'un
     éditeur : crème, encre prune-noir, filets fins ;
   - les BLOCS ILLUSTRÉS — bandeau d'accueil, blocs de livre, chiffres,
     dessins — portent l'humour et les couleurs des couvertures. */

/* ------------------------------------------------------------------ polices
   Libre Bodoni (licence OFL, assets/polices/OFL.txt), servie depuis le
   domaine : aucune requête vers un tiers. Remplace Bodoni MT des visuels A+,
   dont la licence n'autorise pas l'usage web. Sous-ensemble latin, ~16 Ko. */

@font-face {
  font-family: "Libre Bodoni";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/polices/libre-bodoni-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Bodoni";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/polices/libre-bodoni-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Bodoni";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/polices/libre-bodoni-latin-700-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* mobilier */
  --creme:      #FBF4EA;
  --creme-2:    #F3E6D5;
  --papier:     #FFFDF8;
  --encre:      #241019;
  --encre-doux: #6B5560;
  --filet:      #E2D1BD;
  --or-encre:   #84591A;   /* or lisible : 5,6:1 sur crème, 5,0:1 sur le fond beige des bandes */

  /* univers des livres — réservé aux blocs illustrés */
  --prune:      #3A1426;
  --prune-nuit: #22091A;
  --nuit:       #13224A;
  --nuit-fonce: #0B1530;
  --or:         #E3B04B;
  --rose:       #F0679A;   /* rose des A+, éclairci pour 4,5:1 sur prune */
  --ambre:      #F0AA2A;
  --creme-cv:   #FFF6EC;
  --creme-doux: #E9D9CB;

  --didone: "Libre Bodoni", "Bodoni MT", Didot, "Bodoni 72", Georgia, serif;
  --serif:  Constantia, Georgia, "Iowan Old Style", "Noto Serif", serif;
  --sans:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rayon: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.wrap--texte { max-width: 700px; }
.centre { text-align: center; }
.centre .lead, .centre .section-intro { margin-inline: auto; }

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

/* ------------------------------------------------------------------ texte */

h1, h2, h3 {
  font-family: var(--didone);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0 0 .45em;
}
h1 { font-size: clamp(2.3rem, 8vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 5.6vw, 2.5rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--or-encre); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.kicker {
  font-family: var(--didone);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or-encre);
  margin: 0 0 16px;
}
.lead {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3.6vw, 1.28rem);
  line-height: 1.55;
  color: var(--encre-doux);
  max-width: 48ch;
}
.section-intro { color: var(--encre-doux); max-width: 60ch; margin-bottom: 0; }
.filet-or { width: 64px; height: 2px; background: var(--or); border: 0; margin: 22px 0; }
.centre .filet-or { margin-inline: auto; }

.lignes-italiques {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  list-style: none;
  padding: 0;
  margin: 0 0 1.2em;
}

/* ---------------------------------------------------------------- sections */

section { padding: 56px 0; }
.band { background: var(--creme-2); }
.section-tete { margin-bottom: 34px; }

.sombre {
  background: radial-gradient(120% 90% at 85% 0%, #4A1A31 0%, var(--prune) 45%, var(--prune-nuit) 100%);
  color: var(--creme-cv);
}
.sombre.nuit {
  background: radial-gradient(120% 90% at 85% 0%, #1C3063 0%, var(--nuit) 45%, var(--nuit-fonce) 100%);
}
.sombre .kicker { color: var(--or); }
.sombre .lead, .sombre .section-intro { color: var(--creme-doux); }
.sombre a { text-decoration-color: var(--or); }

@media (min-width: 760px) {
  section { padding: 84px 0; }
  .section-tete { margin-bottom: 48px; }
}

/* ----------------------------------------------------------------- boutons */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 14px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-plein { background: var(--encre); color: var(--creme); }
.btn-plein:hover { background: #3E1D2D; }
.btn-ligne { border-color: currentColor; color: var(--encre); background: transparent; }
.btn-ligne:hover { background: var(--encre); color: var(--creme); border-color: var(--encre); }
.btn-or { background: var(--or); color: var(--prune-nuit); }
.btn-or:hover { background: #F0C366; }
.sombre .btn-ligne { color: var(--creme-cv); }
.sombre .btn-ligne:hover { background: var(--creme-cv); color: var(--prune-nuit); border-color: var(--creme-cv); }
.btn-petit { padding: 12px 16px; font-size: 14px; }

.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.centre .boutons { justify-content: center; }
.lien-fleche {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--or-encre);
}
.lien-fleche::after { content: "\00a0→"; }   /* insécable : la flèche ne part pas seule à la ligne */
.sombre .lien-fleche { border-color: var(--or); }

/* ------------------------------------------------------------------ marque */

.marque {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-block: 8px;        /* zone tactile de 44 px autour du logo */
  text-decoration: none;
  color: var(--or-encre);
}
.marque-filet { width: 40px; height: 1px; background: currentColor; }
.marque-nom {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sombre .marque, .site-footer .marque { color: var(--or); }

/* ------------------------------------------------------------------ en-tête */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 244, 234, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 16px;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  background: none;
  border: 1px solid var(--filet);
  border-radius: 3px;
  padding: 8px 11px;
  color: var(--encre);
  font: 600 14px var(--sans);
  cursor: pointer;
}
.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--creme);
  border-bottom: 1px solid var(--filet);
  box-shadow: 0 18px 30px rgba(36, 16, 25, .16);   /* sans ombre, le menu se fondait dans la page */
  padding: 8px 20px 20px;
  flex-direction: column;
}
.nav.ouvert { display: flex; }
.nav a {
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid var(--filet);
  font-weight: 500;
}
.nav a.actif { color: var(--or-encre); }
.nav .nav-cta {
  margin-top: 16px;
  border: 0;
  background: var(--encre);
  color: var(--creme);
  text-align: center;
  border-radius: 3px;
  font-weight: 600;
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;   /* l'ombre ne sert qu'au menu déroulant du téléphone */
  }
  .nav a { padding: 6px 0; border: 0; font-size: 15px; }
  .nav a.actif { box-shadow: inset 0 -2px 0 var(--or); color: var(--encre); }
  .nav .nav-cta { margin: 0 0 0 6px; padding: 10px 16px; }
  .nav .nav-cta:hover { background: #3E1D2D; }
}

/* ---------------------------------------------------------- page d'accueil */

.hero { padding: 56px 0 64px; overflow: hidden; }
.hero-grille { display: grid; gap: 44px; align-items: center; }
.hero h1 { color: var(--creme-cv); }
.hero h1 em { font-style: italic; color: var(--or); }
.hero .lead { color: var(--creme-doux); }

.eventail {
  position: relative;
  height: 290px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.eventail picture, .eventail > img {
  position: absolute;
  top: 0;
  width: 168px;
}
.eventail img {
  width: 168px;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.eventail .ev-1 { left: 50%; transform: translateX(-92%) rotate(-7deg); top: 14px; }
.eventail .ev-2 { left: 50%; transform: translateX(-8%) rotate(6deg); }

@media (min-width: 900px) {
  .hero { padding: 96px 0 104px; }
  .hero-grille { grid-template-columns: 1.15fr 1fr; gap: 56px; }
  .eventail { height: 440px; }
  .eventail picture, .eventail > img, .eventail img { width: 260px; }
}

/* ------------------------------------------ blocs de livre (cible du bonus) */

.blocs-livres { display: grid; gap: 20px; }
@media (min-width: 760px) { .blocs-livres { grid-template-columns: 1fr 1fr; gap: 26px; } }

.bloc {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--rayon);
  padding: 32px 26px 30px;
  color: var(--creme-cv);
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
.bloc--champagne { background: radial-gradient(130% 100% at 100% 100%, #5A1F3B 0%, var(--prune) 50%, var(--prune-nuit) 100%); --accent: var(--rose); }
.bloc--biere     { background: radial-gradient(130% 100% at 100% 100%, #213A78 0%, var(--nuit) 50%, var(--nuit-fonce) 100%); --accent: var(--ambre); }

.bloc-101 {
  position: absolute;
  z-index: -1;
  right: -.04em;
  bottom: -.3em;
  margin: 0;
  font-family: var(--didone);
  font-weight: 700;
  font-size: clamp(8rem, 30vw, 12rem);
  line-height: .8;
  color: var(--accent);
  opacity: .1;
  pointer-events: none;
  user-select: none;
}
.bloc-illus {
  position: absolute;
  z-index: -1;
  right: -12px;
  bottom: -8px;
  width: 52%;
  max-width: 260px;
  opacity: .28;
  pointer-events: none;
}
.bloc-sur {
  font-family: var(--didone);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 14px;
}
.bloc-titre {
  font-family: var(--didone);
  font-weight: 500;
  font-size: clamp(2.1rem, 7.5vw, 2.7rem);
  line-height: 1.02;
  margin: 0 0 14px;
}
.bloc-titre span { color: var(--accent); font-style: italic; display: block; }
.bloc p { max-width: 34ch; }
.bloc .boutons { margin-top: auto; padding-top: 22px; }
.bloc .btn-clair { background: var(--creme-cv); color: var(--prune-nuit); }
.bloc .btn-clair:hover { background: #fff; }

/* ------------------------------------------------------- chiffres de la maison */

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
@media (min-width: 980px) { .chiffres { grid-template-columns: repeat(4, 1fr); gap: 34px; } }
.chiffre .chiffre-val {   /* .chiffre p l'écraserait sinon */
  font-family: var(--didone);
  font-weight: 500;
  font-size: clamp(2.9rem, 11vw, 4.6rem);
  line-height: .9;
  color: var(--or);
  margin: 0 0 10px;
}
.chiffre h3 { font-size: 1.2rem; margin-bottom: .35em; }
.chiffre p { color: var(--creme-doux); font-size: .97rem; }

/* ------------------------------------------------------- une page du livre */

.extrait { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .extrait { grid-template-columns: 1fr 1.1fr; gap: 64px; } .extrait--inverse > :first-child { order: 2; } }

.page-livre {
  background: var(--papier);
  color: #1C1216;
  border-radius: 2px;
  padding: 34px 28px 26px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 22px 50px rgba(36,16,25,.18);
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}
.sombre .page-livre { box-shadow: 0 26px 60px rgba(0,0,0,.5); }
.page-courant {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #74656C;
  margin: 0 0 22px;
}
.page-titre {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #CFC5C9;
  padding-bottom: 8px;
  margin: 0 0 18px;
}
.page-titre b { font-family: var(--didone); font-weight: 500; font-size: 1.9rem; line-height: 1; }
.page-titre span { font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.page-livre p { margin: 0 0 .9em; text-align: left; }
/* Justifié seulement quand la ligne est assez longue : sur 320 px de large,
   sans césure fiable, la justification ouvre des blancs entre les mots. */
@media (min-width: 620px) { .page-livre p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } }
.page-chute {
  font-style: italic;
  text-align: left !important;
  margin-top: 1.3em !important;
  padding-top: 12px;
  position: relative;
}
.page-chute::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; border-top: 1px solid #1C1216; }
.page-num { text-align: center; font-size: 11.5px; color: #74656C; margin: 18px 0 0 !important; }

/* --------------------------------------------------------- contre-étiquette */

.etiquette {
  font-family: var(--serif);
  border: 1px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 5px;
  padding: 28px 24px;
  margin: 8px;
  max-width: 520px;
}
.sombre .etiquette { color: var(--creme-cv); border-color: var(--or); outline-color: var(--or); }
.etiquette-titre { text-align: center; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 15px; margin: 0; }
.etiquette-cuvee { text-align: center; font-style: italic; margin: 4px 0 18px; opacity: .85; }
.etiquette dl { margin: 0; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.45; }
.etiquette dl div { display: grid; gap: 1px; }
@media (min-width: 520px) { .etiquette dl div { grid-template-columns: 9.5em 1fr; gap: 14px; } }
.etiquette dt { font-family: var(--didone); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.etiquette dd { margin: 0; }
.etiquette-fin { text-align: center; font-weight: 700; font-size: 12px; letter-spacing: .2em; margin: 20px 0 0; border-top: 1px solid currentColor; padding-top: 14px; }

/* ------------------------------------------------------------------- toast */

.toast {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  text-align: center;
  max-width: 34ch;
  margin: 0 auto;
}
.toast p { margin-bottom: 1em; }
.toast-sante { font-style: normal; font-family: var(--didone); font-size: 1.8rem; color: var(--or-encre); }
.sombre .toast-sante { color: var(--or); }

/* --------------------------------------------------------------- les livres */

.fiche { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) { .fiche { grid-template-columns: 300px 1fr; gap: 60px; } }
.fiche-couv img { width: 100%; max-width: 300px; margin: 0 auto; border-radius: 3px; box-shadow: 0 20px 44px rgba(36,16,25,.28); }
.fiche-bandeau { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--encre-doux); margin-top: -.2em; }
.fiche-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  margin: 22px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  font-size: 14px;
}
@media (min-width: 620px) { .fiche-meta { grid-template-columns: repeat(4, 1fr); } }
.fiche-meta dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-doux); }
.fiche-meta dd { margin: 2px 0 0; font-family: var(--didone); font-size: 1.05rem; }


.chapitres { display: grid; gap: 12px; }
@media (min-width: 620px) { .chapitres { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .chapitres { grid-template-columns: repeat(4, 1fr); } }
.chapitre {
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
}
.chapitre-illus { aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 14px; }
.chapitre-illus img { max-height: 100%; width: auto; object-fit: contain; }
.chapitre-num { font-family: var(--didone); font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-encre); margin: 0 0 6px; }
.chapitre h3 { font-family: var(--didone); font-weight: 500; font-size: 1.14rem; line-height: 1.2; margin: 0 0 .5em; }
.chapitre p { font-size: 14.5px; line-height: 1.55; color: var(--encre-doux); }
.chapitre-nb { margin-top: auto !important; padding-top: 12px; font-size: 13px !important; font-weight: 600; color: var(--encre) !important; }

/* Sur téléphone, seize cartes empilées avec un dessin pleine largeur
   faisaient de /livres une page de 19 000 px : la carte y devient une ligne,
   dessin en vignette à gauche. Placé APRÈS les règles
   générales de .chapitre : avant, leur display:flex gagnait. */
@media (max-width: 619px) {
  .chapitre { display: grid; grid-template-columns: 84px 1fr; column-gap: 14px; padding: 14px; }
  .chapitre-illus { grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; }
  .chapitre p:not(.chapitre-num):not(.chapitre-nb) { font-size: 14px; }
  .chapitre-nb { padding-top: 6px; }
}


.figure-aplus { margin: 0; }
.figure-aplus img { border-radius: var(--rayon); box-shadow: 0 16px 40px rgba(36,16,25,.2); width: 100%; }
.figure-aplus figcaption { font-size: 13.5px; color: var(--encre-doux); margin-top: 10px; }

.documents { columns: 1; column-gap: 34px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 620px) { .documents { columns: 2; } }
.documents li {
  break-inside: avoid;
  padding: 10px 0 10px 30px;
  border-bottom: 1px solid var(--filet);
  position: relative;
  font-size: 15.5px;
}
.documents li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--encre);
  border-radius: 2px;
}
.documents li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  width: 6px;
  height: 11px;
  border-right: 2.5px solid var(--or-encre);
  border-bottom: 2.5px solid var(--or-encre);
  transform: rotate(40deg);
}
.documents b { font-family: var(--serif); }

.sommaire-livres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Couverture et titre côte à côte, puis le texte sur toute la largeur de la
   carte : l'ancienne grille laissait 190 px au texte sur un téléphone. */
.carte-livre { display: flex; flex-direction: column; }
.carte-livre-tete { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.carte-livre-tete h3 { margin: 0; font-size: 1.45rem; }
.carte-livre-tete h3 a { text-decoration: none; }
.carte-livre-couv { flex-shrink: 0; }
.carte-livre-couv img { width: 84px; border-radius: 2px; box-shadow: 0 10px 24px rgba(36,16,25,.22); }
@media (min-width: 980px) { .carte-livre-couv img { width: 110px; } }
.carte-livre .boutons { margin-top: auto; padding-top: 18px; }

.moments-cites { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--encre-doux); margin: 14px 0 0; }
.moments-cites i { color: var(--encre); }

/* ------------------------------------------------------------- pour qui */

.pour-qui { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .pour-qui { grid-template-columns: 1fr 1fr; gap: 12px 28px; } }
.pour-qui li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--serif);
  font-size: 1.05rem;
}
.pastille {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 99px;
  color: var(--creme-cv);
  text-decoration: none;
  white-space: nowrap;
}
.pastille--champagne { background: var(--prune); }
.pastille--biere { background: var(--nuit); }
.pastille--les-deux { background: var(--encre); }

/* ---------------------------------------------------------------- cartes */

.cartes { display: grid; gap: 18px; }
@media (min-width: 620px) { .cartes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cartes--3 { grid-template-columns: repeat(3, 1fr); } }
.carte {
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 24px 22px;
}
.band .carte { background: var(--creme); }
.sombre .carte { background: rgba(255, 246, 236, .05); border-color: rgba(255, 246, 236, .14); }
.carte h3 { font-size: 1.22rem; }
.carte p { font-size: 15.5px; color: var(--encre-doux); }
.sombre .carte p { color: var(--creme-doux); }
.carte-sur { font-family: var(--didone); font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-encre); margin: 0 0 8px; }
.sombre .carte-sur { color: var(--or); }

/* numérotation des étapes et des règles */
.regles { counter-reset: regle; }
.regles .carte { position: relative; padding-top: 58px; }
.regles .carte::before {
  counter-increment: regle;
  content: counter(regle, decimal-leading-zero);
  position: absolute;
  top: 18px;
  left: 22px;
  font-family: var(--didone);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--or-encre);
}
.sombre .regles .carte::before { color: var(--or); }

/* ------------------------------------------------------------- dédicaces */

.dedicaces { display: grid; gap: 18px; }
@media (min-width: 760px) { .dedicaces { grid-template-columns: 1fr 1fr; } }
.dedicace {
  margin: 0;                 /* <figure> : sans ça, 40 px de marge par défaut */
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
}
.dedicace blockquote {
  margin: 0 0 16px;
  font-family: var(--didone);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
}
.dedicace-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.dedicace-pied .pastille { font-size: 12.5px; }
.dedicace-pied > span { font-size: 13px; color: var(--encre-doux); }
.copier {
  font: 600 13px var(--sans);
  background: none;
  border: 1px solid var(--filet);
  border-radius: 3px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  color: var(--encre);
}
.copier:hover { border-color: var(--encre); }
.copier[data-fait] { border-color: var(--or-encre); color: var(--or-encre); }

/* --------------------------------------------------------------- clôture */

.cloture { text-align: center; }
.cloture h2 { max-width: 22ch; margin-inline: auto; }
.cloture p { max-width: 52ch; margin-inline: auto; }

/* ------------------------------------------------------------- page-head */

.page-head { padding: 54px 0 46px; border-bottom: 1px solid var(--filet); }
.page-head.sombre { border-bottom: 0; }
.page-head h1 { max-width: 20ch; }
.page-head.sombre h1 { color: var(--creme-cv); }
/* Ancres en pastilles : 21 px de haut ne se touchent pas au doigt. */
.ancres { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14.5px; }
.ancres a { display: inline-block; text-decoration: none; padding: 10px 14px; border: 1px solid var(--filet); border-radius: 99px; background: var(--papier); }
.ancres a:hover { border-color: var(--or-encre); }
.sombre .ancres a { border-color: var(--or); }
@media (min-width: 760px) { .page-head { padding: 80px 0 64px; } }

.deux-col { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) { .deux-col { grid-template-columns: 1fr 1fr; gap: 60px; } }
.deux-col--centre { align-items: center; }

.illus-libre { max-width: 420px; margin: 0 auto; }

/* ---------------------------------------------------- page de bonus (QR) */


.en-attendant { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.en-attendant li { padding-left: 34px; position: relative; }
.en-attendant li::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: -2px;
  font-family: var(--didone);
  font-size: 1.4rem;
  color: var(--or-encre);
}

/* ---------------------------------------------------------- pages légales */

.legal h2 { margin-top: 2em; font-size: 1.45rem; }
.legal h2:first-of-type { margin-top: 1em; }
.legal ul { padding-left: 1.1em; margin: 0 0 1.1em; }
.legal li { margin-bottom: .4em; }
.legal dt { font-weight: 600; margin-top: .9em; }
.legal dd { margin: 0; color: var(--encre-doux); }
.a-completer { background: #FDECC8; color: #6B4A00; padding: 1px 7px; border-radius: 3px; font-size: .92em; font-weight: 600; }
.avert {
  border-left: 3px solid var(--or-encre);
  background: var(--creme-2);
  padding: 16px 18px;
  border-radius: 0 4px 4px 0;
  margin: 0 0 1.6em;
  font-size: .96rem;
}

/* ----------------------------------------------------------- pied de page */

.site-footer {
  background: #1A0714;
  border-top: 1px solid rgba(255, 246, 236, .1);   /* sépare une dernière section sombre du pied */
  color: var(--creme-doux);
  padding: 56px 0 34px;
  font-size: 14.5px;
}
.footer-grille { display: grid; gap: 34px; }
@media (min-width: 760px) { .footer-grille { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } }
.site-footer .marque { margin-bottom: 16px; }
.footer-desc { max-width: 34ch; }
.site-footer .footer-titre {
  font-family: var(--didone);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.site-footer li a { display: inline-block; padding: 10px 0; }   /* 44 px de zone tactile */
.site-footer a { color: var(--creme-cv); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--or); }
.footer-bas {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 246, 236, .12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  font-size: 13px;
  color: #B9A6AF;
}
.footer-bas a { display: inline-block; padding: 10px 0; }

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

/* ------------------------------------------------ dépliant (chapitres) */

.depliant { margin-top: 56px; border-top: 1px solid var(--filet); }
.depliant > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary .kicker { display: block; margin-bottom: 6px; }
.depliant-titre { font-family: var(--didone); font-size: 1.35rem; line-height: 1.2; display: block; }
.depliant > summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 1px solid var(--filet);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 400 22px/1 var(--sans);
  color: var(--or-encre);
}
.depliant[open] > summary::after { content: "−"; }
.depliant[open] > summary { margin-bottom: 18px; }

/* ------------------------------------------------- revue mobile, divers */

/* Le lien d'évitement devient visible au clavier. */
.visuellement-cache:focus {
  position: fixed !important; width: auto; height: auto; clip: auto;
  top: 8px; left: 8px; z-index: 50; padding: 10px 16px;
  background: var(--encre); color: var(--creme); border-radius: 3px;
}

/* L'en-tête collant masquait le haut des sections atteintes par une ancre. */
[id] { scroll-margin-top: 84px; }

/* Sur téléphone, les boutons d'une même rangée prennent toute la largeur :
   deux boutons de largeurs différentes empilés font désordre. */
@media (max-width: 479px) {
  .boutons .btn { flex: 1 1 100%; }
}

/* L'adresse courte sous le bouton d'un bloc de livre. */
.bloc-adresse { margin: 12px 0 0; font-size: 13.5px; color: var(--creme-doux); letter-spacing: .01em; }
.bloc-adresse b { color: var(--accent); font-weight: 600; }
.bloc .boutons { margin-bottom: 0; }

/* Page de bonus : une note sous le titre, plus un panneau « en travaux ». */
.page-head .bonus-attente {
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 246, 236, .22);
  border-radius: var(--rayon);
  background: rgba(255, 246, 236, .06);
  color: var(--creme-doux);
  font-size: 15.5px;
  text-align: left;
  max-width: 52ch;
}
.page-head .bonus-attente b { color: var(--creme-cv); }